From 53709db83f171ff9ef4ad8b26ae7a79085e1a7ee Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Sat, 17 Aug 2024 09:09:29 +0800
Subject: [PATCH] 添加申请人、被申请人、代理人、选择单位弹窗静态
---
gz-customerSystem/src/views/register/visit/component/applyDialog.jsx | 41 +++-
gz-customerSystem/src/views/register/index.less | 22 ++
gz-customerSystem/src/views/register/visit/component/agentDialog.jsx | 214 ++++++++++++++++++++++++++
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 19 ++
gz-customerSystem/src/views/register/visit/component/selectUnitDialog.jsx | 142 +++++++++++++++++
5 files changed, 421 insertions(+), 17 deletions(-)
diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less
index ece0f13..73ad3c4 100644
--- a/gz-customerSystem/src/views/register/index.less
+++ b/gz-customerSystem/src/views/register/index.less
@@ -153,16 +153,26 @@
}
.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);
+ 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);
+ 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);
+ .ant-table.ant-table-bordered>.ant-table-container {
+ border-left: 1px solid rgba(0, 0, 0, 0.2);
}
+}
+
+.unitDialogResult {
+ font-size: 16px;
+ font-family: PingFang SC, PingFang SC-400;
+ font-weight: 400;
+ text-align: LEFT;
+ color: #1d2129;
+ line-height: 24px;
+ margin-bottom: 20px;
}
\ No newline at end of file
diff --git a/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx b/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
new file mode 100644
index 0000000..d3c4e7b
--- /dev/null
+++ b/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
@@ -0,0 +1,214 @@
+import React, { useState, useEffect, useRef, Fragment } from "react";
+import { Row, Col, Space } from 'antd';
+import { Form, Input, Button, Radio, Select, Checkbox, Upload } 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;
+const CheckboxGroup = Checkbox.Group;
+
+export default function AgentDialog(props) {
+ return (
+ <div className="applyDialog">
+ <div style={{ height: '590px', overflowY: 'scroll' }}>
+ <Row gutter={[16, 16]} style={{ margin: '0 2px 0 0' }}>
+ <Col span={24}>
+ <Form
+ ref={props.formRef}
+ layout='vertical'
+ requiredSymbol={false}
+ initialValues={{
+ }}//默认值
+ >
+ <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>
+ <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={(<div style={{ display: 'flex' }}>姓名<div className="must">必填</div></div>)}
+ field='name'
+ >
+ <Input placeholder='请填写' />
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem
+ label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)}
+ field='phone'
+ >
+ <Input placeholder='请填写' />
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem
+ label={(<div style={{ display: 'flex' }}>证件类型<div className="must">必填</div></div>)}
+ field='zhengjian'
+ >
+ <Select placeholder='请选择' allowClear>
+ {['居民身份证',].map((option, index) => (
+ <Option key={option} value={option}>
+ {option}
+ </Option>
+ ))}
+ </Select>
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem
+ label={(<div style={{ display: 'flex' }}>证件号码<div className="must">必填</div></div>)}
+ 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='minzu'
+ >
+ <Select placeholder='请选择' allowClear>
+ {['汉族',].map((option, index) => (
+ <Option key={option} value={option}>
+ {option}
+ </Option>
+ ))}
+ </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>
+ <Col span={12}>
+ <FormItem
+ label='委托关系'
+ field='weituo'
+ >
+ <Select placeholder='请选择' allowClear>
+ {['亲属',].map((option, index) => (
+ <Option key={option} value={option}>
+ {option}
+ </Option>
+ ))}
+ </Select>
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem
+ label='委托类型'
+ field='type'
+ >
+ <Select placeholder='请选择' allowClear>
+ {['一般授权代理',].map((option, index) => (
+ <Option key={option} value={option}>
+ {option}
+ </Option>
+ ))}
+ </Select>
+ </FormItem>
+ </Col>
+ <Col span={12}>
+ <FormItem
+ label={(<div style={{ display: 'flex' }}>代理对象<div className="must">必填</div></div>)}
+ rules={[{ required: true }]}
+ field='dailimap'
+ >
+ <CheckboxGroup direction='vertical' options={['张三丰', '广东好又多贸易有限公司', '广东科贸创意有限公司']} />
+ </FormItem>
+ </Col>
+ </Row>
+ </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>
+ <Button className="dialogBack">
+ 重置
+ </Button>
+ </div>
+ </div>
+ )
+}
diff --git a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
index 78003e0..cfcb874 100644
--- a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
@@ -12,8 +12,9 @@
caseperfection_organize,
caseperfection_organize_active,
} from '../../../../assets/images/icon';
-import { Form, Input, Button, Radio, Select, DatePicker, Cascader, Upload, Message } from '@arco-design/web-react';
+import { Form, Input, Button, Radio, Select, Modal, Cascader, Upload, Message } from '@arco-design/web-react';
import KeyVisits from "./keyVisits";
+import SelectUnitDialog from "./selectUnitDialog";
const FormItem = Form.Item;
const Option = Select.Option;
@@ -23,7 +24,8 @@
export default function ApplyDialog(props) {
const formRef = useRef();
const [perClass, setPerClass] = useState('09_01001-1');
-
+ const [visible, setVisible] = useState(false);
+
const personIconType = (v) => {
switch (v) {
@@ -157,11 +159,12 @@
)
} else {
//法人、非法人组织
+ let isLegal = type === '09_01001-2'
return (
<>
<Col span={24}>
<FormItem
- label='企业登记材料'
+ label={isLegal ? '企业登记材料' : '机构登记材料'}
field='file'
>
<Upload
@@ -177,7 +180,7 @@
</Col>
<Col span={24}>
<FormItem
- label='法定代表人身份证明材料'
+ label={isLegal ? '法定代表人身份证明材料' : '机构代表人身份证明材料'}
field='file1'
>
<Upload
@@ -193,13 +196,14 @@
</Col>
<Col span={12}>
<FormItem
- label='企业名称'
+ label={isLegal ? '企业名称' : '机构名称'}
rules={[{ required: true }]}
field='peopleNumber'
>
<InputSearch
searchButton='选择'
placeholder='请填写'
+ onSearch={handleSelect}
/>
</FormItem>
</Col>
@@ -209,23 +213,23 @@
</FormItem>
</Col>
<Col span={12}>
- <FormItem label='企业所在地' field='money'>
+ <FormItem label={isLegal ? '企业所在地' : '机构所在地'} field='money'>
<Input placeholder='请填写' />
</FormItem>
</Col>
<Col span={12}>
- <FormItem label='统一社会信用代码' field='money'>
+ <FormItem label={isLegal ? '统一社会信用代码' : '组织机构代码'} field='money'>
<Input placeholder='请填写' />
</FormItem>
</Col>
<Col span={12}>
- <FormItem label='法定代表人' field='money'>
+ <FormItem label={isLegal ? '法定代表人' : '机构代表人'} field='money'>
<Input placeholder='请填写' />
</FormItem>
</Col>
<Col span={12}>
<FormItem
- label='企业类型'
+ label={ isLegal ? '企业类型' : '机构类型'}
field='minzu'
>
<Select placeholder='请选择' allowClear>
@@ -254,6 +258,11 @@
console.log(errors, values);
});
}
+ }
+
+ //选择
+ const handleSelect = (value) => {
+ setVisible(true)
}
return (
@@ -288,10 +297,11 @@
initialValues={{
}}//默认值
>
- <Row gutter={[32, 0]}>{formType(perClass)}</Row>
+ <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>{formType(perClass)}</Row>
</Form>
</Col>
</Row>
+
{/* 重复来访重点人员 */}
<div style={{ width: 'calc(100% - 9px)', background: '#f2f3f5', marginBottom: '20px', padding: '12px' }}>
<KeyVisits />
@@ -309,6 +319,17 @@
重置
</Button>
</div>
+ <Modal
+ title={'选择单位'}
+ visible={visible}
+ onOk={() => setVisible(false)}
+ onCancel={() => setVisible(false)}
+ autoFocus={false}
+ focusLock={true}
+ footer={null}
+ >
+ <SelectUnitDialog />
+ </Modal>
</div>
)
}
diff --git a/gz-customerSystem/src/views/register/visit/component/selectUnitDialog.jsx b/gz-customerSystem/src/views/register/visit/component/selectUnitDialog.jsx
new file mode 100644
index 0000000..709d4c8
--- /dev/null
+++ b/gz-customerSystem/src/views/register/visit/component/selectUnitDialog.jsx
@@ -0,0 +1,142 @@
+import React, { useState, useRef } from 'react'
+import TableSearch from '../../../../components/TableSearch';
+import TableView from '../../../../components/TableView';
+import { Row, Col } from 'antd';
+import { Form, Input, Button, Divider } from '@arco-design/web-react';
+
+const FormItem = Form.Item;
+const formItemLayout = {
+ labelCol: {
+ span: 4,
+ },
+ wrapperCol: {
+ span: 17,
+ },
+};
+
+export default function SelectUnitDialog(props) {
+ const formRef = useRef();
+ const [search, setSearch] = useState({ page: 1, size: 10, status: '1' });// 搜索
+ // 数据
+ const [data, setData] = useState({});
+
+ 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: 'caseNo',
+ key: 'caseNo',
+ render: (text, record, index) => <span>{index + 1}</span>,
+ },
+ {
+ 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',
+ width: 120,
+ render: (text) => (
+ <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
+ <div>选择</div>
+ </div>
+ )
+ },
+ // 更多列配置...
+ ];
+
+ // 搜索 or 重置
+ function handleSearch(type, data) {
+ if (type === 'changePage') {
+ let obj = type === 'changeTabs' ? { page: 1, status: data } : { page: data[0], size: data[1] };
+ // getSignForListData({ ...search, ...obj });
+ }
+ }
+
+ return (
+ <div>
+ <Form
+ ref={formRef}
+ requiredSymbol={false}
+ layout='inline'
+ {...formItemLayout}
+ >
+ <FormItem
+ label='单位名称：'
+ field='name'
+ >
+ <Input placeholder='请填写' style={{width: '500px'}}/>
+ </FormItem>
+ <Button style={{marginRight: '20px'}}>
+ 重置
+ </Button>
+ <Button
+ type="primary"
+ // onClick={handleSave}
+ >
+ 查询
+ </Button>
+ </Form>
+ <Divider />
+ <div className='unitDialogResult'>
+ 查询结果
+ </div>
+ <TableView
+ columns={fakeColumns}
+ dataSource={fakeData1}
+ size="small"
+ rowKey="id"
+ bordered={true}
+ style={{ marginBottom: '60px' }}
+ pagination={{
+ current: search.page,
+ pageSize: search.size,
+ total: data.total,
+ onChange: (page, pageSize) => handleSearch('changePage', [page, pageSize]),
+ }}
+ />
+ </div>
+ )
+}
diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
index 5cc88a9..4ea4ae2 100644
--- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
@@ -18,6 +18,7 @@
import TableView from '../../../../components/TableView';
import '../../index.less';
import ApplyDialog from "./applyDialog";
+import AgentDialog from "./agentDialog";
import FilesCheck from '../../../filesCheck';
import {
IconFileAudio,
@@ -104,6 +105,7 @@
const [upload, setUpLoad] = useState(false);
const [sourceType, setSourceType] = useState('09_01010-1');
const [filesCheck, setFilesCheck] = useState(false);
+ const [agentVisible, setAgentVisible] = useState(false);
const personIconType = (v) => {
switch (v) {
@@ -270,8 +272,12 @@
//添加申请人: 0、被申请人: 1、代理人: 2
const handleAdd = (type) => {
+ if(type === 2) {
+ setAgentVisible(true)
+ } else {
+ setAddVisabled(true)
+ }
setDialogType(type)
- setAddVisabled(true)
}
function handleChangeFile() {
@@ -570,6 +576,17 @@
>
<ApplyDialog />
</Modal>
+ <Modal
+ title={'添加代理人'}
+ visible={agentVisible}
+ onOk={() => setAgentVisible(false)}
+ onCancel={() => setAgentVisible(false)}
+ autoFocus={false}
+ focusLock={true}
+ footer={null}
+ >
+ <AgentDialog />
+ </Modal>
</div>
)
}
--
Gitblit v1.8.0