~liuwh/gzDyh.git

			@@ -1,15 +1,143 @@
			import React, { useState } from 'react';
			import { Steps, Button } from '@arco-design/web-react';
			import { Col, Space, Row, Tooltip } from 'antd';
			import { register, empty } from '../../../../assets/images'
			import { Form, Select, Empty } from '@arco-design/web-react';
			import React, { useState, useRef } from 'react';
			import { Col, Space, Row, Tooltip, Button } from 'antd';
			import { register, fold, down, empty, link } from '../../../../assets/images';
			import { Form, Input, Tabs, Typography, Empty } from '@arco-design/web-react';
			import { question1, } from '@/assets/images';
			import ProgressStep from '../../../../components/ProgressStep/VisitStep';
			import SelectObjModal from '../../../../components/SelectObjModal/selectPerson';
			import WantUserTag from '../../../../components/WantUserTag/Handling';
			import { scan } from '@/assets/images/icon'
			import DocumentScanner from './FileUpLoad'

			const Option = Select.Option;

			const InputSearch = Input.Search;
			const FormItem = Form.Item;
			const TabPane = Tabs.TabPane;

			const style = {
			textAlign: 'center',
			marginTop: 20,
			};



			const Handle = () => {
			const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab
			const [wantUser, setWantUser] = useState({});
			// const [scanFile, setScanFile] = useState(false);

			const tabs = [
			{ index: '1', label: '承办部门' },
			{ index: '2', label: '配合部门' },
			];

			const [isModalVisible, setIsModalVisible] = useState(false);
			const formRef = useRef(null);

			const handleTabChange = (newTabIndex) => {
			setSelectedTab(newTabIndex);
			};

			const [records, setRecords] = useState([
			{
			id: 1,
			date: '2024 - 7 - 1 10:00',
			location: '天河区棠下街综治中心',
			remark: '配合部门',
			showView: false,
			details: [
			{
			title: '操作人',
			content: (
			<div style={{ display: 'flex' }}>
			<div>李晓明</div>
			<img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
			</div>
			),
			},
			{
			title: '办理意见',
			content: (
			<div>
			调解开始，我首先安抚双方情绪，确保对话在一个平和的氛围中展开。随后，我引导王先生详细说明了他的财务困境及还款意愿，同时让银行代表理解其处境，强调长期合作的重要性。经过反复沟通，银行同意调整还款计划，降低利率，并给予王先生一定的宽限期。王先生则承诺按新计划履行还款义务，双方最终达成一致，签署了调解协议。
			</div>
			),
			},
			{
			title: '办理附件',
			content: (
			<a href="your-link-here.html" target="_blank">
			<img src={link} alt="" className="title-file" />江照月法人身份证明.pdf
			</a>
			),
			},
			],
			},
			{
			id: 2,
			date: '2024 - 7 - 2 14:00',
			location: '天河区天河南街道办事处',
			remark: '承办部门',
			showView: false,
			details: [
			{
			title: '操作人',
			content: (
			<div style={{ display: 'flex' }}>
			<div>张伟</div>
			<img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
			</div>
			),
			},
			{
			title: '办理意见',
			content: (
			<div>
			在本次协调会议中，我们成功解决了双方之间的纠纷，确保了所有参与方的利益得到了妥善处理。通过深入交流，各方达成了共识，同意采取一系列措施来解决现存的问题。
			</div>
			),
			},
			{
			title: '办理附件',
			content: '广州市天河区天河南路200号',
			},
			],
			},
			]);



			const toggleView = (id) => {
			setRecords(records.map(record => {
			if (record.id === id) {
			return {
			...record,
			showView: !record.showView,
			};
			}
			return record;
			}));
			};


			const [scannerVisible, setScannerVisible] = useState(false);

			const handleConfirm = (text) => {
			console.log('识别完成:', text);
			setScannerVisible(false);
			};

			const openScanner = () => {
			setScannerVisible(true);
			formRef.current?.resetFields();
			formRef.current?.setFieldsValue({});
			};

			const onCancel = () => {
			setScannerVisible(false);
			};



			return (
			<>
			@@ -56,36 +184,66 @@
			requiredSymbol={false}
			scrollToFirstError={true}
			>
			<Row>
			<Col span={8}>
			<FormItem label={<div style={{ display: 'flex' }}>
			<span style={{ color: '#86909C' }}>经办人</span>
			<Tooltip>
			<img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
			</Tooltip>
			</div>
			<Col span={8}>
			<FormItem label={<div style={{ display: 'flex' }}>
			<span style={{ color: '#86909C' }}>经办人</span>
			<Tooltip>
			<img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
			</Tooltip>
			</div>
			}
			field='level' >
			{wantUser.wantUserId ?
			<WantUserTag name={wantUser.wantUserName} onClose={() => setWantUser({ wantUserId: null, wantUserName: null })} />
			:
			<InputSearch
			searchButton='选择'
			placeholder='请选择'
			style={{ width: 350 }}
			onClick={() => setIsModalVisible(true)}
			onSearch={() => setIsModalVisible(true)}
			/>
			}
			field='level' >
			<Select placeholder='请选择' allowClear>
			{['一级', '二级', '三级', '四级'].map((option, index) => (
			<Option key={option} value={option}>
			{option}
			</Option>
			))}

			</Select>
			<Button type='primary' style={{ position: 'absolute', right: 0 }}>保存</Button>
			</FormItem>
			</Col>
			<Col span={24}>
			<div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div>
			</FormItem>
			</Col>
			<Col span={24}>
			<div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div>
			{records.length > 0 ?
			<div>
			{records.map(record => (
			<div key={record.id} className='container-bottom-left-record'>
			<div className='container-bottom-left-record-top'>
			{
			record.showView ? (
			<img src={down} alt='' style={{ width: '18px', marginRight: '6px' }} onClick={() => toggleView(record.id)} />
			) : (
			<img src={fold} alt='' className='container-bottom-left-record-top-icon' onClick={() => toggleView(record.id)} />
			)
			}
			<div>{`${record.date} ${record.location}`}</div>
			<div className={`container-bottom-left-record-top-${record.remark === '配合部门' ? 'remark' : 'hostOrg'}`}>{record.remark}</div>
			</div>
			<div className='container-bottom-left-record-bottom' style={{ display: record.showView ? 'block' : 'none' }}>
			<table border="1" cellpadding="8" className='container-bottom-left-record-bottom-table'>
			{record.details.map(detail => (
			<tr key={detail.title}>
			<th bgcolor="#F7F8FA" className="table-title" width="120">{detail.title}</th>
			<td>{detail.content}</td>
			</tr>
			))}
			</table>
			</div>
			</div>
			))}
			</div>
			:
			<Empty
			icon={
			<div
			style={{
			display: 'flex',
			// width: 160,
			justifyContent: 'center',
			marginBottom: '100px'
			}}
			>
			<img src={empty} alt='' style={{ width: '160px', height: '160px' }} />
			@@ -93,20 +251,112 @@
			}
			description='暂无数据'
			/>
			</Col>
			</Row>
			}
			<div className='Form'>
			<Col span={24} style={{ marginBottom: '8px' }}>
			<Space size='small'>
			<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>添加办理记录</h5>
			</Space>
			</Col>
			<Col span={24}>
			<FormItem
			label={<div style={{ display: 'flex' }}>
			办理意见
			<img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} />
			<div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={openScanner}>识别材料</div>
			</div>
			}
			field='caseDes'
			rules={[{ message: '请填写事项概况', required: true }]}
			>
			<Input.TextArea
			maxLength={2000}
			showWordLimit
			rows={5}
			placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
			wrapperStyle={{ width: '100%' }}
			/>
			</FormItem>
			</Col>

			</div>
			</Col>
			</Form>
			<Space>
			<Button type="primary" style={{ backgroundColor: '#1A6FB8' }}>保存</Button>
			<Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} >预览</Button>
			<Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>提交</Button>
			<Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} >自行受理</Button>
			<Space style={{ marginTop: '38px', position: 'absolute', bottom: '4px' }}>
			<Button type="primary" style={{ backgroundColor: '#1A6FB8' }}>添加办理记录</Button>
			<Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} >结案申请</Button>
			<Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>联合处置申请</Button>
			<Button type='secondary'>返回上级页面</Button>
			</Space>
			</div>
			<div className='container-bottom-right'>22</div>
			<div className='container-bottom-right'>
			<Tabs defaultActiveTab='1' className='tabs-container' >
			<TabPane
			key='1'
			title={
			<span style={{ fontSize: '15px' }}>
			流转进度
			</span>
			}
			>
			<Typography.Paragraph>
			<div style={{ display: 'flex', marginLeft: '16px', gap: '16px' }}>
			{tabs.map((tab) => (
			<div
			key={tab.index}
			style={{
			color: selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)',
			padding: '6px 12px',
			border: `1px solid ${selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`,
			borderRadius: '4px',
			cursor: 'pointer',
			}}
			onClick={() => handleTabChange(tab.index)}
			>
			{tab.label}
			</div>
			))}
			</div>
			{selectedTab === '1' &&
			<div className='progress'>
			<ProgressStep caseId='202408291012566613' pageFrom="dispatchRecord" />
			</div>
			}
			</Typography.Paragraph>
			</TabPane>
			<TabPane
			key='2'
			title={
			<span style={{ fontSize: '15px' }}>
			督办信息
			</span>
			}
			>
			<Typography.Paragraph style={style}>Content of Tab Panel 2</Typography.Paragraph>
			</TabPane>
			</Tabs>

			</div>
			</div>
			</div>

			{/* 选择经办人*/}
			<SelectObjModal
			visible={isModalVisible}
			checkKeys={wantUser.wantUserId ? [{ label: wantUser.wantUserName, value: wantUser.wantUserId }] : undefined}
			onOk={(value) => {
			setIsModalVisible(false);
			setWantUser({ wantUserId: value.keys[0], wantUserName: value.items[0].name });
			}}
			onClose={() => setIsModalVisible(false)}
			/>

			<DocumentScanner
			visible={scannerVisible}
			onCancel={onCancel}
			onConfirm={handleConfirm}
			formRef={formRef}
			/>
			</div >
			</>
			)