/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-09-02 14:49:13
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @LastEditTime: 2024-09-12 12:03:56
|
* @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';
|
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 });
|
}
|
|
|
|
const CaseResult = ({ visible = false, handleOnCancel, caseResultId, caseId, caseTaskId }) => {
|
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 [selectedTab1, setSelectedTab1] = useState('1'); // 默认选中第一个 tab
|
const [fileTip, setFileTip] = useState('0');
|
const [value, setValue] = useState(1)
|
const [noHandleReason, setNoHandleReason] = useState(false);
|
const [radioValue, setRadioValue] = useState(1);
|
const [mode, setMode] = useState(false)
|
|
const tabs = [
|
{ index: '1', label: '化解成功' },
|
{ index: '2', label: '化解不成功' },
|
];
|
|
const tabs1 = [
|
{ index: '1', label: '公共模板1：化解成功结案意见范本' },
|
{ index: '2', label: '个人模板1：化解成功结案意见范本（完整版）' }
|
]
|
|
const agreement = [
|
{ value: 1, label: '口头协议' },
|
{ value: 2, label: '书面协议' }
|
]
|
|
|
const handleTabChange = (newTabIndex) => {
|
setSelectedTab(newTabIndex);
|
};
|
|
const handleTabChange1 = (newTabIndex) => {
|
setSelectedTab1(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', '双方当事人于xx时间xx地址已达成xx协议，纠纷已化解。')
|
} else {
|
formRef.current.setFieldValue('windupContent', '')
|
}
|
}
|
|
const handleTemplate1 = (type) => {
|
setSelectedTemplate1(type);
|
if (type === 1) {
|
formRef.current.setFieldValue('agreeContent', '根据纠纷化解人员的协调，当事人双方同意如下调解协议：[简要说明协议第一条][简要说明协议第二条][……]本口头调解协议由纠纷化解人员记录，并已告知双方当事人。双方当事人确认无误。')
|
}
|
}
|
|
const handleTemplate2 = (type) => {
|
setSelectedTemplate2(type);
|
if (type === 1) {
|
formRefWrite.current.setFieldValue('windupContent', '双方当事人于xx时间xx地址已达成xx协议，纠纷已化解。')
|
} else {
|
formRefWrite.current.setFieldValue('windupContent', '')
|
}
|
}
|
|
const handleTemplate3 = (type) => {
|
if (type === 1) {
|
failRef.current.setFieldValue('windupContent', '经过多次调解，尽管纠纷化解人员尽最大努力帮助双方找到解决方案，但由于以下原因，当事人双方未能达成一致意见：[详细说明化解未成功的原因之一][详细说明化解未成功的原因之二][……][……]鉴于上述情况，纠纷化解人员认为目前无法通过调解方式解决双方的争议，建议双方考虑采取其他合法途径解决纠纷。')
|
} else {
|
failRef.current.setFieldValue('windupContent', '')
|
}
|
}
|
|
const handleSubmit = () => {
|
if (value === 1) {
|
const data = formRef?.current.getFields()
|
console.log(data, 'handleSubmit')
|
windupApply(data)
|
}
|
if (value === 2) {
|
const data = formRefWrite?.current.getFields()
|
console.log(data, 'handleSubmit')
|
windupApply(data)
|
}
|
if (selectedTab === '2') {
|
const data = failRef?.current.getFields()
|
console.log(data, 'handleSubmit')
|
// windupApply(data)
|
|
|
}
|
|
}
|
const handleSubmit1 = () => {
|
if (selectedTab === '2') {
|
const data = failRef?.current.getFields()
|
console.log(data, 'handleSubmit')
|
windupApply(data)
|
}
|
|
}
|
|
const windupApply = async (submitData) => {
|
console.log(
|
{
|
mediResultName: selectedTab === '1' ? '化解成功' : '化解不成功',
|
mediResult: selectedTab === '1' ? '22_00025-1' : '22_00025-2',
|
agreeType: selectedTab === '1' ? '24_00003-1' : '24_00003-2',
|
agreeTypeName: value === 1 ? '口头协议' : '书面协议',
|
caseTaskId: caseTaskId,
|
caseId: caseId,
|
caseResultId: caseResultId,
|
...submitData
|
}, 'windupApplyData'
|
)
|
const res = await windupApplyApi({
|
mediResultName: selectedTab === '1' ? '化解成功' : '化解不成功',
|
mediResult: selectedTab === '1' ? '22_00025-1' : '22_00025-2',
|
agreeType: selectedTab === '1' ? '24_00003-1' : '24_00003-2',
|
agreeTypeName: value === 1 ? '口头协议' : '书面协议',
|
caseTaskId: caseTaskId,
|
caseId: caseId,
|
caseResultId: caseResultId,
|
...submitData
|
})
|
if (res.type) {
|
$$.infoSuccess({ content: '提交成功' });
|
handleOnCancel();
|
navigate('/mediate/visit/visitWorkBench')
|
}
|
}
|
|
|
return (
|
<>
|
<Modal
|
visible={visible}
|
onCancel={handleOnCancel}
|
title='申请结案'
|
centered
|
footer={null}
|
style={{ overflow: 'auto' }}
|
unmountOnExit={true}
|
maskClosable={false}
|
>
|
<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: 1,
|
}} //默认值
|
>
|
<Col span={8}>
|
<FormItem
|
label={<div style={{ display: 'flex' }}>
|
达成的协议类型
|
</div>
|
}
|
field='agreeType'
|
>
|
<Select options={agreement} onChange={(v) => { setValue(v); console.log(typeof v, 'vvv') }}>
|
</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>
|
</>
|
)}
|
field='agreeContent'
|
>
|
<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 === 2 ? 'highlighted' : ''}`} // 条件样式
|
onClick={() => handleTemplate(2)}
|
>
|
个人模板：化解成功结案意见范本（完整版）
|
</div>
|
</div>
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>结案意见<div className="must">必填</div></div>)}
|
field='windupContent'
|
>
|
<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}>
|
<FormItem
|
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>
|
</>
|
}
|
field='caseDes'
|
rules={[{ message: '请填写事项概况', required: true }]}
|
>
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&ownerId=${caseResultId}&ownerType=22_00018-302`,
|
}}
|
field='file'
|
label=''
|
// editData={props.editData}
|
ownerType='22_00018-302'
|
/>
|
</FormItem>
|
</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 === 2 ? 'highlighted' : ''}`} // 条件样式
|
onClick={() => handleTemplate2(2)}
|
>
|
个人模板：化解成功结案意见范本（完整版）
|
</div>
|
</div>
|
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>结案意见<div className="must">必填</div></div>)}
|
field='windupContent'
|
>
|
<TextArea
|
autoSize={{ minRows: 4, maxRows: 8 }}
|
placeholder='请填写'
|
style={{ marginTop: '35px' }}
|
/>
|
</FormItem>
|
</Col>
|
</Row>
|
</Form>
|
</>
|
|
}
|
<Space style={{ marginBottom: '16px' }}>
|
<Button type='primary' onClick={handleSubmit}>提交</Button>
|
<Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>保存</Button>
|
</Space>
|
</Form>
|
}
|
{/*化解不成功*/}
|
{selectedTab === '2' &&
|
<Form
|
ref={failRef}
|
layout='vertical'
|
requiredSymbol={false}
|
scrollToFirstError={true}
|
>
|
<Col span={24}>
|
<div style={{ display: 'flex', marginBottom: '16px' }}>
|
无法化解理由
|
<img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
|
<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>
|
鉴于上述情况，申请方希望综治中心可以帮忙解决：<br />
|
1. 请求判决被申请人张三立即偿还借款本金人民币20万元整；<br />
|
2. 请求判决被申请人支付自借款之日起至实际还款之日止按合同约定的年利率计算的利息；
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">调解过程中提供的解决方案</th>
|
<td>
|
<FormItem
|
label=''
|
field='failReason1'
|
>
|
<Input.TextArea
|
showWordLimit
|
rows={3}
|
placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
|
wrapperStyle={{ width: '100%' }}
|
/>
|
</FormItem>
|
</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">调解过程中的主要分歧点</th>
|
<td>
|
<FormItem
|
label=''
|
field='failReason2'
|
>
|
<Input.TextArea
|
showWordLimit
|
rows={3}
|
placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
|
wrapperStyle={{ width: '100%' }}
|
/>
|
</FormItem>
|
</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">最终难以调和的原因</th>
|
<td>
|
<FormItem
|
label=''
|
field='failReason3'
|
>
|
<Input.TextArea
|
showWordLimit
|
rows={3}
|
placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
|
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'
|
>
|
<TextArea
|
autoSize={{ minRows: 4, maxRows: 8 }}
|
placeholder='请填写'
|
style={{ marginTop: '35px' }}
|
/>
|
</FormItem>
|
</Col>
|
<Space style={{ marginBottom: '16px' }}>
|
<Button type='primary' onClick={handleSubmit1}>提交</Button>
|
<Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>保存</Button>
|
</Space>
|
</Form>
|
}
|
</Modal >
|
<DocumentScanner
|
visible={scanFile}
|
onConfirm={handleConfirm}
|
onCancel={handleCancel}
|
/>
|
<NoHandleReason
|
visible={noHandleReason}
|
onClose={() => setNoHandleReason(false)}
|
/>
|
<ModeSelect onCancel={() => setMode(false)} mode={mode} />
|
|
</>
|
)
|
}
|
|
export default CaseResult;
|
