306 lines
9.8 KiB
JavaScript
306 lines
9.8 KiB
JavaScript
import React from 'react';
|
||
import { inject, observer } from 'mobx-react';
|
||
import { toJS } from 'mobx';
|
||
|
||
import { Button, Table, DatePicker, Dropdown, Menu, Modal } from 'antd';
|
||
|
||
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaDatePicker, WeaInputSearch } from 'ecCom';
|
||
|
||
import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from '../../components/customTab';
|
||
import ContentWrapper from '../../components/contentWrapper';
|
||
|
||
import { columns, dataSource } from './columns';
|
||
import moment from 'moment';
|
||
import BaseFormModal from './baseFormModal'
|
||
import CustomTable from '../../components/customTable'
|
||
import CustomPaginationTable from '../../components/customPaginationTable'
|
||
|
||
const { RangePicker } = DatePicker;
|
||
|
||
@inject('calculateStore')
|
||
@observer
|
||
export default class Calculate extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
selectedKey: "0",
|
||
searchValue: "",
|
||
startDate: moment(new Date()).subtract(3,'months').startOf('month').format('YYYY-MM'),
|
||
endDate: moment(new Date()).subtract(-3,'months').startOf('month').format('YYYY-MM'),
|
||
current: 1,
|
||
columns: columns.map(item => {
|
||
if(item.dataIndex == 'cz') {
|
||
item.render = () => (
|
||
<div>
|
||
<a style={{marginRight:"10px"}}>核算</a>
|
||
<a style={{marginRight:"10px"}}>归档</a>
|
||
<a style={{marginRight:"10px"}} onClick={() => window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/placeOnFileDetail")}>查看</a>
|
||
<a>删除</a>
|
||
</div>
|
||
)
|
||
}
|
||
})
|
||
}
|
||
this.pageInfo = { current: 1, pageSize: 10}
|
||
}
|
||
|
||
componentWillMount() {
|
||
const { calculateStore } = this.props;
|
||
const { getSalaryAcctList } = calculateStore
|
||
getSalaryAcctList({
|
||
name: "",
|
||
startMonthStr: this.state.startDate,
|
||
endMonthStr: this.state.endDate
|
||
})
|
||
}
|
||
|
||
|
||
// 搜索
|
||
handleSearch(value) {
|
||
const { calculateStore } = this.props;
|
||
const { getSalaryAcctList } = calculateStore
|
||
getSalaryAcctList({
|
||
name: value,
|
||
startMonthStr: this.state.startDate,
|
||
endMonthStr: this.state.endDate,
|
||
current: this.state.current
|
||
})
|
||
}
|
||
|
||
handleRangePickerChange(value) {
|
||
let range = value.map(item => moment(item).format("YYYY-MM"))
|
||
const { calculateStore: {getSalaryAcctList} } = this.props;
|
||
this.setState({
|
||
startDate: range[0],
|
||
endDate: range[1]
|
||
})
|
||
getSalaryAcctList({
|
||
name: this.state.searchValue,
|
||
startMonthStr: range[0],
|
||
endMonthStr: range[1]
|
||
})
|
||
}
|
||
|
||
// 列表项核算回调
|
||
handleAccount(record) {
|
||
window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/calculateDetail?id=" + record.id)
|
||
}
|
||
|
||
// 列表项删除回调
|
||
handleDeleteItem(record) {
|
||
Modal.confirm({
|
||
title: '信息确认',
|
||
content: '确认删除',
|
||
onOk:() => {
|
||
const { calculateStore: {deleteSalaryacct}} = this.props;
|
||
deleteSalaryacct([record.id]).then(() => {
|
||
this.handleSearch(this.state.searchValue)
|
||
})
|
||
},
|
||
onCancel: () => {
|
||
},
|
||
});
|
||
}
|
||
|
||
// 列表项归档回调
|
||
handleFile(record) {
|
||
const { calculateStore: {fileSalaryAcct}} = this.props;
|
||
fileSalaryAcct(record.id).then(() => {
|
||
this.handleSearch(this.state.searchValue)
|
||
})
|
||
}
|
||
|
||
// 重新核算
|
||
handleReaccount(record) {
|
||
const { calculateStore: {reAccounting}} = this.props;
|
||
reAccounting(record.id).then(() => {
|
||
this.handleSearch(this.state.searchValue)
|
||
})
|
||
}
|
||
|
||
// 查看详情回调
|
||
handleDetail(record) {
|
||
window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/placeOnFileDetail?id=" + record.id)
|
||
}
|
||
|
||
// 获取列表
|
||
getColumns() {
|
||
const {calculateStore: {salaryListColumns}} = this.props;
|
||
let columns = [...salaryListColumns]
|
||
columns.map(item => {
|
||
if(item.title == "操作") {
|
||
item.render = (text,record) => {
|
||
|
||
if(record.operate) {
|
||
return (
|
||
<Dropdown overlay={<Menu>
|
||
{
|
||
record.operate && record.operate.map(cz => (
|
||
<Menu.Item>
|
||
<a onClick={() => {
|
||
if(cz.text == "核算") {
|
||
this.handleAccount(record);
|
||
} else if(cz.text == "删除") {
|
||
this.handleDeleteItem(record)
|
||
} else if(cz.text == "归档") {
|
||
this.handleFile(record)
|
||
} else if(cz.text == '重新核算') {
|
||
this.handleReaccount(record)
|
||
} else if(cz.text == "查看") {
|
||
this.handleDetail(record);
|
||
}
|
||
|
||
}}>{cz.text}</a>
|
||
</Menu.Item>
|
||
))
|
||
}
|
||
</Menu>}>
|
||
<i className="icon-coms-more"></i>
|
||
</Dropdown>
|
||
);
|
||
} else {
|
||
return ""
|
||
}
|
||
}
|
||
}
|
||
})
|
||
return columns;
|
||
}
|
||
|
||
// 分页
|
||
handleDataPageChange(value) {
|
||
this.setState({current: value})
|
||
this.pageInfo.current = value
|
||
const { calculateStore } = this.props;
|
||
const { getSalaryAcctList } = calculateStore
|
||
getSalaryAcctList({
|
||
name: this.state.searchValue,
|
||
startMonthStr: this.state.startDate,
|
||
endMonthStr: this.state.endDate,
|
||
current: value
|
||
})
|
||
}
|
||
|
||
handleShowSizeChange(pageInfo){
|
||
const { calculateStore } = this.props;
|
||
const { getSalaryAcctList } = calculateStore
|
||
getSalaryAcctList({
|
||
name: this.state.searchValue,
|
||
startMonthStr: this.state.startDate,
|
||
endMonthStr: this.state.endDate,
|
||
...pageInfo
|
||
})
|
||
}
|
||
|
||
|
||
|
||
render() {
|
||
const { calculateStore } = this.props;
|
||
const { salaryListDataSource, salaryListColumns, loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd, salaryListPageInfo } = calculateStore;
|
||
const { modalParam } = this.state
|
||
if (!hasRight && !loading) { // 无权限处理
|
||
return renderNoright();
|
||
}
|
||
|
||
const rightMenu = [// 右键菜单
|
||
{
|
||
key: 'BTN_COLUMN',
|
||
icon: <i className='icon-coms-Custom' />,
|
||
content: '显示列定制',
|
||
onClick: this.showColumn
|
||
},
|
||
];
|
||
const collectParams = { // 收藏功能配置
|
||
favname: '薪资核算',
|
||
favouritetype: 1,
|
||
objid: 0,
|
||
link: 'wui/index.html#/ns_demo03/index',
|
||
importantlevel: 1,
|
||
};
|
||
const adBtn = [ // 高级搜索内部按钮
|
||
<Button type="primary" onClick={doSearch}>搜索</Button>,
|
||
<Button type="ghost" onClick={() => form.resetForm()}>重置</Button>,
|
||
<Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>,
|
||
];
|
||
|
||
const topTab = [
|
||
];
|
||
|
||
const renderSearchOperationItem = () => {
|
||
return <div></div>
|
||
}
|
||
|
||
const renderRightOperation = () => {
|
||
const { startDate, endDate } = this.state;
|
||
return (
|
||
<div style={{display: "inline-block"}}>
|
||
<Button type="primary" style={{marginRight: "10px"}}
|
||
// onClick={() => window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/calculateDetail")}
|
||
onClick={() => {this.setState({baseFormVisible: true})}}
|
||
>核算</Button>
|
||
<div style={{display: "inline-block"}}>
|
||
<RangePicker defaultValue={[this.state.startDate, this.state.endDate]} picker="month" format="yyyy-MM"
|
||
onChange={(value) => this.handleRangePickerChange(value)}
|
||
/>
|
||
</div>
|
||
<WeaInputSearch style={{marginLeft: "10px"}} value={this.state.searchValue} onChange={(value) => {this.setState({ searchValue:value })}} onSearch={(value) => {this.handleSearch(value)}}/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
|
||
<div className="mySalaryBenefitsWrapper">
|
||
<WeaRightMenu
|
||
datas={rightMenu} // 右键菜单
|
||
collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
>
|
||
<WeaTop
|
||
title="薪资核算" // 文字
|
||
icon={<i className='icon-coms-meeting' />} // 左侧图标
|
||
iconBgcolor='#F14A2D' // 左侧图标背景色
|
||
showDropIcon={true} // 是否显示下拉按钮
|
||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
>
|
||
<CustomTab
|
||
searchOperationItem={
|
||
renderRightOperation()
|
||
}
|
||
onChange={(v) => {
|
||
}}
|
||
/>
|
||
|
||
<CustomPaginationTable
|
||
loading={loading}
|
||
columns={this.getColumns()}
|
||
dataSource={salaryListDataSource}
|
||
total={salaryListPageInfo.total}
|
||
current={salaryListPageInfo.pageNum}
|
||
pageSize={this.pageInfo.pageSize}
|
||
onPageChange={(value) => {
|
||
this.handleDataPageChange(value)
|
||
}}
|
||
onShowSizeChange={(current, pageSize) => {
|
||
this.pageInfo = {current, pageSize}
|
||
this.handleShowSizeChange(this.pageInfo)
|
||
}}
|
||
/>
|
||
</WeaTop>
|
||
{
|
||
this.state.baseFormVisible && <BaseFormModal
|
||
visible={this.state.baseFormVisible}
|
||
onRefresh={() => this.handleSearch(this.state.searchValue)}
|
||
onCancel={() => {
|
||
this.setState({baseFormVisible: false})
|
||
}}
|
||
/>
|
||
}
|
||
</WeaRightMenu>
|
||
</div>
|
||
)
|
||
}
|
||
}
|