/*
|
* @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;
|
