/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-09-02 14:49:13
|
* @LastEditors: lwh
|
* @LastEditTime: 2025-01-03 14:55:30
|
* @FilePath: \gzDyh\gz-customerSystem\src\views\register\handleFeedback\component\CaseResult.jsx
|
* @Description: 结案申请
|
*/
|
import React, { useState, useRef } from 'react';
|
import { useNavigate } from 'react-router-dom';
|
import { Modal, Form, Select, Upload, Input } from '@arco-design/web-react';
|
import { Col, Space, Button, Tooltip, Radio, Row } from 'antd';
|
import DocumentScanner from '../../matterDetail/FileUpLoad'
|
import { scan } from '@/assets/images/icon'
|
import { tip, question1 } from '@/assets/images'
|
import ArcoUpload from '../../../../components/ArcoUpload'
|
import { NoHandleReason } from '../../visit/component/levelDetail';
|
import ModeSelect from '../../matterDetail/ModeSelect'
|
import * as $$ from '@/utils/utility';
|
import { Scrollbars } from "react-custom-scrollbars";
|
import MyDrawer from '@/components/MyDrawer';
|
import { sleep } from '../../../../utils/utility';
|
const appUrl = $$.appUrl;
|
|
|
const FormItem = Form.Item;
|
const TextArea = Input.TextArea;
|
|
|
function windupApplyApi(data) {
|
return $$.ax.request({ url: `caseTask/windupApply`, type: 'post', service: 'mediate', data });
|
}
|
|
function saveVideoApi(data) {
|
return $$.ax.request({ url: `meetInfo/saveVideo`, type: 'post', service: 'mediate', data });
|
}
|
|
// ai分析是否为风险/重点案件
|
function getRiskResultApi(data) {
|
return $$.ax.request({ urlAi: `case-law/getRiskResult`, data, typeAi: 'post', service: 'mediate' });
|
}
|
|
|
|
const CaseResult = ({ visible = false, handleOnCancel, caseResultId, caseId, caseTaskId, caseDetailAi }) => {
|
const formRef = useRef();
|
const [selectedTemplate, setSelectedTemplate] = useState();
|
const [selectedTemplate1, setSelectedTemplate1] = useState();
|
const [selectedTemplate2, setSelectedTemplate2] = useState();
|
const navigate = useNavigate();
|
const formRefWrite = useRef();
|
const failRef = useRef();
|
const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab
|
const [scanFile, setScanFile] = useState(false);
|
const [value, setValue] = useState(2)
|
const [noHandleReason, setNoHandleReason] = useState(false);
|
const [mode, setMode] = useState(false)
|
const [drawerVisible, setDrawerVisible] = useState(false);//化解不成功理由抽屉控制
|
|
const tabs = [
|
{ index: '1', label: '化解成功' },
|
{ index: '2', label: '化解不成功' },
|
];
|
|
const agreement = [
|
{ value: 1, label: '口头协议' },
|
{ value: 2, label: '书面协议' }
|
]
|
|
|
const handleTabChange = (newTabIndex) => {
|
setSelectedTab(newTabIndex);
|
};
|
|
const handleConfirm = (scanContent) => {
|
// 处理确认逻辑
|
formRef.current.setFieldValue('agreeContent', scanContent)
|
setScanFile(false);
|
|
};
|
|
const handleCancel = () => {
|
// 处理取消逻辑
|
setScanFile(false);
|
};
|
|
const handleTemplate = (type) => {
|
setSelectedTemplate(type);
|
if (type === 1) {
|
formRef.current.setFieldValue('windupContent', '当事人XXX已于XX年X月X日支付赔偿金XX元，纠纷已化解。')
|
} else if (type === 2) {
|
formRef.current.setFieldValue('windupContent', '用人单位已于XX年X月X日补发劳动者工资差额人民币XX元整，纠纷已化解。')
|
} else if (type === 3) {
|
formRef.current.setFieldValue('windupContent', '双方当事人已达成协议，纠纷不涉及赔偿问题，纠纷已化解。')
|
}
|
}
|
|
const handleTemplate1 = (type) => {
|
setSelectedTemplate1(type);
|
if (type === 1) {
|
formRef.current.setFieldValue('agreeContent', '据工作人员协调，当事人双方达成一致调解意见：\n1.被申请方一次性向申请方支付人民币 XX 元，于协议达成后XX日内付清；\n2.双方就此次纠纷不再追究任何法律责任。\n本口头调解协议由纠纷化解人员记录，并已告知双方当事人。双方当事人确认无误。')
|
} else if (type === 2) {
|
formRef.current.setFieldValue('agreeContent', '据工作人员协调，当事人双方达成一致调解意见：\n1.被申请方承诺每日XX时间段不得产生明显噪音；\n2.双方就此次纠纷不再追究任何法律责任。\n本口头调解协议由纠纷化解人员记录，并已告知双方当事人。双方当事人确认无误。')
|
} else if (type === 3) {
|
formRef.current.setFieldValue('agreeContent', '据工作人员协调，当事人双方达成一致调解意见：\n1.被申请方自即日起停止在公共区域堆放杂物；\n2.双方就此次纠纷不再追究任何法律责任。\n本口头调解协议由纠纷化解人员记录，并已告知双方当事人。双方当事人确认无误。')
|
} else if (type === 4) {
|
formRef.current.setFieldValue('agreeContent', '据工作人员协调，当事人双方达成一致调解意见：\n1.用人单位于XX时间补发劳动者工资XX元；\n2.双方就此次纠纷不再追究任何法律责任。\n本口头调解协议由纠纷化解人员记录，并已告知双方当事人。双方当事人确认无误。')
|
}
|
}
|
|
const handleTemplate2 = (type) => {
|
setSelectedTemplate2(type);
|
// if (type === 1) {
|
// formRefWrite.current.setFieldValue('windupContent', '双方当事人于xx时间xx地址已达成xx协议，纠纷已化解。')
|
// } else {
|
// formRefWrite.current.setFieldValue('windupContent', '')
|
// }
|
if (type === 1) {
|
formRefWrite.current.setFieldValue('windupContent', '当事人XXX已于XX年X月X日支付赔偿金XX元，纠纷已化解。')
|
} else if (type === 2) {
|
formRefWrite.current.setFieldValue('windupContent', '用人单位已于XX年X月X日补发劳动者工资差额人民币XX元整，纠纷已化解。')
|
} else if (type === 3) {
|
formRefWrite.current.setFieldValue('windupContent', '双方当事人已达成协议，纠纷不涉及赔偿问题，纠纷已化解。')
|
}
|
}
|
|
const handleTemplate3 = (type) => {
|
if (type === 1) {
|
failRef.current.setFieldValue('windupContent', '经过多次调解，尽管纠纷化解人员尽最大努力帮助双方找到解决方案，但由于以下原因，当事人双方未能达成一致意见：[详细说明化解未成功的原因之一][详细说明化解未成功的原因之二][……][……]鉴于上述情况，纠纷化解人员认为目前无法通过调解方式解决双方的争议，建议双方考虑采取其他合法途径解决纠纷。')
|
} else {
|
failRef.current.setFieldValue('windupContent', '')
|
}
|
}
|
|
//化解成功的提交处理
|
const handleSubmit = () => {
|
//口头协议
|
if (value === 1) {
|
formRef?.current.validate(undefined, (errors, values) => {
|
if (!errors) {
|
const data = formRef?.current.getFields()
|
windupApply({
|
agreeType: '24_00003-1',
|
agreeTypeName: '口头协议',
|
...data
|
})
|
}
|
})
|
}
|
//书面协议
|
if (value === 2) {
|
formRefWrite?.current.validate(undefined, (errors, values) => {
|
if (!errors) {
|
const { file, ...rest } = formRefWrite?.current.getFields()
|
windupApply({
|
agreeType: '24_00003-2',
|
agreeTypeName: '书面协议',
|
...rest
|
})
|
}
|
})
|
}
|
}
|
|
//化解不成功的提交处理
|
const handleSubmit1 = () => {
|
failRef?.current.validate(undefined, (errors, values) => {
|
if (!errors) {
|
const { failReason1, failReason3, ...rest } = failRef?.current.getFields()
|
const failReason = `1、${failReason1}；2、${failReason3}。`
|
windupApply({
|
failReason: failReason,
|
...rest
|
})
|
}
|
})
|
|
}
|
|
//结案申请请求
|
const windupApply = async (submitData) => {
|
const res = await windupApplyApi({
|
mediResultName: selectedTab === '1' ? '化解成功' : '化解不成功',
|
mediResult: selectedTab === '1' ? '22_00025-1' : '22_00025-2',
|
caseTaskId: caseTaskId,
|
caseId: caseId,
|
id: caseResultId,
|
...submitData
|
})
|
if (res.type) {
|
$$.infoSuccess({ content: '提交成功' });
|
sleep(500);
|
saveVideo(caseId)
|
// getRiskResult({ caseId, caseText: (submitData.windupContent || '') })
|
handleOnCancel();
|
navigate('/mediate/visit/visitWorkBench')
|
}
|
}
|
|
|
// ai分析是否为风险/重点案件
|
async function getRiskResult(data) {
|
const res = await getRiskResultApi(data)
|
if (res.type) { }
|
}
|
|
async function saveVideo(caseId) {
|
const res = await saveVideoApi({ caseId })
|
if (res.type) {
|
}
|
}
|
|
|
return (
|
<>
|
<Modal
|
visible={visible}
|
onCancel={handleOnCancel}
|
title='申请结案'
|
centered
|
footer={null}
|
// style={{ overflow: 'auto' }}
|
unmountOnExit={true}
|
maskClosable={false}
|
>
|
<Scrollbars style={{ height: '550px' }} autoHide>
|
<div className='caseResult-title'>化解结果</div>
|
<div className='caseResult-tabs'>
|
{tabs.map((tab) => (
|
<div
|
key={tab.index}
|
style={{
|
color: selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)',
|
padding: '5px 16px',
|
border: `1px solid ${selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`,
|
borderRadius: '2px',
|
cursor: 'pointer',
|
}}
|
onClick={() => handleTabChange(tab.index)}
|
>
|
{tab.label}
|
</div>
|
))}
|
</div>
|
{/*化解成功*/}
|
{selectedTab === '1' &&
|
<Form
|
layout='vertical'
|
scrollToFirstError={true}
|
requiredSymbol={false}
|
initialValues={{
|
agreeType: value,
|
}} //默认值
|
>
|
<Col span={8}>
|
<FormItem
|
label={<div style={{ display: 'flex' }}>
|
达成的协议类型
|
</div>
|
}
|
field='agreeType'
|
>
|
<Select options={agreement} onChange={(v) => { setValue(v); }}>
|
</Select>
|
</FormItem>
|
</Col>
|
{/*口头协议 */}
|
{value === 1 &&
|
<>
|
<Form
|
ref={formRef}
|
layout='vertical'
|
requiredSymbol={false}
|
scrollToFirstError={true}
|
>
|
<Row>
|
<Col span={24} style={{ position: 'relative' }}>
|
<FormItem
|
label={(
|
<>
|
<div style={{ display: 'flex' }}>
|
协议要点
|
<div className="must">必填</div>
|
</div>
|
<div className='caseResult-tips'>
|
<img src={tip} alt='' style={{ width: '16px', marginRight: '8px', marginTop: '-5px' }} />
|
<span>协议要点应尽量简洁，当事人大厅来访或小程序线上反映问题时，可在小程序中查看到填写的协议要点内容</span>
|
</div>
|
<div style={{ position: 'absolute', display: 'flex ', top: '79px', zIndex: 1 }}>
|
<div
|
className={`myTag ${selectedTemplate1 === 1 ? 'highlighted' : ''}`} // 条件样式
|
style={{ marginRight: '22px' }}
|
onClick={() => handleTemplate1(1)}
|
>
|
口头协议范本(经济纠纷)
|
</div>
|
<div
|
className={`myTag ${selectedTemplate1 === 1 ? 'highlighted' : ''}`} // 条件样式
|
style={{ marginRight: '22px' }}
|
onClick={() => handleTemplate1(2)}
|
>
|
口头协议范本(邻里纠纷-噪音)
|
</div>
|
<div
|
className={`myTag ${selectedTemplate1 === 1 ? 'highlighted' : ''}`} // 条件样式
|
style={{ marginRight: '22px' }}
|
onClick={() => handleTemplate1(3)}
|
>
|
口头协议范本(邻里纠纷-公共区域)
|
</div>
|
<div
|
className={`myTag ${selectedTemplate1 === 1 ? 'highlighted' : ''}`} // 条件样式
|
style={{ marginRight: '22px' }}
|
onClick={() => handleTemplate1(4)}
|
>
|
口头协议范本(劳资纠纷)
|
</div>
|
</div>
|
</>
|
)}
|
field='agreeContent'
|
rules={[{ message: '请填写协议要点', required: true }]}
|
>
|
<TextArea
|
autoSize={{ minRows: 4, maxRows: 8 }}
|
placeholder='请填写'
|
style={{ marginTop: '40px' }}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={24} style={{ position: 'relative' }}>
|
<div style={{ position: 'absolute', display: 'flex', top: '28px', zIndex: 1 }}>
|
<div
|
className={`myTag ${selectedTemplate === 1 ? 'highlighted' : ''}`} // 条件样式
|
style={{ marginRight: '22px' }}
|
onClick={() => handleTemplate(1)}
|
>
|
公共模板：赔偿纠纷和解协议
|
</div>
|
<div
|
className={`myTag ${selectedTemplate === 1 ? 'highlighted' : ''}`} // 条件样式
|
style={{ marginRight: '22px' }}
|
onClick={() => handleTemplate(2)}
|
>
|
公共模板：劳资纠纷和解协议
|
</div>
|
<div
|
className={`myTag ${selectedTemplate === 1 ? 'highlighted' : ''}`} // 条件样式
|
style={{ marginRight: '22px' }}
|
onClick={() => handleTemplate(3)}
|
>
|
公共模板：邻里纠纷和解协议
|
</div>
|
</div>
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>协议履行情况<div className="must">必填</div></div>)}
|
field='windupContent'
|
rules={[{ message: '请填写协议履行情况', required: true }]}
|
>
|
<TextArea
|
autoSize={{ minRows: 4, maxRows: 8 }}
|
placeholder='请填写'
|
style={{ marginTop: '35px' }}
|
/>
|
</FormItem>
|
</Col>
|
</Row>
|
</Form>
|
</>
|
}
|
{/*书面协议 */}
|
{value === 2 &&
|
<>
|
<Form
|
ref={formRefWrite}
|
layout='vertical'
|
requiredSymbol={false}
|
scrollToFirstError={true}
|
>
|
<Row>
|
<Col span={24}>
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&ownerId=${caseResultId}&ownerType=22_00018-302`,
|
}}
|
onFileListChange={fileList => {
|
// 用于上传后点击回显
|
formRefWrite.current.setFieldValue('file', fileList?.map((i, idx) => ({ ...i, url: `${appUrl.fileUrl}${appUrl.fileShowUrl}${i.response?.data[0]?.id}` })))
|
}}
|
formItemParams={{
|
rules: [{ message: '请上传协议文书', required: true }]
|
}}
|
field='file'
|
label={
|
<>
|
<div style={{ display: 'flex' }}>
|
协议文书
|
<div className="must" style={{ marginLeft: '4px' }}>必填</div>
|
</div>
|
<div className='caseResult-tips'>
|
<img src={tip} alt='' style={{ width: '16px', marginRight: '8px' }} />
|
<span>如通过人民调解工作成功化解纠纷事项，建议上传签字盖章后的人民调解协议书</span>
|
</div>
|
</>
|
}
|
ownerType='22_00018-302'
|
/>
|
</Col>
|
<Col span={24} style={{ position: 'relative' }}>
|
<div style={{ position: 'absolute', display: 'flex', top: '28px', zIndex: 1 }}>
|
<div
|
className={`myTag ${selectedTemplate2 === 1 ? 'highlighted' : ''}`} // 条件样式
|
style={{ marginRight: '22px' }}
|
onClick={() => handleTemplate2(1)}
|
>
|
公共模板：赔偿纠纷和解协议
|
</div>
|
<div
|
className={`myTag ${selectedTemplate2 === 1 ? 'highlighted' : ''}`} // 条件样式
|
style={{ marginRight: '22px' }}
|
onClick={() => handleTemplate2(2)}
|
>
|
公共模板：劳资纠纷和解协议
|
</div>
|
<div
|
className={`myTag ${selectedTemplate2 === 1 ? 'highlighted' : ''}`} // 条件样式
|
style={{ marginRight: '22px' }}
|
onClick={() => handleTemplate2(3)}
|
>
|
公共模板：邻里纠纷和解协议
|
</div>
|
</div>
|
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>协议履行情况<div className="must">必填</div></div>)}
|
field='windupContent'
|
rules={[{ message: '请填写协议履行情况', required: true }]}
|
>
|
<TextArea
|
autoSize={{ minRows: 4, maxRows: 8 }}
|
placeholder='请填写'
|
style={{ marginTop: '35px' }}
|
/>
|
</FormItem>
|
</Col>
|
</Row>
|
</Form>
|
</>
|
}
|
</Form>
|
}
|
{/*化解不成功*/}
|
{selectedTab === '2' &&
|
<Form
|
ref={failRef}
|
layout='vertical'
|
requiredSymbol={false}
|
scrollToFirstError={true}
|
>
|
<Col span={24}>
|
<div style={{ display: 'flex', marginBottom: '16px' }}>
|
无法化解理由
|
<img
|
src={question1}
|
style={{ width: '13px', height: '13px', margin: '5px 4px 0px', cursor: 'pointer' }}
|
onClick={() => { setDrawerVisible(true) }}
|
/>
|
<div className="must" style={{ marginLeft: '4px' }}>必填</div>
|
</div>
|
<table border="1" align="center" cellpadding="8" className="table">
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">当事人的主要诉求</th>
|
<td>
|
<div>
|
{caseDetailAi}
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">调解过程中提供的解决方案</th>
|
<td>
|
<FormItem
|
label=''
|
field='failReason1'
|
rules={[{ message: '请填写调解过程中提供的解决方案', required: true }]}
|
>
|
<Input.TextArea
|
showWordLimit
|
rows={3}
|
placeholder='如提出的纠纷化解建议、思路等'
|
wrapperStyle={{ width: '100%' }}
|
/>
|
</FormItem>
|
</td>
|
</tr>
|
{/* <tr>
|
<th bgcolor="#F7F8FA" className="table-title">调解过程中的主要分歧点</th>
|
<td>
|
<FormItem
|
label=''
|
field='failReason2'
|
rules={[{ message: '请填写调解过程中的主要分歧点', required: true }]}
|
>
|
<Input.TextArea
|
showWordLimit
|
rows={3}
|
placeholder='如双方主要的主张、立场、利益诉求等'
|
wrapperStyle={{ width: '100%' }}
|
/>
|
</FormItem>
|
</td>
|
</tr> */}
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">最终难以调和的原因</th>
|
<td>
|
<FormItem
|
label=''
|
field='failReason3'
|
rules={[{ message: '请填写最终难以调和的原因', required: true }]}
|
>
|
<Input.TextArea
|
showWordLimit
|
rows={3}
|
placeholder='如利益分配不均、信任缺失、信息不对称等'
|
wrapperStyle={{ width: '100%' }}
|
/>
|
</FormItem>
|
</td>
|
</tr>
|
</table>
|
</Col>
|
{/* <Col span={24} style={{ position: 'relative' }}>
|
<div style={{ position: 'absolute', display: 'flex ', top: '28px', zIndex: 1 }}>
|
<div className='myTag' style={{ marginRight: '22px' }} onClick={() => { handleTemplate3(1) }}>公共模板：化解不成功协议履行情况范本</div>
|
</div>
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>协议履行情况<div className="must">必填</div></div>)}
|
field='windupContent'
|
rules={[{ message: '请填写结案意见', required: true }]}
|
>
|
<TextArea
|
autoSize={{ minRows: 4, maxRows: 8 }}
|
placeholder='请填写'
|
style={{ marginTop: '35px' }}
|
/>
|
</FormItem>
|
</Col> */}
|
</Form>
|
}
|
</Scrollbars>
|
<Button style={{ marginTop: '8px' }} type='primary' onClick={selectedTab === '1' ? handleSubmit : handleSubmit1}>提交</Button>
|
</Modal>
|
<DocumentScanner
|
visible={scanFile}
|
onConfirm={handleConfirm}
|
onCancel={handleCancel}
|
/>
|
<NoHandleReason
|
visible={noHandleReason}
|
onClose={() => setNoHandleReason(false)}
|
/>
|
<ModeSelect onCancel={() => setMode(false)} mode={mode} />
|
<MyDrawer
|
visible={drawerVisible}
|
onClose={() => { setDrawerVisible(false) }}
|
title="无法化解理由"
|
width={1000}
|
zIndex={100000}
|
titleBefore={true}
|
>
|
<div style={{ marginTop: '-8px' }}>
|
完整的无法化解理由至少应具备3要素：调解过程中采取的措施及解决方案+最终难以调和的原因<br />
|
例如：<br />
|
调解工作于2024年1月10日在某街道人民调解委员会进行，双方当事人均到场参与。调解员首先听取了双方当事人的陈述，随后进行了多次单独会谈，根据被申请方的实际情况提出分期支付欠款的解决方案。在调解过程中，双方就具体支付方式进行了反复讨论，但未能达成一致意见。双方的主要分歧点在与被申请方不想一次性支付欠款。双方在沟通过程中情绪激动，互不相让。尽管调解员尝试缓和气氛，并引导双方从利益出发寻求解决方案，但双方仍坚持各自的立场，不愿妥协。
|
</div>
|
</MyDrawer>
|
</>
|
)
|
}
|
|
export default CaseResult;
|
