/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-27 20:39:46
|
* @LastEditTime: 2024-05-08 10:46:32
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description: 新增 or 修改部门
|
*/
|
import React, { useState, useEffect } from 'react';
|
import PropTypes from 'prop-types';
|
import { Button, Input, Form, Row, Col, Select } from 'antd';
|
import * as $$ from '../../../utils/utility';
|
|
const { Option } = Select;
|
/*
|
* isAddOrEditDept, // 是否显示该页面, 'changeDept':'修改';'addOneDept':'新增部门';'addSubordinateDept':'新增下级部门'
|
* deptActive, // 当前部门信息
|
* unMatchUsers, // 组织下无部门人员
|
* handleFinishForm, // 新增组织 or 修改组织
|
*/
|
const AddOrEditDept = ({ isAddOrEditDept, deptActive, unMatchUsers, handleFinishForm }) => {
|
const [form] = Form.useForm();
|
|
const [submitType, setSubmitType] = useState('1');
|
|
// 表单信息
|
const [formData, setFormData] = useState({});
|
|
// select下拉框选择时
|
function handleValuesChange(type, values) {
|
let obj = {};
|
obj[type] = values;
|
setFormData({ ...formData, ...obj });
|
}
|
|
// 重置
|
function handleReset() {
|
let obj = Object.assign({}, deptActive);
|
if (isAddOrEditDept === 'changeDept') {
|
obj.matchUsersId = deptActive.matchUsers?.map((x) => x.id) || [];
|
form.setFieldsValue({ ...obj });
|
} else {
|
form.resetFields();
|
}
|
setFormData(obj);
|
}
|
|
// 提交表单
|
function handleSubmit(type) {
|
setSubmitType(type);
|
form.submit();
|
}
|
|
// useEffect(() => {
|
// handleReset();
|
// }, [isAddOrEditDept]);
|
|
return (
|
<div style={{ display: !isAddOrEditDept ? 'none' : '' }}>
|
<div className="organization-edit">
|
<div className="organization-edit-bg">
|
<Form
|
layout="vertical"
|
form={form}
|
onFinish={(values) => {
|
let formDataCopy = formData;
|
formDataCopy.canFieldName = formDataCopy.canFieldOption?.map((x) => x.children)?.toString() || formDataCopy.canFieldName;
|
formDataCopy.goodFieldName = formDataCopy.goodFieldOption?.map((x) => x.children)?.toString() || formDataCopy.goodFieldName;
|
values.matchUsers =
|
values.matchUsersId?.map((x) => {
|
return { id: x };
|
}) || [];
|
let submitData = { ...formDataCopy, ...values };
|
delete submitData.matchUsersId;
|
handleFinishForm(submitType, submitData, form);
|
}}
|
onFinishFailed={({ values, errorFields }) => $$.info({ type: 'error', content: errorFields[0].errors })}
|
>
|
<Row gutter={[24, 16]}>
|
<Col span={12}>
|
<Form.Item label="部门名称" name="name" required rules={[{ required: true }]}>
|
<Input placeholder="请输入" allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="部门描述" name="des">
|
<Input placeholder="请输入" allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="部门人员" name="matchUsersId">
|
<Select
|
mode="multiple"
|
placeholder="请选择(可多选)"
|
filterOption={(inputValue, option) => (option.children.indexOf(inputValue) !== -1 ? true : false)}
|
allowClear
|
>
|
{unMatchUsers.concat(deptActive.matchUsers || []).map((x, t) => {
|
return <Option key={x.id}>{x.trueName}</Option>;
|
})}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item>
|
<Button type="primary" onClick={() => handleSubmit('1')} className="public-buttonMargin">
|
{isAddOrEditDept === 'changeDept' ? '保存' : '提交'}
|
</Button>
|
{isAddOrEditDept !== 'changeDept' ? (
|
<Button onClick={() => handleSubmit('2')} className="public-buttonMargin">
|
提交并继续
|
</Button>
|
) : null}
|
<Button onClick={handleReset}>重置</Button>
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
AddOrEditDept.propTypes = {
|
isAddOrEdit: PropTypes.any,
|
deptActive: PropTypes.object,
|
unMatchUsers: PropTypes.array,
|
handleFinishForm: PropTypes.func,
|
};
|
|
export default AddOrEditDept;
|
