salary-management-front/pc4mobx/hrmSalary/pages/salaryItem/deleteSalaryItemModal.js

107 lines
3.4 KiB
JavaScript

import React from 'react'
import { systemItemColumns, dataSource } from './columns'
import { WeaInputSearch, WeaTable } from 'ecCom'
import { Modal, Button, Table } from 'antd'
import { inject, observer } from 'mobx-react';
import CustomTable from '../../components/customTable'
@inject('salaryItemStore')
@observer
export default class DeleteSalaryItemModal extends React.Component {
constructor(props) {
super(props);
this.state ={
selectedRowKeys: [],
searchValue: ""
}
this.page = 1
}
componentWillMount() {
const { salaryItemStore: {listCanDelete}} = this.props;
listCanDelete()
}
getColumns() {
const { salaryItemStore } = this.props;
const { canDeleteList } = salaryItemStore
let columns = canDeleteList.columns ? canDeleteList.columns : []
columns = [...columns]
return columns
}
// 分页
handleDataPageChange(value) {
const { salaryItemStore: {listCanDelete}} = this.props;
this.page = value;
listCanDelete({name: this.state.searchValue, current: value})
}
// 选择框选中事件
onSelectChange(selectedRowKeys) {
this.setState({ selectedRowKeys });
}
handleSearchChange(value) {
this.setState({searchValue: value})
}
// 搜索
handleSearch(value) {
const { salaryItemStore: {listCanDelete}} = this.props;
listCanDelete({name: value, current: this.page})
}
render() {
const { selectedRowKeys, searchValue } = this.state;
const { salaryItemStore } = this.props;
const { canDeleteList, modalLoading } = salaryItemStore
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange.bind(this),
};
const handleDelete = () => {
const { salaryItemStore: { deleteItem } } = this.props;
deleteItem(this.state.selectedRowKeys);
}
return (
<Modal visible={this.props.visible} onCancel={() => {
this.props.onCancel()
}} footer={null} width={800}>
<div style={{height: "47px", lineHeight: '47px'}}>
<span style={{marginLeft: "10px", fontSize: '14px'}}>批量删除</span>
<div style={{float: "right", marginRight: "40px"}}>
<Button type="primary" style={{marginRight: '10px'}} onClick={() => {
handleDelete()
}}>批量删除</Button>
<WeaInputSearch value={searchValue} onChange={(value) => {
this.handleSearchChange(value)
}} onSearch={(value) => {
this.handleSearch(value)
}}/>
</div>
</div>
<div style={{margin: "10px", height: "500px", overflowY: "scroll"}}>
<CustomTable loadding={modalLoading}
rowSelection={rowSelection}
columns={this.getColumns()}
dataSource={canDeleteList.list ? canDeleteList.list : []}
pagination={{
onChange: (value) => {
this.handleDataPageChange(value)
},
total: canDeleteList.total,
showTotal: (total) => `${total}`,
current: canDeleteList.pageNum
}}
/>
</div>
</Modal>
)
}
}