From 421682641d0bdf37c722c0abf894b1bdb71f54a2 Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Thu, 15 Aug 2024 18:12:15 +0800
Subject: [PATCH] feat：添加申请方弹窗静态
---
gz-customerSystem/src/views/register/visit/component/applyDialog.jsx | 140 ++++++++++++++++
gz-customerSystem/src/views/register/visit/component/keyVisits.jsx | 174 +++++++++++++++++++++
gz-customerSystem/src/views/register/index.less | 37 ++++
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 125 +++++++--------
gz-customerSystem/src/components/personCard/index.jsx | 2
5 files changed, 406 insertions(+), 72 deletions(-)
diff --git a/gz-customerSystem/src/components/personCard/index.jsx b/gz-customerSystem/src/components/personCard/index.jsx
index 11c098c..987bdae 100644
--- a/gz-customerSystem/src/components/personCard/index.jsx
+++ b/gz-customerSystem/src/components/personCard/index.jsx
@@ -57,7 +57,7 @@
}
<Space style={{ display: 'flex', flexWrap: 'wrap' }}>
{x.remark?.map((item, index) => (
- <div key={index} style={{ lineHeight: '22px', padding: '0px 8px', backgroundColor: `${item.color}`, width: 'fit-content', borderRadius: '4px', marginTop: '4px' }}>{item.label}</div>
+ <div key={index} style={{ lineHeight: '22px', padding: '0px 8px', backgroundColor: `${item.color}`, width: 'fit-content', borderRadius: '4px', marginTop: '4px', color: '#fff' }}>{item.label}</div>
))}
</Space>
</div>
diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less
index 2e34353..ece0f13 100644
--- a/gz-customerSystem/src/views/register/index.less
+++ b/gz-customerSystem/src/views/register/index.less
@@ -128,6 +128,41 @@
.applyDialog {
.dialogTitle {
margin-bottom: 8px;
- padding-left: 8px;
+ padding-left: 8px;
+ }
+
+ .dialogTag {
+ line-height: 22px;
+ padding: 0 8px;
+ border-radius: 4px;
+ margin-top: 4px;
+ color: #fff;
+ }
+}
+
+.visitTableClass {
+ color: #1A6FB8;
+
+ .ant-table-thead>tr>th {
+ color: #fff;
+ background-color: #1a6fb8 !important;
+ }
+
+ .ant-table-tbody>tr>td {
+ background-color: #f2f3f5;
+ }
+
+ .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>thead>tr>th {
+ border-right: 1px solid rgba(0,0,0,0.2);
+ border-bottom: 1px solid rgba(0,0,0,0.2);
+ }
+
+ .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>tbody>tr>td {
+ border-right: 1px solid rgba(0,0,0,0.2);
+ border-bottom: 1px solid rgba(0,0,0,0.2);
+ }
+
+ .ant-table.ant-table-bordered > .ant-table-container {
+ border-left: 1px solid rgba(0,0,0,0.2);
}
}
\ No newline at end of file
diff --git a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
index 5e0e010..78003e0 100644
--- a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef, Fragment } from "react";
import * as $$ from '../../../../utils/utility';
-import { Row, Col } from 'antd';
+import { Row, Col, Space } from 'antd';
import {
CheckOutlined,
} from '@ant-design/icons';
@@ -13,14 +13,17 @@
caseperfection_organize_active,
} from '../../../../assets/images/icon';
import { Form, Input, Button, Radio, Select, DatePicker, Cascader, Upload, Message } from '@arco-design/web-react';
+import KeyVisits from "./keyVisits";
const FormItem = Form.Item;
const Option = Select.Option;
const InputSearch = Input.Search;
+const RadioGroup = Radio.Group;
export default function ApplyDialog(props) {
const formRef = useRef();
- const [perClass, setPerClass] = useState('09_01001-1')
+ const [perClass, setPerClass] = useState('09_01001-1');
+
const personIconType = (v) => {
switch (v) {
@@ -51,7 +54,7 @@
action='/'
onDrop={(e) => {
}}
- tip='Only pictures can be uploaded'
+ tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
/>
</FormItem>
</Col>
@@ -115,7 +118,7 @@
<Col span={12}>
<FormItem
label='民族'
- field='民族'
+ field='minzu'
>
<Select placeholder='请选择' allowClear>
{['汉族',].map((option, index) => (
@@ -126,14 +129,136 @@
</Select>
</FormItem>
</Col>
+ <Col span={12}>
+ <FormItem
+ label='性别'
+ field='sex'
+ >
+ <RadioGroup
+ type='button'
+ >
+ <Radio value='0'>男</Radio>
+ <Radio value='1'>女</Radio>
+ </RadioGroup>
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem
+ label='是否极具个人极端倾向'
+ field='isBad'
+ >
+ <RadioGroup>
+ <Radio value='0'>否</Radio>
+ <Radio value='1'>是</Radio>
+ </RadioGroup>
+ </FormItem>
+ </Col>
+ </>
+ )
+ } else {
+ //法人、非法人组织
+ return (
+ <>
+ <Col span={24}>
+ <FormItem
+ label='企业登记材料'
+ field='file'
+ >
+ <Upload
+ drag
+ multiple
+ accept='image/*'
+ action='/'
+ onDrop={(e) => {
+ }}
+ tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
+ />
+ </FormItem>
+ </Col>
+ <Col span={24}>
+ <FormItem
+ label='法定代表人身份证明材料'
+ field='file1'
+ >
+ <Upload
+ drag
+ multiple
+ accept='image/*'
+ action='/'
+ onDrop={(e) => {
+ }}
+ tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
+ />
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem
+ label='企业名称'
+ rules={[{ required: true }]}
+ field='peopleNumber'
+ >
+ <InputSearch
+ searchButton='选择'
+ placeholder='请填写'
+ />
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem label='联系方式' field='money'>
+ <Input placeholder='请填写' />
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem label='企业所在地' field='money'>
+ <Input placeholder='请填写' />
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem label='统一社会信用代码' field='money'>
+ <Input placeholder='请填写' />
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem label='法定代表人' field='money'>
+ <Input placeholder='请填写' />
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem
+ label='企业类型'
+ field='minzu'
+ >
+ <Select placeholder='请选择' allowClear>
+ {['餐饮服务',].map((option, index) => (
+ <Option key={option} value={option}>
+ {option}
+ </Option>
+ ))}
+ </Select>
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem label='住所' field='money'>
+ <Input placeholder='请填写' />
+ </FormItem>
+ </Col>
</>
)
}
}
+ //保存信息
+ const handleSave = () => {
+ if (formRef.current) {
+ formRef.current.validate(undefined, (errors, values) => {
+ console.log(errors, values);
+ });
+ }
+ }
+
return (
<div className="applyDialog">
- <div>
+ <div style={{ height: '590px', overflowY: 'scroll' }}>
<div className="dialogTitle">当事人类型</div>
<Row gutter={[16, 16]} style={{ margin: '0 2px 0 0' }}>
{$$.options.personClass.map((x, t) => {
@@ -167,11 +292,16 @@
</Form>
</Col>
</Row>
+ {/* 重复来访重点人员 */}
+ <div style={{ width: 'calc(100% - 9px)', background: '#f2f3f5', marginBottom: '20px', padding: '12px' }}>
+ <KeyVisits />
+ </div>
</div>
<div className='dialogFooter'>
<Button
type="primary"
className="dialogPrimary"
+ onClick={handleSave}
>
保存信息
</Button>
diff --git a/gz-customerSystem/src/views/register/visit/component/keyVisits.jsx b/gz-customerSystem/src/views/register/visit/component/keyVisits.jsx
new file mode 100644
index 0000000..ed4cb16
--- /dev/null
+++ b/gz-customerSystem/src/views/register/visit/component/keyVisits.jsx
@@ -0,0 +1,174 @@
+import React, { useState, useEffect, useRef, Fragment } from "react";
+import { Row, Col, Space } from 'antd';
+import TableView from '../../../../components/TableView';
+
+export default function KeyVisits(props) {
+ const tagList = [{ label: '精神障碍', color: '#C64FBE' }, { label: '吸毒', color: '#D8A247' }, { label: '社区矫正', color: '#B82F6E' }, { label: '刑满释放', color: '#199C8F' }, { label: '流浪', color: '#3ECB7A' }, { label: '重点青少年', color: '#117AC1' }, { label: '涉稳涉访', color: '#6865D7' }, { label: '潜在风险', color: '#2661CE' }]
+ const visitMap = {
+ visitTotal: 12,
+ channelList: [
+ {
+ name: '综治中心',
+ number: 3
+ },
+ {
+ name: '信访',
+ number: 4
+ },
+ {
+ name: '网格',
+ number: 2
+ },
+ {
+ name: '12345热线',
+ number: 3
+ },
+ ],
+ identityList: [
+ {
+ name: '申请方当事人',
+ number: 3
+ },
+ {
+ name: '被申请方当事人',
+ number: 8
+ },
+ {
+ name: '被申请方代理人',
+ number: 1
+ },
+ ]
+ }
+
+ const fakeData1 = [
+ {
+ id: 1,
+ caseNo: 'A20230101',
+ judicNo: 'J20230101',
+ perClassName: '自然人',
+ inputUserName: '张三',
+ mediateUserName: '李四',
+ 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: 'expireTime',
+ key: 'expireTime',
+ defaultSortOrder: 'descend',
+ width: 180,
+ sorter: (a, b) => a.age - b.age,
+ },
+ {
+ 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',
+ },
+ {
+ title: '事项来源',
+ dataIndex: 'perClassName',
+ key: 'perClassName',
+ },
+ {
+ title: '事项等级',
+ dataIndex: 'perClassName',
+ key: 'perClassName',
+ },
+ {
+ title: '申请方',
+ dataIndex: 'perClassName',
+ key: 'perClassName',
+ },
+ {
+ title: '被申请方',
+ dataIndex: 'perClassName',
+ key: 'perClassName',
+ },
+ {
+ title: '操作',
+ dataIndex: 'perClassName',
+ key: 'perClassName',
+ width: 120,
+ fixed: 'right',
+ render: (text) => (
+ <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
+ <div>详情</div>
+ </div>
+ )
+ },
+ ];
+ return (
+ <div>
+ <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
+ <Space size='small'>
+ <div className='MediationInfo-subTitle' ></div><span style={{ fontWeight: '600' }}>重点人员标签</span>
+ </Space>
+ </Col>
+ <Space style={{ marginBottom: '20px' }}>
+ {tagList?.map((item, index) => (
+ <div key={index} className="dialogTag" style={{ backgroundColor: item.color }}>{item.label}</div>
+ ))}
+ </Space>
+ <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
+ <Space size='small'>
+ <div className='MediationInfo-subTitle' ></div><span style={{ fontWeight: '600' }}>重复来访记录</span>
+ </Space>
+ </Col>
+ <div style={{marginBottom: '16px'}}>
+ <div><span>来访总数： </span><span style={{ color: '#1a6fb8' }}>{visitMap.visitTotal}</span> 次</div>
+ <div><span>来访渠道： </span>{visitMap.channelList.map((item, index) => {
+ return <span>{index !== 0 && '、'}{item.name}<span style={{ color: '#1a6fb8' }}>{item.number}</span>次</span>
+ })}</div>
+ <div><span>来访身份：</span>{visitMap.identityList.map((item, index) => {
+ return <span>{index !== 0 && '、'}作为{item.name}：<span style={{ color: '#1a6fb8' }}>{item.number}</span>次</span>
+ })}</div>
+ </div>
+ <TableView
+ columns={fakeColumns}
+ dataSource={fakeData1}
+ size="small"
+ rowKey="id"
+ bordered={true}
+ style={{ marginBottom: '60px' }}
+ className='visitTableClass'
+ scroll={{ x: 1300 }}
+ />
+ </div>
+ )
+}
diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
index 428a66d..313efeb 100644
--- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
@@ -21,76 +21,71 @@
const VisitorRegister = (props) => {
const [dialogType, setDialogType] = useState(0);//添加当事人的类型
const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制
-
-
-
-
- const formRef = useRef();
+ const [fakeData, setFakeData] = useState([
+ // {
+ // id: 3,
+ // perClassName: '申请方当事人',
+ // trueName: '蓝海科技有限公司',
+ // mobile: '9144010188453Z',
+ // company: true,
+ // companyName: '张晓梅',//公司法人
+ // partyType: 'applicant',//申请人
+ // },
+ // {
+ // id: 1,
+ // perClassName: '申请方代理人',
+ // trueName: '王小明',
+ // mobile: '410106198802121125',
+ // person: true,
+ // 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',
+ // person: true,
+ // personNumber: '13399999999',//联系方式
+ // partyType: 'respondent',
+ // remark: [{ label: '精神障碍', color: '#C64FBE' }]
+ // },
+ // {
+ // id: 2,
+ // perClassName: '被申请方代理人',
+ // trueName: '张三',
+ // mobile: '13800000002',
+ // person: true,
+ // personNumber: '13399999999',//联系方式
+ // partyType: 'respondent',
+ // remark: [{ label: '精神障碍', color: '#C64FBE' }]
+ // },
+ // {
+ // id: 2,
+ // perClassName: '被申请方代理人',
+ // trueName: '张三',
+ // mobile: '13800000002',
+ // person: true,
+ // personNumber: '13399999999',//联系方式
+ // partyType: 'respondent',
+ // remark: [{ label: '精神障碍', color: '#C64FBE' }]
+ // },
+ ]);//当事人信息数据
const [scanFile, setScanFile] = useState(false);
const [filesList, setFilesList] = useState([]);
const [scanImage, setScanImage] = useState(false);
const [scaned, setScaned] = useState(false);
const [upload, setUpLoad] = useState(false);
- const fakeData = [
- {
- id: 3,
- perClassName: '申请方当事人',
- trueName: '蓝海科技有限公司',
- mobile: '9144010188453Z',
- company: true,
- companyName: '张晓梅',//公司法人
- partyType: 'applicant',//申请人
- },
- {
- id: 1,
- perClassName: '申请方代理人',
- trueName: '王小明',
- mobile: '410106198802121125',
- person: true,
- 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',
- person: true,
- personNumber: '13399999999',//联系方式
- partyType: 'respondent',
- remark: [{ label: '精神障碍', color: '#C64FBE' }]
- },
- {
- id: 2,
- perClassName: '被申请方代理人',
- trueName: '张三',
- mobile: '13800000002',
- person: true,
- personNumber: '13399999999',//联系方式
- partyType: 'respondent',
- remark: [{ label: '精神障碍', color: '#C64FBE' }]
- },
- {
- id: 2,
- perClassName: '被申请方代理人',
- trueName: '张三',
- mobile: '13800000002',
- person: true,
- personNumber: '13399999999',//联系方式
- partyType: 'respondent',
- remark: [{ label: '精神障碍', color: '#C64FBE' }]
- },
- ];
const peopleMap = {
0: '申请方',
1: '被申请方',
--
Gitblit v1.8.0