141 lines
3.9 KiB
JavaScript
141 lines
3.9 KiB
JavaScript
import React from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
import { Button, message, Switch } from "antd";
|
||
import { WeaDialog, WeaInputSearch } from "ecCom";
|
||
import CustomTable from "../../../components/customTable";
|
||
|
||
@inject("ledgerStore")
|
||
@observer
|
||
export default class AddSalaryItemModal extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
searchValue: "",
|
||
selectedRowKeys: []
|
||
};
|
||
}
|
||
|
||
componentWillMount() {
|
||
const { ledgerStore: { listSalaryItem } } = this.props;
|
||
listSalaryItem();
|
||
}
|
||
|
||
// 增加编辑功能，重写columns绑定事件
|
||
getColumns(columns) {
|
||
if (!columns) {
|
||
return [];
|
||
}
|
||
let newColumns = "";
|
||
newColumns = columns.map(column => {
|
||
let newColumn = column;
|
||
newColumn.render = (text, record, index) => { //前端元素转义
|
||
let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
|
||
switch (newColumn.dataIndex) {
|
||
case "useDefault":
|
||
case "useInEmployeeSalary":
|
||
return <Switch checked={text == 1}/>;
|
||
default:
|
||
return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
|
||
}
|
||
};
|
||
return newColumn;
|
||
});
|
||
return newColumns;
|
||
}
|
||
|
||
handleAdd() {
|
||
const { ledgerStore } = this.props;
|
||
const { addSalaryItemDataSource, addItemsToGroup, addExcludeIds } = ledgerStore;
|
||
const { selectedRowKeys } = this.state;
|
||
if (selectedRowKeys.length == 0) {
|
||
message.warning("未选择条目");
|
||
return;
|
||
}
|
||
let selectItems = [];
|
||
|
||
addSalaryItemDataSource.map(item => {
|
||
item = { ...item };
|
||
selectedRowKeys.map(key => {
|
||
if (item.id == key) {
|
||
item.salaryItemId = item.id;
|
||
item.key = item.id;
|
||
selectItems.push(item);
|
||
}
|
||
});
|
||
});
|
||
|
||
addItemsToGroup(this.props.title, selectItems);
|
||
this.props.onCancel();
|
||
}
|
||
|
||
handleSearch = (value) => {
|
||
const { ledgerStore: { listSalaryItem } } = this.props;
|
||
listSalaryItem(value);
|
||
};
|
||
|
||
|
||
onSelectChange = selectedRowKeys => {
|
||
this.setState({ selectedRowKeys });
|
||
};
|
||
|
||
// 分页
|
||
handleDataPageChange(value) {
|
||
const { ledgerStore: { listSalaryItem } } = this.props;
|
||
listSalaryItem(this.state.searchValue, value);
|
||
}
|
||
|
||
render() {
|
||
const { ledgerStore } = this.props;
|
||
const { addSalaryItemDataSource, addSalaryItemColumns, addSalaryItemPageInfo, loading } = ledgerStore;
|
||
const { searchValue, selectedRowKeys } = this.state;
|
||
|
||
const rowSelection = {
|
||
selectedRowKeys,
|
||
onChange: this.onSelectChange
|
||
};
|
||
|
||
return (
|
||
<WeaDialog
|
||
visible={this.props.visible}
|
||
onCancel={() => {
|
||
this.props.onCancel();
|
||
}}
|
||
title="添加薪资项目"
|
||
style={{ width: "80vw", height: 600 }}
|
||
buttons={[
|
||
<Button
|
||
type="primary"
|
||
onClick={() => {
|
||
this.handleAdd();
|
||
}}>添加</Button>
|
||
]}
|
||
>
|
||
<div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", padding: 20 }}>
|
||
<WeaInputSearch value={searchValue} onChange={(value) => {
|
||
this.setState({ searchValue: value });
|
||
}} onSearch={(value) => {
|
||
this.handleSearch(value);
|
||
}}/>
|
||
</div>
|
||
|
||
<div style={{ height: "calc(100% - 68px)", overflowY: "scroll" }}>
|
||
<CustomTable
|
||
loading={loading}
|
||
dataSource={addSalaryItemDataSource}
|
||
columns={this.getColumns(addSalaryItemColumns)}
|
||
rowSelection={rowSelection}
|
||
pagination={{
|
||
onChange: (value) => {
|
||
this.handleDataPageChange(value);
|
||
},
|
||
total: addSalaryItemPageInfo.total,
|
||
showTotal: (total) => `共 ${total} 条`,
|
||
current: addSalaryItemPageInfo.pageNum
|
||
}}
|
||
/>
|
||
</div>
|
||
</WeaDialog>
|
||
);
|
||
}
|
||
}
|