From 621a3268a8c2cebf899e3ba824c49a1513cb619b Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Fri, 13 Sep 2024 18:32:35 +0800
Subject: [PATCH] feat: 图片
---
gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx | 462 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 242 insertions(+), 220 deletions(-)
diff --git a/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx
index 0ba114c..2bb49af 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 17:52:21
+ * @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,9 +30,14 @@
-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
@@ -37,7 +46,6 @@
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: '化解成功' },
@@ -75,32 +83,111 @@
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 = () => {
- const data = formRef.current.getFields()
- console.log(data, 'handleSubmit')
- windupApply(data)
+ 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: '提交成功' });
- 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) => (
@@ -151,72 +238,62 @@
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'
>
- <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'
>
- <Input.TextArea
- rows={5}
- wrapperStyle={{ width: '100%' }}
+ <TextArea
+ autoSize={{ minRows: 4, maxRows: 8 }}
+ placeholder='请填写'
+ style={{ marginTop: '35px' }}
/>
</FormItem>
</Col>
@@ -253,83 +330,40 @@
>
<ArcoUpload
params={{
- action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&ownerId=${caseResultId}&ownerType=22_00018-207`,
+ action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&ownerId=${caseResultId}&ownerType=22_00018-302`,
}}
- field='file1'
- label='代理人委托书'
+ field='file'
+ label=''
// editData={props.editData}
- ownerType='22_00018-207'
+ ownerType='22_00018-302'
/>
</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)}
- >
- {tab.label}
- </div>
- ))}
+ <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>
- <Input.TextArea
- rows={5}
- wrapperStyle={{ width: '100%' }}
- value='鉴于以上协议内容已经双方确认，并认为该协议内容公平合理，能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行，以实现纠纷的最终解决。'
+ <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>
@@ -347,107 +381,95 @@
{/*化解不成功*/}
{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(!noHandleReason)}>
- <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>
- <Input.TextArea
- showWordLimit
- rows={3}
- placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
- wrapperStyle={{ width: '100%' }}
- />
- </td>
- </tr>
- <tr>
- <th bgcolor="#F7F8FA" className="table-title">调解过程中的主要分歧点</th>
- <td>
- <Input.TextArea
- showWordLimit
- rows={3}
- placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
- wrapperStyle={{ width: '100%' }}
- />
- </td>
- </tr>
- <tr>
- <th bgcolor="#F7F8FA" className="table-title">最终难以调和的原因</th>
- <td>
- <Input.TextArea
- showWordLimit
- rows={3}
- placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
- wrapperStyle={{ width: '100%' }}
- />
- </td>
- </tr>
- </table>
- </FormItem>
- </Col>
- <Col span={24}>
- <FormItem
- label={
- <>
- <div style={{ display: 'flex' }}>
- 结案意见
- <div className="must" style={{ marginLeft: '4px' }}>必填</div>
+ <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>
- </>
- }
- field='caseDes'
- rules={[{ message: '请填写事项概况', required: true }]}
+ </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'
>
- <div className='caseResult-textarea'>公共模板1：化解不成功结案意见范本</div>
- <Input.TextArea
- rows={5}
- wrapperStyle={{ width: '100%' }}
- value='鉴于以上协议内容已经双方确认，并认为该协议内容公平合理，能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行，以实现纠纷的最终解决。'
+ <TextArea
+ autoSize={{ minRows: 4, maxRows: 8 }}
+ placeholder='请填写'
+ style={{ marginTop: '35px' }}
/>
</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>
--
Gitblit v1.8.0