/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-16 15:28:00
|
* @LastEditTime: 2023-11-22 15:53:11
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 我的待办，我的已办进入的案件处理
|
* 注意：
|
* taskNode: F22_00019-1:受理审查, F22_00019-2:指派调解员, F22_00019-3:纠纷调解, F22_00019-4:结果确认, F22_00019-5:结案归档
|
*/
|
import React, { useEffect, useMemo, useState } from 'react';
|
import { useSearchParams, useNavigate } from 'react-router-dom';
|
import { Row, Col, Descriptions, Input, Button, Select, Typography, Space, DatePicker, InputNumber } from 'antd';
|
import {
|
ProfileOutlined,
|
ScheduleOutlined,
|
ExclamationCircleFilled,
|
UserAddOutlined,
|
AuditOutlined,
|
ContainerOutlined,
|
ShareAltOutlined,
|
CheckCircleFilled,
|
UsergroupAddOutlined,
|
} from '@ant-design/icons';
|
import * as $$ from '../../../utils/utility';
|
import NameCard from '../../../components/NameCard';
|
import FilesDrawer from '../../../components/FilesDrawer';
|
import MyUpload from '../../../components/MyUpload';
|
import MyModal from '../../../components/MyModal';
|
import SelectObjModal from '../../../components/SelectObjModal';
|
import ProgressStep from '../../../components/ProgressStep';
|
import WantUserTag from '../../../components/WantUserTag';
|
|
const { TextArea } = Input;
|
|
const { Option } = Select;
|
|
const { Text } = Typography;
|
|
// 获取任务信息
|
function getCaseHandleDataApi(taskId) {
|
return $$.ax.request({ url: 'caseTask/getTaskInfo?taskId=' + taskId, type: 'get', service: 'mediate' });
|
}
|
|
// 信息正常提交接口
|
function submitDataApi(data) {
|
return $$.ax.request({ url: 'caseTask/handleTask', type: 'post', data, service: 'mediate' });
|
}
|
|
// 退回上一处理人接口
|
function backDataApi(data) {
|
return $$.ax.request({ url: 'caseTask/backTask', type: 'post', data, service: 'mediate' });
|
}
|
|
const CaseHandle = ({ caseId, taskId, handleReturn, sleepTab }) => {
|
|
const navigate = useNavigate();
|
// 办转记录数据
|
const [contentData, setContentData] = useState({});
|
|
// 退回原因
|
const [backReasonData, setBackReasonData] = useState('');
|
|
// 退回modal显隐
|
const [returnModalVisible, setReturnModalVisible] = useState(false);
|
|
// 提交form
|
const [formData, setFormData] = useState({});
|
|
// 是否登记成功, 1.指派网格员 2.结案归档 成功 3.结案归档 返回上一层
|
const [isRegisterSuccess, setIsRegisterSuccess] = useState(false);
|
|
// 选择modal显隐
|
const [selectObjModal, setSelectObjModal] = useState({ visible: false, type: 'person', isCheckbox: false });
|
|
// 选择协助调解员modal显隐
|
const [selectHelpObjModal, setSelectHelpObjModal] = useState({ visible: false, type: 'person', isCheckbox: true });
|
|
function handleChangeInput(key, value) {
|
if (key === 'handlerUserId') {
|
formData.handlerUserId = value[0];
|
formData.handlerUserName = value[1];
|
} else if (key === 'assistIdList') {
|
formData.assistIdList = value;
|
// formData.mediResultName = value[1];
|
} else if (key === 'mediResult') {
|
formData.mediResult = value[0];
|
formData.mediResultName = value[1];
|
} else if (key === 'fulfilSitu') {
|
formData.fulfilSitu = value[0];
|
formData.fulfilSituName = value[1];
|
} else {
|
formData[key] = value;
|
}
|
setFormData({ ...formData });
|
}
|
|
// 正常提交处理
|
async function handleSubmit() {
|
let submitData = { ...formData, id: taskId, caseId };
|
if (contentData.taskNode !== 'F22_00019-5' && !submitData.handlerUserId) {
|
$$.info({ type: 'warning', content: contentData.taskNode === 'F22_00019-2' ? '请选择调解员' : '下一环节经办人' });
|
return;
|
}
|
if (contentData.taskNode === 'F22_00019-5' && submitData.mediResult === '22_00025-2') {
|
submitData = { ...submitData, fulfilSitu: undefined, fulfilSituName: undefined, mediateBookNo: undefined, mediateNo: undefined };
|
}
|
let arrText =
|
contentData.taskNodeType == '3'
|
? ['办结确认', '确定办结全部的纠纷调解过程吗？', '确定办结']
|
: ['提交确认', '确定提交当前案件的调解员设定安排吗？', '确定提交'];
|
if (contentData.taskNode !== 'F22_00019-5') {
|
submitData.assistIdList = submitData.assistIdList?.map(item => item.value);
|
}
|
$$.modalInfo({
|
title: arrText[0],
|
content: arrText[1],
|
okText: arrText[3],
|
onOk: async () => {
|
console.log('submitData', submitData);
|
global.setSpinning(true);
|
const res = await submitDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
contentData.taskNode === 'F22_00019-5' && setIsRegisterSuccess('2');
|
contentData.taskNode !== 'F22_00019-5' && setIsRegisterSuccess('1');
|
sleepTab();
|
// $$.infoSuccess({ content: '操作成功，页面即将跳转' });
|
// await $$.sleep();
|
// if (window.location.hash.indexOf('caseDetail') !== -1) {
|
// handleReturn();
|
// }
|
}
|
},
|
});
|
}
|
|
// 退回提交
|
async function handleBackReasonSubmit() {
|
$$.modalInfo({
|
title: '案件退回确认',
|
content: `退回后案件将流转至上一环节处理人重新处理，确定退回当前案件吗？`,
|
okText: '确定退回',
|
onOk: async () => {
|
global.setSpinning(true);
|
const res = await backDataApi({ id: taskId, caseId, handleContent: backReasonData });
|
global.setSpinning(false);
|
if (res.type) {
|
setIsRegisterSuccess('3');
|
setReturnModalVisible(false);
|
// $$.infoSuccess({ content: '任务已退回，页面即将后跳转' });
|
// await $$.sleep();
|
// if (window.location.hash.indexOf('caseDetail') !== -1) {
|
// handleReturn();
|
// }
|
}
|
|
},
|
});
|
}
|
|
//初始化
|
useEffect(() => {
|
// 获取数据
|
async function getCaseHandleData() {
|
global.setSpinning(true);
|
const res = await getCaseHandleDataApi(taskId);
|
global.setSpinning(false);
|
if (res.type) {
|
setContentData(res.data || {});
|
if (res.data?.taskNode === 'F22_00019-5') {
|
// 结案归档时设置默认值
|
setFormData((value) => {
|
return {
|
...value,
|
mediResult: res.data.mediResult,
|
mediResultName: res.data.mediResultName,
|
fulfilSitu: res.data.fulfilSitu || $$.options.fulfilSitu[1].value,
|
fulfilSituName: res.data.fulfilSituName || $$.options.fulfilSitu[1].label,
|
mediateBookNo: res.data.mediateBookNo,
|
mediateNo: res.data.mediateNo,
|
fileYear: $$.myTimeFormat(new Date(), 'YYYY'),
|
};
|
});
|
}
|
}
|
}
|
getCaseHandleData();
|
}, [taskId]);
|
|
// 任务处理form
|
const otherDom = (taskNode) => {
|
if (taskNode === 'F22_00019-2') {
|
// 指派调解员
|
return (
|
<>
|
<Col span={24}>
|
<h5>
|
调解员<span className="leftRequired">*</span>
|
</h5>
|
<div className="caseHandle-subtitle">只能选择一名调解员作为调解工作负责人，多名调解员协助时可通过分享「调解邀请码」来开展</div>
|
{!!formData.handlerUserId ? (
|
<div className="caseHandle-person">
|
<WantUserTag name={formData.handlerUserName} onClose={() => handleChangeInput('handlerUserId', [undefined, undefined])} />
|
</div>
|
) : (
|
<Button type="dashed" icon={<UserAddOutlined />} onClick={() => setSelectObjModal({ visible: true })}>
|
选择调解员
|
</Button>
|
)}
|
</Col>
|
<Col span={24}>
|
<h5>
|
协助调解员
|
</h5>
|
<div className="caseHandle-subtitle">如后续人员变更，可使用调解员账号在<span className="public-color">我的调解/调解/调解设置</span>功能中修改协助调解员</div>
|
<Space size="small" wrap>
|
{formData.assistIdList?.map((item, index) => {
|
return <WantUserTag color='orange' key={`assistIdList${index}`} value={item.value} name={item.name} onClose={(e) => handleChangeInput('assistIdList', formData.assistIdList.filter(item => item.value !== e))} />
|
})}
|
<Button type="dashed" icon={<UsergroupAddOutlined />} onClick={() => setSelectHelpObjModal({ visible: true })}>
|
选择协助调解员
|
</Button>
|
</Space>
|
</Col>
|
</>
|
);
|
}
|
return (
|
<Col span={24}>
|
<h5>
|
下一环节经办人<span className="leftRequired">*</span>
|
</h5>
|
{!!formData.handlerUserId ? (
|
<div className="caseHandle-person">
|
<WantUserTag name={formData.handlerUserName} onClose={() => handleChangeInput('handlerUserId', [undefined, undefined])} />
|
</div>
|
) : (
|
<Button type="dashed" icon={<UserAddOutlined />} onClick={() => setSelectObjModal({ visible: true })}>
|
选择人员
|
</Button>
|
)}
|
</Col>
|
);
|
};
|
|
// 任务处理form
|
const formDom = (taskNode) => {
|
if (taskNode === 'F22_00019-5') {
|
// 结案归档
|
return (
|
<>
|
<Col span={24}>
|
<h4>
|
<AuditOutlined style={{ marginRight: '4px' }} />
|
结果核实
|
</h4>
|
<Row gutter={[24, 16]}>
|
<Col span={12}>
|
<h5>调解结果</h5>
|
<Select
|
disabled={true}
|
style={{ width: '100%' }}
|
value={formData.mediResult}
|
onChange={(value, option) => handleChangeInput('mediResult', [value, option.label])}
|
>
|
{$$.options.mediResult.map((x) => (
|
<Option key={x.value} label={x.label}>
|
{x.label}
|
</Option>
|
))}
|
</Select>
|
</Col>
|
{formData.mediResult === '22_00025-1' && (
|
<>
|
<Col span={12}>
|
<h5>履行情况</h5>
|
<Select
|
style={{ width: '100%' }}
|
value={formData.fulfilSitu}
|
onChange={(value, option) => handleChangeInput('fulfilSitu', [value, option.label])}
|
>
|
{$$.options.fulfilSitu.map((x, t) => (
|
<Option key={x.value} label={x.value}>
|
{x.label}
|
</Option>
|
))}
|
</Select>
|
</Col>
|
<Col span={12}>
|
<h5>诉前调书号</h5>
|
<Input
|
value={formData.mediateBookNo}
|
onChange={(e) => handleChangeInput('mediateBookNo', e.target.value)}
|
placeholder="审判业务系统中的诉前调书号"
|
allowClear
|
/>
|
</Col>
|
<Col span={12}>
|
<h5>诉前调解案号</h5>
|
<Input
|
value={formData.mediateNo}
|
onChange={(e) => handleChangeInput('mediateNo', e.target.value)}
|
placeholder="输入审判业务系统的诉前调解案号（如有）"
|
allowClear
|
/>
|
</Col>
|
</>
|
)}
|
</Row>
|
</Col>
|
<Col span={24}>
|
<div className="caseHandle-divider" />
|
</Col>
|
<Col span={24}>
|
<h4>
|
<ContainerOutlined style={{ marginRight: '4px' }} />
|
档案信息
|
</h4>
|
<Row gutter={[24, 16]}>
|
<Col span={8}>
|
<h5>年度</h5>
|
<DatePicker
|
picker="year"
|
value={$$.myMoment(formData.fileYear)}
|
onChange={(_, dateString) => handleChangeInput('fileYear', dateString)}
|
style={{ width: '100%' }}
|
allowClear={false}
|
/>
|
</Col>
|
<Col span={8}>
|
<h5>卷名</h5>
|
<Input
|
value={formData.fileBookName}
|
onChange={(e) => handleChangeInput('fileBookName', e.target.value)}
|
placeholder="输入卷名"
|
allowClear
|
/>
|
</Col>
|
<Col span={8}>
|
<h5>卷号</h5>
|
<Input
|
value={formData.fileBookNo}
|
onChange={(e) => handleChangeInput('fileBookNo', e.target.value)}
|
placeholder="输入卷号"
|
allowClear
|
/>
|
</Col>
|
<Col span={8}>
|
<h5>档案编号</h5>
|
<Input value={formData.fileNo} onChange={(e) => handleChangeInput('fileNo', e.target.value)} placeholder="输入档案编号" allowClear />
|
</Col>
|
<Col span={8}>
|
<h5>保管年限</h5>
|
<InputNumber
|
value={formData.fileLimitYear}
|
onChange={(value) => handleChangeInput('fileLimitYear', value)}
|
addonAfter="年"
|
placeholder="输入整数"
|
allowClear
|
/>
|
</Col>
|
<Col span={8}>
|
<h5>档案存档位置</h5>
|
<Input
|
value={formData.fileAddr}
|
onChange={(e) => handleChangeInput('fileAddr', e.target.value)}
|
placeholder="输入档案存档位置"
|
allowClear
|
/>
|
</Col>
|
<Col span={24}>
|
<h5>卷宗情况说明</h5>
|
<TextArea
|
value={formData.fileContent}
|
onChange={(e) => handleChangeInput('fileContent', e.target.value)}
|
rows={2}
|
placeholder="简要说明卷宗的情况"
|
allowClear
|
/>
|
</Col>
|
<Col span={24}>
|
<h5>档案封面</h5>
|
<MyUpload fileId={contentData.caseId} fileType="22_00018-307" />
|
</Col>
|
</Row>
|
</Col>
|
</>
|
);
|
}
|
return (
|
<>
|
{otherDom(taskNode)}
|
<Col span={24}>
|
<h5>处理说明</h5>
|
<TextArea
|
value={formData.handleContent}
|
onChange={(e) => setFormData({ ...formData, handleContent: e.target.value })}
|
rows={2}
|
placeholder="简要说明当前环节工作总结和下一环节的注意事项"
|
allowClear
|
/>
|
</Col>
|
<Col span={24}>
|
<h5>上传附件</h5>
|
<MyUpload fileId={contentData.id} fileType="22_00018-501" />
|
</Col>
|
</>
|
);
|
};
|
|
// 处理时限
|
const expireHours = useMemo(() => {
|
return $$.getHours(contentData.expireTime);
|
}, [contentData.expireTime]);
|
|
return (
|
<>
|
{!!isRegisterSuccess ? (
|
<div className="register-over">
|
<div className="register-over-success">
|
<CheckCircleFilled className="register-over-icon" />
|
<div className="h6">{isRegisterSuccess === '3' ? '退回完成' : '提交成功'}</div>
|
<div className="register-over-subtitle">
|
{isRegisterSuccess === '1' ? (
|
<>
|
已指派<span className="public-color">{formData.wantUserName}</span>作为案件调解员
|
</>
|
) : isRegisterSuccess === '2' ? (
|
<>
|
案件已成功归档，可通过<span className="public-color">调解总览（一本账）</span>进行查看
|
</>
|
) : ('案件已退回上一环节处理人'
|
)}
|
</div>
|
<Space size="large" style={{ marginBottom: '24px' }}>
|
<Button type='primary' onClick={() => {
|
handleReturn();
|
}}>我的待办</Button>
|
</Space>
|
</div>
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
<div className="caseDetail-cardMain" style={{}}>
|
<ProgressStep caseId={caseId} pageFrom="dispatchRecord" />
|
</div>
|
</div>
|
</div>
|
) : (
|
<>
|
<div className="caseHandle">
|
{/* 基本信息 */}
|
<div className="caseDetail-headerCard">
|
<div className="caseDetail-cardTitle">
|
<Space size="small">
|
<div className="caseDetail-cardTitle-icon caseDetail-cardTitle-iconGreen">
|
<ProfileOutlined />
|
</div>
|
<h5>任务信息</h5>
|
</Space>
|
</div>
|
<div className="caseDetail-descriptions">
|
<Descriptions size="small">
|
<Descriptions.Item label="任务名称">{contentData.taskNodeName || '-'}</Descriptions.Item>
|
<Descriptions.Item label="任务下达时间">{$$.timeFormat(contentData.createTime)}</Descriptions.Item>
|
<Descriptions.Item label="处理时限">
|
<span className={expireHours.isNegativeNum ? 'public-danger' : ''}>{expireHours.hours}小时</span>
|
</Descriptions.Item>
|
<Descriptions.Item label="上一级处理人">
|
{contentData.lastUserName ? <NameCard name={contentData.lastUserName} userId={contentData.lastUserId} /> : <div>-</div>}
|
</Descriptions.Item>
|
<Descriptions.Item label="上一级处理说明">
|
<Text className="public-fontBg" ellipsis={{ tooltip: contentData.lastContent || '-' }}>
|
{contentData.lastContent || '-'}
|
</Text>
|
</Descriptions.Item>
|
<Descriptions.Item label="上一级处理附件">
|
<FilesDrawer filesData={contentData.lastFileInfoList} />
|
</Descriptions.Item>
|
</Descriptions>
|
</div>
|
</div>
|
{/* 退回提示 */}
|
{contentData.taskType === '2' && (
|
<div className="caseDetail-tui">
|
<ExclamationCircleFilled className="caseDetail-tui-icon" />
|
<span>
|
任务在{$$.timeFormat(contentData.createTime)}被{contentData.lastUserName}退回
|
<span className="public-rightBorder">退回理由：{contentData.lastContent || '-'}</span>
|
</span>
|
</div>
|
)}
|
{/* 处理信息 */}
|
<div className="caseHandle-main">
|
<div className="caseDetail-card caseHandle-main-left">
|
<div className="caseDetail-cardTitle">
|
<Space size="small">
|
<div className="caseDetail-cardTitle-icon caseDetail-cardTitle-iconBlue">
|
<ScheduleOutlined />
|
</div>
|
<h5>工作处理</h5>
|
</Space>
|
</div>
|
<div className="caseDetail-cardMain">
|
<Row gutter={[16, 16]}>{formDom(contentData.taskNode)}</Row>
|
</div>
|
<div>
|
<Button type="primary" className="public-buttonMargin" onClick={handleSubmit}>
|
提交
|
</Button>
|
{contentData.taskNodeType != '1' && (
|
<Button danger onClick={() => setReturnModalVisible(true)}>
|
退回上一环节
|
</Button>
|
)}
|
</div>
|
</div>
|
<div className="caseDetail-card caseHandle-main-right" style={{ maxWidth: '350px' }}>
|
<div className="caseDetail-cardTitle">
|
<Space size="small">
|
<div className="caseDetail-cardTitle-icon caseDetail-cardTitle-iconOrange">
|
<ShareAltOutlined />
|
</div>
|
<h5>处理进度</h5>
|
</Space>
|
</div>
|
<div className="caseDetail-cardMain">
|
<ProgressStep caseId={caseId} pageFrom="caseHandle" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</>
|
)}
|
{/* 退回modal */}
|
<MyModal
|
visible={returnModalVisible}
|
width={558}
|
onCancel={() => setReturnModalVisible(false)}
|
onOk={handleBackReasonSubmit}
|
okText="确定退回"
|
cancelText="我再想想"
|
>
|
<h4 style={{ marginBottom: '16px' }}>退回上一环节</h4>
|
<h5>退回理由</h5>
|
<TextArea rows={5} value={backReasonData} onChange={(e) => setBackReasonData(e.target.value)} placeholder="输入您退回的理由" />
|
</MyModal>
|
{/* 选择modal */}
|
<SelectObjModal
|
visible={selectObjModal.visible}
|
type={selectObjModal.type}
|
isCheckbox={selectObjModal.isCheckbox}
|
checkKeys={formData.handlerUserId ? [{ value: formData.handlerUserId, label: formData.handlerUserName }] : []}
|
onClose={() => setSelectObjModal({ visible: false })}
|
onOk={(value) => {
|
setSelectObjModal({ visible: false });
|
handleChangeInput('handlerUserId', [value.keys[0], value.items[0].name]);
|
}}
|
/>
|
<SelectObjModal
|
visible={selectHelpObjModal.visible}
|
type={selectHelpObjModal.type}
|
isCheckbox={true}
|
checkKeys={formData.assistIdList ? formData.assistIdList.map(item => ({ value: item.value, label: item.name })) : []}
|
onClose={() => setSelectHelpObjModal({ visible: false })}
|
onOk={(value) => {
|
setSelectHelpObjModal({ visible: false });
|
handleChangeInput('assistIdList', value.items);
|
}}
|
/>
|
</>
|
);
|
};
|
|
export default CaseHandle;
|
