import React, { useState, useRef, useEffect } from 'react';
|
import { Col, Space, Row, Empty } from 'antd';
|
import { Form, Input, Tabs, Modal, Typography, Button, Steps, Select, DatePicker, Alert, Divider, Message } from '@arco-design/web-react';
|
import ProgressStep from '@/components/ProgressStep/VisitStep';
|
import SelectObjModal from '@/components/SelectObjModal/selectPerson';
|
import WantUserTag from '@/components/WantUserTag/Handling';
|
import DocumentScanner from '../../matterDetail/FileUpLoad';
|
import * as $$ from '@/utils/utility';
|
import CaseResult from './CaseResult'
|
import ArcoUpload from '@/components/ArcoUpload';
|
import HandleRecord from '../../matterDetail/HandleRecord';
|
import SupervisingView from '../../matterDetail/Supervising'
|
import UniteHandle from '../../matterDetail/UniteHandle';
|
import SupervisingViews from '../../matterDetail/SupervisingViews'
|
import { useNavigate } from 'react-router-dom';
|
import { scan } from '@/assets/images/icon';
|
import { IconPlus } from '@arco-design/web-react/icon';
|
import { empty, judicial_1, judicial_2, judicial_3, judicial_4 } from '@/assets/images';
|
import { file } from '../../../../assets/images/icon';
|
|
|
const FormItem = Form.Item;
|
const { RangePicker } = DatePicker;
|
const Step = Steps.Step;
|
const TabPane = Tabs.TabPane;
|
const appUrl = $$.appUrl;
|
|
|
function choosePrincipalApi(caseId, caseTaskId, userId) {
|
return $$.ax.request({ url: `caseInfoUnfold/choosePrincipal?caseId=${caseId}&caseTaskId=${caseTaskId}&userId=${userId}`, type: 'get', service: 'mediate' });
|
}
|
|
function delFile(id) {
|
return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } });
|
}
|
|
function getNewTimeIdApi(id) {
|
return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
|
}
|
|
function saveFeedbackApi(data) {
|
return $$.ax.request({ url: `caseFeedback/saveFeedback`, type: 'post', service: 'mediate', data });
|
}
|
|
function listFeedbackApi(id) {
|
return $$.ax.request({ url: `caseFeedback/listFeedback?id=` + id, type: 'get', service: 'mediate' });
|
}
|
|
function updateFeedbackApi(data) {
|
return $$.ax.request({ url: `caseFeedback/updateFeedback`, type: 'post', service: 'mediate', data });
|
}
|
|
function getFeedbackInfoApi(caseId, caseTaskId) {
|
return $$.ax.request({ url: `caseFeedback/getFeedbackInfo?caseId=${caseId}&caseTaskId=${caseTaskId}`, type: 'get', service: 'mediate' });
|
}
|
|
function getByIdRoleApi(id) {
|
return $$.ax.request({ url: `ctUser/getByIdRole?id=` + id, type: 'get', service: 'cust' });
|
}
|
|
function getListCaseFlow(caseId) {
|
return $$.ax.request({ url: `caseTask/listCaseFlow?caseId=` + caseId, type: 'get', service: 'mediate' });
|
}
|
|
//删除经办人
|
function deletePrincipalApi(caseId, caseTaskId) {
|
return $$.ax.request({ url: `caseInfoUnfold/deletePrincipal?caseId=${caseId}&caseTaskId=${caseTaskId}`, type: 'get', service: 'mediate' });
|
}
|
|
//添加督办
|
function addCaseSuperviseApi(data) {
|
return $$.ax.request({ url: `caseSupervise/addCaseSupervise`, type: 'post', service: 'mediate', data });
|
}
|
|
//添加预约
|
function addMeetInfoApi(data) {
|
return $$.ax.request({ url: `meetInfo/addMeetInfo`, type: 'post', service: 'mediate', data });
|
}
|
|
//添加预约
|
function addRoomInfoApi(data) {
|
return $$.ax.request({ url: `meetInfo/addRoomInfo`, type: 'post', service: 'mediate', data });
|
}
|
|
//会议查询
|
function getMeetInfoApi(data) {
|
return $$.ax.request({ url: `meetInfo/getMeetInfo`, type: 'get', service: 'mediate', data });
|
}
|
|
// 删除预约
|
function delMeetInfoApi(data) {
|
return $$.ax.request({ url: `meetInfo/delMeetInfo`, type: 'get', service: 'mediate', data });
|
}
|
|
//新增调节协助员
|
function addAssistMediator(data, caseId) {
|
return $$.ax.request({ url: `caseFeedback/saveAssistMediator?caseId=${caseId}`, type: 'post', service: 'mediate', data });
|
}
|
|
//删除调节协助员
|
function delAssistMediator(data) {
|
return $$.ax.request({ url: `caseFeedback/removeAssistMeditor`, type: 'get', service: 'mediate', data });
|
}
|
|
// ai分析是否为风险/重点案件
|
function getRiskResultApi(data) {
|
return $$.ax.request({ urlAi: `case-law/getRiskResult`, data, typeAi: 'post', service: 'mediate' });
|
}
|
|
const Handle = ({ authorData, caseId, caseTaskId, caseDetailAi, canal }) => {
|
const formRef = useRef();
|
const form = useRef();
|
const formVideo = useRef();
|
const navigate = useNavigate();
|
const [wantUser, setWantUser] = useState({});
|
const [supervising, setSupervising] = useState(false)
|
const [feedbackInfoData, setFeedbackInfoData] = useState({})
|
const [caseResult, SetCaseResult] = useState(false);
|
const [casualList, setCasualList] = useState([]); //修改时的list临时数据缓存
|
const [uniteHandleView, setUniteHandleView] = useState(false);
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
const [id, setId] = useState('');
|
const [uniteHandleId, setUniteHandleId] = useState('');
|
const [caseResultId, setCaseResultId] = useState('');
|
const [supervisingId, setSupervisingId] = useState('');
|
const [managerName, setManagerName] = useState('')
|
const [progressData, setProgressData] = useState({});
|
const [scannerVisible, setScannerVisible] = useState(false);
|
const [ocrText, setOcrText] = useState('');
|
const [Update, setUpdate] = useState(false);
|
const [list, setList] = useState([]); //存储办理反馈数组
|
const [formView, setFormView] = useState(false);
|
const [staticButtonStatus, setStaticButtonStatus] = useState(true); //是否展示下方四个按钮
|
const [updateData, setUpdateData] = useState({}); //修改时的办理反馈对象
|
const [staticButtonList, setStaticButtonList] = useState([]);
|
const [yYTJVisible, setYYTJVisible] = useState(false); //预约调解功能
|
//1、办理记录 2、预约调解
|
const [tabsActive, setTabsActive] = useState('1');
|
// 远程视频调解
|
const [remoteData, setRemoteData] = useState({});
|
// 预添加预约
|
const [preBookData, setPreBookData] = useState({});
|
const [preBookVisible, setPreBookVisible] = useState(false);
|
const [radioVisible, setRadioVisible] = useState(false);
|
// 添加预约和创建视频号弹窗 type:1.添加预约、2.创建视频号
|
const [radioModalData, setRadioModalData] = useState({ visible: false, type: '1' });
|
const [isModalCheckVisible, setIsModalCheckVisible] = useState(false);//协助调解员弹窗控制
|
const [assistMediatorList, setAssistMediatorList] = useState([]);//协助调解员数据
|
|
|
const myButton = [
|
{
|
label: '添加办理记录',
|
type: 'primary',
|
click: () => addMark(),
|
key: 'tjbljl',
|
},
|
{
|
label: '结案申请',
|
type: 'outline',
|
click: () => handleCaseResultApply(),
|
key: 'jasq',
|
},
|
{
|
label: '联合处置申请',
|
type: 'outline',
|
click: () => uniteHandle(),
|
key: 'lhczsq',
|
},
|
|
{
|
label: '督办',
|
type: 'outline',
|
click: () => Supervising(),
|
key: 'db',
|
status: 'danger'
|
},
|
]
|
|
|
|
const handleCheckedKeys = (userId) => {
|
choosePrincipal(userId)
|
}
|
|
const handleConfirm = (scanContent) => {
|
// 处理确认逻辑
|
console.log(scanContent, 'scanContent')
|
formRef.current.setFieldValue(ocrText, scanContent)
|
setScannerVisible(false);
|
|
};
|
|
const handleWantUserClose = () => {
|
setWantUser({ wantUserId: null, wantUserName: null })
|
deletePrincipalApi(caseId, caseTaskId)
|
}
|
|
const handleCancel = () => {
|
// 处理取消逻辑
|
setScannerVisible(false);
|
};
|
|
const choosePrincipal = async (id) => {
|
const res = await choosePrincipalApi(caseId, caseTaskId, id)
|
if (res.type) {
|
getFeedbackInfo()
|
}
|
}
|
|
|
//删除文件
|
const handleDelFile = async (id) => {
|
console.log('id', id);
|
const res = await delFile(id)
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功！' });
|
}
|
}
|
|
//新增、编辑办理理由
|
const saveFeedback = async (submitData) => {
|
if (submitData.id) {
|
//编辑
|
const res = await updateFeedbackApi({
|
...submitData,
|
})
|
if (res.type) {
|
$$.infoSuccess({ content: '修改成功' });
|
// getRiskResult({ caseId, caseText: (submitData.handleContent || '') })
|
listFeedback(caseId);
|
formRef.current.resetFields();
|
}
|
} else {
|
const res = await saveFeedbackApi({
|
...submitData,
|
caseId: caseId,
|
id: id,
|
caseTaskId: '',
|
})
|
if (res.type) {
|
$$.infoSuccess({ content: '保存成功' });
|
// getRiskResult({ caseId, caseText: (submitData.handleContent || '') })
|
listFeedback(caseId);
|
formRef.current.resetFields();
|
}
|
}
|
}
|
|
// ai分析是否为风险/重点案件
|
async function getRiskResult(data) {
|
const res = await getRiskResultApi(data)
|
if (res.type) { }
|
}
|
|
const getFeedbackInfo = async () => {
|
const res = await getFeedbackInfoApi(caseId, caseTaskId)
|
if (res.type) {
|
let data = res.data;
|
setFeedbackInfoData(data);
|
setWantUser({ wantUserName: data?.handleUserName })
|
setAssistMediatorList(data.assistMediatorList?.map(item => {
|
return {
|
label: item.mediator,
|
value: item.mediatorId
|
}
|
}) || [])
|
}
|
}
|
|
//获取办理记录接口
|
|
async function listFeedback(id) {
|
const res = await listFeedbackApi(id)
|
if (res.type) {
|
let data = res.data.caseFeedbackList;
|
let manager = res.data.manager
|
setList(data?.map(i => ({ ...i, uid: i?.id })))
|
setManagerName(manager)
|
|
if (authorData) {
|
const { buttonList } = authorData;
|
let listVisible = buttonList?.find(item => item.id === 'yytj') ? true : false;
|
setYYTJVisible(listVisible)
|
setStaticButtonList(myButton.filter(item => {
|
const flag = buttonList.some(result => {
|
if (result.id === item.key) {
|
return true
|
}
|
})
|
return flag
|
}).map(item => {
|
const data = buttonList.find(res => res.id == item.key)
|
return {
|
...item,
|
label: data.name
|
}
|
}))
|
}
|
}
|
}
|
|
// 获取预约调解记录
|
async function getMeetInfo(id) {
|
global.setSpinning(true);
|
const res = await getMeetInfoApi({ caseId: id });
|
global.setSpinning(false);
|
if (res.type) {
|
let list = res.data || [];
|
if (list?.length > 0) {
|
setPreBookData(list[0])
|
}
|
}
|
}
|
|
//获取理由id
|
const getNewTimeId = async (type) => {
|
const res = await getNewTimeIdApi()
|
if (res.type) {
|
if (type === 'uniteHandle') {
|
setUniteHandleId(res.data)
|
}
|
if (type === 'addMark') {
|
setId(res.data)
|
}
|
if (type === 'caseResult') {
|
setCaseResultId(res.data)
|
}
|
if (type === 'supervising') {
|
setSupervisingId(res.data)
|
}
|
}
|
}
|
|
const getData = async (id) => {
|
const res = await getListCaseFlow(id)
|
if (res.type) {
|
setProgressData(res.data)
|
}
|
}
|
|
|
//添加办理记录
|
const addMark = () => {
|
setFormView(true);
|
getNewTimeId('addMark')
|
}
|
|
//取消添加
|
const handleBack = () => {
|
console.log(Update, 'UpdateUpdate')
|
if (Update) {
|
$$.modalInfo({
|
title: '提醒',
|
content: '填写内容尚未保存，确定离开当前页面吗？',
|
okText: '确定',
|
cancelText: '我再想想',
|
onOk: async () => {
|
setFormView(false);
|
setId('');
|
setStaticButtonStatus(true)
|
formRef.current.resetFields();
|
setUpdateData({})
|
},
|
});
|
} else {
|
setFormView(false);
|
setId('');
|
setStaticButtonStatus(true)
|
formRef.current.resetFields();
|
setUpdateData({})
|
}
|
}
|
|
//保存信息
|
const handleFinish = () => {
|
if (formRef.current) {
|
formRef.current.validate(undefined, (errors, values) => {
|
if (!errors) {
|
let submitData = formRef.current.getFields()
|
saveFeedback(submitData)
|
setFormView(false);
|
setStaticButtonStatus(true)
|
}
|
});
|
}
|
}
|
|
//点击编辑办理事由
|
const handleEdit = (record, index) => {
|
console.log('record', record);
|
setId(record.id)
|
setFormView(true)
|
formRef.current.setFieldsValue({
|
...record,
|
fileInfoList: record.fileInfoList?.map(i => ({ ...i, uid: i.id }))
|
})
|
setUpdateData({ ...record, fileInfoList: record.fileInfoList?.map(i => ({ ...i, uid: i.id })) })
|
// setList(list.filter((i, idx) => idx !== index))
|
// setCasualList(list)
|
}
|
|
const Supervising = () => {
|
getNewTimeId('supervising')
|
setSupervising(!supervising)
|
}
|
|
const uniteHandle = () => {
|
getNewTimeId('uniteHandle')
|
setUniteHandleView(!uniteHandleView)
|
}
|
|
function handleCaseResultApply() {
|
if (list?.length > 0) {
|
SetCaseResult(true)
|
getNewTimeId('caseResult')
|
} else {
|
return $$.arcoModalInfo({
|
title: '提醒',
|
content: '请先添加办理记录',
|
footer: null,
|
});
|
}
|
}
|
|
// 视频调解部分
|
|
// 添加预约重置
|
function resetClick() {
|
form.current.resetFields()
|
form.current.setFieldValue()
|
}
|
|
function submitClick() {
|
if (form.current) {
|
form.current.validate(undefined, (errors, values) => {
|
if (!errors) {
|
let submitData = form.current.getFields();
|
submitData.orderStartTime = submitData.time[0];
|
submitData.orderEndTime = submitData.time[1];
|
delete submitData.time
|
console.log('submitData', submitData);
|
// submitData.
|
$$.modalInfo({
|
title: '添加预约调解确认',
|
content: <div>确认添加预约<span className='public-color'>{submitData.orderStartTime}</span>-<span className='public-color'>{submitData.orderEndTime}</span>的调解吗？</div>,
|
okText: '确定添加',
|
cancelText: '我再想想',
|
onOk: () => addMeetInfo({ caseId, ...submitData }),
|
});
|
}
|
});
|
}
|
}
|
// 添加预约提交
|
async function addMeetInfo(submitData) {
|
global.setSpinning(true);
|
const res = await addMeetInfoApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setPreBookVisible(false)
|
form.current.resetFields()
|
getMeetInfo(caseId);
|
}
|
}
|
function radioSubmitClick() {
|
if (formVideo.current) {
|
formVideo.current.validate(undefined, (errors, values) => {
|
if (!errors) {
|
let submitData = formVideo.current.getFields()
|
submitData.orderStartTime = submitData.time[0];
|
submitData.orderEndTime = submitData.time[1];
|
delete submitData.time
|
console.log('submitData', submitData);
|
$$.modalInfo({
|
title: '创建视频号确认',
|
content: <div>确认创建<span className='public-color'>{submitData.orderStartTime}</span>-<span className='public-color'>{submitData.orderEndTime}</span>的视频号吗？</div>,
|
okText: '确定创建',
|
cancelText: '我再想想',
|
onOk: () => addRoomInfo({ caseId, ...submitData }),
|
});
|
}
|
});
|
}
|
}
|
|
// 添加预约提交
|
async function addRoomInfo(submitData) {
|
global.setSpinning(true);
|
const res = await addRoomInfoApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setRadioVisible(false)
|
formVideo.current.resetFields()
|
getMeetInfo(caseId);
|
}
|
}
|
|
function radioResetClick() {
|
formVideo.current.resetFields()
|
}
|
|
function delClick() {
|
$$.modalInfo({
|
title: '删除预约确认',
|
content: <div>确定删除该预约吗？</div>,
|
okText: '确定删除',
|
cancelText: '我再想想',
|
onOk: () => delMeetInfo({ id: preBookData.id }),
|
});
|
}
|
|
|
async function delMeetInfo(submitData) {
|
global.setSpinning(true);
|
const res = await delMeetInfoApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功' });
|
setPreBookData({})
|
}
|
}
|
|
function checkTimeRange(startTime, endTime, currentTime) {
|
if (currentTime < new Date(startTime)) {
|
return <div className='public-color'>未开始</div>; // 当前时间在时间范围之前
|
} else if (currentTime >= new Date(startTime) && currentTime <= new Date(endTime)) {
|
return <div style={{ color: '#EF6C24' }}>进行中</div>; // 当前时间在时间范围内
|
} else {
|
return <div className='public-orange'>已结束</div>; // 当前时间在时间范围之后
|
}
|
}
|
//删除协助调解员
|
const handleCloseAssistMediator = async (data) => {
|
const response = await delAssistMediator({
|
caseId,
|
mediatorId: data.value
|
})
|
if (response.type) {
|
Message.success('删除协助调解员成功')
|
setAssistMediatorList(assistMediatorList.filter(item => item.value != data.value))
|
}
|
}
|
|
|
|
useEffect(() => {
|
listFeedback(caseId);
|
getMeetInfo(caseId);
|
getData(caseId)
|
getFeedbackInfo();
|
}, [])
|
|
|
|
return (
|
<>
|
<div className='container' style={{ height: 'calc(-272px + 100vh)' }}>
|
<div className='container-top'>
|
<Col span={24}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>办理信息</h4>
|
</Space>
|
</Col>
|
<Row gutter={[16, 16]}>
|
<Col span={8} style={{ display: 'flex' }}>
|
<div><div className="title-text">承办部门：</div></div>
|
<div>{feedbackInfoData?.handleUnitName}</div>
|
</Col>
|
<Col span={8} style={{ display: 'flex' }}>
|
<div><div className="title-text">经办人：</div></div>
|
<div style={{ marginTop: '-4px' }}>
|
{
|
wantUser.wantUserName ?
|
<>
|
<WantUserTag name={wantUser.wantUserName} onClose={() => handleWantUserClose()} /> </>
|
:
|
<Button onClick={() => { setIsModalVisible(true); }} style={{ color: '#1A6FB8', marginTop: '-2px' }} type='outline'>选择</Button>
|
}
|
</div>
|
</Col>
|
{canal == "22_00001-3" &&
|
<Col span={8} style={{ display: 'flex' }}>
|
<div><div className="title-text">协助调解员：</div></div>
|
<div style={{ marginTop: '-4px' }}>
|
{
|
assistMediatorList.length ?
|
<>
|
{assistMediatorList?.map(item => {
|
return <div style={{ display: 'inline-block', marginRight: '5px' }}>
|
<WantUserTag name={item.label} onClose={() => handleCloseAssistMediator(item)} />
|
</div>
|
})}
|
<div className='iconplusBox' onClick={() => { setIsModalCheckVisible(true); }}>
|
<IconPlus />
|
</div>
|
</>
|
:
|
<Button onClick={() => { setIsModalCheckVisible(true); }} style={{ color: '#1A6FB8', marginTop: '-2px' }} type='outline'>选择</Button>
|
}
|
</div>
|
</Col>
|
}
|
<Col span={8} style={{ display: 'flex' }}>
|
<div><div className="title-text">配合部门：</div></div>
|
<div>{feedbackInfoData?.assistUnitName}</div>
|
</Col>
|
<Col span={8} style={{ display: 'flex' }}>
|
<div><div className="title-text">受理时间：</div></div>
|
<div>{$$.minuteFormat(feedbackInfoData?.acceptTime)}</div>
|
</Col>
|
</Row>
|
</div>
|
<div className='container-bottom'>
|
<div className='container-bottom-left'>
|
<Col span={24}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>办理反馈</h4>
|
</Space>
|
</Col>
|
<Tabs
|
onChange={(v) => setTabsActive(v)}
|
className='handle-tab'
|
style={{ marginLeft: '0px' }}
|
activeTab={tabsActive}
|
destroyOnHide
|
>
|
{(yYTJVisible ? [{ label: '办理记录', key: '1' }, { label: '预约调解', key: '2' }] : [{ label: '办理记录', key: '1' }])?.map(item => {
|
return <TabPane
|
key={item.key}
|
title={item.label}
|
>
|
</TabPane>
|
})}
|
</Tabs>
|
{tabsActive === '1' &&
|
<Form
|
layout='vertical'
|
requiredSymbol={false}
|
scrollToFirstError={true}
|
>
|
<Col span={24}>
|
<HandleRecord isReview={false} handleEdit={handleEdit} data={list} />
|
<div className='Form' style={{ display: formView ? '' : 'none', marginBottom: '50px' }}>
|
<Col span={24} style={{ marginBottom: '8px' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>添加办理记录</h4>
|
</Space>
|
</Col>
|
<Col span={24}>
|
<Form
|
ref={formRef}
|
layout='vertical'
|
requiredSymbol={false}
|
scrollToFirstError={true}
|
onValuesChange={(first, all) => {
|
// setUpdate({ first: first, all: all })
|
}}
|
>
|
<Row gutter={[32, 0]}>
|
<Col span={24}>
|
<FormItem
|
label={(
|
<div style={{ display: 'flex' }}>
|
办理意见
|
<div className="must">必填</div>
|
<img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} />
|
<div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => { setScannerVisible(true); setOcrText('handleContent') }}>识别材料</div>
|
</div>
|
)}
|
field='handleContent'
|
rules={[{ message: '请填写办理意见', required: true }]}
|
>
|
<Input.TextArea
|
maxLength={800}
|
showWordLimit
|
rows={7}
|
placeholder='办理意见应该填写完整，办理意见应具备5要素:调解时间+调解参与部门/人+调解地点+调解过程+调解结果'
|
wrapperStyle={{ width: '100%' }}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={24}>
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&ownerId=${id}&ownerType=22_00018-501`,
|
}}
|
field='fileInfoList'
|
label={'办理附件'}
|
editData={updateData}
|
handleDelFile={handleDelFile}
|
ownerType='22_00018-501'
|
/>
|
</Col>
|
</Row>
|
</Form>
|
</Col>
|
<Space size='middle'>
|
<Button type='primary' onClick={() => handleFinish()}>提交</Button>
|
<Button type='secondary' onClick={handleBack}>取消添加</Button>
|
</Space>
|
</div>
|
{
|
list?.length === 0 && !formView &&
|
<div className='handle-content-empty' style={{ marginTop: '10%' }}>
|
<Empty description={<span className='empty-text'>暂无数据</span>} image={empty}></Empty>
|
</div>
|
}
|
</Col>
|
</Form>}
|
{tabsActive === '2' &&
|
<div className='judicial-item'>
|
<div className='handle-content-empty judicial-item-left' >
|
<div className='judicial-item-title'><img src={judicial_1} alt="" srcset="" />预约信息</div>
|
{
|
preBookData?.orderStartTime ?
|
<div className='judicial-item-content'>
|
<div className='judicial-item-content-left'>
|
<div onClick={() => delClick()} className='judicial-item-content-left-del public-a'><img src={judicial_3} alt="" srcset="" /></div>
|
<div className='judicial-item-content-left-t'>
|
<div className='judicial-item-content-left-t-l'><div className='judicial-item-content-left-bigTitle public-color'>{$$.myTimeFormat(preBookData?.orderStartTime, 'HH:mm')}</div><div className='public-color'>{$$.myTimeFormat(preBookData?.orderStartTime, 'YYYY年MM月DD日')}</div></div>
|
<div className='judicial-item-content-left-t-l'>
|
<Space size='small'>
|
<div className='judicial-item-content-left-inline'></div>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', alignItems: 'center', justifyContent: 'center' }}>{checkTimeRange(preBookData?.orderStartTime, preBookData?.orderEndTime, new Date())}<div className='public-color judicial-item-content-left-time'>{$$.calculateTimeDifference(preBookData?.orderStartTime, preBookData?.orderEndTime)}</div></div>
|
<div className='judicial-item-content-left-inline'></div>
|
</Space>
|
</div>
|
<div className='judicial-item-content-left-t-l'><div className='judicial-item-content-left-bigTitle public-color'>{$$.myTimeFormat(preBookData?.orderEndTime, 'HH:mm')}</div><div className='public-color'>{$$.myTimeFormat(preBookData?.orderEndTime, 'YYYY年MM月DD日')}</div></div>
|
</div>
|
<Divider />
|
<div className='judicial-item-content-left-c-flex'>
|
<div className='judicial-item-content-left-c'>
|
<div className='judicial-item-content-left-c-title'>纠纷化解方式</div>
|
<div className='judicial-item-content-left-c-content'>{preBookData?.meetWayName || '-'}</div>
|
</div>
|
<div className='judicial-item-content-left-c'>
|
<div className='judicial-item-content-left-c-title'>远程视频调解号</div>
|
<div className='judicial-item-content-left-c-content'><span style={{ fontSize: '16px', lineHeight: '24px' }}>{preBookData?.roomNo || '-'}</span> {preBookData?.roomNo && <span onClick={() => {
|
navigator.clipboard.writeText(preBookData?.roomNo).then(() => {
|
$$.infoSuccess({ content: '复制成功' });
|
}).catch(err => {
|
$$.catchApiError('复制失败', err);
|
});
|
}} className='public-color public-a'>复制</span>}</div>
|
</div>
|
<div className='judicial-item-content-left-c'>
|
<div className='judicial-item-content-left-c-title'>纠纷化解地点</div>
|
<div className='judicial-item-content-left-c-content'>{preBookData?.meetAddr || '-'}</div>
|
</div>
|
{/* <div className='judicial-item-content-left-c'>
|
<div className='judicial-item-content-left-c-title'>当事人通知信息</div>
|
<div className='judicial-item-content-left-c-content'>请双方申请人根据个人实际情况选择线上或线下方式，准时参加调解工作（如特殊原因不能到场，请提前一天通知）</div>
|
</div> */}
|
</div>
|
</div>
|
</div> :
|
<Empty description={<span className='empty-text'>暂无数据</span>} image={empty}><Button onClick={() => setPreBookVisible(true)} type='outline'>添加预约</Button></Empty>
|
}
|
</div>
|
<div className='handle-content-empty judicial-item-right'>
|
<div className='judicial-item-title'><img src={judicial_2} alt="" srcset="" />远程视频调解</div>
|
{
|
preBookData?.orderStartTime ?
|
<div className='judicial-item-video'>
|
<div className='judicial-item-video-flex'>
|
<div className='judicial-item-video-img'><img src={judicial_4} alt="" srcset="" /></div>
|
<div>
|
<div className='judicial-item-content-left-c-content'><span style={{ fontSize: '16px', lineHeight: '24px' }}>{preBookData?.roomNo || '-'}</span> {preBookData?.roomNo && <span onClick={() => {
|
navigator.clipboard.writeText(preBookData?.roomNo).then(() => { $$.infoSuccess({ content: '复制成功' }) }).catch(err => { $$.catchApiError('复制失败', err) })
|
}} className='public-color public-a'>复制</span>}</div>
|
<div style={{ color: "#4E5969", marginTop: '4px' }}>{$$.myTimeFormat(preBookData?.orderStartTime, 'YYYY年MM月DD日')} {$$.myTimeFormat(preBookData?.orderStartTime, 'HH:mm')}-{$$.myTimeFormat(preBookData?.orderEndTime, 'HH:mm')}</div>
|
</div>
|
</div>
|
<Alert type='info' content={<span>请使用小鱼易连客户端加入该号码连线</span>} />
|
</div> :
|
<Empty description={<span className='empty-text'>暂无数据</span>} image={empty}><Button onClick={() => setRadioVisible(true)} type='outline'>创建视频号</Button></Empty>}
|
</div>
|
</div>
|
}
|
{
|
!formView &&
|
<div className="dataSync-excel">
|
<Space size="middle" style={{ margin: '4px 14px' }}>
|
{myButton?.filter(item => {
|
const flag = authorData?.buttonList?.some(result => {
|
if (result.id === item.key) {
|
return true
|
}
|
})
|
return flag
|
}).map(item => {
|
const data = authorData?.buttonList?.find(res => res.id == item.key)
|
return {
|
...item,
|
label: data.name
|
}
|
})?.map(item => {
|
const { label, key, click, ...rest } = item;
|
return <Button key={key} onClick={click} {...rest} >{label}</Button>
|
})}
|
<Button type='secondary' onClick={() => navigate(-1)}>返回上级页面</Button>
|
</Space>
|
</div>
|
}
|
</div>
|
<div className='container-bottom-right'>
|
<Tabs defaultActiveTab='1' className='tabs-container' >
|
<TabPane
|
key='1'
|
title={
|
<span style={{ fontSize: '15px', paddingTop: '-16px' }}>
|
流转进度
|
</span>
|
}
|
>
|
<Typography.Paragraph>
|
<div className='progress' style={{ paddingBottom: '16px', marginTop: '0px' }} >
|
<ProgressStep progressData={progressData} />
|
</div>
|
</Typography.Paragraph>
|
</TabPane>
|
<TabPane
|
key='2'
|
title={
|
<span style={{ fontSize: '15px' }}>
|
督办信息
|
</span>
|
}
|
>
|
<Typography.Paragraph>
|
<SupervisingView id={id} caseId={caseId} />
|
</Typography.Paragraph>
|
</TabPane>
|
</Tabs>
|
|
</div>
|
</div>
|
|
{/* 选择经办人*/}
|
<SelectObjModal
|
visible={isModalVisible}
|
checkKeys={wantUser.wantUserId ? [{ label: wantUser.wantUserName, value: wantUser.wantUserId }] : undefined}
|
onOk={(value) => {
|
setIsModalVisible(false);
|
setWantUser({ wantUserId: value.keys[0], wantUserName: value.items[0].name });
|
handleCheckedKeys(value.keys?.[0]);
|
}}
|
onClose={() => setIsModalVisible(false)}
|
type='person'
|
/>
|
<DocumentScanner
|
visible={scannerVisible}
|
onConfirm={handleConfirm}
|
onCancel={handleCancel}
|
/>
|
<Modal
|
title='添加预约'
|
style={{ width: '40%' }}
|
className='judicial-handle-modal'
|
onCancel={() => setPreBookVisible(false)}
|
visible={preBookVisible}
|
footer={null}
|
>
|
<Row style={{ height: '480px', position: 'relative' }}>
|
<Col span={24} >
|
<Form
|
ref={form}
|
layout='vertical'
|
requiredSymbol={false}
|
initialValues={{
|
meetWay: '22_00021-3',
|
meetWayName: '线上 + 线下'
|
}}//默认值
|
scrollToFirstError
|
>
|
<Row>
|
<Col span={24}>
|
<Form.Item rules={[{ required: true, message: '请选择预约调解时间' }]} label={(<div style={{ display: 'flex' }}>预约调解时间<div className="must">必填</div></div>)} field="time">
|
<RangePicker
|
showTime={{ format: 'HH:mm' }}
|
allowClear={true}
|
style={{ width: '100%' }}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<FormItem
|
label='纠纷化解方式'
|
field='meetWay'
|
>
|
<Select
|
placeholder='请选择'
|
allowClear={false}
|
options={$$.options.meetWay}
|
onChange={(value, options) => {
|
form.current.setFieldValue('meetWayName', options && options.children)
|
}}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={24}>
|
<FormItem label='纠纷化解地点' field='meetAddr'>
|
<Input placeholder='请填写' />
|
</FormItem>
|
</Col>
|
</Row>
|
</Form>
|
<div style={{ display: 'flex', alignItems: 'center', gap: '16px', position: 'absolute', bottom: '0' }}>
|
<Button type="primary" onClick={() => submitClick()}>提交</Button>
|
<Button onClick={() => resetClick()} danger>重置</Button>
|
</div>
|
</Col>
|
</Row>
|
</Modal>
|
<Modal
|
title='创建远程调解视频号'
|
style={{ width: '40%' }}
|
className='judicial-handle-modal'
|
onCancel={() => setRadioVisible(false)}
|
visible={radioVisible}
|
footer={null}
|
>
|
<Row style={{ height: '480px', position: 'relative' }}>
|
<Col span={24} >
|
<Form
|
ref={formVideo}
|
layout='vertical'
|
requiredSymbol={false}
|
scrollToFirstError
|
>
|
<Row>
|
<Col span={24}>
|
<Form.Item style={{ marginBottom: '8px' }} rules={[{ required: true, message: '请选择有效期' }]} label={(<div style={{ display: 'flex' }}>有效期<div className="must">必填</div></div>)} field="time">
|
<RangePicker
|
showTime={{ format: 'HH:mm' }}
|
allowClear={true}
|
style={{ width: '100%' }}
|
/>
|
</Form.Item>
|
<Alert type='info' content={<span>创建成功后请在有效期内使用小鱼易连客户端加入该号码连线</span>} />
|
</Col>
|
</Row>
|
</Form>
|
<div style={{ display: 'flex', alignItems: 'center', gap: '16px', position: 'absolute', bottom: '0' }}>
|
<Button type="primary" onClick={() => radioSubmitClick()}>提交</Button>
|
<Button onClick={() => radioResetClick()} danger>重置</Button>
|
</div>
|
</Col>
|
</Row>
|
</Modal>
|
<SupervisingViews visible={supervising} handleOnCancel={() => setSupervising(false)} caseId={caseId} supervisingId={supervisingId} />
|
<UniteHandle id={uniteHandleId} visible={uniteHandleView} handleOnCancel={() => setUniteHandleView(false)} caseId={caseId} caseTaskId={caseTaskId} />
|
<CaseResult visible={caseResult} handleOnCancel={() => SetCaseResult(false)} caseResultId={caseResultId} caseId={caseId} caseTaskId={caseTaskId} caseDetailAi={caseDetailAi} />
|
{/* 选择协助调解员*/}
|
<SelectObjModal
|
visible={isModalCheckVisible}
|
checkKeys={assistMediatorList}
|
onOk={async (value) => {
|
const response = await addAssistMediator(value.items.map(item => {
|
return {
|
mediator: item.name || item.label,
|
mediatorId: item.value,
|
}
|
}), caseId)
|
if (response.type) {
|
setIsModalCheckVisible(false);
|
setAssistMediatorList(value.items.map(item => {
|
return {
|
label: item.name || item.label,
|
value: item.value,
|
}
|
}))
|
Message.success('添加协助调解员成功')
|
}
|
}}
|
onClose={() => setIsModalCheckVisible(false)}
|
type='person'
|
isCheckbox={true}
|
/>
|
</div >
|
</>
|
)
|
|
}
|
|
export default Handle;
|
