From 4f7ea178a56ad2b88cbb8a742915804fc94bc65f Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Sun, 08 Sep 2024 17:53:34 +0800
Subject: [PATCH] 提交
---
gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx | 420 ++++++++++++++++++++++++++++++++---------------------------
1 files changed, 227 insertions(+), 193 deletions(-)
diff --git a/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx
index e48314f..0ba114c 100644
--- a/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx
+++ b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx
@@ -2,33 +2,42 @@
* @Author: dminyi 1301963064@qq.com
* @Date: 2024-09-02 14:49:13
* @LastEditors: dminyi 1301963064@qq.com
- * @LastEditTime: 2024-09-03 14:44:14
+ * @LastEditTime: 2024-09-08 17:52:21
* @FilePath: \gzDyh\gz-customerSystem\src\views\register\handleFeedback\component\CaseResult.jsx
* @Description: 结案申请
*/
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
import { Modal, Form, Select, Upload, Input } from '@arco-design/web-react';
-import { Col, Space, Button, Tooltip, Radio } from 'antd';
+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 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 }) => {
+ const formRef = useRef();
+ const formRefWrite = 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 [visibleType, setVisibleType] = useState(false)
const tabs = [
{ index: '1', label: '化解成功' },
@@ -54,9 +63,11 @@
setSelectedTab1(newTabIndex);
};
- const handleConfirm = () => {
+ const handleConfirm = (scanContent) => {
// 处理确认逻辑
+ formRef.current.setFieldValue('agreeContent', scanContent)
setScanFile(false);
+
};
const handleCancel = () => {
@@ -69,10 +80,27 @@
setRadioValue(e.target.value);
};
+ const handleSubmit = () => {
+ const data = formRef.current.getFields()
+ console.log(data, 'handleSubmit')
+ windupApply(data)
+ }
+
+ const windupApply = async (submitData) => {
+ const res = await windupApplyApi({
+ caseResultId: caseResultId,
+ ...submitData
+ })
+ if (res.type) {
+ $$.infoSuccess({ content: '提交成功' });
+ setVisibleType(false)
+ }
+ }
+
return (
<>
- <Modal visible={visible} onCancel={handleOnCancel} title='申请结案' centered footer={null} style={{ overflow: 'auto' }}>
+ <Modal visible={visibleType || visible} onCancel={handleOnCancel} title='申请结案' centered footer={null} style={{ overflow: 'auto' }}>
<div className='caseResult-title'>化解结果</div>
<div className='caseResult-tabs'>
{tabs.map((tab) => (
@@ -91,13 +119,14 @@
</div>
))}
</div>
+ {/*化解成功*/}
{selectedTab === '1' &&
<Form
layout='vertical'
scrollToFirstError={true}
requiredSymbol={false}
initialValues={{
- caseLevel: 1,
+ agreeType: 1,
}} //默认值
>
<Col span={8}>
@@ -106,213 +135,216 @@
达成的协议类型
</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}>
+ <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>
+ <div className='modeMore'>
+ <div className='caseResult-textarea'>公共模板1：调解成功口头协议</div>
+ <div style={{ color: '#1A6FB8' }} onClick={() => setMode(!mode)}>更多模板</div>
+ </div>
+ </>
+ }
+ field='agreeContent'
+ >
+ <Input.TextArea
+ rows={5}
+ maxLength={{ length: 200, errorOnly: true }}
+ showWordLimit
+ wrapperStyle={{ width: '100%' }}
+ />
+ </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>
- <Input.TextArea
- rows={5}
- wrapperStyle={{ width: '100%' }}
- value='鉴于以上协议内容已经双方确认，并认为该协议内容公平合理，能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行，以实现纠纷的最终解决。'
- />
- </FormItem>
- </Col>
-
+ </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='根据纠纷化解人员的协调，当事人双方同意如下调解协议：
+ <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-207`,
+ }}
+ field='file1'
+ label='代理人委托书'
+ // editData={props.editData}
+ ownerType='22_00018-207'
+ />
+ </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>
+ />
+ </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>
- </>
- }
- 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>
- <Input.TextArea
- rows={5}
- wrapperStyle={{ width: '100%' }}
- value='鉴于以上协议内容已经双方确认，并认为该协议内容公平合理，能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行，以实现纠纷的最终解决。'
- />
- </FormItem>
- </Col>
-
+ <Input.TextArea
+ rows={5}
+ wrapperStyle={{ width: '100%' }}
+ value='鉴于以上协议内容已经双方确认，并认为该协议内容公平合理，能够妥善解决双方的纠纷。建议双方当事人按照协议内容执行，以实现纠纷的最终解决。'
+ />
+ </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
layout='vertical'
@@ -420,7 +452,7 @@
</Space>
</Form>
}
- </Modal>
+ </Modal >
<DocumentScanner
visible={scanFile}
onConfirm={handleConfirm}
@@ -430,6 +462,8 @@
visible={noHandleReason}
onClose={() => setNoHandleReason(false)}
/>
+ <ModeSelect onCancel={() => setMode(false)} mode={mode} />
+
</>
)
}
--
Gitblit v1.8.0