100 lines
3.9 KiB
JavaScript
100 lines
3.9 KiB
JavaScript
import React from 'react';
|
|
import { inject, observer } from 'mobx-react';
|
|
import { Icon, Table } from 'antd';
|
|
import { WeaInputSearch } from "ecCom"
|
|
import { slideStep2Columns, dataSource } from './columns'
|
|
import AddUserModal from './addUserModal'
|
|
|
|
@inject('ledgerStore')
|
|
@observer
|
|
export default class SlideRefereUser extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
addUserModalVisible: false,
|
|
selectedRowKeys: [],
|
|
searchValue: ""
|
|
}
|
|
}
|
|
|
|
handleTabClick(tab) {
|
|
const { ledgerStore: {setIncludeType, getLedgerPersonRangeInclude, salarySobId, getLedgerPersonRangeExclude}} = this.props;
|
|
setIncludeType(tab)
|
|
if(tab == 1) {
|
|
getLedgerPersonRangeInclude({salarySobId: salarySobId})
|
|
} else {
|
|
getLedgerPersonRangeExclude({salarySobId: salarySobId})
|
|
}
|
|
}
|
|
|
|
componentWillMount() {
|
|
const { ledgerStore: {getLedgerPersonRangeInclude, salarySobId}} = this.props;
|
|
getLedgerPersonRangeInclude({salarySobId: salarySobId})
|
|
}
|
|
|
|
onSelectChange = selectedRowKeys => {
|
|
this.setState({ selectedRowKeys });
|
|
}
|
|
|
|
|
|
handleTabDelete = () => {
|
|
const {ledgerStore: {deleteLedgerPersonRange}} = this.props;
|
|
if(this.state.selectedRowKeys.length == 0) {
|
|
message.warning("未选择条目")
|
|
return
|
|
}
|
|
deleteLedgerPersonRange(this.state.selectedRowKeys)
|
|
}
|
|
|
|
handleSearch = (value) => {
|
|
const { ledgerStore: {includeType, salarySobId, getLedgerPersonRangeInclude, getLedgerPersonRangeExclude}} = this.props;
|
|
if(includeType == 1) {
|
|
getLedgerPersonRangeInclude({salarySobId: salarySobId, targetName: value})
|
|
} else {
|
|
getLedgerPersonRangeExclude({salarySobId: salarySobId, targetName: value})
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { ledgerStore: {includeType, userTableStore, addUserModalVisible, setAddUserModalVisible}} = this.props;
|
|
let { columns, list} = userTableStore
|
|
const { selectedRowKeys } = this.state
|
|
columns = columns || []
|
|
list = list || []
|
|
|
|
list.map(item => item.key = item.id)
|
|
|
|
const rowSelection = {
|
|
selectedRowKeys,
|
|
onChange: this.onSelectChange,
|
|
};
|
|
|
|
return (
|
|
<div className="slideRefereUser">
|
|
<div className="refereUserHeader">
|
|
<div className="headerLeft"><span className={includeType == 1 ? "selectedCrumbs" : "tabItem"} onClick={() => {this.handleTabClick(1)}}>关联人员范围</span> {' '} | {' '} <span className={includeType == 0 ? "selectedCrumbs" : "tabItem"} onClick={() => {this.handleTabClick(0)}}>从范围中排除</span></div>
|
|
<WeaInputSearch className="searchInput" value={this.state.searchValue} onChange={(value) => {this.setState({searchValue: value})}} onSearch={(value) => {this.handleSearch(value)}}/>
|
|
<div className="headerIcon">
|
|
<Icon className="iconItem" type="minus-square" onClick={() => {this.handleTabDelete()}}/>
|
|
<Icon className="iconItem" type="plus-square" onClick={() => {setAddUserModalVisible(true)}}/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Table rowSelection={rowSelection} dataSource={list} columns={columns} pagination={{
|
|
total: userTableStore.total,
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
current: userTableStore.pageNum
|
|
}}/>
|
|
</div>
|
|
|
|
{
|
|
addUserModalVisible && <AddUserModal
|
|
visible={addUserModalVisible}
|
|
onCancel={() => {setAddUserModalVisible(false)}}
|
|
/>
|
|
}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
} |