/**
|
* 徐祥健<xuxj@hugeinfo.com.cn>
|
* 2018年8月28日 10:41
|
*
|
*/
|
|
|
import React from 'react';
|
|
import HeadView from '../view/HeadView';
|
import TableBtnView from '../view/TableBtnView';
|
import { Input, Button, DatePicker, Divider, Modal, message } from 'antd'
|
import moment from 'moment'
|
import Fetch from '../fetch';
|
import TableView from '../view/TableView';
|
const confirm = Modal.confirm;
|
export default class SupPerson extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
data: [],
|
loading: false,
|
visible: false,
|
savedate: {},
|
formdata: {},
|
resetKey: Date.now(),
|
closeKey: Date.now()
|
};
|
}
|
|
componentDidMount() {
|
document.title = '监督人员';
|
this.getData();
|
}
|
getData = () => {
|
const { formdata } = this.state;
|
Fetch.getSpecialPerson(formdata)
|
.then(res => {
|
for (var i = 0; i < res.length; i++) {
|
res[i]['index'] = i + 1;
|
}
|
this.setState({
|
data: res
|
});
|
});
|
}
|
onInputChange = ({ target: { value, name } }) => {
|
this.setState(({ formdata }) => ({
|
formdata: {
|
...formdata,
|
[name]: value
|
}
|
}))
|
}
|
saveInputChange = ({ target: { value, name } }) => {
|
this.setState(({ savedate }) => ({
|
savedate: {
|
...savedate,
|
[name]: value
|
}
|
}))
|
}
|
Seaech = () => {
|
const { formdata } = this.state;
|
Fetch.getSpecialPerson(formdata)
|
.then(res => {
|
for (var i = 0; i < res.length; i++) {
|
res[i]['index'] = i + 1;
|
}
|
this.setState({
|
data: res
|
});
|
});
|
}
|
Reset = () => {
|
this.setState({
|
resetKey: Date.now(),
|
formdata: {}
|
}, this.getData);
|
}
|
|
showModal = (id) => {
|
this.setState({
|
visible: true,
|
});
|
Fetch.getPersonDetail(id)
|
.then(res => {
|
this.setState({ savedate: res })
|
})
|
}
|
|
handleOk = () => {
|
this.setState({ loading: true });
|
const { savedate } = this.state;
|
if (!savedate.name) {
|
this.setState({
|
loading: false
|
});
|
return message.warning("人员姓名不能为空");
|
}
|
if (!savedate.workNo) {
|
this.setState({
|
loading: false
|
});
|
return message.warning("工作编号不能为空");
|
}
|
if (!savedate.post) {
|
this.setState({
|
loading: false
|
});
|
return message.warning("人员职位不能为空");
|
}
|
if (!savedate.unit) {
|
this.setState({
|
loading: false
|
});
|
return message.warning("所属单位不能为空");
|
}
|
if (savedate.phone) {
|
if (!validator.mobile(savedate.phone)) {
|
this.setState({
|
loading: false
|
});
|
return message.warning("电话号码格式不正确");
|
}
|
}else{
|
this.setState({
|
loading: false
|
});
|
return message.warning("电话号码不能为空");
|
}
|
if (savedate.idcard) {
|
if (!validator.carIdNumber(savedate.idcard)) {
|
this.setState({
|
loading: false
|
});
|
return message.warning("身份证格式不正确");
|
}
|
}else{
|
this.setState({
|
loading: false
|
});
|
return message.warning("身份证号码不能为空");
|
}
|
Fetch.savePerson(savedate)
|
.then(res => {
|
if (res.code === 0) {
|
this.setState({
|
loading: false,
|
visible: false,
|
closeKey: Date.now()
|
}, this.getData);
|
message.success("提交成功！")
|
} else {
|
message.error('保存失败，请联系管理员', 2)
|
}
|
});
|
}
|
|
handleCancel = () => {
|
this.setState({
|
closeKey: Date.now(),
|
visible: false
|
});
|
}
|
|
deleteItems = (id) => {
|
confirm({
|
title: '确认要删除这条数据吗?',
|
onOk: () => {
|
Fetch.deletePerson(id)
|
.then(data => {
|
if (data.statuscode == 1) {
|
message.success("删除成功！")
|
this.setState({
|
resetKey: Date.now(),
|
formdata: {}
|
}, this.getData);
|
} else {
|
message.error('删除失败，请联系管理员', 2)
|
}
|
})
|
}
|
});
|
}
|
render() {
|
const columns = [{
|
title: '序号',
|
dataIndex: 'index',
|
key: 'index'
|
}, {
|
title: '姓名',
|
dataIndex: 'name',
|
key: 'name'
|
}, {
|
title: '职位',
|
dataIndex: 'post',
|
key: 'post',
|
}, {
|
title: '工作编号',
|
dataIndex: 'workNo',
|
key: 'workNo',
|
}, {
|
title: '联系方式',
|
dataIndex: 'phone',
|
key: 'phone',
|
}, {
|
title: '所属单位',
|
dataIndex: 'unit',
|
key: 'unit',
|
}, {
|
title: '创建时间',
|
dataIndex: 'createTime',
|
key: 'createTime',
|
render: text => <span>{moment(text).format("YYYY-MM-DD HH:mm")}</span>
|
}, {
|
title: '操作',
|
key: 'action',
|
render: (text, record) => (
|
<span>
|
<label className='theme-color' onClick={() => this.showModal(record.id)} style={{ cursor: 'pointer' }}>编辑</label>
|
<Divider type="vertical" />
|
<label className='theme-color' onClick={() => this.deleteItems(record.id)} style={{ cursor: 'pointer' }}>删除</label>
|
</span>
|
),
|
}];
|
const { data, resetKey, visible, loading, savedate, closeKey } = this.state;
|
return (
|
|
<div className="app-page">
|
<HeadView history={this.props.history} />
|
<TableBtnView key={-resetKey} type="infoManage" name='监督人员信息库' btnName='新建人员' onClick={() => this.showModal('new')}>
|
<Input placeholder="根据姓名模糊查询" style={{ width: "200px" }} name='name' onChange={this.onInputChange} />
|
<Input placeholder="根据职位模糊查询" style={{ width: "200px" }} name='post' onChange={this.onInputChange} />
|
<Input placeholder="根据工作编号模糊查询" style={{ width: "200px" }} name='workNo' onChange={this.onInputChange} />
|
<Input placeholder="根据联系方式模糊查询" style={{ width: "200px" }} name='phone' onChange={this.onInputChange} />
|
<Input placeholder="根据所属单位模糊查询" style={{ width: "200px" }} name='unit' onChange={this.onInputChange} />
|
<DatePicker onChange={(_, value) => this.onInputChange({ target: { name: 'createTime', value } })} placeholder="根据创建时间查询" />
|
<Button type="primary" onClick={this.Seaech}>查询</Button>
|
<Button onClick={this.Reset}>重置</Button>
|
</TableBtnView>
|
<TableView columns={columns} data={data} pageSize='10' size='default' />
|
<Modal
|
key={closeKey}
|
confirmLoading={loading}
|
visible={visible}
|
title="人员信息"
|
onOk={this.handleOk}
|
onCancel={this.handleCancel}
|
bodyStyle={{ lineHeight: 4 }}
|
>
|
<Input addonBefore="人员姓名" name='name' onChange={this.saveInputChange} value={savedate.name || ''} />
|
<Input addonBefore="工作编号" name='workNo' onChange={this.saveInputChange} value={savedate.workNo || ''} />
|
<Input addonBefore="人员职位" name='post' onChange={this.saveInputChange} value={savedate.post || ''} />
|
<Input addonBefore="联系方式" name='phone' onChange={this.saveInputChange} value={savedate.phone || ''} />
|
<Input addonBefore="身份证号码" name='idcard' onChange={this.saveInputChange} value={savedate.idcard || ''} />
|
<Input addonBefore="所属单位" name='unit' onChange={this.saveInputChange} value={savedate.unit || ''} />
|
</Modal>
|
</div>
|
);
|
}
|
|
}
|
