import { Form, Input, Modal, Tree, Button, Spin, Row, Col, Select } from 'antd';
|
import { forwardRef, useImperativeHandle, useState } from 'react';
|
import { useEffect } from 'react';
|
import { getTree, getAddTree } 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([])
|
//所属区县
|
const [countyList, setCountyList] = useState([])
|
//所属街道
|
const [streetList, setStreetList] = useState([])
|
//所属社区
|
const [communityList, setCommunityList] = useState([])
|
|
|
|
|
useEffect(() => {
|
// 获取权限树
|
getAddTree().then(res => {
|
setTreeData(res.data)
|
})
|
}, [])
|
|
useImperativeHandle(ref, () => {
|
return {
|
refreshData: (data, type) => {
|
setDetailType(type || false)
|
if (data.id) {
|
// 获取角色的权限树
|
getTree(data.id).then(res => {
|
setTreeSeletKeys(res.data.systemMenuIds || []);
|
})
|
}
|
setData(data)
|
form.setFieldsValue(data);
|
},
|
clean: () => {
|
setSpinning(false)
|
},
|
};
|
});
|
|
// 保存
|
const okHandle = () => {
|
form.validateFields().then((values) => {
|
setSpinning(true)
|
values.menuIds = treeSeletKeys
|
delete values.tree
|
if (data.id) {
|
values.id = data.id
|
onUpdate(values)
|
} else {
|
onSave(values);
|
}
|
});
|
};
|
|
|
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="name"
|
label="所属一级单位"
|
rules={[{ required: true, message: '请选择所属一级单位' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
dataSource={oneCompanyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
name="name"
|
label="所属二级单位"
|
rules={[{ required: true, message: '请选择所属二级单位' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
dataSource={twoCompanyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
name="name"
|
label="所属三级单位"
|
rules={[{ required: true, message: '请选择所属三级单位' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
dataSource={threeCompanyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={8}>
|
<Form.Item
|
name="name"
|
label="所属四级单位"
|
rules={[{ required: true, message: '请选择所属四级单位' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
dataSource={fourCompanyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={8}>
|
<Form.Item
|
name="name"
|
label="所属职位"
|
rules={[{ required: true, message: '请选择所属职位' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
dataSource={positionList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
name="name"
|
label="所属角色"
|
rules={[{ required: true, message: '请选择所属角色' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
dataSource={roleList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={8}>
|
<Form.Item
|
name="name"
|
label="账号层级"
|
rules={[{ required: true, message: '请选择账号层级' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
dataSource={levelList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
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="name"
|
rules={[{ required: true, message: '请选择账号层级' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
style={{ width: '280px' }}
|
placeholder="请选择"
|
dataSource={levelList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
<div style={{ fontSize: '12px', Color: "rgba(0,0,0,0.5)" }}>管理员主要用于接收实现临期提醒，以及上级端登录</div>
|
</div>
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={8}>
|
<Form.Item
|
name="name"
|
label="所属区县"
|
rules={[{ required: true, message: '请选择所属区县' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
dataSource={oneCompanyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
name="name"
|
label="所属街道"
|
rules={[{ required: true, message: '请选择所属街道' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
dataSource={twoCompanyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</Select >
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
name="name"
|
label="所属社区"
|
rules={[{ required: true, message: '请选择所属社区' }]}
|
>
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
dataSource={threeCompanyList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
>
|
</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="name"
|
rules={[{ required: true, message: '请输入联系方式' }]}
|
>
|
<Input disabled={detailType} placeholder='请输入联系方式' />
|
</Form.Item>
|
<div style={{ fontSize: '12px', Color: "rgba(0,0,0,0.5)" }}>联系方式将作为登录账号使用</div>
|
</div>
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={8}>
|
<Form.Item
|
name="name"
|
label="登录密码"
|
rules={[{ required: true, message: '请输入登录密码' }]}
|
>
|
<Input disabled={detailType} placeholder='请输入' />
|
</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="name"
|
rules={[{ required: true, message: '请输入确认密码' }]}
|
>
|
<Input disabled={detailType} placeholder='请输入' />
|
</Form.Item>
|
<div style={{ fontSize: '12px', Color: "rgba(0,0,0,0.5)" }}>联系方式将作为登录账号使用</div>
|
</div>
|
</Form.Item>
|
</Col>
|
</Row>
|
|
|
</Form>
|
<Spin spinning={spinning} fullscreen />
|
</Modal >
|
);
|
};
|
|
export default forwardRef(AddAndEdit);
|
