From 5aa4a814ab8d4aa194a9683ebefaefdfc6d92c3a Mon Sep 17 00:00:00 2001 From: liuwh <964324856@qq.com> Date: Tue, 17 Sep 2024 17:18:05 +0800 Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master --- gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx | 641 ++++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 406 insertions(+), 235 deletions(-) diff --git a/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx index 54ca216..66eba3e 100644 --- a/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx +++ b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx @@ -2,40 +2,52 @@ * @Author: dminyi 1301963064@qq.com * @Date: 2024-09-02 14:49:13 * @LastEditors: dminyi 1301963064@qq.com - * @LastEditTime: 2024-09-02 19:44:37 + * @LastEditTime: 2024-09-12 12:03:56 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\handleFeedback\component\CaseResult.jsx * @Description: 结案申请 */ -import React, { useState } from 'react'; +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 } from 'antd'; -import DocumentScanner from './FileUpLoad' +import { Col, Space, Button, Tooltip, Radio, Row } from 'antd'; +import DocumentScanner from '../../matterDetail/FileUpLoad' import { scan } from '@/assets/images/icon' -import { tip } from '@/assets/images' +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; -const CaseResult = ({ visible = false, handleOnCancel }) => { +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 [value, setValue] = useState(2) + const [noHandleReason, setNoHandleReason] = useState(false); + 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: '口头协议' }, @@ -47,13 +59,11 @@ setSelectedTab(newTabIndex); }; - const handleTabChange1 = (newTabIndex) => { - setSelectedTab1(newTabIndex); - }; - - const handleConfirm = () => { + const handleConfirm = (scanContent) => { // 处理确认逻辑 + formRef.current.setFieldValue('agreeContent', scanContent) setScanFile(false); + }; const handleCancel = () => { @@ -61,10 +71,115 @@ 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) { + 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, failReason2, failReason3, ...rest } = failRef?.current.getFields() + const failReason = `1、${failReason1};2、${failReason2};3、${failReason3}。` + windupApply({ + failReason: failReason, + ...rest + }) + } + }) + + } + + //结案申请请求 + const windupApply = async (submitData) => { + console.log(submitData); + const res = await windupApplyApi({ + mediResultName: selectedTab === '1' ? '化解成功' : '化解不成功', + mediResult: selectedTab === '1' ? '22_00025-1' : '22_00025-2', + 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' }}> + <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) => ( @@ -83,232 +198,288 @@ </div> ))} </div> - <Form - layout='vertical' - scrollToFirstError={true} - requiredSymbol={false} - initialValues={{ - caseLevel: 1, - }} //默认值 - > - <Col span={8}> - <FormItem - label={<div style={{ display: 'flex' }}> - 达成的协议类型 - </div> - } - field='caseLevel' - - > - <Select options={agreement} onChange={(v) => { setValue(v); console.log(typeof v, 'vvv') }}> - </Select> - </FormItem> - </Col> - {value === 1 && - <> - <Col span={24}> - <FormItem - label={ - <> - <div style={{ display: 'flex' }}> - 协议要点 - <div className="must" style={{ marginLeft: '4px' }}>必填</div> - <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} /> - <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别材料</div> - </div> - <div className='caseResult-tips'> - <img src={tip} alt='' style={{ width: '16px', marginRight: '8px' }} /> - <span>协议要点应尽量简洁,当事人大厅来访或小程序线上反映问题时,可在小程序中查看到填写的协议要点内容</span> - </div> - </> - } - field='caseDes' - rules={[{ message: '请填写事项概况', required: true }]} + {/*化解成功*/} + {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} > - <div className='caseResult-textarea'>公共模板1:调解成功口头协议</div> - <Input.TextArea - rows={5} - maxLength={{ length: 200, errorOnly: true }} - showWordLimit - wrapperStyle={{ width: '100%' }} - value='根据纠纷化解人员的协调,当事人双方同意如下调解协议: - [简要说明协议第一条] - [简要说明协议第二条] - [……] - 本口头调解协议由纠纷化解人员记录,并已告知双方当事人。双方当事人确认无误。' - /> - </FormItem> - </Col> - <Col span={24}> - <FormItem - label={ - <> - <div style={{ display: 'flex' }}> - 结案意见 - <div className="must" style={{ marginLeft: '4px' }}>必填</div> - </div> - </> - } - field='caseDes' - rules={[{ message: '请填写事项概况', required: true }]} - > - <div className='tabs1' > - {tabs1.map((tab) => ( - <div - key={tab.index} - style={{ - color: selectedTab1 === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)', - border: `1px solid ${selectedTab1 === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`, - borderRadius: '2px', - cursor: 'pointer', - padding: '0px 8px', - }} - onClick={() => handleTabChange1(tab.index)} + <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' + rules={[{ message: '请填写协议要点', required: true }]} > - {tab.label} + <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> - ))} - </div> - - <Input.TextArea - rows={5} - wrapperStyle={{ width: '100%' }} - value='鉴于以上协议内容已经双方确认,并认为该协议内容公平合理,能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行,以实现纠纷的最终解决。' - /> - </FormItem> - </Col> - - </> - - } - {value === 2 && - <> - <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 }]} + <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} > - <Upload - drag - multiple - accept='image/*' - action='/' - height={158} - onDrop={(e) => { - }} - onChange={(v) => { - setFileTip((prevLength) => { - if (v.length > 0) { - console.log(v, 'vvvvvvv'); - return v.length; + <Row> + <Col span={24}> + <ArcoUpload + params={{ + action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&ownerId=${caseResultId}&ownerType=22_00018-302`, + }} + 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> + </> } - return v.length; - }); - }} - tip='支持png、 jpg、excel、word、pdf等格式的文件上传,每次上传大小不超过10M' - /> + 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 === 2 ? 'highlighted' : ''}`} // 条件样式 + onClick={() => handleTemplate2(2)} + > + 个人模板:化解成功结案意见范本(完整版) + </div> + </div> - - </FormItem> - </Col> - <Col span={24}> - <FormItem - label={ - <> - <div style={{ display: 'flex' }}> - 协议要点 - <div className="must" style={{ marginLeft: '4px' }}>必填</div> - <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} /> - <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别材料</div> - </div> - <div className='caseResult-tips'> - <img src={tip} alt='' style={{ width: '16px', marginRight: '8px' }} /> - <span>协议要点应尽量简洁,当事人大厅来访或小程序线上反映问题时,可在小程序中查看到填写的协议要点内容</span> - </div> - </> - } - field='caseDes' - rules={[{ message: '请填写事项概况', required: true }]} - > - <div className='caseResult-textarea'>公共模板1:调解成功口头协议</div> - <Input.TextArea - rows={5} - maxLength={{ length: 200, errorOnly: true }} - showWordLimit - wrapperStyle={{ width: '100%' }} - value='根据纠纷化解人员的协调,当事人双方同意如下调解协议: - [简要说明协议第一条] - [简要说明协议第二条] - [……] - 本口头调解协议由纠纷化解人员记录,并已告知双方当事人。双方当事人确认无误。' - /> - </FormItem> - </Col> - <Col span={24}> - <FormItem - label={ - <> - <div style={{ display: 'flex' }}> - 结案意见 - <div className="must" style={{ marginLeft: '4px' }}>必填</div> - </div> - </> - } - field='caseDes' - rules={[{ message: '请填写事项概况', required: true }]} - > - <div className='tabs1' > - {tabs1.map((tab) => ( - <div - key={tab.index} - style={{ - color: selectedTab1 === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)', - border: `1px solid ${selectedTab1 === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`, - borderRadius: '2px', - cursor: 'pointer', - padding: '0px 8px', - }} - onClick={() => handleTabChange1(tab.index)} + <FormItem + label={(<div style={{ display: 'flex' }}>结案意见<div className="must">必填</div></div>)} + field='windupContent' + rules={[{ message: '请填写结案意见', required: true }]} > - {tab.label} - </div> - ))} - </div> - - <Input.TextArea - rows={5} - wrapperStyle={{ width: '100%' }} - value='鉴于以上协议内容已经双方确认,并认为该协议内容公平合理,能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行,以实现纠纷的最终解决。' - /> - </FormItem> - </Col> - - </> - - } - <Space style={{ marginBottom: '16px' }}> - <Button type='primary'>提交</Button> - <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>保存</Button> - </Space> - </Form> - </Modal> + <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' + rules={[{ message: '请填写调解过程中提供的解决方案', required: true }]} + > + <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' + rules={[{ message: '请填写调解过程中的主要分歧点', required: true }]} + > + <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' + rules={[{ message: '请填写最终难以调和的原因', required: true }]} + > + <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' + rules={[{ message: '请填写结案意见', required: true }]} + > + <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} /> + </> ) } -- Gitblit v1.8.0