/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-03 16:44:26
|
* @LastEditTime: 2023-05-12 21:05:16
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 纠纷登记
|
*/
|
import React, { useState, useEffect } from 'react';
|
import * as $$ from '../../../utils/utility';
|
import { Form, Row, Col, Input, Select, Cascader, Button, DatePicker, Typography, Space } from 'antd';
|
import { CheckCircleFilled, PhoneOutlined, UserAddOutlined } from '@ant-design/icons';
|
import { useNavigate } from 'react-router-dom';
|
import Page from '../../../components/Page/index';
|
import sopStatus from '../../../status/sopStatus';
|
import WantUserTag from '../../../components/WantUserTag';
|
import SelectObjModal from '../../../components/SelectObjModal';
|
import ProgressStep from '../../../components/ProgressStep';
|
|
const { Option } = Select;
|
|
const { TextArea } = Input;
|
|
// 登记纠纷
|
function registerApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/caseRegister', type: 'post', data: submitData, service: 'mediate' });
|
}
|
|
const Register = () => {
|
const [form] = Form.useForm();
|
|
const navigate = useNavigate();
|
|
// 区别申请人and被申请人的名称等字段显示
|
const [formLabel, setFormLabel] = useState({
|
plaintPerClass: { title: '姓名', uint: '人' },
|
defendPerClass: { title: '姓名', uint: '人' },
|
});
|
|
// 是否登记成功, '1'：草稿案件 '2'：正式案件
|
const [isRegisterSuccess, setIsRegisterSuccess] = useState(false);
|
|
// form数据
|
const [formData, setFormData] = useState({});
|
|
// caseId
|
const [caseId, setCaseId] = useState('');
|
|
// 地区Option
|
const location = $$.locationOption();
|
|
const [selectModal, setSelectModal] = useState(false);
|
|
// 根据当事人类型判断姓名，数量的字段。
|
function handleValuesChange(changedValues) {
|
let label = Object.entries(changedValues)[0];
|
// 申请人 or 被申请人
|
if (label[0] === 'plaintPerClass' || label[0] === 'defendPerClass') {
|
setFormLabel({
|
...formLabel,
|
[label[0]]: {
|
title: label[1] === $$.options.personClass[0].value ? '姓名' : label[1] === $$.options.personClass[1].value ? '企业名称' : '机构名称',
|
uint: label[1] === $$.options.personClass[0].value ? '人' : '家',
|
},
|
});
|
}
|
}
|
|
// select获取名称
|
function handleChangeInput(type, values) {
|
if (type === 'location') {
|
let valuesCopy = !values ? {} : values;
|
[
|
{ value: 'prov', name: 'provName' },
|
{ value: 'city', name: 'cityName' },
|
{ value: 'area', name: 'areaName' },
|
{ value: 'road', name: 'roadName' },
|
{ value: 'village', name: 'villageName' },
|
].forEach((x, t) => {
|
formData[x.value] = valuesCopy[t]?.value || '';
|
formData[x.name] = valuesCopy[t]?.label || '';
|
});
|
} else {
|
formData[type] = values;
|
if (type === 'caseTypeName') {
|
sopStatus.handleSetType(form.getFieldValue('caseType'));
|
}
|
}
|
setFormData({ ...formData });
|
}
|
|
// 重置
|
function handleReset() {
|
let UserLocation = $$.getLocal('customerSystemUser')?.ctUserAddrDTO;
|
let location = [];
|
if (UserLocation?.prov) {
|
['prov', 'city', 'area', 'road', 'village'].forEach((x) => {
|
if (UserLocation[x]) location.push(UserLocation[x]);
|
});
|
}
|
form.resetFields();
|
form.setFieldsValue({
|
acceptTime: $$.myMoment(),
|
plaintPerClass: $$.options.personClass[0].value,
|
defendPerClass: $$.options.personClass[0].value,
|
mediType: $$.options.mediateType[0].value,
|
location,
|
});
|
setFormData({
|
inputStatus: '2', // 正式案件
|
plaintPerClassName: $$.options.personClass[0].label,
|
defendPerClassName: $$.options.personClass[0].label,
|
mediateUnitType: '2',
|
mediTypeName: $$.options.mediateType[0].label,
|
...UserLocation,
|
});
|
setFormLabel({ plaintPerClass: { title: '姓名', uint: '人' }, defendPerClass: { title: '姓名', uint: '人' } });
|
setIsRegisterSuccess(false);
|
}
|
|
// 提交表单
|
function handleFinishForm(values) {
|
let submitData = { id: $$.getBusinessId(), ...formData, ...values };
|
submitData.acceptTime = $$.timeFormat(submitData.acceptTime, 'isValue');
|
register(submitData);
|
}
|
|
// 纠纷登记（保存表单数据）
|
async function register(submitData) {
|
global.setSpinning(true);
|
const res = await registerApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setCaseId(res.data || '');
|
setIsRegisterSuccess(submitData.inputStatus);
|
}
|
}
|
|
useEffect(() => {
|
if (form) {
|
handleReset();
|
}
|
return () => {
|
sopStatus.handleVisible(false);
|
};
|
}, [form]);
|
|
return (
|
<Page
|
pageHead={{
|
title: '快速登记',
|
subtitle: (
|
<span>
|
适合对调解案件的临时登记或马上启动调解的工作场景，如需登记完整案件信息，建议使用
|
<Typography.Link type='line' onClick={() => navigate('/mediate/casePerfection')}>
|
常规登记
|
</Typography.Link>
|
</span>
|
),
|
sopVisible: true,
|
}}
|
>
|
{!!isRegisterSuccess ? (
|
// 登记成功
|
<div className="register-over" >
|
<div className="register-over-success">
|
<CheckCircleFilled className="register-over-icon" />
|
<div className="h6">{isRegisterSuccess === '1' ? '草稿保存' : '提交'}成功</div>
|
<div className="register-over-subtitle">
|
{isRegisterSuccess === '1' ? (
|
'可在「草稿箱」中查看和修改保存成功的案件信息'
|
) : (
|
<>
|
案件已提交，可通过<Typography.Link type='line' onClick={() => navigate('/mediate/mediateAll')}>调解总览</Typography.Link>进行查看
|
</>
|
)}
|
</div>
|
</div>
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
<div className="caseDetail-cardMain" style={{}}>
|
<h5>进度</h5>
|
<ProgressStep caseId={caseId} pageFrom="dispatchRecord" />
|
</div>
|
</div>
|
{/* <Space size="large">
|
<Button type="primary" onClick={() => navigate(isRegisterSuccess === '1' ? '/mediate/registerList' : '/mediate/mediateAll')}>
|
{isRegisterSuccess === '1' ? '草稿箱' : '调解总览'}
|
</Button>
|
<Button onClick={() => navigate('/mediate/workbench')}>工作台</Button>
|
</Space> */}
|
</div>
|
) : (
|
// 登记form
|
<div className="register">
|
<h4>基本信息</h4>
|
<div className="register-form">
|
<Form
|
colon={false}
|
form={form}
|
onValuesChange={handleValuesChange}
|
onFinish={(values) => handleFinishForm(values)}
|
onFinishFailed={({ errorFields }) => $$.info({ type: 'warning', content: errorFields[0].errors })}
|
requiredMark={false}
|
>
|
<Row gutter={[16, 16]}>
|
<Col span={8}>
|
<Form.Item label={<span className="register-label">纠纷发生时间</span>} name="acceptTime">
|
<DatePicker allowClear={false} style={{ width: '100%' }} placeholder="纠纷发生时间" />
|
</Form.Item>
|
</Col>
|
<Col span={8} />
|
<Col span={8} />
|
<Col span={8}>
|
<Form.Item
|
label={<span className="register-label">纠纷发生地</span>}
|
name="location"
|
rules={[{ required: true, message: '请输入纠纷发生地' }]}
|
>
|
<Cascader
|
placeholder="纠纷发生地"
|
options={location}
|
allowClear
|
onChange={(_, selectedOptions) => handleChangeInput('location', selectedOptions)}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={16}>
|
<Form.Item name="addr">
|
<Input placeholder="纠纷发生地详址（如所在小区名称、门牌号等）" allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
label={<span className="register-label">纠纷类型</span>}
|
name="caseType"
|
rules={[{ required: true, message: '请输入纠纷类型' }]}
|
>
|
<Select
|
placeholder="纠纷类型"
|
showSearch
|
filterOption={(inputValue, option) => option.children.indexOf(inputValue) !== -1}
|
onChange={(_, option) => handleChangeInput('caseTypeName', option.children)}
|
>
|
{$$.caseOptions.caseCause.map((x, t) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8} />
|
<Col span={8} />
|
<Col span={8}>
|
<Form.Item label={<span className="register-label">调解类型</span>} name="mediType" rules={[{ required: true }]}>
|
<Select placeholder="请选择" onChange={(_, option) => handleChangeInput('mediTypeName', option.children)}>
|
{$$.options.mediateType.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8} />
|
<Col span={8} />
|
<Col span={8}>
|
<Form.Item label={<span className="register-label">申请人</span>} name="plaintPerClass" rules={[{ required: true }]}>
|
<Select placeholder="申请人类型" onChange={(_, option) => handleChangeInput('plaintPerClassName', option.children)}>
|
{$$.options.personClass.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item name="plaintTrueName" rules={[{ required: true, message: `请输入申请人${formLabel.plaintPerClass.title}` }]}>
|
<Input className="register-name" placeholder={`申请人${formLabel.plaintPerClass.title}`} allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
name="plaintMobile"
|
required={true}
|
rules={[{ required: true, pattern: $$.mobileRegExp, message: '请输入正确的手机号码' }]}
|
>
|
<Input placeholder="申请人联系电话" allowClear prefix={<PhoneOutlined style={{ transform: 'rotateY(180deg)' }} />} />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label={<span className="register-label">被申请人</span>} name="defendPerClass" rules={[{ required: true }]}>
|
<Select placeholder="被申请人类型" onChange={(_, option) => handleChangeInput('defendPerClassName', option.children)}>
|
{$$.options.personClass.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item name="defendTrueName" rules={[{ required: true, message: `请输入被申请人${formLabel.defendPerClass.title}` }]}>
|
<Input className="register-name" placeholder={`被申请人${formLabel.defendPerClass.title}`} allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item name="defendMobile" rules={[{ pattern: $$.mobileRegExp, message: '请输入正确的手机号码' }]}>
|
<Input placeholder="被申请人联系电话" allowClear prefix={<PhoneOutlined style={{ transform: 'rotateY(180deg)' }} />} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<h4>纠纷描述</h4>
|
<Form.Item name="caseDes" rules={[{ required: true, message: '请输入纠纷描述' }]}>
|
<TextArea rows={4} placeholder="纠纷发生的起因、经过和结果..." allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<h4>调解请求</h4>
|
<Form.Item name="caseClaim" rules={[{ required: true, message: '请输入调解请求' }]}>
|
<TextArea rows={4} placeholder="建议分条描述，以方便调解员开展调解工作。如请求1...请求2..." allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<h4>意向调解员</h4>
|
<div className="register-subtitle">优先将案件分配至意向调解员名下，否则将按照默认规则分配调解员。</div>
|
{!!formData.wantUserId ? (
|
<WantUserTag
|
name={formData.wantUserName}
|
onClose={() => setFormData({ ...formData, wantUserId: undefined, wantUserName: undefined })}
|
/>
|
) : (
|
<Button type="dashed" icon={<UserAddOutlined />} onClick={() => setSelectModal(true)}>
|
选择调解员
|
</Button>
|
)}
|
</Col>
|
</Row>
|
</Form>
|
</div>
|
<Space size="large" className="register-submit">
|
<Button type="primary" onClick={() => form.submit()}>
|
提交调解
|
</Button>
|
<Button
|
type="primary"
|
ghost
|
onClick={() =>
|
$$.modalInfo({
|
title: '确定将案件保存为草稿信息吗？',
|
content: '不生成正式案号，仅存在于「登记列表中」，需转为正式案件后才可以进行调解',
|
okText: '保存草稿',
|
cancelText: '我再想想',
|
onOk: () => handleFinishForm({ ...form.getFieldsValue(), inputStatus: '1' }),
|
})
|
}
|
>
|
保存草稿
|
</Button>
|
<Button onClick={() => navigate(-1)}>返回</Button>
|
</Space>
|
</div>
|
)}
|
{/* 选择调解员modal */}
|
<SelectObjModal
|
visible={selectModal}
|
checkKeys={formData.wantUserId ? [{ label: formData.wantUserName, value: formData.wantUserId }] : undefined}
|
onOk={(value) => {
|
setSelectModal(false);
|
setFormData({ ...formData, wantUserId: value.keys[0], wantUserName: value.items[0].name });
|
}}
|
onClose={() => setSelectModal(false)}
|
/>
|
</Page>
|
);
|
};
|
|
export default Register;
|
