From f62d77d4b1eb8b6a751d99fe761af2b056bb4ac1 Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Sat, 17 Aug 2024 09:36:24 +0800 Subject: [PATCH] 细节修改 --- gz-customerSystem/src/views/register/index.less | 4 gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 213 +++++++++++++++++++++++------- gz-customerSystem/src/views/register/visit/preview.jsx | 147 ++++++++++++++------- gz-customerSystem/src/components/TableView/index.jsx | 6 gz-customerSystem/src/utils/utility.js | 14 + 5 files changed, 280 insertions(+), 104 deletions(-) diff --git a/gz-customerSystem/src/components/TableView/index.jsx b/gz-customerSystem/src/components/TableView/index.jsx index 2d1dd1a..6ef01a6 100644 --- a/gz-customerSystem/src/components/TableView/index.jsx +++ b/gz-customerSystem/src/components/TableView/index.jsx @@ -2,14 +2,14 @@ * @Company: hugeInfo * @Author: ldh * @Date: 2022-03-10 11:25:15 - * @LastEditTime: 2023-05-08 11:01:18 - * @LastEditors: lwh + * @LastEditTime: 2024-08-16 10:14:05 + * @LastEditors: dminyi 1301963064@qq.com * @Version: 1.0.0 * @Description: 公共Table封装组件 */ import React from 'react'; import PropTypes from 'prop-types'; -import { Space, Table, Tooltip } from 'antd'; +import { Space, Tooltip, Table } from 'antd'; import { ReloadOutlined, FolderFilled } from '@ant-design/icons'; import * as $$ from '../../utils/utility'; import './index.less'; diff --git a/gz-customerSystem/src/utils/utility.js b/gz-customerSystem/src/utils/utility.js index c5826e9..9500459 100644 --- a/gz-customerSystem/src/utils/utility.js +++ b/gz-customerSystem/src/utils/utility.js @@ -2,7 +2,7 @@ * @Company: hugeInfo * @Author: ldh * @Date: 2022-02-16 11:57:54 - * @LastEditTime: 2024-08-09 14:50:20 + * @LastEditTime: 2024-08-16 17:15:26 * @LastEditors: dminyi 1301963064@qq.com * @Version: 1.0.0 * @Description: 公共模块方法 @@ -102,6 +102,18 @@ return decodeURI(result[1]); } +// 逗号隔开数字 +export function thousands(num) { + if (num) { + var str = num.toString(); + var reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g; + return str.replace(reg, '$1,'); + } else { + return 0; + } +} + + // export function getQueryObj(obj) { let strs = ''; diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less index ece0f13..4ec9806 100644 --- a/gz-customerSystem/src/views/register/index.less +++ b/gz-customerSystem/src/views/register/index.less @@ -165,4 +165,8 @@ .ant-table.ant-table-bordered > .ant-table-container { border-left: 1px solid rgba(0,0,0,0.2); } +} + +.arco-upload-list-type-text .arco-upload-list-item:first-of-type, .arco-upload-list-type-picture-list .arco-upload-list-item:first-of-type{ + margin-top: 34px; } \ No newline at end of file diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx index eca3244..1bb3f3e 100644 --- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx +++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx @@ -104,6 +104,16 @@ const [upload, setUpLoad] = useState(false); const [sourceType, setSourceType] = useState('09_01010-1'); const [filesCheck, setFilesCheck] = useState(false); + const [file, setFile] = useState(); + const [selectedAddress, setSelectedAddress] = useState(''); + const [fileTip, setFileTip] = useState('0'); + + const addressOptions = [ + { label: '地址1', value: 'address1' }, + { label: '地址2', value: 'address2' }, + // 更多地址... + ]; + const personIconType = (v) => { switch (v) { @@ -115,6 +125,9 @@ } } + + + const formType = (type) => { if (type === '09_01010-1') { //自然人 @@ -123,6 +136,7 @@ <Col span={24}> <FormItem field='file' + > <Upload drag @@ -132,11 +146,12 @@ height={158} onDrop={(e) => { }} + onChange={(v) => { v.length > 0 && setFileTip(v.length); console.log(v, 'vvvvvvv') }} tip='支持png、 jpg、excel、word、pdf等格式的文件上传,每次上传大小不超过10M' /> - - + </FormItem> + {fileTip && <div style={{ position: 'absolute', top: '203px', left: '16px', color: '#86909C' }}> 申请材料累计上传:<span style={{ color: '#1A6FB8' }}>{fileTip}</span></div>} </Col> </> ) @@ -153,10 +168,10 @@ { id: 1, caseNo: 'A20230101', - judicNo: 'J20230101', - perClassName: '自然人', + judicNo: '申请材料', + perClassName: '李晓明的纠纷化解申请表、身份证...', inputUserName: '张三', - mediateUserName: '李四', + mediateUserName: '2024-7-12 12:00', judgeName: '王五', mediator: '赵六', handlerUserName: '钱七', @@ -171,6 +186,28 @@ serieStatus: '1', // 1 表示非系列案,2 表示系列案 // 更多字段... }, + { + id: 2, + caseNo: 'A20230101', + judicNo: '证据材料', + perClassName: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '张三', + mediateUserName: '2024-7-12 12:00', + judgeName: '王五', + mediator: '赵六', + handlerUserName: '钱七', + returnUserName: '孙八', + expireTime: '2023-08-10T08:00:00.000Z', + processName: '进行中', + otherMediator: '周九', + canalName: '网络', + judicResult: '通过', + assistName: '吴十', + mediTypeName: '民事调解', + serieStatus: '1', // 1 表示非系列案,2 表示系列案 + // 更多字段... + }, + // 更多数据... ]; @@ -180,33 +217,42 @@ title: '序号', dataIndex: 'caseNo', key: 'caseNo', + width: 60, render: (text, record, index) => <span>{index + 1}</span>, }, { title: '材料类型', dataIndex: 'judicNo', key: 'judicNo', + width: 60, + }, { title: '材料数量', - dataIndex: 'perClassName', + dataIndex: 'inputUserName', key: 'perClassName', + width: 180, + }, { title: '材料名称', dataIndex: 'perClassName', key: 'perClassName', + width: 180, + }, { title: '上传时间', - dataIndex: 'perClassName', - key: 'perClassName', + dataIndex: 'mediateUserName', + key: 'mediateUserName', + width: 180, + }, { title: '操作', dataIndex: 'perClassName', key: 'perClassName', - width: 120, + width: 200, render: (text) => ( <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}> <div onClick={() => setFilesCheck(true)}>查看</div> @@ -254,6 +300,33 @@ }, ]; + const options1 = [ + { + value: 'jingjijiufen', + label: '经济纠纷', + children: [ + { + value: 'laodongjiufen', + label: '劳动纠纷', + }, + { + value: 'laodongzhengyijiufen', + label: '劳动争议纠纷', + }, + ], + }, + { + value: 'linlijiufen', + label: '邻里纠纷', + children: [ + { + value: 'linlijiufen', + label: '邻里纠纷', + }, + ], + }, + ]; + const handleCheckParty = () => { console.log('check party'); } @@ -270,21 +343,25 @@ return `${year}-${month}-${day} ${hours}:${minutes}`; } + + + //添加申请人: 0、被申请人: 1、代理人: 2 const handleAdd = (type) => { setDialogType(type) setAddVisabled(true) } - function handleChangeFile() { - } + const handleAddressChange = (value) => { + setSelectedAddress(value); + }; return ( <div className='dataSync-page'> <Col span={24} style={{ display: 'flex', alignItems: 'center' }}> <Space size='small'> - <div className='MediationInfo-subTitle' style={{ marginTop: '-6px' }}></div><h5>当事人信息</h5> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5> </Space> </Col> <div style={{ margin: '16px 0' }}> @@ -298,17 +375,18 @@ </div> <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}> <Space size='small'> - <div className='MediationInfo-subTitle' style={{ marginTop: '-6px' }}></div><h5>纠纷基本情况</h5> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>纠纷基本情况</h5> </Space> </Col> <Form ref={props.formRef} layout='vertical' requiredSymbol={false} + scrollToFirstError={true} initialValues={{ level: '三级', visitingTime: getFormattedDateTime(), - isSerious: '否' + isSerious: '否', }}//默认值 > <Row gutter={[32, 0]}> @@ -340,23 +418,26 @@ <Col span={8}> <FormItem label={(<div style={{ display: 'flex' }}>纠纷类型<div className="must">必填</div></div>)} - rules={[{ required: true }]} + rules={[{ message: '请选择纠纷类型', required: true }]} field='disputeType' > - <Select initialValue='Beijing' placeholder='请选择' allowClear> - {['邻里纠纷', '劳动争议纠纷', '劳动纠纷', '经济纠纷'].map((option, index) => ( - <Option key={option} value={option}> - {option} - </Option> - ))} - </Select> + <Cascader + placeholder='请选择' + options={options1} + onChange={(value, option) => { + console.log(value, option); + }} + // defaultValue={['shanghai', 'shanghaishi', 'huangpu']} + allowClear + /> </FormItem> </Col> <Col span={8}> <FormItem label={(<div style={{ display: 'flex' }}>纠纷发生时间<div className="must">必填</div></div>)} - rules={[{ required: true }]} + rules={[{ message: '请选择纠纷发生时间', required: true }]} field='disputeTime' + > <DatePicker style={{ width: '100%' }} @@ -369,24 +450,24 @@ <Col span={8}> <FormItem label={(<div style={{ display: 'flex' }}>纠纷发生地点<div className="must">必填</div></div>)} - rules={[{ required: true }]} + rules={[{ message: '请选择纠纷发生地点', required: true }]} field='disputeAddress' > <InputSearch - searchButton='选择' placeholder='选择纠纷发生地的详细地址' + searchButton='选择' + readOnly={true} // 设置为只读,防止直接编辑 /> </FormItem> </Col> <Col span={8}> <FormItem label='问题属地' field='quesAddress'> <Cascader - placeholder='Please select ...' + placeholder='请选择' options={options} onChange={(value, option) => { console.log(value, option); }} - defaultValue={['shanghai', 'shanghaishi', 'huangpu']} allowClear /> </FormItem> @@ -414,6 +495,7 @@ </div> } field='summarize' + rules={[{ message: '请填写事项概况', required: true }]} > <Input.TextArea maxLength={2000} @@ -432,10 +514,12 @@ <img src={question1} alt="" style={{ width: '13px', height: '13px', marginTop: '4px', marginLeft: '4px' }} /> </Tooltip> <div className="must">必填</div> - <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanImage(true)}>识别上传材料</div> + <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别上传材料</div> </div> } field='apply' + rules={[{ message: '请填写申请请求', required: true }]} + > <Input.TextArea maxLength={2000} @@ -446,7 +530,7 @@ /> </FormItem> </Col> - <div style={{ marginLeft: '16px', padding: '12px 16px', backgroundColor: '#EFF8FF', borderRadius: '2px' }}> + <div style={{ marginLeft: '16px', padding: '12px 16px', backgroundColor: '#EFF8FF', borderRadius: '2px', marginTop: '4px' }}> <FormItem label='是否重大矛盾纠纷' style={{ marginBottom: '-20px' }} @@ -460,7 +544,7 @@ </Form> <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}> <Space size='small'> - <div className='MediationInfo-subTitle' style={{ marginTop: '-6px' }}></div><h5>事件材料</h5> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>事件材料</h5> </Space> </Col> <TableView @@ -469,17 +553,17 @@ size="small" rowKey="id" bordered={true} - style={{ marginBottom: '60px' }} + style={{ marginBottom: '65px' }} /> - <MyModal width={1200} visible={scanFile} onCancel={() => setScanFile(false)} footer={false} title='识别上传材料' centered> + <Modal style={{ width: '1200px' }} visible={scanFile} onCancel={() => setScanFile(false)} title='识别上传材料' centered footer={null}> <Form ref={props.formRef} layout='vertical' requiredSymbol={false} - style={{ marginTop: '20px' }} initialValues={{ }}//默认值 + style={{ marginTop: '4px' }} > <FormItem label='选择图片' @@ -489,24 +573,49 @@ drag multiple accept='image/*' - action='/' + // action='/' onDrop={(e) => { }} tip='支持png、 jpg、pdf等格式文件上传,每次上传大小不超过10M' showUploadList={{ // Please dont remove this comment - fileIcon: <IconLink />, + fileIcon: <IconLink style={{ color: '#1D2129' }} />, }} + onChange={(info, currentFile) => { + console.log(currentFile, info, 'info', 'currentFile') + if (info.length > 0) { + setScanImage(true); + } + setFile({ + ...currentFile, + url: URL.createObjectURL(currentFile.originFile), + + }); + + }} + onSuccess={() => setScanImage(true)} /> + {/* <img src={file?.url} alt=""/> */} </FormItem> + </Form> - </MyModal> - <MyModal width={944} visible={scanImage} onCancel={() => setScanImage(false)} footer={false} title='选择识别范围' centered> - <img src={image} alt="" style={{ margin: '20px 0px' }} /> - <div><Button type="primary" onClick={() => setScaned(true)}>开始识别</Button></div> - </MyModal> - <MyModal width={1200} visible={scaned} onCancel={() => setScaned(false)} footer={false} title='识别上传材料' centered> + </Modal> + <Modal style={{ width: '944px' }} visible={scanImage} onCancel={() => setScanImage(false)} footer={null} title='选择识别范围' centered> + <img + src={file?.url} + alt="" + style={{ + display: 'block', // 确保图片在容器中居中显示 + margin: 'auto', // 居中显示 + maxWidth: '100%', // 图片最大宽度为容器宽度的100% + maxHeight: '100%', // 图片最大高度为容器高度的100% + objectFit: 'contain', // 图片缩放以适应容器,保持原图比例 + }} + /> + <div><Button type="primary" onClick={() => setScaned(true)} style={{ marginTop: '20px' }}>开始识别</Button></div> + </Modal> + <Modal style={{ width: '1200px' }} visible={scaned} onCancel={() => setScaned(false)} footer={null} title='识别上传材料' centered> <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div> <Input.TextArea showWordLimit @@ -514,12 +623,13 @@ placeholder='' wrapperStyle={{ width: '100%' }} defaultValue='识别内容' + onChange={(v) => console.log(v, 'vvvvvv')} /> - <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => setScaned(true)}>使用文字</Button></div> - </MyModal> - <MyModal width={512} visible={upload} onCancel={() => setUpLoad(false)} footer={false} title='上传材料' centered> - <div style={{ paddingTop: '24px' }}> - <Row gutter={[30, 24]} style={{ margin: '0 2px 0 0' }}> + <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => { setScanFile(false); setScanImage(false); setScaned(false) }}>使用文字</Button></div> + </Modal> + <Modal style={{ width: '512px' }} visible={upload} onCancel={() => setUpLoad(false)} footer={null} title='上传材料' centered> + <div style={{ paddingTop: '8px' }}> + <Row gutter={[30, 24]}> {$$.options.sourceType.map((x, t) => { return ( <Col span={12} key={t}> @@ -546,21 +656,22 @@ requiredSymbol={false} initialValues={{ }}//默认值 + style={{ position: 'relative' }} > + <Row gutter={[32, 0]}>{formType(sourceType)}</Row> </Form> </Col> - <Button type="primary">上传完成</Button> - + <Button type="primary" style={{ marginTop: '-20px', marginLeft: '16px' }}>上传完成</Button> </Row> </div> - </MyModal> - <MyModal width={1200} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={false} title='查看事件材料' centered> + </Modal> + <Modal style={{ width: '1200px' }} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={null} title='查看事件材料' centered> <div className="mediationWindow-modal-main" style={{ display: 'flex' }}> <FilesCheck /> </div> - </MyModal> + </Modal> <Modal title={'添加' + peopleMap[dialogType]} visible={addVisabled} diff --git a/gz-customerSystem/src/views/register/visit/preview.jsx b/gz-customerSystem/src/views/register/visit/preview.jsx index e6ea1e9..1c34ede 100644 --- a/gz-customerSystem/src/views/register/visit/preview.jsx +++ b/gz-customerSystem/src/views/register/visit/preview.jsx @@ -2,70 +2,33 @@ * @Author: dminyi 1301963064@qq.com * @Date: 2024-08-13 15:19:57 * @LastEditors: dminyi 1301963064@qq.com - * @LastEditTime: 2024-08-14 14:59:10 + * @LastEditTime: 2024-08-16 17:09:12 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\preview.jsx * @Description: 预览信息 */ -import React from "react"; +import React, { useState } from "react"; import { Row, Col, Space } from 'antd'; import { person, question, link } from '../../../assets/images' import '../index.less'; import TableView from '../../../components/TableView'; +import { Modal } from '@arco-design/web-react'; +import FilesCheck from '../../filesCheck'; +import * as $$ from '../../../utils/utility'; const Preview = () => { + const [filesCheck, setFilesCheck] = useState(false); - const fakeColumns = [ - { - title: '序号', - dataIndex: 'caseNo', - key: 'caseNo', - }, - { - title: '材料类型', - dataIndex: 'judicNo', - key: 'judicNo', - }, - { - title: '材料数量', - dataIndex: 'perClassName', - key: 'perClassName', - }, - { - title: '材料名称', - dataIndex: 'perClassName', - key: 'perClassName', - }, - { - title: '上传时间', - dataIndex: 'perClassName', - key: 'perClassName', - }, - { - title: '操作', - dataIndex: 'perClassName', - key: 'perClassName', - render: (text) => ( - <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}> - <div>查看</div> - <div>删除</div> - <div>下载</div> - <div>上传</div> - </div> - ) - }, - // 更多列配置... - ]; const fakeData1 = [ { id: 1, caseNo: 'A20230101', - judicNo: 'J20230101', - perClassName: '自然人', + judicNo: '申请材料', + perClassName: '李晓明的纠纷化解申请表、身份证...', inputUserName: '张三', - mediateUserName: '李四', + mediateUserName: '2024-7-12 12:00', judgeName: '王五', mediator: '赵六', handlerUserName: '钱七', @@ -80,9 +43,82 @@ serieStatus: '1', // 1 表示非系列案,2 表示系列案 // 更多字段... }, + { + id: 2, + caseNo: 'A20230101', + judicNo: '证据材料', + perClassName: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '张三', + mediateUserName: '2024-7-12 12:00', + judgeName: '王五', + mediator: '赵六', + handlerUserName: '钱七', + returnUserName: '孙八', + expireTime: '2023-08-10T08:00:00.000Z', + processName: '进行中', + otherMediator: '周九', + canalName: '网络', + judicResult: '通过', + assistName: '吴十', + mediTypeName: '民事调解', + serieStatus: '1', // 1 表示非系列案,2 表示系列案 + // 更多字段... + }, + // 更多数据... ]; + // 列配置 + const fakeColumns = [ + { + title: '序号', + dataIndex: 'caseNo', + key: 'caseNo', + width: 60, + render: (text, record, index) => <span>{index + 1}</span>, + }, + { + title: '材料类型', + dataIndex: 'judicNo', + key: 'judicNo', + width: 60, + + }, + { + title: '材料数量', + dataIndex: 'inputUserName', + key: 'perClassName', + width: 180, + + }, + { + title: '材料名称', + dataIndex: 'perClassName', + key: 'perClassName', + width: 180, + + }, + { + title: '上传时间', + dataIndex: 'mediateUserName', + key: 'mediateUserName', + width: 180, + + }, + { + title: '操作', + dataIndex: 'perClassName', + key: 'perClassName', + width: 200, + render: (text) => ( + <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}> + <div onClick={() => setFilesCheck(true)}>查看</div> + <div>下载</div> + </div> + ) + }, + // 更多列配置... + ]; return ( @@ -239,7 +275,7 @@ <Row gutter={[16, 16]}> <Col span={8}> <div className="title"><div className="title-text">事项等级</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div> - <div>3级</div> + <div style={{ display: 'flex' }}><div style={{ backgroundColor: '#1A6FB8', marginRight: '4px', borderRadius: '4px' }}><div style={{ color: '#FFFFFF', padding: '0px 6px' }}>3</div></div>级</div> </Col> <Col span={8}> <div><div className="title-text">来访时间</div></div> @@ -271,7 +307,7 @@ </Col> <Col span={8}> <div ><div className="title-text">涉及金额(元)</div></div> - <div>20,000</div> + <div>{$$.thousands(20000)}</div> </Col> <Col span={8}> <div ><div className="title-text">事项来源</div></div> @@ -294,15 +330,28 @@ <div>否</div> </Col> </Row> + <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>事件材料</h5> + </Space> + </Col> + <TableView columns={fakeColumns} dataSource={fakeData1} size="small" rowKey="id" bordered={true} - style={{ marginBottom: '60px' }} + style={{ marginBottom: '65px' }} /> + <Modal style={{ width: '1200px' }} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={null} title='查看事件材料' centered> + <div className="mediationWindow-modal-main" style={{ display: 'flex' }}> + <FilesCheck /> + </div> + </Modal> + + </div> ) } -- Gitblit v1.8.0