From 9365876679475117b2ac24fda870e835a3f99309 Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Mon, 02 Sep 2024 19:55:54 +0800
Subject: [PATCH] 申请结案
---
gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx | 53 ++++++
gz-customerSystem/src/views/register/index.less | 41 ++++
gz-customerSystem/src/assets/images/index.js | 6
gz-customerSystem/src/assets/images/tip.png | 0
gz-customerSystem/src/views/register/handleFeedback/index.jsx | 6
gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx | 317 +++++++++++++++++++++++++++++++++++++++
6 files changed, 411 insertions(+), 12 deletions(-)
diff --git a/gz-customerSystem/src/assets/images/index.js b/gz-customerSystem/src/assets/images/index.js
index af2d092..8dee383 100644
--- a/gz-customerSystem/src/assets/images/index.js
+++ b/gz-customerSystem/src/assets/images/index.js
@@ -50,7 +50,8 @@
import empty from "./empty.png";
import feedback from "./feedback.png";
import fold from "./fold.png";
-import down from "./down.png"
+import down from "./down.png";
+import tip from "./tip.png"
export {
ledger_1,
@@ -96,5 +97,6 @@
empty,
feedback,
fold,
- down
+ down,
+ tip
};
diff --git a/gz-customerSystem/src/assets/images/tip.png b/gz-customerSystem/src/assets/images/tip.png
new file mode 100644
index 0000000..70772b7
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/tip.png
Binary files differ
diff --git a/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx
new file mode 100644
index 0000000..54ca216
--- /dev/null
+++ b/gz-customerSystem/src/views/register/handleFeedback/component/CaseResult.jsx
@@ -0,0 +1,317 @@
+/*
+ * @Author: dminyi 1301963064@qq.com
+ * @Date: 2024-09-02 14:49:13
+ * @LastEditors: dminyi 1301963064@qq.com
+ * @LastEditTime: 2024-09-02 19:44:37
+ * @FilePath: \gzDyh\gz-customerSystem\src\views\register\handleFeedback\component\CaseResult.jsx
+ * @Description: 结案申请
+ */
+import React, { useState } from 'react';
+import { Modal, Form, Select, Upload, Input } from '@arco-design/web-react';
+import { Col, Space, Button } from 'antd';
+import DocumentScanner from './FileUpLoad'
+import { scan } from '@/assets/images/icon'
+import { tip } from '@/assets/images'
+
+const FormItem = Form.Item;
+
+
+const CaseResult = ({ visible = false, handleOnCancel }) => {
+
+
+
+ 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 tabs = [
+ { index: '1', label: '化解成功' },
+ { index: '2', label: '化解不成功' },
+ ];
+
+ const tabs1 = [
+ { index: '1', label: '公共模板1：化解成功结案意见范本' },
+ { index: '2', label: '个人模板1：化解成功结案意见范本（完整版）' }
+ ]
+
+ const agreement = [
+ { value: 1, label: '口头协议' },
+ { value: 2, label: '书面协议' }
+ ]
+
+
+ const handleTabChange = (newTabIndex) => {
+ setSelectedTab(newTabIndex);
+ };
+
+ const handleTabChange1 = (newTabIndex) => {
+ setSelectedTab1(newTabIndex);
+ };
+
+ const handleConfirm = () => {
+ // 处理确认逻辑
+ setScanFile(false);
+ };
+
+ const handleCancel = () => {
+ // 处理取消逻辑
+ setScanFile(false);
+ };
+
+
+ return (
+ <>
+ <Modal visible={visible} onCancel={handleOnCancel} title='申请结案' centered footer={null} style={{ overflow: 'auto' }}>
+ <div className='caseResult-title'>化解结果</div>
+ <div className='caseResult-tabs'>
+ {tabs.map((tab) => (
+ <div
+ key={tab.index}
+ style={{
+ color: selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)',
+ padding: '5px 16px',
+ border: `1px solid ${selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`,
+ borderRadius: '2px',
+ cursor: 'pointer',
+ }}
+ onClick={() => handleTabChange(tab.index)}
+ >
+ {tab.label}
+ </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 }]}
+ >
+ <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>
+
+ <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 }]}
+ >
+ <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',
+ }}
+ onClick={() => handleTabChange1(tab.index)}
+ >
+ {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>
+ <DocumentScanner
+ visible={scanFile}
+ onConfirm={handleConfirm}
+ onCancel={handleCancel}
+ />
+ </>
+ )
+}
+
+export default CaseResult;
+
diff --git a/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx b/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx
index 59e43c9..6a97640 100644
--- a/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx
+++ b/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx
@@ -12,6 +12,7 @@
import {
IconLink,
} from '@arco-design/web-react/icon';
+import CaseResult from './CaseResult'
const InputSearch = Input.Search;
@@ -75,6 +76,11 @@
},
];
+function getByIdRoleApi(id) {
+ return $$.ax.request({ url: 'ctUser/getByIdRole?id=' + id, type: 'get', service: 'cust' });
+}
+
+
const Handle = () => {
@@ -82,6 +88,8 @@
const [wantUser, setWantUser] = useState({});
const [formView, setFormView] = useState(false);
const [personView, setPersonView] = useState(false);
+ const [data, setData] = useState({})
+ const [caseResult, SetCaseResult] = useState(false);
const tabs = [
{ index: '1', label: '承办部门' },
@@ -89,7 +97,6 @@
];
const [isModalVisible, setIsModalVisible] = useState(false);
- const formRef = useRef(null);
@@ -195,6 +202,22 @@
setScannerVisible(true);
};
+ const getByIdRole = async () => {
+ const res = await getByIdRoleApi('2105180249501982')
+ if (res.type) {
+ let data = res.data
+ setData(data)
+ }
+
+ }
+
+
+
+ useEffect(() => {
+ getByIdRole()
+ }, [])
+
+
@@ -218,7 +241,7 @@
<div><div className="title-text">经办人：</div></div>
<div style={{ display: 'flex' }}>
<div>王一顺</div>
- <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
+ <img onClick={() => setPersonView(!personView)} src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
</div>
</Col>
<Col span={8} style={{ display: 'flex' }}>
@@ -249,7 +272,7 @@
<FormItem label={<div style={{ display: 'flex' }}>
<span style={{ color: '#86909C' }}>经办人</span>
<Tooltip>
- <img onClick={() => setPersonView(!personView)} src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
+ <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
</Tooltip>
</div>
}
@@ -374,7 +397,7 @@
</Form>
<Space style={{ marginTop: '38px', bottom: '4px' }}>
<Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={() => setFormView(!formView)}>添加办理记录</Button>
- <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} >结案申请</Button>
+ <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => SetCaseResult(!caseResult)}>结案申请</Button>
<Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>联合处置申请</Button>
<Button type='secondary'>返回上级页面</Button>
</Space>
@@ -447,8 +470,28 @@
/>
<Modal visible={personView} onCancel={() => setPersonView(false)} title='工作人员信息' centered footer={null}>
-
+ <table border="1" align="center" cellpadding="5" className="table">
+ <tr>
+ <th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th>
+ <td width='380'><div style={{ display: 'flex' }}><div>{data.trueName}</div></div></td>
+ <th bgcolor="#F7F8FA" className="table-title" width="120">登录账号</th>
+ <td width='380'>{data.acc}</td>
+ </tr>
+ <tr>
+ <th bgcolor="#F7F8FA" className="table-title">手机号码</th>
+ <td>{data.mobile}</td>
+ <th bgcolor="#F7F8FA" className="table-title">工作电话</th>
+ <td>020-83002020</td>
+ </tr>
+ <tr>
+ <th bgcolor="#F7F8FA" className="table-title">所属部门</th>
+ <td>{data.deptName}</td>
+ <th bgcolor="#F7F8FA" className="table-title">职务</th>
+ <td>主任</td>
+ </tr>
+ </table>
</Modal>
+ <CaseResult visible={caseResult} handleOnCancel={() => SetCaseResult(false)} />
</div>
</>
diff --git a/gz-customerSystem/src/views/register/handleFeedback/index.jsx b/gz-customerSystem/src/views/register/handleFeedback/index.jsx
index f07cc7f..4958df4 100644
--- a/gz-customerSystem/src/views/register/handleFeedback/index.jsx
+++ b/gz-customerSystem/src/views/register/handleFeedback/index.jsx
@@ -2,7 +2,7 @@
* @Author: dminyi 1301963064@qq.com
* @Date: 2024-08-09 09:59:43
* @LastEditors: dminyi 1301963064@qq.com
- * @LastEditTime: 2024-08-28 14:38:20
+ * @LastEditTime: 2024-09-02 14:31:31
* @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\index.jsx
* @Description: 来访登记
*/
@@ -14,7 +14,7 @@
import '../index.less';
import { Typography, Steps, Tabs, Message } from '@arco-design/web-react';
import { question, register, Matter, transfer } from '@/assets/images'
-import MatterDetali from '../matterDetail';
+import MatterDetail from '../matterDetail';
import Handle from './component/handle';
const Step = Steps.Step;
@@ -78,7 +78,7 @@
</div>
}
{tabsActive === '1' &&
- <MatterDetali />
+ <MatterDetail />
}
{
tabsActive === '2' && <Typography.Paragraph style={style}>
diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less
index 65c7ca0..0bdef29 100644
--- a/gz-customerSystem/src/views/register/index.less
+++ b/gz-customerSystem/src/views/register/index.less
@@ -92,6 +92,7 @@
.dataSync {
position: relative;
+
&-page {
background-color: #fff;
margin: 8px 8px 0px 16px;
@@ -329,7 +330,7 @@
margin-left: 8px;
}
- &-hostOrg{
+ &-hostOrg {
border: 1px solid #89C2E3;
padding: 0px 8px;
color: #1A6FB8;
@@ -358,7 +359,7 @@
}
}
-.Form{
+.Form {
padding: 12px 16px 16px 16px;
border: 1px dashed #1a6fb8;
border-radius: 10px;
@@ -391,10 +392,46 @@
.arco-tabs-header-nav {
margin-left: 16px
}
+
.arco-tabs-header-nav-line.arco-tabs-header-nav-horizontal>.arco-tabs-header-scroll .arco-tabs-header-title:first-of-type {
margin-left: 0;
}
+
.arco-tabs-header-nav-line .arco-tabs-header-title {
margin: 0 16px 0 0;
}
+}
+
+.caseResult {
+ &-title {
+ padding-top: 4px;
+ margin-bottom: 8px;
+ }
+
+ &-tabs {
+ display: flex;
+ margin-bottom: 18px;
+ }
+
+ &-tips {
+ padding: 9px 16px;
+ background-color: #E8F3FF;
+ border-radius: 2px;
+ margin-top: 8px;
+ }
+
+ &-textarea {
+ border: 1px solid #1a6fb8;
+ border-radius: 2px;
+ padding: 0px 8px;
+ color: #1A6FB8;
+ width: fit-content;
+ margin: 4px 0px 8px 0px;
+ }
+}
+
+.tabs1 {
+ display: flex;
+ gap: 8px;
+ margin-bottom: 8px;
}
\ No newline at end of file
--
Gitblit v1.8.0