/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-21 17:46:43
|
* @LastEditTime: 2023-07-24 18:01:56
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 新增人员
|
*/
|
import React, { useState, useEffect } from 'react';
|
import PropTypes from 'prop-types';
|
import { Form, Input, Select, Button, Divider, Space, TreeSelect, Row, Col, Typography } from 'antd';
|
import { PlusOutlined } from '@ant-design/icons';
|
import * as $$ from '../../../utils/utility';
|
const { Option } = Select;
|
|
/*
|
* isAddOrEditPerson, // 是否显示该页面
|
* type, // add: 新增；change: 修改
|
* formData, // 修改时的当前选择修改对象
|
* selectData, // 角色，组织部门数据
|
* post, // 岗位数据
|
* handleSubmit, // 表单提交
|
* handleAddPost, // 新增岗位
|
*/
|
const AddOrEditPerson = ({ isAddOrEditPerson, type, formData, selectData, post, handleSubmit, handleAddPost }) => {
|
const [form] = Form.useForm();
|
|
// '1':提交；'2':提交并继续
|
const [submitType, setSubmitType] = useState('1');
|
|
// 表单信息
|
const [submitData, setSubmitData] = useState({});
|
|
// 部门数据
|
const [deptData, setDeptData] = useState([]);
|
|
// 岗位value
|
const [postName, setPostName] = useState('');
|
|
// select下拉框选择时
|
function handleValuesChange(type, values) {
|
let obj = {};
|
if (type === 'unitId') {
|
if (values.value) {
|
let deptData = values.extra.triggerNode.props.chainList || [];
|
setDeptData(deptData);
|
} else {
|
setDeptData([]);
|
}
|
form.setFieldsValue({ deptId: undefined });
|
obj = { deptName: '', unitName: values.label[0], unitId: values.value };
|
} else if (type === 'deptId') {
|
obj = { deptName: values.label[0] };
|
} else if (type === 'goodFieldOption') {
|
let canField = form.getFieldValue('canField') || [];
|
let goodField = values[0];
|
let goodFieldOption = values[1];
|
// 新增时，专长中增加“婚姻”,范围中也增加“婚姻”
|
if (!canField.includes(goodField[goodField.length - 1])) {
|
form.setFieldsValue({ 'canField': [...canField, goodField[goodField.length - 1]] });
|
obj.canField = [...canField, goodField[goodField.length - 1]];
|
obj.canFieldOption = [...(submitData.canFieldOption || []), goodFieldOption[goodFieldOption.length - 1]];
|
}
|
// 删除时，专长删除“婚姻”，如范围也有“婚姻”，则范围删除“婚姻”
|
if (goodField.length < submitData.goodField?.length) {
|
let delGooField = submitData.goodField[submitData.goodField.length - 1];
|
let index = canField.indexOf(delGooField);
|
if (index !== -1) {
|
canField.splice(index, 1);
|
let arr = [...(submitData?.canFieldOption || [])];
|
arr.splice(index, 1);
|
form.setFieldsValue({ 'canField': [...canField] });
|
obj.canField = [...canField];
|
obj.canFieldOption = [...arr];
|
}
|
}
|
obj.goodField = goodField;
|
obj[type] = goodFieldOption;
|
} else if (type === 'canFieldOption') {
|
let goodField = form.getFieldValue('goodField') || [];
|
let canField = values[0];
|
let canFieldOption = values[1];
|
// 删除时，范围删除“婚姻”，如专长也有“婚姻”，则专长删除“婚姻”
|
if (canField.length < submitData.canField?.length) {
|
let delCanField = submitData.canField.filter((item) => !canField.includes(item))[0];
|
let index = goodField.indexOf(delCanField);
|
if (index !== -1) {
|
goodField.splice(index, 1);
|
let arr = [...(submitData?.goodFieldOption || [])];
|
arr.splice(index, 1);
|
form.setFieldsValue({ 'goodField': [...goodField] });
|
obj.goodField = [...goodField];
|
obj.goodFieldOption = [...arr];
|
}
|
}
|
obj.canField = canField;
|
obj[type] = canFieldOption;
|
} else {
|
obj[type] = values;
|
}
|
setSubmitData({ ...submitData, ...obj });
|
}
|
|
// 提交表单
|
function handleFinish(submitType) {
|
setSubmitType(submitType);
|
form.submit();
|
form.scrollToField();
|
}
|
|
// 获取组织下的部门
|
function loopDept(data, key) {
|
for (let i = 0; i < data.length; i++) {
|
if (data[i].value === key) {
|
let unit_deptData = data[i].chainList;
|
setDeptData(unit_deptData);
|
break;
|
}
|
if (data[i].children && data[i].children.length > 0) {
|
loopDept(data[i].children, key);
|
}
|
}
|
}
|
|
// 重置
|
function handleReset() {
|
if (type === 'change') {
|
let data = JSON.parse(JSON.stringify({ dispStatus: '1', findStatus: '1', ...formData }));
|
data.ctUseroleListId = data.ctUseroleList?.map((x) => x.roleId) || [];
|
data.ctUsepostListId = data.ctUsepostList?.map((x) => x.postId) || [];
|
data.canField = data.canField ? data.canField.split(',') : [];
|
data.goodField = data.goodField ? data.goodField.split(',') : [];
|
data.canFieldOption = data.canFieldName
|
? data.canFieldName.split(',').map((x) => {
|
return { children: x };
|
})
|
: [];
|
data.goodFieldOption = data.goodFieldName
|
? data.goodFieldName.split(',').map((x) => {
|
return { children: x };
|
})
|
: [];
|
form.setFieldsValue(data);
|
setSubmitData(data);
|
if (data.unitId) {
|
loopDept(selectData.units, data.unitId);
|
} else if (selectData.units[0]) {
|
setDeptData(selectData.units[0].chainList);
|
} else {
|
setDeptData([]);
|
}
|
} else {
|
form.resetFields();
|
if (selectData.units[0]) {
|
// 默认为当前用户组织
|
form.setFieldsValue({ unitId: selectData.units[0].value, dispStatus: '1', findStatus: '1' });
|
setSubmitData({ unitName: selectData.units[0].label, unitId: selectData.units[0].value });
|
setDeptData(selectData.units[0].chainList || []);
|
}
|
}
|
}
|
|
useEffect(() => {
|
if (form.setFieldsValue) {
|
handleReset();
|
}
|
}, [type, isAddOrEditPerson]);
|
|
// 岗位提交后清除input值
|
useEffect(() => {
|
setPostName('');
|
}, [post.length]);
|
|
return (
|
<div className="personnel" style={{ display: !isAddOrEditPerson ? 'none' : '' }}>
|
<div className="personnel-add">
|
<Form
|
layout="vertical"
|
form={form}
|
onFinish={(values) => {
|
let submitDataCopy = { ...submitData, ...values };
|
submitDataCopy.ctUseroleList =
|
submitDataCopy.ctUseroleListOption?.map((x) => {
|
return { roleId: x.key, roleName: x.children };
|
}) || submitDataCopy.ctUseroleList;
|
submitDataCopy.ctUsepostList =
|
submitDataCopy.ctUsepostListOption?.map((x) => {
|
return { postId: x.key, postName: x.children };
|
}) || submitDataCopy.ctUsepostList;
|
submitDataCopy.canField = submitDataCopy.canField.join();
|
submitDataCopy.goodField = submitDataCopy.goodField.join();
|
submitDataCopy.canFieldName = submitDataCopy.canFieldOption?.map((x) => x.children)?.join() || submitDataCopy.canFieldName;
|
submitDataCopy.goodFieldName = submitDataCopy.goodFieldOption?.map((x) => x.children)?.join() || submitDataCopy.goodFieldName;
|
delete submitDataCopy.ctUseroleListOption;
|
delete submitDataCopy.ctUsepostListOption;
|
delete submitDataCopy.goodFieldOption;
|
delete submitDataCopy.canFieldOption;
|
delete submitDataCopy.ctUsepostListId;
|
delete submitDataCopy.ctUseroleListId;
|
handleSubmit(submitType, submitDataCopy, form);
|
}}
|
onFinishFailed={({ values, errorFields }) => $$.info({ type: 'error', content: errorFields[0].errors })}
|
>
|
<Row gutter={[24, 16]}>
|
<Col span={8}>
|
<Form.Item
|
label="账号"
|
required
|
name="acc"
|
help="账号只可为英文和数字的组合"
|
rules={[{ pattern: $$.accRegExp, required: true, message: '请输入正确的账号' }]}
|
>
|
<Input placeholder="请输入" allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
label="密码"
|
required
|
name="cipher"
|
help="密码长度为8-16的数字或字母或特殊字符(!@#$&_+)"
|
// rules={[{ required: true, pattern: new RegExp('^(?=[0-9]+$)+(?=[a-zA-Z]+$)|[0-9A-Za-z]{8,16}[!@#$&_+*]$', 'g'), message: '请输入正确的密码' }]}
|
>
|
<Input.Password placeholder="请输入" />
|
</Form.Item>
|
</Col>
|
<Col span={8}></Col>
|
<Col span={8}>
|
<Form.Item label="姓名" required name="trueName" rules={[{ required: true }]}>
|
<Input placeholder="请输入" allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="手机号码" name="mobile" rules={[{ pattern: $$.mobileRegExp, message: '请输入正确的手机号码' }]}>
|
<Input placeholder="请输入" allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="身份证号码" name="idcard" >
|
<Input placeholder="请输入" allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="所属组织" name="unitId" help="未选组织则默认添加到当前账号组织下">
|
<TreeSelect
|
showSearch
|
placeholder="请选择"
|
dropdownStyle={{ maxHeight: 500, overflow: 'auto' }}
|
treeData={selectData.units}
|
treeDefaultExpandAll
|
allowClear
|
filterTreeNode={(inputValue, treeNode) => (treeNode.label.indexOf(inputValue) !== -1 ? true : false)}
|
onChange={(value, label, extra) => handleValuesChange('unitId', { value, label, extra })}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="所属组织下部门" name="deptId">
|
<TreeSelect
|
disabled={submitData.unitId ? false : true}
|
showSearch
|
placeholder={`请选择${!submitData.unitId ? '(请先选组织)' : ''}`}
|
treeData={deptData}
|
dropdownStyle={{ maxHeight: 500, overflow: 'auto' }}
|
treeDefaultExpandAll
|
allowClear
|
filterTreeNode={(inputValue, treeNode) => (treeNode.label.indexOf(inputValue) !== -1 ? true : false)}
|
onChange={(value, label, extra) => handleValuesChange('deptId', { value, label, extra })}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={8}></Col>
|
<Col span={8}>
|
<Form.Item label="角色" required name="ctUseroleListId" rules={[{ required: true }]}>
|
<Select
|
placeholder="请选择(可多选)"
|
mode="multiple"
|
filterOption={(inputValue, option) => (option.children.indexOf(inputValue) !== -1 ? true : false)}
|
onChange={(value, option) => handleValuesChange('ctUseroleListOption', option)}
|
>
|
{selectData.roles.map((x, t) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="岗位" name="ctUsepostListId">
|
<Select
|
placeholder="请选择(可多选)"
|
mode="multiple"
|
allowClear
|
filterOption={(inputValue, option) => (option.children.indexOf(inputValue) !== -1 ? true : false)}
|
onChange={(value, option) => handleValuesChange('ctUsepostListOption', option)}
|
dropdownRender={(menu) => (
|
<>
|
{menu}
|
<Divider style={{ margin: '8px 0' }} />
|
<Space style={{ padding: '0 8px 4px' }}>
|
<Input placeholder="请输入新的岗位" allowClear value={postName} onChange={(e) => setPostName(e.target.value)} />
|
<Typography.Link
|
style={{ whiteSpace: 'nowrap' }}
|
onClick={() => {
|
if (!postName || postName.length > 32) {
|
$$.info({ type: 'error', content: '岗位数据无效，请重新输入' });
|
return false;
|
}
|
handleAddPost(postName);
|
}}
|
>
|
<PlusOutlined /> 新增
|
</Typography.Link>
|
</Space>
|
</>
|
)}
|
>
|
{post?.map((item) => (
|
<Option key={item.id}>{item.name}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8}></Col>
|
<Col span={8}>
|
<Form.Item label="调解专长" required name="goodField" >
|
<Select
|
placeholder="请选择(可多选)"
|
mode="multiple"
|
filterOption={(inputValue, option) => (option.children.indexOf(inputValue) !== -1 ? true : false)}
|
onChange={(value, option) => handleValuesChange('goodFieldOption', [value, option])}
|
>
|
{$$.caseOptions.caseCause.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="调解范围" required name="canField" >
|
<Select
|
placeholder="请选择(可多选)"
|
mode="multiple"
|
filterOption={(inputValue, option) => (option.children.indexOf(inputValue) !== -1 ? true : false)}
|
onChange={(value, option) => handleValuesChange('canFieldOption', [value, option])}
|
>
|
{$$.caseOptions.caseCause.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8}></Col>
|
<Col span={8}>
|
<Form.Item label="是否参与自动调度" required name="dispStatus" rules={[{ required: true }]}>
|
<Select placeholder="请选择">
|
<Option key="1">否</Option>
|
<Option key="2">是</Option>
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="是否可以找他调（小程序）" required name="findStatus" rules={[{ required: true }]}>
|
<Select placeholder="请选择">
|
<Option key="1">否</Option>
|
<Option key="2">是</Option>
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item>
|
<Button type="primary" onClick={() => handleFinish('1')} className="public-buttonMargin">
|
{type === 'change' ? '保存' : '提交'}
|
</Button>
|
{type !== 'change' && (
|
<Button onClick={() => handleFinish('2')} className="public-buttonMargin">
|
提交并继续
|
</Button>
|
)}
|
<Button onClick={handleReset}>重置</Button>
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
</div>
|
</div>
|
);
|
};
|
|
AddOrEditPerson.propTypes = {
|
isAddOrEditPerson: PropTypes.bool,
|
type: PropTypes.string,
|
formData: PropTypes.object,
|
selectData: PropTypes.object,
|
post: PropTypes.array,
|
handleSubmit: PropTypes.func,
|
handleAddPost: PropTypes.func,
|
};
|
|
export default AddOrEditPerson;
|
