import { Form, Input, Modal, Tree, Button, Spin, Row, Col, Select, Radio } from 'antd';
|
import { forwardRef, useImperativeHandle, useState } from 'react';
|
import { useEffect } from 'react';
|
import { getDepartmentList, systemPostList, systemRoleList, getSystemUserInfo, getCityList, addSystemUserInfo, editSystemUserInfo } from '../service';
|
import { Color } from 'antd/es/color-picker';
|
const formItemLayout = {
|
labelCol: { span: 8 },
|
wrapperCol: { span: 16 },
|
};
|
|
|
const AddAndEdit = ({ visible, onSave, onUpdate, onCancel }, ref) => {
|
const [form] = Form.useForm();
|
const [data, setData] = useState({})
|
const [treeData, setTreeData] = useState([]);//权限树
|
const [treeSeletKeys, setTreeSeletKeys] = useState([]); //勾选权限
|
const [detailType, setDetailType] = useState(false);//是否详情
|
const [spinning, setSpinning] = useState(false);
|
|
const [oneCompanyList, setOneCompanyList] = useState([])
|
const [twoCompanyList, setTwoCompanyList] = useState([])
|
const [threeCompanyList, setThreeCompanyList] = useState([])
|
const [fourCompanyList, setFourCompanyList] = useState([])
|
|
//所属职位
|
const [positionList, setPositionList] = useState([])
|
//所属角色
|
const [roleList, setRoleList] = useState([])
|
//账号层级
|
const [levelList, setLevelList] = useState([{ name: '市级账号', value: 1 }, { name: '区县账号', value: 2 }, { name: '街道账号', value: 3 }, { name: '社区账号', value: 4 }, { name: '党员账号', value: 5 }])
|
//所属区县
|
const [countyList, setCountyList] = useState([])
|
const [activeCounty, setActiveCounty] = useState('')
|
//所属街道
|
const [streetList, setStreetList] = useState([])
|
const [activeStreet, setActiveStreet] = useState('')
|
//所属社区
|
const [communityList, setCommunityList] = useState([])
|
// const [activeCommunity, setActiveCommunity] = useState({})
|
|
|
|
|
useEffect(() => {
|
// 获取单位
|
setTimeout(() => {
|
getDepartmentList(1).then(res => {
|
setOneCompanyList(() => res.data)
|
})
|
getDepartmentList(2).then(res => {
|
setTwoCompanyList(() => res.data)
|
})
|
}, 2000);
|
setTimeout(() => {
|
getDepartmentList(3).then(res => {
|
setThreeCompanyList(() => res.data)
|
})
|
getDepartmentList(4).then(res => {
|
setThreeCompanyList(() => res.data)
|
})
|
}, 4000);
|
}, [])
|
|
useImperativeHandle(ref, () => {
|
return {
|
refreshData: (data, type) => {
|
setDetailType(type || false)
|
|
getCountyList()
|
systemPostList({ pageNum: 1, pageSize: 10000 }).then(res => {
|
setPositionList(() => res.data.records)
|
})
|
systemRoleList({ pageNum: 1, pageSize: 10000 }).then(res => {
|
setRoleList(() => res.data.records)
|
})
|
|
if (data.id) {
|
getInfo(data.id)
|
}
|
setData(data)
|
},
|
clean: () => {
|
setSpinning(false)
|
},
|
};
|
});
|
|
// 保存
|
const okHandle = () => {
|
form.validateFields().then((values) => {
|
console.log('value',values)
|
if (data.id) {
|
values.id = data.id
|
onUpdate(values)
|
} else {
|
onSave(values);
|
}
|
});
|
};
|
const getCountyList = (id) => {
|
getCityList({ id: '510400', tier: 2 }).then(res => {
|
setCountyList(() => res.data)
|
})
|
}
|
const getStreetList = (id) => {
|
getCityList({ id: id, tier: 3 }).then(res => {
|
setStreetList(() => res.data)
|
})
|
}
|
const getcommunityList = (id) => {
|
getCityList({ id: id, tier: 4 }).then(res => {
|
setCommunityList(() => res.data)
|
})
|
}
|
const changeCountry = (value, label) => {
|
console.log('区县', value,'11111111',label);
|
setActiveCounty(value)
|
getStreetList(value)
|
|
}
|
const changeStreet = (value) => {
|
console.log('街道', value);
|
setActiveStreet(value)
|
getcommunityList(value)
|
}
|
const changeCommunity = (value) => {
|
console.log('社区', value);
|
// setActiveCommunity(value)
|
}
|
const getInfo = (id) => {
|
getSystemUserInfo(id).then(res => {
|
|
})
|
}
|
|
return (
|
<Modal
|
getContainer={false}
|
width="65%"
|
destroyOnClose
|
title={detailType ? '人员详情' : data.id ? '编辑人员' : '添加人员'}
|
open={visible}
|
onCancel={() => onCancel(false)}
|
afterClose={() => {
|
form.resetFields()
|
setTreeSeletKeys([])
|
}}
|
footer={
|
!detailType ?
|
[
|
<Button key="back" onClick={() => onCancel(false)}>取消</Button>,
|
<Button key="submit" type="primary" onClick={okHandle}>
|
确定
|
</Button>
|
]
|
:
|
<Button key="back" onClick={() => onCancel(false)}>关闭</Button>
|
}
|
>
|
<Form layout="horizontal" {...formItemLayout} form={form} scrollToFirstError>
|
<Row>
|
<Col span={8}>
|
<Form.Item
|
name="name"
|
label="姓名"
|
rules={[{ required: true, message: '请输入人员姓名' }]}
|
>
|
<Input disabled={detailType} placeholder='请输入人员姓名' />
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={8}>
|
<Form.Item
|
name="oneDepartmentId"
|
label="所属一级单位"
|
rules={[{ required: true, message: '请选择所属一级单位' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
options={oneCompanyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
name="twoDepartmentId"
|
label="所属二级单位"
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
options={twoCompanyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
name="threeDepartmentId"
|
label="所属三级单位"
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
options={threeCompanyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={8}>
|
<Form.Item
|
name="fourDepartmentId"
|
label="所属四级单位"
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
options={fourCompanyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={8}>
|
<Form.Item
|
name="systemPostId"
|
label="所属职位"
|
rules={[{ required: true, message: '请选择所属职位' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
options={positionList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
name="systemRoleId"
|
label="所属角色"
|
rules={[{ required: true, message: '请选择所属角色' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
options={roleList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={8}>
|
<Form.Item
|
name="accountLevel"
|
label="账号层级"
|
rules={[{ required: true, message: '请选择账号层级' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
options={levelList}
|
fieldNames={{ label: 'name', value: 'value' }}
|
// filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
<Col span={16}>
|
<Form.Item
|
label="是否管理员"
|
labelCol={{ span: 4 }}
|
wrapperCol={{ span: 20 }}
|
style={{ marginBottom: 0 }}
|
>
|
<div style={{ display: "flex", flex: 1 }}>
|
<Form.Item
|
name="isAdmin"
|
rules={[{ required: true, message: '是否管理员' }]}
|
>
|
<Radio.Group
|
// style={style}
|
// onChange={onChange}
|
// value={value}
|
options={[{ value: 1, label: '否', }, { value: 2, label: '是', },
|
|
]}
|
/>
|
</Form.Item>
|
<div style={{ fontSize: '12px', color: "rgba(0,0,0,0.5)", marginLeft: "10px" }}>管理员主要用于接收实现临期提醒，以及上级端登录</div>
|
</div>
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={8}>
|
<Form.Item
|
name="districtsCode"
|
label="所属区县"
|
rules={[{ required: true, message: '请选择所属区县' }]}
|
>
|
{/* <Select
|
// onChange={changeCountry}
|
// value={activeCounty}
|
placeholder="请选择"
|
options={levelList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
>
|
</Select > */}
|
<Select
|
key="searchSelect"
|
allowClear
|
onChange={changeCountry}
|
value={activeCounty}
|
placeholder="请选择"
|
options={countyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
// filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
name="streetId"
|
label="所属街道"
|
rules={[{ required: true, message: '请选择所属街道' }]}
|
>
|
<Select
|
onChange={changeStreet}
|
disabled={!activeCounty}
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
options={streetList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
name="communityId"
|
label="所属社区"
|
rules={[{ required: true, message: '请选择所属社区' }]}
|
>
|
<Select
|
disabled={!activeStreet}
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
options={communityList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={16}>
|
<Form.Item
|
label="联系方式"
|
labelCol={{ span: 4 }}
|
wrapperCol={{ span: 20 }}
|
style={{ marginBottom: 0 }}
|
>
|
<div style={{ display: "flex", flex: 1 }}>
|
<Form.Item
|
name="phone"
|
rules={[{
|
validator: (rule, value) => {
|
return new Promise((resolve, reject) => {
|
if (!value) {
|
reject('请输入联系方式');
|
}
|
const phoneRegex = /^((\+86)?(13|14|15|16|17|18|19)[0-9]{9})|((\+86)?(0[0-9]{2,3})?([2-9][0-9]{6,7}))$/;
|
if (!phoneRegex.test(value)) {
|
reject('请输入正确的电话号码');
|
}
|
resolve('');
|
});
|
},
|
}]}
|
>
|
<Input disabled={detailType} placeholder='请输入联系方式' />
|
</Form.Item>
|
<div style={{ fontSize: '12px', color: "rgba(0,0,0,0.5)", marginLeft: "10px" }}>联系方式将作为登录账号使用</div>
|
</div>
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={8}>
|
<Form.Item
|
required
|
name="password"
|
label="登录密码"
|
rules={[{
|
validator: (rule, value) => {
|
return new Promise((resolve, reject) => {
|
if (!value) {
|
reject('请输入新密码');
|
}
|
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
|
if (!passwordRegex.test(value)) {
|
reject('密码需要包含大小写字母，数字和特殊符号，且长度为8位以上');
|
}
|
resolve('');
|
});
|
},
|
}]}
|
>
|
<Input.Password disabled={detailType} placeholder='请输入' />
|
</Form.Item>
|
</Col>
|
<Col span={16}>
|
<Form.Item
|
label="确认密码"
|
required
|
labelCol={{ span: 4 }}
|
wrapperCol={{ span: 20 }}
|
style={{ marginBottom: 0 }}
|
>
|
<div style={{ display: "flex", flex: 1 }}>
|
<Form.Item
|
name="surePassword"
|
rules={[{
|
validator: (rule, value) => {
|
return new Promise((resolve, reject) => {
|
if (!value) {
|
reject('请再次输入新密码');
|
}
|
if (value != form.getFieldValue('password')) {
|
reject('两次密码请保持一致');
|
}
|
resolve('');
|
});
|
},
|
},]}
|
>
|
<Input.Password disabled={detailType} placeholder='请输入' />
|
</Form.Item>
|
<div style={{ fontSize: '12px', color: "rgba(0,0,0,0.5)", marginLeft: "10px" }}>密码需要包含大小写字母，数字和特殊符号，且长度为8位以上</div>
|
</div>
|
</Form.Item>
|
</Col>
|
</Row>
|
|
|
</Form>
|
<Spin spinning={spinning} fullscreen />
|
</Modal >
|
);
|
};
|
|
export default forwardRef(AddAndEdit);
|
