import { Form, Input, Modal, Tree, Button, Spin, Row, Col, Select, Radio, Cascader } from 'antd';
|
import { forwardRef, useImperativeHandle, useState } from 'react';
|
import { useEffect } from 'react';
|
import { getDepartmentList, systemPostList, systemRoleList, getSystemUserInfo, getCityList, addSystemUserInfo, editSystemUserInfo } from '../service';
|
import CryptoJS from 'crypto-js';
|
const formItemLayout = {
|
labelCol: { span: 8 },
|
wrapperCol: { span: 16 },
|
};
|
|
|
const AddAndEdit = ({ visible, onSave, onUpdate, onCancel }, ref) => {
|
const [form] = Form.useForm();
|
const [data, setData] = useState({})
|
const [spinning, setSpinning] = useState(false);
|
|
const [oneCompanyList, setOneCompanyList] = useState([])
|
|
const [twoCompanyList, setTwoCompanyList] = useState([])
|
const [threeCompanyList, setThreeCompanyList] = useState([])
|
const [fourCompanyList, setFourCompanyList] = useState([])
|
|
const [adminLevel, setAdminLevel] = useState(1)
|
|
//所属职位
|
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 [activeLevel, setActiveLevel] = useState('')
|
//所属区县
|
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(() => {
|
// 获取单位
|
|
}, [])
|
|
useImperativeHandle(ref, () => {
|
return {
|
refreshData: (data, companyList) => {
|
getCountyList()
|
setOneCompanyList(() => companyList)
|
console.log('companyList', companyList)
|
|
systemPostList({ pageNum: 1, pageSize: 10000 }).then(res => {
|
setPositionList(() => res.data.records)
|
})
|
systemRoleList({ pageNum: 1, pageSize: 10000 }).then(res => {
|
setRoleList(() => res.data.records)
|
})
|
// 权限判断
|
let adminInfo = JSON.parse(localStorage.getItem('userInfo'))
|
setAdminLevel(() => adminInfo.accountLevel)
|
switch (adminInfo.accountLevel) {
|
case 1:
|
setLevelList(() => [{ name: '市级账号', value: 1 }, { name: '区县账号', value: 2 }, { name: '街道账号', value: 3 }, { name: '社区账号', value: 4 }, { name: '党员账号', value: 5 }])
|
break;
|
case 2:
|
getStreetList(adminInfo.districtsCode)
|
setLevelList(() => [{ name: '区县账号', value: 2 }, { name: '街道账号', value: 3 }, { name: '社区账号', value: 4 }, { name: '党员账号', value: 5 }])
|
this.$nextTick(() => {
|
form.setFieldsValue({ districtsCode: adminInfo.districtsCode })
|
})
|
|
break;
|
case 3:
|
getStreetList(adminInfo.districtsCode)
|
getcommunityList(adminInfo.streetId)
|
setLevelList(() => [{ name: '街道账号', value: 3 }, { name: '社区账号', value: 4 }, { name: '党员账号', value: 5 }])
|
form.setFieldsValue({ districtsCode: adminInfo.districtsCode })
|
form.setFieldsValue({ streetId: adminInfo.streetId })
|
break;
|
case 4:
|
getStreetList(adminInfo.districtsCode)
|
getcommunityList(adminInfo.streetId)
|
setLevelList(() => [{ name: '社区账号', value: 4 }, { name: '党员账号', value: 5 }])
|
// this.$nextTick(() => {
|
form.setFieldsValue({ districtsCode: adminInfo.districtsCode })
|
form.setFieldsValue({ streetId: adminInfo.streetId })
|
form.setFieldsValue({ communityId: adminInfo.communityId * 1 })
|
// })
|
|
|
break;
|
case 5:
|
getStreetList(adminInfo.districtsCode)
|
getcommunityList(adminInfo.streetId)
|
setLevelList(() => [{ name: '党员账号', value: 5 }])
|
form.setFieldsValue({ districtsCode: adminInfo.districtsCode })
|
form.setFieldsValue({ streetId: adminInfo.streetId })
|
form.setFieldsValue({ communityId: adminInfo.communityId * 1 })
|
break;
|
default:
|
break;
|
}
|
|
|
|
if (data.id) {
|
getInfo(data.id)
|
}
|
setData(() => data)
|
if (data.unitId) {
|
let result = []
|
findParent(companyList, data.unitId * 1, result)
|
form.setFieldsValue({ DepartmentId: result })
|
}
|
},
|
clean: () => {
|
setSpinning(false)
|
},
|
};
|
});
|
|
// 保存
|
const okHandle = () => {
|
form.validateFields().then((values) => {
|
if(values.password){
|
values.password = CryptoJS.MD5(values.password).toString();
|
}else{
|
delete values.password
|
}
|
if (values.DepartmentId) {
|
values.oneDepartmentId = values.DepartmentId.length > 0 ? values.DepartmentId[0] : null
|
values.twoDepartmentId = values.DepartmentId.length > 1 ? values.DepartmentId[1] : null
|
values.threeDepartmentId = values.DepartmentId.length > 2 ? values.DepartmentId[2] : null
|
values.fourDepartmentId = values.DepartmentId.length > 3 ? values.DepartmentId[3] : null
|
}
|
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) => {
|
setActiveCounty(label)
|
getStreetList(value)
|
form.setFieldsValue({ streetId: '', communityId: '' })
|
setActiveCommunity({ name: '', id: '' })
|
setActiveStreet({ name: '', id: '' })
|
|
}
|
const changeStreet = (value, label) => {
|
setActiveStreet(label)
|
getcommunityList(value)
|
form.setFieldsValue({ communityId: '' })
|
setActiveCommunity({ name: '', id: '' })
|
}
|
const changeCommunity = (value, label) => {
|
setActiveCommunity(label)
|
}
|
const getInfo = (id) => {
|
getSystemUserInfo(id).then(res => {
|
if (res.data.districtsCode) {
|
setActiveStreet({ name: res.data.districts, id: res.data.districtsCode })
|
getStreetList(res.data.districtsCode)
|
}
|
if (res.data.streetId) {
|
setActiveCounty({ name: res.data.street, id: res.data.streetId })
|
getcommunityList(res.data.streetId)
|
}
|
if (res.data.communityId) {
|
setActiveCommunity({ name: res.data.community, id: res.data.communityId })
|
}
|
// delete res.data.password
|
|
let departmentId = []
|
if (res.data.oneDepartmentId) {
|
departmentId.push(res.data.oneDepartmentId)
|
}
|
if (res.data.twoDepartmentId) {
|
departmentId.push(res.data.twoDepartmentId)
|
}
|
if (res.data.threeDepartmentId) {
|
departmentId.push(res.data.threeDepartmentId)
|
}
|
if (res.data.fourDepartmentId) {
|
departmentId.push(res.data.fourDepartmentId)
|
}
|
res.data.DepartmentId = departmentId
|
console.log('departmentId', departmentId)
|
setActiveLevel(() => res.data.accountLevel)
|
|
form.setFieldsValue({ ...res.data, password: '' })
|
})
|
}
|
const findParent = (data, target, result) => {
|
for (let item of data) {
|
if (item.id === target) {
|
//将查找到的目标数据加入结果数组中
|
//可根据需求unshift(item.id)或unshift(item)
|
result.unshift(item.id)
|
return true
|
}
|
if (item.children && item.children.length > 0) {
|
//根据查找到的结果往上找父级节点
|
let isFind = findParent(item.children, target, result)
|
if (isFind) {
|
result.unshift(item.id)
|
return true
|
}
|
}
|
}
|
//走到这说明没找到目标
|
return false
|
}
|
|
return (
|
<Modal
|
getContainer={false}
|
width="65%"
|
destroyOnClose
|
title={data.type == 'detail' ? '人员详情' : data.type == 'edit' ? '编辑人员' : '添加人员'}
|
open={visible}
|
onCancel={() => onCancel(false)}
|
afterClose={() => {
|
form.resetFields()
|
}}
|
footer={
|
(data.type == 'edit' || data.type == 'add') ?
|
[
|
<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={data.type == 'detail'} placeholder='请输入人员姓名' />
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={16}>
|
<Form.Item
|
name="DepartmentId"
|
label="所属单位"
|
labelCol={{ span: 4 }}
|
rules={[{ required: true, message: '请选择所属单位' }]}
|
>
|
{/* <Select
|
key="searchSelect"
|
allowClear
|
disabled={data.type == 'detail'}
|
placeholder="请选择"
|
options={oneCompanyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select > */}
|
<Cascader
|
changeSelect
|
options={oneCompanyList}
|
fieldNames={{ value: 'key', label: 'name' }}
|
placeholder="请选择"
|
// displayRender={(label) => label[label.length - 1]}
|
changeOnSelect={true}
|
/>
|
</Form.Item>
|
</Col>
|
{/* <Col span={8}>
|
<Form.Item
|
name="twoDepartmentId"
|
label="所属二级单位"
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
disabled={data.type == 'detail'}
|
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
|
disabled={data.type == 'detail'}
|
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
|
disabled={data.type == 'detail'}
|
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
|
disabled={data.type == 'detail'}
|
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
|
disabled={data.type == 'detail'}
|
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
|
onChange={(e) => setActiveLevel(e)}
|
disabled={data.type == 'detail'}
|
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
|
disabled={data.type == 'detail'}
|
// style={style}
|
// onChange={onChange}
|
// value={value}
|
options={[{ value: 0, label: '否', }, { value: 1, label: '是', },
|
|
]}
|
/>
|
</Form.Item>
|
<div style={{ fontSize: '12px', color: "rgba(0,0,0,0.5)", marginLeft: "10px" }}>管理员主要用于接收实现临期提醒，以及上级端登录</div>
|
</div>
|
</Form.Item>
|
</Col>
|
</Row>
|
{activeLevel != 1 && (
|
<Row>
|
{[2, 3, 4, 5].includes(activeLevel) && (
|
<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
|
disabled={data.type == 'detail' || [2, 3, 4, 5].includes(adminLevel)}
|
onChange={changeCountry}
|
value={activeCounty.id}
|
placeholder="请选择"
|
options={countyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
// filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
)}
|
{[3, 4, 5].includes(activeLevel) && (
|
<Col span={8}>
|
<Form.Item
|
name="streetId"
|
label="所属街道"
|
rules={[{ required: true, message: '请选择所属街道' }]}
|
>
|
<Select
|
onChange={changeStreet}
|
disabled={!activeCounty || data.type == 'detail' || [3, 4, 5].includes(adminLevel)}
|
key="searchSelect"
|
allowClear
|
value={activeStreet.id}
|
placeholder="请选择"
|
options={streetList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
)}
|
|
{[4, 5].includes(activeLevel) && (
|
<Col span={8}>
|
<Form.Item
|
name="communityId"
|
label="所属社区"
|
rules={[{ required: true, message: '请选择所属社区' }]}
|
>
|
<Select
|
onChange={changeCommunity}
|
disabled={!activeStreet || data.type == 'detail' || [4, 5].includes(adminLevel)}
|
key="searchSelect"
|
allowClear
|
value={activeCommunity.id}
|
placeholder="请选择"
|
options={communityList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
)}
|
</Row>
|
)}
|
|
<Row>
|
<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="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={data.type == 'detail'} 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={data.type == 'add'}
|
name="password"
|
label="登录密码"
|
rules={[{
|
validator: (rule, value) => {
|
return new Promise((resolve, reject) => {
|
if (!value && data.type == 'add') {
|
reject('请输入新密码');
|
}
|
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
|
if (!passwordRegex.test(value) && data.type == 'add') {
|
reject('密码需要包含大小写字母，数字和特殊符号，且长度为8位以上');
|
}
|
resolve('');
|
});
|
},
|
}]}
|
>
|
<Input.Password disabled={data.type == 'detail'} placeholder='请输入' />
|
</Form.Item>
|
</Col>
|
<Col span={16}>
|
<Form.Item
|
label="确认密码"
|
required={data.type == 'add'}
|
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 && data.type == 'add') {
|
reject('请再次输入新密码');
|
}
|
if (value != form.getFieldValue('password') && data.type == 'add') {
|
reject('两次密码请保持一致');
|
}
|
resolve('');
|
});
|
},
|
},]}
|
>
|
<Input.Password disabled={data.type == 'detail'} 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);
|
