From 625867cc91baf7ece9f1329eaa7710731727b2b8 Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Sat, 17 Aug 2024 18:15:25 +0800
Subject: [PATCH] feat: 添加当事人功能静态
---
gz-customerSystem/src/views/register/visit/component/applyDialog.jsx | 27 ++-
gz-customerSystem/src/views/register/index.less | 1
gz-customerSystem/src/views/register/visit/component/agentDialog.jsx | 6
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 66 +++++---
gz-customerSystem/src/views/register/visit/component/detailDialog.jsx | 328 +++++++++++++++++++++++++++++++++++++++++
gz-customerSystem/src/components/personCard/index.jsx | 2
6 files changed, 394 insertions(+), 36 deletions(-)
diff --git a/gz-customerSystem/src/components/personCard/index.jsx b/gz-customerSystem/src/components/personCard/index.jsx
index 987bdae..30a1438 100644
--- a/gz-customerSystem/src/components/personCard/index.jsx
+++ b/gz-customerSystem/src/components/personCard/index.jsx
@@ -27,7 +27,7 @@
<div className="public-personCard" style={{ cursor: 'pointer' }}>
<div
className={`public-personCard-card public-personCard-card-${x.partyType === 'applicant' ? 'blue' : 'orange'}`}
- onClick={() => handleCheckParty({ type: x.partyType, editType: 'check', values: x })}
+ onClick={() => handleCheckParty(x)}
>
{x.trueName.substr(0, 1)}
<div className="public-personCard-card-check">查看</div>
diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less
index 13ec458..e414e46 100644
--- a/gz-customerSystem/src/views/register/index.less
+++ b/gz-customerSystem/src/views/register/index.less
@@ -60,6 +60,7 @@
&-title {
color: #86909C;
+ text-align: center;
}
}
diff --git a/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx b/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
index d3c4e7b..684f9a7 100644
--- a/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
@@ -2,6 +2,9 @@
import { Row, Col, Space } from 'antd';
import { Form, Input, Button, Radio, Select, Checkbox, Upload } from '@arco-design/web-react';
import KeyVisits from "./keyVisits";
+import {
+ IconLink,
+} from '@arco-design/web-react/icon';
const FormItem = Form.Item;
const Option = Select.Option;
@@ -36,6 +39,9 @@
onDrop={(e) => {
}}
tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
+ showUploadList={{
+ fileIcon: <IconLink style={{ color: '#1D2129' }} />,
+ }}
/>
</FormItem>
</Col>
diff --git a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
index cfcb874..582ff74 100644
--- a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
@@ -15,6 +15,9 @@
import { Form, Input, Button, Radio, Select, Modal, Cascader, Upload, Message } from '@arco-design/web-react';
import KeyVisits from "./keyVisits";
import SelectUnitDialog from "./selectUnitDialog";
+import {
+ IconLink,
+} from '@arco-design/web-react/icon';
const FormItem = Form.Item;
const Option = Select.Option;
@@ -25,7 +28,7 @@
const formRef = useRef();
const [perClass, setPerClass] = useState('09_01001-1');
const [visible, setVisible] = useState(false);
-
+
const personIconType = (v) => {
switch (v) {
@@ -57,6 +60,9 @@
onDrop={(e) => {
}}
tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
+ showUploadList={{
+ fileIcon: <IconLink style={{ color: '#1D2129' }} />,
+ }}
/>
</FormItem>
</Col>
@@ -64,6 +70,7 @@
<FormItem
label={(<div style={{ display: 'flex' }}>姓名<div className="must">必填</div></div>)}
field='name'
+ rules={[{ required: true, message: '请输入姓名' }]}
>
<Input placeholder='请填写' />
</FormItem>
@@ -72,6 +79,7 @@
<FormItem
label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)}
field='phone'
+ rules={[{ required: true, message: '请输入联系方式' }]}
>
<Input placeholder='请填写' />
</FormItem>
@@ -79,7 +87,8 @@
<Col span={12}>
<FormItem
label={(<div style={{ display: 'flex' }}>证件类型<div className="must">必填</div></div>)}
- field='zhengjian'
+ field='docType'
+ rules={[{ required: true, message: '请选择证件类型' }]}
>
<Select placeholder='请选择' allowClear>
{['居民身份证',].map((option, index) => (
@@ -93,7 +102,7 @@
<Col span={12}>
<FormItem
label={(<div style={{ display: 'flex' }}>证件号码<div className="must">必填</div></div>)}
- rules={[{ required: true }]}
+ rules={[{ required: true, message: '请输入证件号码' }]}
field='peopleNumber'
>
<InputSearch
@@ -103,24 +112,24 @@
</FormItem>
</Col>
<Col span={12}>
- <FormItem label='联系地址' field='money'>
+ <FormItem label='联系地址' field='phoneAddress'>
<Input placeholder='请填写' />
</FormItem>
</Col>
<Col span={12}>
- <FormItem label='户籍地址' field='money'>
+ <FormItem label='户籍地址' field='domicileAddress'>
<Input placeholder='请填写' />
</FormItem>
</Col>
<Col span={12}>
- <FormItem label='工作单位' field='money'>
+ <FormItem label='工作单位' field='workUnit'>
<Input placeholder='请填写' />
</FormItem>
</Col>
<Col span={12}>
<FormItem
label='民族'
- field='minzu'
+ field='nation'
>
<Select placeholder='请选择' allowClear>
{['汉族',].map((option, index) => (
@@ -229,7 +238,7 @@
</Col>
<Col span={12}>
<FormItem
- label={ isLegal ? '企业类型' : '机构类型'}
+ label={isLegal ? '企业类型' : '机构类型'}
field='minzu'
>
<Select placeholder='请选择' allowClear>
@@ -291,7 +300,7 @@
})}
<Col span={24}>
<Form
- ref={props.formRef}
+ ref={formRef}
layout='vertical'
requiredSymbol={false}
initialValues={{
diff --git a/gz-customerSystem/src/views/register/visit/component/detailDialog.jsx b/gz-customerSystem/src/views/register/visit/component/detailDialog.jsx
new file mode 100644
index 0000000..f58f8cc
--- /dev/null
+++ b/gz-customerSystem/src/views/register/visit/component/detailDialog.jsx
@@ -0,0 +1,328 @@
+import React, { useState } from 'react'
+import KeyVisits from "./keyVisits";
+import { link } from '../../../../assets/images'
+
+export default function DetailDialog(props) {
+ const nuturalList = [
+ [
+ {
+ label: '姓名',
+ perClass: '自然人',
+ width: '120',
+ value: '李晓明',
+ isName: true,//判断是否是姓名标签
+ },
+ {
+ label: '联系方式',
+ width: '120',
+ value: '13380313411',
+ },
+ ],
+ [
+ {
+ label: '证件类型',
+ value: '居民身份证',
+ },
+ {
+ label: '证件号码',
+ value: '440981199999999999',
+ },
+ ],
+ [
+ {
+ label: '联系地址',
+ value: '居民身份证',
+ },
+ {
+ label: '户籍地址',
+ value: '广州市天河区棠下街20号',
+ },
+ ],
+ [
+ {
+ label: '工作单位',
+ value: '好又多',
+ },
+ {
+ label: '民族',
+ value: '汉',
+ },
+ ],
+ [
+ {
+ label: '性别',
+ value: '男',
+ },
+ {
+ label: '是否有个人极端倾向',
+ value: '否',
+ },
+ ],
+ [
+ {
+ label: '身份证新材料',
+ value: <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />李晓明身份证明材料.pdf
+ </a>,
+ },
+ ],
+ ]
+ const legalList = [
+ [
+ {
+ label: '企业名称',
+ perClass: '法人',
+ width: '120',
+ value: '李晓明',
+ isName: true,//判断是否是姓名标签
+ },
+ {
+ label: '联系方式',
+ width: '120',
+ value: '13380313411',
+ },
+ ],
+ [
+ {
+ label: '企业所在地',
+ value: '广州市天河区棠下街120号',
+ },
+ {
+ label: '统一社会信用代码',
+ value: '440981199999999999',
+ },
+ ],
+ [
+ {
+ label: '法定代表人',
+ value: '蒋照月',
+ },
+ {
+ label: '企业类型',
+ value: '餐饮服务',
+ },
+ ],
+ [
+ {
+ label: '住所',
+ value: '广州市天河区棠下街120号',
+ },
+ ],
+ [
+ {
+ label: '登记企业材料',
+ value: <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />广东好又多餐饮有限公司营业执照.pdf
+ </a>,
+ },
+ {
+ label: '法定代表人身份证明材料',
+ value: <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />江照月个人身份.pdf
+ </a>,
+ },
+ ],
+ ]
+ const organizationList = [
+ [
+ {
+ label: '机构名称',
+ perClass: '非法人组织',
+ width: '120',
+ value: '李晓明',
+ isName: true,//判断是否是姓名标签
+ },
+ {
+ label: '联系方式',
+ width: '120',
+ value: '13380313411',
+ },
+ ],
+ [
+ {
+ label: '机构所在地',
+ value: '广州市天河区棠下街120号',
+ },
+ {
+ label: '机构组织代码',
+ value: '440981199999999999',
+ },
+ ],
+ [
+ {
+ label: '机构代表人',
+ value: '蒋照月',
+ },
+ {
+ label: '机构类型',
+ value: '餐饮服务',
+ },
+ ],
+ [
+ {
+ label: '住所',
+ value: '广州市天河区棠下街120号',
+ },
+ ],
+ [
+ {
+ label: '机构登记材料',
+ value: <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />广东好又多餐饮有限公司营业执照.pdf
+ </a>,
+ },
+ {
+ label: '机构代表人身份证明材料',
+ value: <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />江照月个人身份.pdf
+ </a>,
+ },
+ ],
+ ]
+ const agentList = [
+ [
+ {
+ label: '姓名',
+ perClass: '代理人',
+ width: '120',
+ value: '李晓明',
+ isName: true,//判断是否是姓名标签
+ },
+ {
+ label: '联系方式',
+ width: '120',
+ value: '13380313411',
+ },
+ ],
+ [
+ {
+ label: '证件类型',
+ value: '居民身份证',
+ },
+ {
+ label: '证件号码',
+ value: '440981199999999999',
+ },
+ ],
+ [
+ {
+ label: '联系地址',
+ value: '居民身份证',
+ },
+ {
+ label: '户籍地址',
+ value: '广州市天河区棠下街20号',
+ },
+ ],
+ [
+ {
+ label: '工作单位',
+ value: '好又多',
+ },
+ {
+ label: '民族',
+ value: '汉',
+ },
+ ],
+ [
+ {
+ label: '性别',
+ value: '男',
+ },
+ {
+ label: '是否有个人极端倾向',
+ value: '否',
+ },
+ ],
+ [
+ {
+ label: '委托关系',
+ value: '亲属',
+ },
+ {
+ label: '委托类型',
+ value: '一般授权代理',
+ },
+ ],
+ [
+ {
+ label: '代理对象',
+ value: '广东好又多贸易公司',
+ },
+ ],
+ [
+ {
+ label: '身份证明材料',
+ value: <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />广东好又多餐饮有限公司营业执照.pdf
+ </a>,
+ },
+ {
+ label: '代理人授权委托书',
+ value: <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />江照月个人身份.pdf
+ </a>,
+ },
+ ],
+ ]
+ const tableList = agentList
+
+ return (
+ <div>
+ <table border="1" align="center" cellpadding="8" className="table" style={{marginBottom: '20px'}}>
+ {
+ tableList?.map((item, index) => {
+ return <tr key={index}>
+ {
+ item?.map(res => {
+ return <>
+ <th bgcolor="#F7F8FA" className="table-title" width={res.width ? res.width : ''}>{res.label}</th>
+ <td width='380'>
+ <div style={{ display: 'flex' }}>
+ <div>{res.value}</div>
+ {res.isName && <div className="title-personRemark">{res.perClass}</div>}
+ </div>
+ </td>
+ </>
+ })
+ }
+ </tr>
+ })
+ }
+ {/* <tr>
+ <th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th>
+ <td width='380'><div style={{ display: 'flex' }}><div>李晓明</div><div className="title-personRemark">自然人</div></div></td>
+ <th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
+ <td width='380'>19</td>
+ <th bgcolor="#F7F8FA" className="table-title" width='140'>性别</th>
+ <td>汉</td>
+ </tr>
+ <tr>
+ <th bgcolor="#F7F8FA" className="table-title">证件类型</th>
+ <td>19970000</td>
+ <th bgcolor="#F7F8FA" className="table-title">证件号码</th>
+ <td>团员</td>
+ <th bgcolor="#F7F8FA" className="table-title">民族</th>
+ <td>本科</td>
+ </tr>
+ <tr>
+ <th bgcolor="#F7F8FA" className="table-title">联系地址</th>
+ <td>网络工程</td>
+ <th bgcolor="#F7F8FA" className="table-title">户籍地址</th>
+ <td>淮南师范学院</td>
+ <th bgcolor="#F7F8FA" className="table-title" rowspan="2" >是否有个人极端倾向</th>
+ <td rowspan="2" >237483</td>
+ </tr>
+ <tr>
+ <th bgcolor="#F7F8FA" className="table-title">工作单位</th>
+ <td>玩，拆，装</td>
+ <th bgcolor="#F7F8FA" className="table-title">身份证明材料</th>
+ </tr> */}
+ </table>
+ {/* 重复来访重点人员 */}
+ <div style={{ width: 'calc(100% - 9px)', background: '#f2f3f5', marginBottom: '20px', padding: '12px' }}>
+ <KeyVisits />
+ </div>
+ </div>
+ )
+}
diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
index f8413d3..1bbe232 100644
--- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
@@ -19,6 +19,7 @@
import '../../index.less';
import ApplyDialog from "./applyDialog";
import AgentDialog from "./agentDialog";
+import DetailDialog from "./detailDialog";
import FilesCheck from '../../../filesCheck';
import {
IconFileAudio,
@@ -39,15 +40,16 @@
const [dialogType, setDialogType] = useState(0);//添加当事人的类型
const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制
const [fakeData, setFakeData] = useState([
- // {
- // id: 3,
- // perClassName: '申请方当事人',
- // trueName: '蓝海科技有限公司',
- // mobile: '9144010188453Z',
- // company: true,
- // companyName: '张晓梅',//公司法人
- // partyType: 'applicant',//申请人
- // },
+ {
+ id: 3,
+ perClassName: '申请方当事人',
+ trueName: '蓝海科技有限公司',
+ mobile: '9144010188453Z',
+ company: true,
+ companyName: '张晓梅',//公司法人
+ partyType: 'applicant',//申请人
+ type: 0,//申请人: 0、被申请人: 1、代理人: 2
+ },
// {
// id: 1,
// perClassName: '申请方代理人',
@@ -57,16 +59,17 @@
// personNumber: '13388888888',//联系方式
// partyType: 'applicant',
// },
- // {
- // id: 2,
- // perClassName: '被申请方当事人',
- // trueName: '大海科技有限公司',
- // mobile: '13800000002',
- // company: true,
- // companyName: '郭小聪',//公司法人
- // partyType: 'respondent',//被申请方
- // remark: [{ label: '精神障碍', color: '#C64FBE' }, { label: '吸毒', color: '#D8A247' }, { label: '社区矫正', color: '#B82F6E' }, { label: '刑满释放', color: '#199C8F' }, { label: '流浪', color: '#3ECB7A' }, { label: '重点青少年', color: '#117AC1' }, { label: '涉稳涉访', color: '#6865D7' }, { label: '潜在风险', color: '#2661CE' }]
- // },
+ {
+ id: 2,
+ perClassName: '被申请方当事人',
+ trueName: '大海科技有限公司',
+ mobile: '13800000002',
+ company: true,
+ companyName: '郭小聪',//公司法人
+ partyType: 'respondent',//被申请方
+ type: 1,
+ remark: [{ label: '精神障碍', color: '#C64FBE' }, { label: '吸毒', color: '#D8A247' }, { label: '社区矫正', color: '#B82F6E' }, { label: '刑满释放', color: '#199C8F' }, { label: '流浪', color: '#3ECB7A' }, { label: '重点青少年', color: '#117AC1' }, { label: '涉稳涉访', color: '#6865D7' }, { label: '潜在风险', color: '#2661CE' }]
+ },
// {
// id: 2,
// perClassName: '被申请方代理人',
@@ -108,6 +111,7 @@
const [fileView, setFileView] = useState();
const [selectedAddress, setSelectedAddress] = useState('');
const [fileTip, setFileTip] = useState('0');
+ const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制
const addressOptions = [
{ label: '地址1', value: 'address1' },
@@ -329,8 +333,11 @@
},
];
- const handleCheckParty = () => {
- console.log('check party');
+ //查看
+ const handleCheckParty = (value) => {
+ console.log(value);
+ setDialogType(value.type)
+ setDetailVisabled(true)
}
//获取当前时间
@@ -345,12 +352,9 @@
return `${year}-${month}-${day} ${hours}:${minutes}`;
}
-
-
-
//添加申请人: 0、被申请人: 1、代理人: 2
const handleAdd = (type) => {
- if(type === 2) {
+ if (type === 2) {
setAgentVisible(true)
} else {
setAddVisabled(true)
@@ -686,7 +690,6 @@
autoFocus={false}
focusLock={true}
footer={null}
- // style={{ width: '1000px' }}
>
<ApplyDialog />
</Modal>
@@ -701,6 +704,17 @@
>
<AgentDialog />
</Modal>
+ <Modal
+ title={'查看' + peopleMap[dialogType]}
+ visible={detailVisabled}
+ onOk={() => setDetailVisabled(false)}
+ onCancel={() => setDetailVisabled(false)}
+ autoFocus={false}
+ focusLock={true}
+ footer={null}
+ >
+ <DetailDialog />
+ </Modal>
</div>
)
}
--
Gitblit v1.8.0