/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-24 10:16:27
|
* @LastEditTime: 2022-11-10 16:52:34
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 新增 or 修改组织架构
|
*/
|
import React, { useState, useEffect } from 'react';
|
import PropTypes from 'prop-types';
|
import { Button, Cascader, Input, Form, Row, Col, Select } from 'antd';
|
import * as $$ from '../../../utils/utility';
|
|
const { Option } = Select;
|
/*
|
* isAddOrEdit, // 是否显示该页面
|
* type, // 'change':'修改组织';'upAdd':'新增上级组织';'downAdd':'新增下级组织'
|
* organizationActive, // 当前组织信息
|
* handleClosePage, // 关闭页面返回上级页面
|
* handleFinishForm, // 新增组织 or 修改组织
|
*/
|
const AddOrEditOrganization = ({ isAddOrEdit, type, organizationActive, handleFinishForm }) => {
|
const [form] = Form.useForm();
|
|
const [submitType, setSubmitType] = useState();
|
|
const [formData, setFormData] = useState({});
|
|
// 地区Option
|
const location = $$.locationOption();
|
|
function handleValuesChange(type, values) {
|
let obj = {};
|
obj[type] = values;
|
setFormData({ ...formData, ...obj });
|
}
|
|
// 重置
|
function handleReset() {
|
let obj = { findStatus: '1', ...organizationActive };
|
if (type === 'change') {
|
['name', 'dutyName', 'dutyMobile', 'addr'].forEach((x) => {
|
obj[x] = organizationActive[x];
|
});
|
obj.locationSelect = [];
|
obj.locationName = [];
|
[
|
['prov', 'provName'],
|
['city', 'cityName'],
|
['area', 'areaName'],
|
['road', 'roadName'],
|
['village', 'villageName'],
|
].forEach((x) => {
|
if (organizationActive[x[0]]) {
|
obj.locationSelect.push(organizationActive[x[0]]);
|
obj.locationName.push({ label: organizationActive[x[1]] });
|
}
|
});
|
form.setFieldsValue(obj);
|
} else {
|
form.resetFields();
|
form.setFieldsValue({ findStatus: '1' });
|
}
|
setFormData(obj);
|
}
|
|
// 提交表单
|
function handleSubmit(type) {
|
setSubmitType(type);
|
form.submit();
|
}
|
|
useEffect(() => {
|
handleReset();
|
}, [isAddOrEdit]);
|
|
return (
|
<div style={{ display: !isAddOrEdit ? 'none' : '' }}>
|
<div className="organization-edit">
|
<div className="organization-edit-bg">
|
<Form
|
layout="vertical"
|
form={form}
|
className="personnel-add-form"
|
onFinish={(values) => {
|
let formDataCopy = formData;
|
formDataCopy.locationName = formDataCopy.locationName?.map((x) => x.label) || [];
|
['prov', 'city', 'area', 'road', 'village'].forEach((x, t) => {
|
formDataCopy[x] = values.locationSelect[t];
|
});
|
['provName', 'cityName', 'areaName', 'roadName', 'villageName'].forEach((x, t) => {
|
formDataCopy[x] = formDataCopy.locationName[t];
|
});
|
let submitData = { ...formDataCopy, ...values };
|
delete submitData.locationSelect;
|
handleFinishForm(submitType, submitData, form);
|
}}
|
onFinishFailed={({ values, errorFields }) => $$.info({ type: 'error', content: errorFields[0].errors })}
|
>
|
<Row gutter={[24, 16]}>
|
<Col span={8}>
|
<Form.Item label="组织名称" name="name" required rules={[{ required: true }]}>
|
<Input placeholder="请输入" allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="组织负责人" name="dutyName">
|
<Input placeholder="请输入" allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="手机号码" name="dutyMobile" rules={[{ pattern: $$.mobileRegExp, message: '请输入正确的手机号码' }]}>
|
<Input placeholder="请输入" allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="地域" help="该值对于分流调度起重要作用" name="locationSelect" required rules={[{ required: true }]}>
|
<Cascader
|
placeholder="省/市/区(县)/街道/社区"
|
options={location}
|
allowClear
|
changeOnSelect
|
onChange={(value, option) => handleValuesChange('locationName', option)}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={16}>
|
<Form.Item label="详细地址" name="addr" rules={[{ required: true, message: '请输入详细地址' }]}>
|
<Input placeholder="详细地址" allowClear />
|
</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={() => handleSubmit('1')} className="public-buttonMargin">
|
{type === 'change' ? '保存' : '提交'}
|
</Button>
|
{type !== 'change' && type !== 'upAdd' ? (
|
<Button onClick={() => handleSubmit('2')} className="public-buttonMargin">
|
提交并继续
|
</Button>
|
) : null}
|
<Button onClick={handleReset}>重置</Button>
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
AddOrEditOrganization.propTypes = {
|
isAddOrEdit: PropTypes.any,
|
type: PropTypes.string,
|
organizationActive: PropTypes.object,
|
handleFinishForm: PropTypes.func,
|
};
|
|
export default AddOrEditOrganization;
|
