From 9a7eba69c41bd1ff577615349d16829e0073d943 Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Wed, 11 Sep 2024 11:30:21 +0800 Subject: [PATCH] 修改 --- gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx | 578 ++++++++++++++++++++++++++++++++------------------------- 1 files changed, 320 insertions(+), 258 deletions(-) diff --git a/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx index 81483be..9af56b6 100644 --- a/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx +++ b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx @@ -2,33 +2,47 @@ * @Author: dminyi 1301963064@qq.com * @Date: 2024-09-02 14:49:13 * @LastEditors: dminyi 1301963064@qq.com - * @LastEditTime: 2024-09-02 20:52:05 + * @LastEditTime: 2024-09-11 11:29:10 * @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, Tooltip, Radio } 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, question1 } from '@/assets/images' -import { NoHandleReason } from '../../visit/component/levelDetail' +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 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 [radioValue, setRadioValue] = useState(1); + const [mode, setMode] = useState(false) const tabs = [ { index: '1', label: '化解成功' }, @@ -54,9 +68,11 @@ setSelectedTab1(newTabIndex); }; - const handleConfirm = () => { + const handleConfirm = (scanContent) => { // 处理确认逻辑 + formRef.current.setFieldValue('agreeContent', scanContent) setScanFile(false); + }; const handleCancel = () => { @@ -64,15 +80,100 @@ setScanFile(false); }; - const onChange = (e) => { - console.log('radio checked', e.target.value); - setRadioValue(e.target.value); - }; + const handleTemplate = (type) => { + if (type === 1) { + formRef.current.setFieldValue('windupContent', '鉴于以上协议内容已经双方确认,并认为该协议内容公平合理,能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行,以实现纠纷的最终解决。') + } else { + formRef.current.setFieldValue('windupContent', '') + } + } + + const handleTemplate1 = (type) => { + if (type === 1) { + formRef.current.setFieldValue('agreeContent', '根据纠纷化解人员的协调,当事人双方同意如下调解协议:[简要说明协议第一条][简要说明协议第二条][……]本口头调解协议由纠纷化解人员记录,并已告知双方当事人。双方当事人确认无误。') + } + } + + const handleTemplate2 = (type) => { + if (type === 1) { + formRefWrite.current.setFieldValue('windupContent', '鉴于以上协议内容已经双方确认,并认为该协议内容公平合理,能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行,以实现纠纷的最终解决。') + } else { + formRefWrite.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' }}> + <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) => ( @@ -91,13 +192,14 @@ </div> ))} </div> + {/*化解成功*/} {selectedTab === '1' && <Form layout='vertical' scrollToFirstError={true} requiredSymbol={false} initialValues={{ - caseLevel: 1, + agreeType: 1, }} //默认值 > <Col span={8}> @@ -106,271 +208,247 @@ 达成的协议类型 </div> } - field='caseLevel' - + field='agreeType' > <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 }]} - > - <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)} - > - {tab.label} - </div> - ))} - </div> + <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' }} /> + <span>协议要点应尽量简洁,当事人大厅来访或小程序线上反映问题时,可在小程序中查看到填写的协议要点内容</span> + </div> + <div style={{ position: 'absolute', display: 'flex ', top: '79px', zIndex: 1 }}> + <div className='myTag' 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' style={{ marginRight: '22px' }} onClick={() => { handleTemplate(1) }}>公共模板:化解成功结案意见范本</div> + <div className='myTag' 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: '40px' }} + /> + </FormItem> + </Col> - <Input.TextArea - rows={5} - wrapperStyle={{ width: '100%' }} - value='鉴于以上协议内容已经双方确认,并认为该协议内容公平合理,能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行,以实现纠纷的最终解决。' - /> - </FormItem> - </Col> + {/* <Col span={24}> + <FormItem + label={ + <> + <div style={{ display: 'flex' }}> + 结案意见 + <div className="must" style={{ marginLeft: '4px' }}>必填</div> + </div> + <div className='modeMore'> + <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)} + > + {tab.label} + </div> + ))} + </div> + <div style={{ color: '#1A6FB8' }} onClick={() => setMode(!mode)}>更多模板</div> + </div> + </> + } + field='windupContent' + > + <Input.TextArea + rows={5} + wrapperStyle={{ width: '100%' }} + /> + </FormItem> + </Col> */} + </Row> + </Form> </> - } + {/*书面协议 */} {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 }]} - > - <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; - } - return v.length; - }); - }} - tip='支持png、 jpg、excel、word、pdf等格式的文件上传,每次上传大小不超过10M' - /> - - - </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', + <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`, }} - onClick={() => handleTabChange1(tab.index)} - > - {tab.label} - </div> - ))} - </div> - - <Input.TextArea - rows={5} - wrapperStyle={{ width: '100%' }} - value='鉴于以上协议内容已经双方确认,并认为该协议内容公平合理,能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行,以实现纠纷的最终解决。' - /> - </FormItem> - </Col> - + 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' style={{ marginRight: '22px' }} onClick={() => { handleTemplate2(1) }}>公共模板:化解成功结案意见范本</div> + <div className='myTag' 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: '40px' }} + /> + </FormItem> + </Col> + </Row> + </Form> </> } <Space style={{ marginBottom: '16px' }}> - <Button type='primary'>提交</Button> + <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} - initialValues={{ - caseLevel: 3, - }}//默认值 > <Col span={24}> - <FormItem - label={<div style={{ display: 'flex' }}> - 无法化解理由 - <Tooltip onClick={() => setNoHandleReason(true)}> - <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} /> - </Tooltip> - <div className="must" style={{ marginLeft: '4px' }}>必填</div> - </div> - } - field='caseDes' - rules={[{ message: '请填写事项概况', required: true }]} - > - <table border="1" align="center" cellpadding="8" className="table"> - <tr> - <th bgcolor="#F7F8FA" className="table-title" width="120">调解过程中提供的解决方案</th> - <td> + <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%' }} /> - </td> - </tr> - <tr> - <th bgcolor="#F7F8FA" className="table-title">调解过程中的主要分歧点</th> - <td> + </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%' }} /> - </td> - </tr> - <tr> - <th bgcolor="#F7F8FA" className="table-title">最终难以调和的原因</th> - <td> + </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%' }} /> - </td> - </tr> - </table> - </FormItem> + </FormItem> + </td> + </tr> + </table> </Col> <Col span={24}> <FormItem @@ -380,12 +458,15 @@ 结案意见 <div className="must" style={{ marginLeft: '4px' }}>必填</div> </div> + <div className='modeMore'> + <div className='caseResult-textarea'>公共模板:化解不成功结案意见范本</div> + <div style={{ color: '#1A6FB8' }} onClick={() => setMode(!mode)}>更多模板</div> + </div> </> } - field='caseDes' + field='windupContent' rules={[{ message: '请填写事项概况', required: true }]} > - <div className='caseResult-textarea'>公共模板1:化解不成功结案意见范本</div> <Input.TextArea rows={5} wrapperStyle={{ width: '100%' }} @@ -393,34 +474,13 @@ /> </FormItem> </Col> - <Col span={24}> - <FormItem - label='是否转诉讼案件' - field='caseDes' - > - <Radio.Group onChange={onChange} value={radioValue}> - <Space direction="vertical"> - <Radio value={1}>否</Radio> - <Radio value={2}>是</Radio> - </Space> - </Radio.Group> - </FormItem> - </Col> - <Col span={24}> - <FormItem - label='是否转诉诉讼案号讼案件' - field='caseDes' - > - <Input style={{ width: 350 }} placeholder='请输入法院立案号' /> - </FormItem> - </Col> <Space style={{ marginBottom: '16px' }}> - <Button type='primary'>提交</Button> + <Button type='primary' onClick={handleSubmit1}>提交</Button> <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>保存</Button> </Space> </Form> } - </Modal> + </Modal > <DocumentScanner visible={scanFile} onConfirm={handleConfirm} @@ -430,6 +490,8 @@ visible={noHandleReason} onClose={() => setNoHandleReason(false)} /> + <ModeSelect onCancel={() => setMode(false)} mode={mode} /> + </> ) } -- Gitblit v1.8.0