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 | 363 ++++++++++++++++++++++++++------------------------- 1 files changed, 185 insertions(+), 178 deletions(-) diff --git a/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx index 3462a50..66eba3e 100644 --- a/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx +++ b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx @@ -2,11 +2,12 @@ * @Author: dminyi 1301963064@qq.com * @Date: 2024-09-02 14:49:13 * @LastEditors: dminyi 1301963064@qq.com - * @LastEditTime: 2024-09-08 18:25:54 + * @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' @@ -18,7 +19,10 @@ 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 }); @@ -26,29 +30,24 @@ -const CaseResult = ({ visible = false, handleOnCancel, caseResultId, caseId }) => { +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 [radioValue, setRadioValue] = useState(1); const [mode, setMode] = useState(false) - const [visibleType, setVisibleType] = 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: '口头协议' }, @@ -58,10 +57,6 @@ const handleTabChange = (newTabIndex) => { setSelectedTab(newTabIndex); - }; - - const handleTabChange1 = (newTabIndex) => { - setSelectedTab1(newTabIndex); }; const handleConfirm = (scanContent) => { @@ -76,55 +71,115 @@ setScanFile(false); }; - const onChange = (e) => { - console.log('radio checked', e.target.value); - setRadioValue(e.target.value); - }; + 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) + formRef?.current.validate(undefined, (errors, values) => { + if (!errors) { + const data = formRef?.current.getFields() + windupApply({ + agreeType: '24_00003-1', + agreeTypeName: '口头协议', + ...data + }) + } + }) } + //书面协议 if (value === 2) { - const data = formRefWrite?.current.getFields() - console.log(data, 'handleSubmit') - windupApply(data) + formRefWrite?.current.validate(undefined, (errors, values) => { + if (!errors) { + const { file, ...rest } = formRefWrite?.current.getFields() + windupApply({ + agreeType: '24_00003-2', + agreeTypeName: '书面协议', + ...rest + }) + } + }) } - 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) - } + 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: '提交成功' }); - setVisibleType(false) + handleOnCancel(); + navigate('/mediate/visit/visitWorkBench') } } return ( <> - <Modal visible={visibleType || 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) => ( @@ -150,7 +205,7 @@ scrollToFirstError={true} requiredSymbol={false} initialValues={{ - agreeType: 1, + agreeType: value, }} //默认值 > <Col span={8}> @@ -161,7 +216,7 @@ } field='agreeType' > - <Select options={agreement} onChange={(v) => { setValue(v); console.log(typeof v, 'vvv') }}> + <Select options={agreement} onChange={(v) => { setValue(v); }}> </Select> </FormItem> </Col> @@ -175,72 +230,64 @@ scrollToFirstError={true} > <Row> - <Col span={24}> + <Col span={24} style={{ position: 'relative' }}> <FormItem - label={ + 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 className="must">必填</div> </div> <div className='caseResult-tips'> - <img src={tip} alt='' style={{ width: '16px', marginRight: '8px' }} /> + <img src={tip} alt='' style={{ width: '16px', marginRight: '8px', marginTop: '-5px' }} /> <span>协议要点应尽量简洁,当事人大厅来访或小程序线上反映问题时,可在小程序中查看到填写的协议要点内容</span> </div> - <div className='modeMore'> - <div className='caseResult-textarea'>公共模板1:调解成功口头协议</div> - <div style={{ color: '#1A6FB8' }} onClick={() => setMode(!mode)}>更多模板</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 }]} > - <Input.TextArea - rows={5} - maxLength={{ length: 200, errorOnly: true }} - showWordLimit - wrapperStyle={{ width: '100%' }} + <TextArea + autoSize={{ minRows: 4, maxRows: 8 }} + placeholder='请填写' + style={{ marginTop: '40px' }} /> </FormItem> </Col> - <Col span={24}> + <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" 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> - </> - } + label={(<div style={{ display: 'flex' }}>结案意见<div className="must">必填</div></div>)} field='windupContent' + rules={[{ message: '请填写结案意见', required: true }]} > - <Input.TextArea - rows={5} - wrapperStyle={{ width: '100%' }} + <TextArea + autoSize={{ minRows: 4, maxRows: 8 }} + placeholder='请填写' + style={{ marginTop: '35px' }} /> </FormItem> </Col> @@ -259,7 +306,14 @@ > <Row> <Col span={24}> - <FormItem + <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' }}> @@ -272,83 +326,41 @@ </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> + ownerType='22_00018-302' + /> </Col> - <Col span={24}> + <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" 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> - - </> - } + label={(<div style={{ display: 'flex' }}>结案意见<div className="must">必填</div></div>)} field='windupContent' - rules={[{ message: '请填写事项概况', required: true }]} + 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> */} - <Input.TextArea - rows={5} - wrapperStyle={{ width: '100%' }} - value='鉴于以上协议内容已经双方确认,并认为该协议内容公平合理,能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行,以实现纠纷的最终解决。' + <TextArea + autoSize={{ minRows: 4, maxRows: 8 }} + placeholder='请填写' + style={{ marginTop: '35px' }} /> </FormItem> </Col> </Row> </Form> </> - } <Space style={{ marginBottom: '16px' }}> <Button type='primary' onClick={handleSubmit}>提交</Button> @@ -387,6 +399,7 @@ <FormItem label='' field='failReason1' + rules={[{ message: '请填写调解过程中提供的解决方案', required: true }]} > <Input.TextArea showWordLimit @@ -403,6 +416,7 @@ <FormItem label='' field='failReason2' + rules={[{ message: '请填写调解过程中的主要分歧点', required: true }]} > <Input.TextArea showWordLimit @@ -419,6 +433,7 @@ <FormItem label='' field='failReason3' + rules={[{ message: '请填写最终难以调和的原因', required: true }]} > <Input.TextArea showWordLimit @@ -431,33 +446,25 @@ </tr> </table> </Col> - <Col span={24}> + <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" style={{ marginLeft: '4px' }}>必填</div> - </div> - <div className='modeMore'> - <div className='caseResult-textarea'>公共模板:化解不成功结案意见范本</div> - <div style={{ color: '#1A6FB8' }} onClick={() => setMode(!mode)}>更多模板</div> - </div> - </> - } + label={(<div style={{ display: 'flex' }}>结案意见<div className="must">必填</div></div>)} field='windupContent' - rules={[{ message: '请填写事项概况', required: true }]} + rules={[{ message: '请填写结案意见', required: true }]} > - <Input.TextArea - rows={5} - wrapperStyle={{ width: '100%' }} - value='鉴于以上协议内容已经双方确认,并认为该协议内容公平合理,能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行,以实现纠纷的最终解决。' + <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> + {/* <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>保存</Button> */} </Space> </Form> } -- Gitblit v1.8.0