/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2023-12-12 10:01:29
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @LastEditTime: 2024-08-19 15:32:02
|
* @FilePath: \hugeDyh2.0\customerSystem\src\components\disputeRegistration\Form1.jsx
|
* @Description: 调解总览修改表单
|
*/
|
|
import React, { useEffect, useState, useRef, useImperativeHandle, useMemo, useHistory } from 'react';
|
import { useNavigate } from 'react-router-dom';
|
import PropTypes from 'prop-types';
|
import { Col, Form, Row, Input, Select, Cascader, Button, InputNumber, DatePicker, Space, Tooltip } from 'antd';
|
import { PlusCircleOutlined, CloudUploadOutlined, UserAddOutlined, ExclamationCircleFilled, FolderFilled, DownOutlined } from '@ant-design/icons';
|
import {
|
casePerfection_caseType,
|
casePerfection_material,
|
casePerfection_wantUser,
|
casePerfection_shen,
|
casePerfection_bei,
|
} from '../../../assets/images/icon';
|
|
import { caseDetail, caseDetailResult } from '../../../assets/images';
|
import * as $$ from '../../../utils/utility';
|
import sopStatus from '../../../status/sopStatus';
|
import MyDrawer from '../../MyDrawer';
|
import PartyEdit from '../../PartyEdit';
|
import PartyCheck from '../../PartyCheck';
|
import MaterialEdit from './MaterialEdit';
|
import MyUpload from '../../MyUpload';
|
import WantUserTag from '../../WantUserTag';
|
import ResultFeedback from '../../../views/mediationWindow/component/ResultFeedback';
|
import ResultFeedback1 from '../../../views/mediationWindow/component/ResultFeedback1';
|
import MediationPower from '../../../views/caseDetail/components/MediationPower';
|
import Dispatch1 from '../../../views/caseDetail/components/Dispatch1';
|
|
|
|
const { Option } = Select;
|
|
const { TextArea, Search } = Input;
|
|
|
/**
|
* isMediationWindow, // 是否是调解视窗调用
|
* caseId, // 有案件id则修改，无则新增
|
* data, // 案件数据
|
* materialTabs, // 材料tab
|
* materialActive, // 材料tab选中项
|
* wantUser, // 调解员
|
* handleSubmit, // 表单提交
|
* handleChangeTab, // 切换材料tabs
|
* handleOpenWantUser, // 开启选择调解员modal
|
* handleCloseWantUser, // 删除调解员
|
* handleDeleteFolderCase, // 移除系列案中的案件
|
* handleSubmitFolderCase, // 系列案提交调解
|
*/
|
// 区分系列案 or 非系列案
|
const CasePerfectionForm1 = ({
|
isMediationWindow,
|
caseId,
|
dispId,
|
data,
|
materialTabs,
|
materialActive,
|
wantUser,
|
handleSubmit,
|
handleChangeTab,
|
handleOpenWantUser,
|
handleCloseWantUser,
|
handleDeleteFolderCase,
|
handleSubmitFolderCase,
|
showResult,
|
showResultButton,
|
showMediationPower,
|
}) => {
|
const navigator = useNavigate();
|
|
// 1:单个非系列案, 2:系列案
|
const caseType = Number(data.serieStatus || '');
|
|
// 案件数据
|
let caseData = data.content || (caseType === 2 ? [] : {});
|
|
const formDomRef = useRef();
|
// 系列案折叠
|
const [show, setShow] = useState([]);
|
|
// 调解结果
|
|
const [result, setResult] = useState({})
|
|
|
|
|
// 系列案展开折叠
|
function handleCaseShow(id) {
|
let index = show.indexOf(id);
|
if (index !== -1) {
|
show.splice(index, 1);
|
setShow([...show]);
|
} else {
|
setShow([...show, id]);
|
}
|
}
|
|
// FormDom提交数据
|
function handleSubmitFormData(submitData, caseIndex) {
|
handleSubmit(submitData, caseType, caseIndex);
|
}
|
|
//全局修改
|
function globalUpdateApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/globalUpdate', type: 'post', data: submitData, service: 'mediate' });
|
}
|
|
|
|
|
// 提交调解；非系列案时则会执行handleSubmitFormData进行提交操作
|
function handleSubmitCase() {
|
if (caseType === 1) formDomRef.current.form.submit();
|
if (caseType === 2) handleSubmitFolderCase();
|
}
|
|
// changeTime:用于更新系列案展示的申请人和被申请人数量触发useEffect
|
const casePersons = useMemo(() => {
|
if (caseType === 2) {
|
let obj = {};
|
caseData.forEach((x) => {
|
obj[x.id] = {
|
plaintiffs: x.plaintiffList?.map((item) => item.trueName).toString(),
|
defendants: x.defendantList?.map((item) => item.trueName).toString(),
|
};
|
});
|
// 名称去重计算当事人人数
|
let plaintiffsArr = [],
|
defendantsArr = [];
|
for (let key in obj) {
|
plaintiffsArr = plaintiffsArr.concat(obj[key].plaintiffs);
|
defendantsArr = defendantsArr.concat(obj[key].defendants);
|
}
|
return {
|
...obj,
|
plaintiffList: Array.from(new Set(plaintiffsArr))?.length || 0,
|
defendantList: Array.from(new Set(defendantsArr))?.length || 0,
|
};
|
}
|
}, [caseType, data.changeTime]);
|
|
// 系列案搜索
|
function handleSearchCase(value) {
|
if (!value) {
|
setShow([]);
|
return;
|
}
|
let obj = { ...casePersons };
|
delete obj.plaintiffList;
|
delete obj.defendantList;
|
let arr = [];
|
for (let key in obj) {
|
if (obj[key].plaintiffs?.indexOf(value) !== -1 || obj[key].defendants?.indexOf(value) !== -1) {
|
arr.push(key);
|
}
|
}
|
setShow(arr);
|
}
|
|
|
return (
|
<>
|
<div style={{ fontSize: '14px', margin: '0px 49px', fontWeight: '600', padding: '16px 0px', borderBottom: '1px solid rgba(0, 0, 0, 0.1)', display: 'flex', gap: '8px' }}>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '4px', borderRadius: '5PX' }}> </div>
|
<div>{caseData.plaintiffs}与{caseData.defendants}{caseData.caseTypeName}调解案件{caseData.caseNo}</div>
|
</div>
|
{caseType === 1 && caseData.inputStatus === '1' && (
|
<div className="casePerfection-warning">
|
<ExclamationCircleFilled style={{ color: '#faad14', marginRight: '8px' }} />
|
<div>案件当前状态为草稿，如需进行办转、调解等工作，请点击「提交调解」按钮改变案件状态</div>
|
</div>
|
)}
|
<div className={`casePerfection ${caseType === 2 ? 'casePerfection-folderBg' : ''}`}>
|
{caseType === 1 ? (
|
// 非系列案展示
|
<FormDom
|
caseType={caseType}
|
formDomRef={formDomRef}
|
data={caseData}
|
materialTabs={materialTabs}
|
materialActive={materialActive}
|
handleSubmit={handleSubmitFormData}
|
handleChangeTab={handleChangeTab}
|
/>
|
) : caseType === 2 ? (
|
// 系列案展示
|
<>
|
<div className="casePerfection-folderHeader">
|
<div className="casePerfection-folderHeader-title">
|
<FolderFilled style={{ fontSize: '40px', color: '#ffcf5c', marginRight: '8px' }} />
|
<div>
|
<h5 style={{ marginBottom: '4px' }}>系列案</h5>
|
<div>
|
<span>申请人数：{casePersons.plaintiffList}</span>
|
<span className="public-rightBorder">被申请人数：{casePersons.defendantList}</span>
|
</div>
|
</div>
|
</div>
|
<Search placeholder="查询申请人、被申请人" style={{ width: 232 }} onSearch={handleSearchCase} />
|
</div>
|
<div className="casePerfection-folderMain">
|
{caseData.map((x, t) => {
|
return (
|
<div key={x.id}>
|
<div className="casePerfection-folderMain-item">
|
<div className="casePerfection-folderMain-title">
|
<div>系列案-{t < 10 ? `0${t + 1}` : t + 1}</div>
|
<div className="public-rightBorder">申请人：{casePersons[x.id]?.plaintiffs}</div>
|
<div className="public-rightBorder">被申请人：{casePersons[x.id]?.defendants}</div>
|
</div>
|
<div onClick={() => handleCaseShow(x.id)} className={show.includes(x.id) ? 'casePerfection-folderMain-show' : 'public-a'}>
|
<span style={{ marginRight: '4px' }}>{show.includes(x.id) ? '折叠' : '展开'}</span>
|
<DownOutlined style={{ fontSize: '12px' }} className={show.includes(x.id) ? 'casePerfection-folderMain-rotate' : ''} />
|
</div>
|
</div>
|
{show.includes(x.id) ? (
|
<div className="casePerfection-folderMain-content">
|
<FormDom
|
caseType={caseType}
|
formDomRef={null}
|
data={x}
|
materialTabs={materialTabs}
|
materialActive={materialActive}
|
handleSubmit={(submitData) => handleSubmitFormData(submitData, t)}
|
handleChangeTab={handleChangeTab}
|
caseNum={caseData.length} // 系列案包含数量，当等于两个时不可移除
|
handleDeleteFolderCase={() => handleDeleteFolderCase(x.id, t)}
|
/>
|
</div>
|
) : null}
|
</div>
|
);
|
})}
|
</div>
|
</>
|
) : null}
|
{/* 调解力量 */}
|
{showMediationPower &&
|
<div style={{ marginLeft: '24px', paddingRight: '24px' }}>
|
<h4>
|
<img className="casePerfection-titleIcon" src={caseDetail} alt="" />
|
<span>调解力量</span>
|
</h4>
|
{/* <MediationPower caseId={caseId} /> */}
|
|
<Dispatch1 onData={caseData} outData={(newData) => { setResult({ ...result, ...newData }) }} />
|
<div className="casePerfection-divider" />
|
</div>
|
}
|
{/* 调解结果 */}
|
|
|
{showResult &&
|
<div style={{ marginLeft: '24px', marginTop: '2px' }}>
|
<h4>
|
<img className="casePerfection-titleIcon" src={caseDetailResult} alt="" />
|
<span>调解结果</span>
|
</h4>
|
<ResultFeedback1 caseId={caseId} caseData={caseData} handleChange={(newData) => { setResult({ ...result, ...newData }) }} />
|
</div>
|
}
|
|
{/* 意向调解员 */}
|
{!isMediationWindow && (
|
<div className={caseType === 1 ? 'casePerfection-bottom' : 'casePerfection-bottom2'}>
|
<h4>
|
<img className="casePerfection-titleIcon" src={casePerfection_wantUser} alt="" />
|
<span>意向调解员</span>
|
</h4>
|
<div className="register-subtitle">优先将案件分配至意向调解员名下，否则将按照默认规则分配调解员。</div>
|
<div>
|
{wantUser.wantUserId ? (
|
<WantUserTag name={wantUser.wantUserName} onClose={handleCloseWantUser} />
|
) : (
|
<Button type="dashed" icon={<UserAddOutlined />} onClick={handleOpenWantUser}>
|
选择调解员
|
</Button>
|
)}
|
</div>
|
</div>
|
)}
|
{/* 提交调解按钮 */}
|
{!showResultButton &&
|
<Space size="large" className={caseType === 1 ? 'casePerfection-submit' : ''}>
|
<Button type="primary" onClick={handleSubmitCase}>
|
{isMediationWindow ? '提交修改' : '提交调解'}
|
</Button>
|
{caseType === 1 && (!caseId || (!!caseId && caseData.inputStatus === '1')) && (
|
<Button
|
type="primary"
|
ghost
|
onClick={() =>
|
handleSubmit({ ...formDomRef.current.formData, ...formDomRef.current.form.getFieldsValue(), inputStatus: '1' }, caseType)
|
}
|
>
|
{!caseId ? '保存草稿' : '保存信息'}
|
</Button>
|
)}
|
{!!caseId && !isMediationWindow && <Button onClick={() => navigator('/mediate/registerList?isBack=true', { replace: true })}>返回</Button>}
|
</Space>
|
|
}
|
|
{/* 全局修改提交按钮 */}
|
{showResultButton &&
|
<Space size="large" className={caseType === 1 ? 'casePerfection-submit' : ''}>
|
<Button type="primary"
|
onClick={() => {
|
$$.modalInfo({
|
title: '案件信息保存确认',
|
content: '确定保存本次对案件信息的修改吗?',
|
okText: '确定保存',
|
cancelText: '我再想想',
|
onOk: () => {
|
globalUpdateApi({
|
...formDomRef.current.formData,
|
...formDomRef.current.form.getFieldsValue(),
|
...result,
|
acceptTime: formDomRef.current.formData?.acceptTime ? $$.timeFormat(formDomRef.current.formData?.acceptTime) : '',
|
occurTime: formDomRef.current.formData?.occurTime ? $$.timeFormat(formDomRef.current.formData?.occurTime) : '',
|
});
|
window.history.go(-1);
|
},
|
});
|
}}
|
>
|
保存信息
|
</Button>
|
{!!caseId && <Button onClick={() => navigator('/mediate/mediateAll?isBack=true', { replace: true })}>返回</Button>}
|
</Space>
|
|
}
|
</div>
|
</>
|
);
|
};
|
|
// 表单组件
|
const FormDom = ({
|
caseType,
|
formDomRef,
|
data,
|
materialTabs,
|
materialActive,
|
handleSubmit,
|
handleChangeTab,
|
caseNum, // 系列案中案件的数量
|
handleDeleteFolderCase, // 移除系列案中的案件
|
}) => {
|
const [form] = Form.useForm();
|
|
const myUploadRef = useRef();
|
|
useImperativeHandle(formDomRef, () => {
|
return { form, formData };
|
});
|
|
|
|
// form数据
|
const [formData, setFormData] = useState({ plaintiffList: [], defendantList: [] });
|
|
// drawer是否可见, materialUpload:材料上传, applicant:申请人, respondent:被申请人
|
const [isDrawer, setIsDrawer] = useState();
|
|
// drawer数据, type:'add'新增, 'change'修改, 'check'查看
|
const [drawerData, setDrawerData] = useState({ type: 'change', formData: { agent: {} } });
|
|
// 点击新增, 查看, 修改案件材料、申请人信息、被申请人信息
|
function handleOpenDrawer({ type, editType, values, index }) {
|
setIsDrawer(type);
|
setDrawerData({ type: editType, formData: { id: $$.getBusinessId(), ...values } || {}, index });
|
}
|
|
function globalUpdateApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/globalUpdate', type: 'post', data: submitData, service: 'mediate' });
|
}
|
|
// 删除申请人、被申请人
|
function handleDeleteParty(type) {
|
let formDataCopy = JSON.parse(JSON.stringify(formData));
|
let typeName = type === 'applicant' ? 'plaintiffList' : 'defendantList';
|
formDataCopy[typeName].splice(drawerData.index, 1);
|
setFormData(formDataCopy);
|
setIsDrawer();
|
}
|
|
// 保存申请人、被申请人数据
|
function handleSetPartyData(values) {
|
let formDataCopy = JSON.parse(JSON.stringify(formData));
|
let typeName = isDrawer === 'applicant' ? 'plaintiffList' : 'defendantList';
|
let arr = formDataCopy[isDrawer === 'applicant' ? 'defendantList' : 'plaintiffList'],
|
arr2 = formDataCopy[typeName],
|
msg = '';
|
for (let t = 0; t < arr.length; t++) {
|
if (arr[t].certiNo === values.certiNo && !!$$.verifyEmpty(values.certiNo)) {
|
msg = '申请人与被申请人身份证信息不能相同';
|
break;
|
}
|
}
|
for (let t = 0; t < arr2.length; t++) {
|
if (arr2[t].certiNo === values.certiNo && !!$$.verifyEmpty(values.certiNo) && arr2[t].perClass === values.perClass && t !== drawerData.index) {
|
msg = (isDrawer === 'applicant' ? '' : '被') + '申请人不能重复';
|
break;
|
}
|
}
|
if (msg) {
|
$$.info({ type: 'warning', content: msg });
|
return;
|
}
|
if (drawerData.type === 'add') {
|
formDataCopy[typeName].push(values);
|
} else if (drawerData.type === 'change') {
|
formDataCopy[typeName][drawerData.index] = values;
|
}
|
setFormData(formDataCopy);
|
setIsDrawer('');
|
}
|
|
// 案件材料上传，上传后数据同步至formData中便于展示。
|
function setFormDataFiles(type, ownerType, ownerTypeName, file) {
|
let formDataCopy = JSON.parse(JSON.stringify(formData));
|
let fileInfoList = formDataCopy.fileInfoList || [];
|
if (type === 'success') {
|
let files = [];
|
file.forEach((y) => {
|
let { response } = y;
|
files.push(response ? response.data[0] : y);
|
});
|
if (fileInfoList.length === 0) {
|
fileInfoList.push({ ownerType, ownerTypeName, fileList: files });
|
} else {
|
let isHave = false;
|
fileInfoList.forEach((x) => {
|
if (x.ownerType === ownerType) {
|
isHave = true;
|
x.fileList = files;
|
}
|
});
|
if (!isHave) fileInfoList.push({ ownerType, ownerTypeName, fileList: files });
|
}
|
} else {
|
fileInfoList.forEach((x) => {
|
if (x.ownerType === ownerType) {
|
x.fileList.forEach((y, t) => {
|
if (y.id === file.id) x.fileList.splice(t, 1);
|
});
|
}
|
});
|
}
|
formDataCopy.fileInfoList = fileInfoList;
|
setFormData(formDataCopy);
|
}
|
|
// 删除材料
|
function handleDeleteFile(item) {
|
global.setSpinning(true);
|
myUploadRef.current.handleDeleteFiles(item.id, item.ownerType).then((res) => {
|
if (res) {
|
global.setSpinning(false);
|
setFormDataFiles('delete', item.ownerType, item.ownerTypeName, item);
|
}
|
});
|
}
|
|
// select获取名称
|
function handleChangeInput(type, values, form) {
|
if (type === 'location') {
|
[
|
{ 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] = values[t] ? values[t].value : '';
|
formData[x.name] = values[t] ? values[t].label : '';
|
});
|
} else {
|
formData[type] = values;
|
if (type === 'caseTypeName') sopStatus.handleSetType(form.getFieldValue('caseType'));
|
}
|
setFormData({ ...formData });
|
}
|
|
// 提交表单
|
function handleSubmitForm(values) {
|
if (formData.plaintiffList.length === 0) {
|
$$.info({ type: 'warning', content: '请添加申请人' });
|
return false;
|
}
|
if (formData.defendantList.length === 0) {
|
$$.info({ type: 'warning', content: '请添加被申请人' });
|
return false;
|
}
|
handleSubmit({ ...formData, ...values, inputStatus: caseType === 1 ? '2' : '1' });
|
}
|
// 初始化
|
useEffect(() => {
|
if (form) {
|
// 重置
|
let location = [];
|
let locationData = data.id ? data : $$.getLocal('customerSystemUser')?.ctUserAddrDTO;
|
if (locationData?.prov) {
|
[
|
{ value: 'prov', name: 'provName' },
|
{ value: 'city', name: 'cityName' },
|
{ value: 'area', name: 'areaName' },
|
{ value: 'road', name: 'roadName' },
|
{ value: 'village', name: 'villageName' },
|
].forEach((x) => {
|
if (locationData[x.value]) {
|
location.push(locationData[x.value]);
|
data[x.value] = locationData[x.value];
|
data[x.name] = locationData[x.name];
|
}
|
});
|
}
|
form.resetFields();
|
form.setFieldsValue({
|
canal: $$.options.caseCanal[0].value,
|
source: $$.options.caseSource[0].value,
|
mediType: $$.options.mediateType[0].value,
|
...data,
|
location,
|
acceptTime: data.acceptTime ? $$.myMoment(data.acceptTime) : $$.myMoment(),
|
occurTime: data.occurTime ? $$.myMoment(data.occurTime) : undefined,
|
});
|
setFormData({
|
id: $$.getBusinessId(),
|
mediateUnitType: '2',
|
canalName: $$.options.caseCanal[0].label,
|
sourceName: $$.options.caseSource[0].label,
|
mediTypeName: $$.options.mediateType[0].label,
|
plaintiffList: [],
|
defendantList: [],
|
...data,
|
});
|
// globalUpdateApi(formData);
|
}
|
}, [data.id]);
|
|
// 案件材料
|
const materialTabsArr = materialActive === 0 ? [...materialTabs].splice(1) : [materialTabs[materialActive]];
|
|
return (
|
<>
|
{/* 为了获取myUploadRef实例调用方法 */}
|
<div style={{ display: 'none' }}>
|
<MyUpload type="diy" myUploadRef={myUploadRef} />
|
</div>
|
<div style={{ backgroundColor: '#fff', borderRadius: '2px', padding: '0px 24px 0px 24px' }}>
|
{/* 纠纷信息 */}
|
<>
|
<h4>
|
<img className="casePerfection-titleIcon" src={casePerfection_caseType} alt="" />
|
<span>纠纷信息</span>
|
</h4>
|
<Form
|
form={form}
|
layout="vertical"
|
onFinish={(values) => handleSubmitForm(values)}
|
onFinishFailed={({ errorFields }) => $$.info({ type: 'warning', content: errorFields[0].errors })}
|
requiredMark={false}
|
>
|
<Row gutter={[48, 16]}>
|
<Col span={8}>
|
<Form.Item
|
label={
|
<span>
|
纠纷类型<span className="leftRequired">*</span>
|
</span>
|
}
|
name="caseType"
|
rules={[{ required: true, message: '请输入纠纷类型' }]}
|
>
|
<Select
|
placeholder="根据纠纷特点选择"
|
showSearch
|
filterOption={(inputValue, option) => option.children.indexOf(inputValue) !== -1}
|
onChange={(_, option) => handleChangeInput('caseTypeName', option.children, form)}
|
>
|
{$$.caseOptions.caseCause.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Space size="middle" className="casePerfection-space">
|
<Form.Item label="纠纷来源" name="source">
|
<Select placeholder="请选择" onChange={(_, option) => handleChangeInput('sourceName', option.children)}>
|
{$$.options.caseSource.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
<Form.Item label=" " name="canal">
|
<Select placeholder="请选择" onChange={(_, option) => handleChangeInput('canalName', option.children)}>
|
{$$.options.caseCanal.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Space>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="调解类型" 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}>
|
<Form.Item
|
label={
|
<span>
|
纠纷发生地<span className="leftRequired">*</span>
|
</span>
|
}
|
name="location"
|
rules={[{ required: true, message: '请输入纠纷发生地' }]}
|
>
|
<Cascader
|
placeholder="纠纷发生的街道或社区"
|
options={$$.locationOption()}
|
onChange={(_, selectedOptions) => handleChangeInput('location', selectedOptions)}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="纠纷发生地详址" name="addr">
|
<Input placeholder="纠纷发生地详址（如所在小区名称、门牌号等）" />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="纠纷发生时间" name="occurTime">
|
<DatePicker allowClear={false} style={{ width: '100%' }} />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="涉及金额" name="amount">
|
<InputNumber placeholder="纠纷涉及的金额" min={0} addonAfter={<span>万元</span>} />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Space size="middle" className="casePerfection-space">
|
<Form.Item label="涉及人数" name="peopleNum">
|
<InputNumber style={{ width: '100%' }} min={0} placeholder="纠纷涉及总人数" addonAfter={<span>人</span>} />
|
</Form.Item>
|
<Form.Item label=" " name="crowd">
|
<Select placeholder="涉及人群" onChange={(_, option) => handleChangeInput('crowdName', option.children)}>
|
{$$.options.crowd.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Space>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="受理时间" name="acceptTime">
|
<DatePicker allowClear={false} style={{ width: '100%' }} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
label={
|
<span>
|
纠纷描述<span className="leftRequired">*</span>
|
</span>
|
}
|
name="caseDes"
|
rules={[{ required: true, message: '请输入纠纷描述' }]}
|
>
|
<TextArea rows={4} placeholder="纠纷发生的起因、经过和结果..." />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
label={
|
<span>
|
调解请求<span className="leftRequired">*</span>
|
</span>
|
}
|
name="caseClaim"
|
rules={[{ required: true, message: '请输入调解请求' }]}
|
>
|
<TextArea rows={4} placeholder="建议分条描述，以方便调解员开展调解工作。如请求1...请求2..." />
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
</>
|
<div className="casePerfection-divider" />
|
{/* 申请人 or 被申请人 */}
|
<Row gutter={[24, 24]}>
|
{[
|
{ type: 'plaintiffList', submitType: 'applicant', icon: casePerfection_shen, name: '申请人', style: 'nameCard1' },
|
{ type: 'defendantList', submitType: 'respondent', icon: casePerfection_bei, name: '被申请人', style: 'nameCard2' },
|
].map((x, t) => {
|
return (
|
<Col span={12} key={t}>
|
<h4>
|
<img className="casePerfection-titleIcon" src={x.icon} alt="" />
|
<span>{x.name}</span>
|
</h4>
|
<div className="casePerfection-party">
|
{formData[x.type].length !== 0 ? (
|
<>
|
<div style={{ overflowY: formData[x.type].length > 2 ? 'scroll' : '', padding: '0 16px' }}>
|
<table className="casePerfection-party-table">
|
<thead className="casePerfection-party-table-thead">
|
<tr>
|
<th style={{ width: 38 }}></th>
|
<th style={{ width: '15.6%', minWidth: 80 }}>类型</th>
|
<th style={{ width: '27.5%' }}>姓名/企业或机构名称</th>
|
<th style={{ width: '19.5%', minWidth: 100 }}>联系电话</th>
|
<th style={{ width: '13.6%', minWidth: 70 }}>代理人</th>
|
<th style={{ width: '16.5%', minWidth: 85 }}>操作</th>
|
</tr>
|
</thead>
|
</table>
|
</div>
|
<div className="casePerfection-party-table2" style={{ overflowY: formData[x.type].length > 2 ? 'scroll' : '' }}>
|
<table className="casePerfection-party-table">
|
<tbody className="casePerfection-party-table-tbody">
|
{formData[x.type].map((item, index) => {
|
return (
|
<tr key={index}>
|
<td style={{ width: 38 }}>
|
<div className={`casePerfection-party-nameCard casePerfection-party-${x.style}`}>
|
{item.trueName.substr(0, 1)}
|
</div>
|
</td>
|
<td style={{ width: '15.6%', minWidth: 80 }}>
|
<Tooltip title={item.perClassName || '-'}>{item.perClassName || '-'}</Tooltip>
|
</td>
|
<td style={{ width: '27.5%' }}>
|
<Tooltip title={item.trueName || '-'}>{item.trueName || '-'}</Tooltip>
|
</td>
|
<td style={{ width: '19.5%', minWidth: 100 }}>
|
<Tooltip title={item.mobile || '-'}>{item.mobile || '-'}</Tooltip>
|
</td>
|
<td style={{ width: '13.6%', minWidth: 70 }}>
|
<Tooltip title={item.agent?.trueName || '-'}>{item.agent?.trueName || '-'}</Tooltip>
|
</td>
|
<td style={{ width: '16.5%', minWidth: 85 }}>
|
<Space>
|
<span
|
className="public-a"
|
onClick={() => handleOpenDrawer({ type: x.submitType, editType: 'check', values: item })}
|
>
|
查看
|
</span>
|
<span
|
className="public-a"
|
onClick={() => handleOpenDrawer({ type: x.submitType, editType: 'change', values: item, index })}
|
>
|
修改
|
</span>
|
</Space>
|
</td>
|
</tr>
|
);
|
})}
|
</tbody>
|
</table>
|
</div>
|
</>
|
) : (
|
$$.MyEmpty({ description: '尚未添加' + x.name + '信息' })
|
)}
|
<div
|
className="casePerfection-party-add casePerfection-party-add-border"
|
onClick={() => handleOpenDrawer({ type: x.submitType, editType: 'add' })}
|
>
|
<PlusCircleOutlined style={{ marginRight: '6px' }} />
|
<div>添加{x.name}</div>
|
</div>
|
</div>
|
</Col>
|
);
|
})}
|
</Row>
|
{/* 案件材料 */}
|
<div className="casePerfection-divider" />
|
<>
|
<h4>
|
<img className="casePerfection-titleIcon" src={casePerfection_material} alt="" />
|
<span>案件材料</span>
|
</h4>
|
<Space size="middle" style={{ marginBottom: '16px' }}>
|
{materialTabs.map((x, t) => (
|
<div
|
key={t}
|
className={`casePerfection-tab ${materialActive === t && 'casePerfection-tab-active'}`}
|
onClick={() => handleChangeTab(x, t)}
|
>
|
{x.label}
|
</div>
|
))}
|
</Space>
|
<Row gutter={[16, 16]}>
|
{materialTabs[materialActive]?.value !== 'all' && (
|
<Col span={24}>
|
<Button type="dashed" icon={<CloudUploadOutlined />} onClick={() => handleOpenDrawer({ type: 'materialUpload', editType: 'add' })}>
|
上传{materialTabs[materialActive]?.label}
|
</Button>
|
</Col>
|
)}
|
{formData.fileInfoList?.length !== 0 &&
|
materialTabsArr.map((x, t) => {
|
const fileList =
|
formData.fileInfoList?.filter(
|
(item) => item.ownerType === x.value && (x.value === materialTabs[materialActive].value || materialActive === 0)
|
)[0]?.fileList || [];
|
if (fileList.length === 0 && materialActive !== 0)
|
return (
|
<div style={{ width: '100%' }} key={t}>
|
{$$.MyEmpty({ description: '暂未上传材料' })}
|
</div>
|
);
|
if (fileList.length === 0 && materialActive === 0) return null;
|
return (
|
<Col span={24} key={t}>
|
<Row gutter={[16, 16]}>
|
{fileList.map((item, index) => {
|
return (
|
<Col span={6} key={index}>
|
<div className="casePerfection-file">
|
<img src={$$.fileType(item.cat)} alt="" className="casePerfection-file-img" />
|
<div className="casePerfection-file-main">
|
<div className="casePerfection-file-header">
|
<div
|
className={`casePerfection-file-tag casePerfection-file-${x.value === '22_00018-101' ? 'tag1' : x.value === '22_00018-102' ? 'tag2' : 'tag3'
|
}`}
|
>
|
{x.tag}
|
</div>
|
<div className="casePerfection-file-title">{item.name}</div>
|
</div>
|
<Space className="casePerfection-file-bottom" size={11}>
|
<span>1份材料</span>
|
<span className="public-a" onClick={() => myUploadRef.current.handleOpenFiles(item)}>
|
查看
|
</span>
|
{/* TODO:案件材料合并选项未有暂无显示多份材料的显示<span className="public-a">补充</span> */}
|
<span className="public-a" onClick={() => handleDeleteFile(item)}>
|
删除
|
</span>
|
</Space>
|
</div>
|
</div>
|
</Col>
|
);
|
})}
|
</Row>
|
</Col>
|
);
|
})}
|
{formData.fileInfoList?.length === 0 && <div style={{ width: '100%' }}>{$$.MyEmpty({ description: '暂未上传材料' })}</div>}
|
</Row>
|
</>
|
{caseType === 1 ? (
|
<div className="casePerfection-divider" />
|
) : (
|
<Space size="large" className="register-submit">
|
<Button className="public-mainBtn" onClick={() => form.submit()}>
|
保存信息
|
</Button>
|
{caseNum <= 2 ? null : <Button onClick={handleDeleteFolderCase}>从系列案中移除</Button>}
|
</Space>
|
)}
|
</div>
|
{/* 申请人，被申请人，案件材料 */}
|
<MyDrawer
|
visible={isDrawer}
|
style={{ position: 'absolute' }}
|
onClose={() => setIsDrawer()}
|
title={
|
isDrawer === 'materialUpload'
|
? '上传材料'
|
: `${drawerData.type === 'add' ? '添加' : drawerData.type === 'change' ? '修改' : '查看'}${isDrawer === 'applicant' ? '申请人' : '被申请人'
|
}`
|
}
|
mainStyle={{ display: 'flex', flexDirection: 'column' }}
|
>
|
|
{isDrawer === 'materialUpload' ? (
|
// 案件材料上传
|
<MaterialEdit
|
materialTabs={materialTabs}
|
materialActive={materialActive}
|
caseId={formData.id}
|
fileInfoList={formData.fileInfoList}
|
setFormDataFiles={setFormDataFiles}
|
handleChangeTab={handleChangeTab}
|
/>
|
) : drawerData.type === 'check' ? (
|
// 当事人查看
|
<PartyCheck data={drawerData.formData} />
|
) : (
|
// 当事人新增 or 修改 or 删除
|
<PartyEdit
|
partyType={isDrawer}
|
editType={drawerData.type}
|
data={drawerData.formData}
|
handleSetPartyData={handleSetPartyData}
|
handleDeleteParty={handleDeleteParty}
|
/>
|
)}
|
</MyDrawer>
|
</>
|
);
|
};
|
|
CasePerfectionForm1.propTypes = {
|
isMediationWindow: PropTypes.bool,
|
caseId: PropTypes.any,
|
data: PropTypes.object,
|
materialTabs: PropTypes.array,
|
materialActive: PropTypes.number,
|
wantUser: PropTypes.object,
|
handleSubmit: PropTypes.func,
|
handleChangeTab: PropTypes.func,
|
handleOpenWantUser: PropTypes.func,
|
handleCloseWantUser: PropTypes.func,
|
handleSubmitFolderCase: PropTypes.func,
|
};
|
|
export default CasePerfectionForm1;
|
