From 08161d8379ce41fd902f61ea9be0f1ff7f1ab7f5 Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Mon, 02 Sep 2024 17:44:21 +0800
Subject: [PATCH] feat：当事人文件上传对接
---
gz-customerSystem/src/views/register/visit/component/applyDialog.jsx | 122 +++++++++------
gz-customerSystem/src/components/ArcoUpload/index.jsx | 74 +++++++++
gz-customerSystem/src/views/register/index.less | 8
gz-customerSystem/src/views/register/visit/component/agentDialog.jsx | 97 +++++++----
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 53 +-----
gz-customerSystem/src/api/appUrl.js | 4
gz-customerSystem/src/views/register/visit/index.jsx | 70 ++++----
gz-customerSystem/src/components/ArcoUpload/index.less | 16 ++
8 files changed, 275 insertions(+), 169 deletions(-)
diff --git a/gz-customerSystem/src/api/appUrl.js b/gz-customerSystem/src/api/appUrl.js
index 7a6fde3..d71bcbb 100644
--- a/gz-customerSystem/src/api/appUrl.js
+++ b/gz-customerSystem/src/api/appUrl.js
@@ -10,11 +10,11 @@
export const debug = {
// web服务
// baseUrl: 'http://gz.hugeinfo.com.cn',
- baseUrl: 'http://b8bmfu.natappfree.cc',
+ baseUrl: 'http://9hf3ag.natappfree.cc',
// baseUrl: 'http://mdqgnh.natappfree.cc',
// 附件服务
- fileUrl: 'http://b8bmfu.natappfree.cc',
+ fileUrl: 'http://9hf3ag.natappfree.cc',
// fileUrl: 'http://gz.hugeinfo.com.cn',
diff --git a/gz-customerSystem/src/components/ArcoUpload/index.jsx b/gz-customerSystem/src/components/ArcoUpload/index.jsx
new file mode 100644
index 0000000..592096c
--- /dev/null
+++ b/gz-customerSystem/src/components/ArcoUpload/index.jsx
@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react'
+import { Upload, Form } from '@arco-design/web-react';
+import {
+ IconAttachment,
+} from '@arco-design/web-react/icon';
+import * as $$ from '../../utils/utility';
+import './index.less';
+
+const FormItem = Form.Item;
+
+/**
+ * params *, //upload组件参数
+ * field *, // form的标识
+ * handleChangeFile, // 文件上传成功之后的回调
+ * label *, // form的label名
+ * editData *, // 编辑回显数据
+ */
+
+export default function ArcoUpload(props) {
+ const [myFileList, setMyFileList] = useState([])
+ useEffect(() => {
+ if(props.editData) {
+ console.log(props.editData[props.field]);
+ setMyFileList(props.editData[props.field])
+ }
+ }, [props.editData])
+
+ return (
+ <FormItem
+ label={props.label}
+ field={props.field}
+ triggerPropName='fileList'
+ >
+ <Upload
+ drag
+ multiple
+ accept='.png,.jpg,.pdf'
+ onDrop={(e) => {
+ }}
+ tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
+ showUploadList={{
+ fileIcon: <IconAttachment style={{ color: '#1D2129' }} />,
+ }}
+ headers={{ Authorization: $$.getSessionStorage('customerSystemToken') }}
+ onChange={(fileList, file) => {
+ console.log(fileList, myFileList, file);
+ const { status, response } = file
+ //因为字节upLoad组件有bug，不能区分添加文件还是删除文件，所以用这种办法来判断是不是删除
+ const isDel = myFileList && myFileList.length > fileList.length
+ //上传失败
+ if (status === 'error' && !isDel) {
+ $$.info({ type: 'error', content: '抱歉，网络错误附件上传失败，请稍后重试' });
+ }
+ //上传成功
+ if (status === 'done' && !isDel) {
+ if (response.code === 0 || response.code === '0') {
+ // 返回附件成功上传的回调
+ $$.infoSuccess({ content: response.msg });
+ if (props.handleChangeFile) {
+ props.handleChangeFile(response);
+ }
+ }
+ }
+ //删除文件
+ if (isDel) {
+
+ }
+ setMyFileList(fileList)
+ }}
+ {...props.params}//自定义
+ />
+ </FormItem>
+ )
+}
diff --git a/gz-customerSystem/src/components/ArcoUpload/index.less b/gz-customerSystem/src/components/ArcoUpload/index.less
new file mode 100644
index 0000000..f7cf232
--- /dev/null
+++ b/gz-customerSystem/src/components/ArcoUpload/index.less
@@ -0,0 +1,16 @@
+.arco-upload-list {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+}
+.arco-upload-list-item {
+ width: calc(50% - 17px);
+ margin-top: 24px;
+ margin-left: 17px;
+
+ &:nth-child(2n+1) {
+ width: calc(50% - 17px);
+ margin-right: 17px;
+ margin-left: 0px;
+ }
+}
\ No newline at end of file
diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less
index f1e6dff..b82ce55 100644
--- a/gz-customerSystem/src/views/register/index.less
+++ b/gz-customerSystem/src/views/register/index.less
@@ -177,11 +177,11 @@
}
}
-.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;
+// .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;
-}
+// }
.unitDialogResult {
font-size: 16px;
diff --git a/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx b/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
index b63946c..ddc860f 100644
--- a/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
@@ -2,20 +2,24 @@
import { Row, Col, Space } from 'antd';
import { Form, Input, Button, Radio, Select, Checkbox, Upload } from '@arco-design/web-react';
import KeyVisits from "@/components/personCard/KeyVisits";
-import {
- IconLink,
-} from '@arco-design/web-react/icon';
import * as $$ from '@/utils/utility';
+import ArcoUpload from '@/components/ArcoUpload';
const FormItem = Form.Item;
const Option = Select.Option;
const InputSearch = Input.Search;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
+const appUrl = $$.appUrl;
+
+function getId() {
+ return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
+}
export default function AgentDialog(props) {
const formRef = useRef();
const [visitList, setVisitList] = useState([])
+ const [id, setId] = useState()
useEffect(() => {
if (props.editData) {
@@ -23,7 +27,6 @@
formRef.current.setFieldsValue({
...props.editData
})
- console.log(props);
//过滤代理人
setVisitList(props.fakeData.filter(item => {
if (props.editData.perType === '24_00006-1') {
@@ -41,8 +44,18 @@
return item.perType === '15_020008-2'
}
}))
+ //获取id
+ getAppId()
}
}, [])
+
+ //获取id
+ const getAppId = async () => {
+ const res = await getId()
+ if (res.type) {
+ setId(res.data)
+ }
+ }
//保存信息
const handleSave = () => {
@@ -53,17 +66,31 @@
if (props.editData) {
props.handleAddParty({
...fieldValue
- })
+ }, true)
} else {
props.handleAddParty({
...fieldValue,
perType: props.dialogType,
perTypeName: $$.options.personType.find(item => item.value === props.dialogType).label,
- })
+ id: id
+ }, false)
}
props.onClose()
}
});
+ }
+ }
+
+ //上传身份证识别
+ const handleChangeFile = (data) => {
+ if (data.data && data.data.length != 0) {
+ if (data.data[0].idcardOcrResult) {
+ const { birthday, ...rest } = data.data[0].idcardOcrResult
+ //回填信息
+ formRef.current.setFieldsValue({
+ ...rest
+ })
+ }
}
}
@@ -82,39 +109,25 @@
>
<Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>
<Col span={24}>
- <FormItem
- label='身份证明材料'
+ <ArcoUpload
+ params={{
+ action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-202`,
+ }}
field='file'
- >
- <Upload
- drag
- multiple
- accept='image/*'
- action='/'
- onDrop={(e) => {
- }}
- tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
- showUploadList={{
- fileIcon: <IconLink style={{ color: '#1D2129' }} />,
- }}
- />
- </FormItem>
+ handleChangeFile={handleChangeFile}
+ label='身份证明材料'
+ editData={props.editData}
+ />
</Col>
<Col span={24}>
- <FormItem
- label='代理人委托书'
+ <ArcoUpload
+ params={{
+ action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-202`,
+ }}
field='file1'
- >
- <Upload
- drag
- multiple
- accept='image/*'
- action='/'
- onDrop={(e) => {
- }}
- tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
- />
- </FormItem>
+ label='代理人委托书'
+ editData={props.editData}
+ />
</Col>
<Col span={12}>
<FormItem
@@ -303,7 +316,19 @@
>
保存
</Button>
- <Button className="dialogBack">
+ <Button
+ className="dialogBack"
+ onClick={() => {
+ if (props.editData) {
+ formRef.current.resetFields();
+ formRef.current.setFieldsValue({
+ ...props.editData
+ })
+ } else {
+ formRef.current.resetFields();
+ }
+ }}
+ >
重置
</Button>
</div>
diff --git a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
index 757f2ef..4e4be9f 100644
--- a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
@@ -15,19 +15,24 @@
import { Form, Input, Button, Radio, Select, Modal, Cascader, Upload, Message } from '@arco-design/web-react';
import KeyVisits from "@/components/personCard/KeyVisits";
import SelectUnitDialog from "./selectUnitDialog";
-import {
- IconLink,
-} from '@arco-design/web-react/icon';
+import ArcoUpload from '@/components/ArcoUpload';
const FormItem = Form.Item;
const Option = Select.Option;
const InputSearch = Input.Search;
const RadioGroup = Radio.Group;
+const appUrl = $$.appUrl;
+
+
+function getId() {
+ return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
+}
export default function ApplyDialog(props) {
const formRef = useRef();
const [perClass, setPerClass] = useState('09_01001-1');
const [visible, setVisible] = useState(false);
+ const [id, setId] = useState()
useEffect(() => {
if (props.editData) {
@@ -36,9 +41,19 @@
...props.editData
})
setPerClass(props.editData.perClass)
+ setId(props.editData.id)
+ } else {
+ getAppId()
}
}, [])
+ //获取id
+ const getAppId = async () => {
+ const res = await getId()
+ if (res.type) {
+ setId(res.data)
+ }
+ }
const personIconType = (v) => {
switch (v) {
@@ -51,6 +66,19 @@
}
}
+ //上传身份证识别
+ const handleChangeFile = (data) => {
+ if (data.data && data.data.length != 0) {
+ if (data.data[0].idcardOcrResult) {
+ const { birthday, ...rest } = data.data[0].idcardOcrResult
+ //回填信息
+ formRef.current.setFieldsValue({
+ ...rest
+ })
+ }
+ }
+ }
+
//页面返回
const formType = (type) => {
if (type === '09_01001-1') {
@@ -58,23 +86,15 @@
return (
<>
<Col span={24}>
- <FormItem
- label='身份证明材料'
+ <ArcoUpload
+ params={{
+ action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-202`,
+ }}
field='file'
- >
- <Upload
- drag
- multiple
- accept='image/*'
- action='/'
- onDrop={(e) => {
- }}
- tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
- showUploadList={{
- fileIcon: <IconLink style={{ color: '#1D2129' }} />,
- }}
- />
- </FormItem>
+ handleChangeFile={handleChangeFile}
+ label='身份证明材料'
+ editData={props.editData}
+ />
</Col>
<Col span={12}>
<FormItem
@@ -202,36 +222,24 @@
return (
<>
<Col span={24}>
- <FormItem
- label={isLegal ? '企业登记材料' : '机构登记材料'}
+ <ArcoUpload
+ params={{
+ action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-202`,
+ }}
field='file'
- >
- <Upload
- drag
- multiple
- accept='image/*'
- action='/'
- onDrop={(e) => {
- }}
- tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
- />
- </FormItem>
+ label={isLegal ? '企业登记材料' : '机构登记材料'}
+ editData={props.editData}
+ />
</Col>
<Col span={24}>
- <FormItem
- label={isLegal ? '法定代表人身份证明材料' : '机构代表人身份证明材料'}
+ <ArcoUpload
+ params={{
+ action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-202`,
+ }}
field='file1'
- >
- <Upload
- drag
- multiple
- accept='image/*'
- action='/'
- onDrop={(e) => {
- }}
- tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
- />
- </FormItem>
+ label={isLegal ? '法定代表人身份证明材料' : '机构代表人身份证明材料'}
+ editData={props.editData}
+ />
</Col>
<Col span={12}>
<FormItem
@@ -304,18 +312,20 @@
formRef.current.validate(undefined, (errors, values) => {
if (!errors) {
const fieldValue = formRef.current.getFields()
+ console.log(fieldValue);
if (props.editData) {
props.handleAddParty({
...fieldValue
- })
+ }, true)
} else {
props.handleAddParty({
...fieldValue,
perType: props.dialogType,
perClass: perClass,
perTypeName: $$.options.personType.find(item => item.value === props.dialogType).label,
- perClassName: $$.options.personClass.find(item => item.value === perClass).label
- })
+ perClassName: $$.options.personClass.find(item => item.value === perClass).label,
+ id: id
+ }, false)
}
props.onClose()
}
@@ -379,7 +389,21 @@
>
保存
</Button>
- <Button className="dialogBack">
+ <Button
+ className="dialogBack"
+ onClick={() => {
+ if (props.editData) {
+ formRef.current.resetFields();
+ formRef.current.setFieldsValue({
+ ...props.editData
+ })
+ setPerClass(props.editData.perClass)
+ } else {
+ formRef.current.resetFields();
+ setPerClass('09_01001-1')
+ }
+ }}
+ >
重置
</Button>
</div>
diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
index 2149ce9..cab3cc3 100644
--- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
@@ -25,10 +25,6 @@
const FormItem = Form.Item;
const InputSearch = Input.Search;
-function getId() {
- return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
-}
-
const VisitorRegister = (props) => {
const [dialogType, setDialogType] = useState();//添加当事人的类型
@@ -259,44 +255,6 @@
// 更多列配置...
];
- const options1 = [
- {
- value: 'jingjijiufen',
- label: '经济纠纷',
- children: [
- {
- value: 'laodongjiufen',
- label: '劳动纠纷',
- },
- {
- value: 'laodongzhengyijiufen',
- label: '劳动争议纠纷',
- },
- ],
- },
- {
- value: 'linlijiufen',
- label: '邻里纠纷',
- children: [
- {
- value: 'linlijiufen',
- label: '邻里纠纷',
- },
- ],
- },
- ];
-
- //获取id
- const getAppId = async (value) => {
- const res = await getId()
- if (res.type) {
- setFakeData([...fakeData, {
- ...value,
- id: res.data
- }])
- }
- }
-
//获取当前时间
const getFormattedDateTime = () => {
let now = new Date();
@@ -320,8 +278,9 @@
}
//添加当事人
- const handleAddParty = (value) => {
- if (value.id) {
+ const handleAddParty = (value, isEdit) => {
+ console.log(value, isEdit);
+ if (isEdit) {
//编辑
const newList = fakeData.map(item => {
if (item.id === value.id) {
@@ -333,7 +292,9 @@
setFakeData(newList)
setEditData(null)
} else {
- getAppId(value)
+ setFakeData([...fakeData, {
+ ...value
+ }])
}
}
@@ -742,6 +703,7 @@
onClose={() => setAddVisabled(false)}
handleAddParty={handleAddParty}
editData={editData}
+ mainId={props.mainId}
/>
</Modal>
<Modal
@@ -764,6 +726,7 @@
fakeData={fakeData}
dialogType={dialogType}
editData={editData}
+ mainId={props.mainId}
/>
</Modal>
<Modal
diff --git a/gz-customerSystem/src/views/register/visit/index.jsx b/gz-customerSystem/src/views/register/visit/index.jsx
index 1826e76..e56cdc3 100644
--- a/gz-customerSystem/src/views/register/visit/index.jsx
+++ b/gz-customerSystem/src/views/register/visit/index.jsx
@@ -7,7 +7,7 @@
* @Description: 来访登记
*/
-import React, { useState, useRef, Fragment } from "react";
+import React, { useState, useRef, Fragment, useEffect } from "react";
import NewPage from '@/components/NewPage';
import * as $$ from '@/utils/utility';
import "@arco-themes/react-gzzz/css/arco.css";
@@ -37,20 +37,32 @@
const [isReview, setIsReview] = useState(false);//预览页面控制
const [current, setCurrent] = useState(1);
+ const [id, setId] = useState();
+
+ useEffect(() => {
+ getAppId()
+ }, [])
+
+ //获取id
+ const getAppId = async () => {
+ const res = await getId()
+ if (res.type) {
+ setId(res.data)
+ }
+ }
//提交信息，需要校验规则
const handleSubmit = async () => {
if (formRef.current) {
formRef.current.validate(undefined, (errors, values) => {
if (!errors) {
- const {myCaseType, myQuesAddress, ...rest} = formRef.current.getFields()
- handleData(rest).then(res => {
- reauestSubmit({
- ...res,
- isSelfAccept: 0,
- isDraft: 0,
- operateType: 0,
- })
+ const { myCaseType, myQuesAddress, ...rest } = formRef.current.getFields()
+ const params = handleData(rest)
+ reauestSubmit({
+ ...params,
+ isSelfAccept: 0,
+ isDraft: 0,
+ operateType: 0,
})
}
});
@@ -60,45 +72,37 @@
//保存草稿信息,不需要校验规则
const handleSave = () => {
if (formRef.current) {
- const {myCaseType, myQuesAddress, ...rest} = formRef.current.getFields()
- handleData(rest).then(res => {
- requestSave(res)
- })
+ const { myCaseType, myQuesAddress, ...rest } = formRef.current.getFields()
+ const params = handleData(rest)
+ requestSave(params)
}
}
//数据处理
- const handleData = async (data) => {
+ const handleData = (data) => {
const { fakeData, ...newObj } = data
if (data.id) {
return {
...newObj,
personList: fakeData?.filter(item => item.perType === "15_020008-1" || item.perType === "15_020008-2"),
agentList: fakeData?.filter(item => item.perType === "24_00006-1" || item.perType === "24_00006-2").map(item => {
- //personNameList用于查看详情显示代理人名字，不需要上传，去除
- const { personNameList, ...rest } = item
return {
- ...rest,
+ ...item,
personId: item.personId.join(',')
}
}),
}
} else {
- const res = await getId()
- if (res.type) {
- return {
- ...newObj,
- personList: fakeData?.filter(item => item.perType === "15_020008-1" || item.perType === "15_020008-2"),
- agentList: fakeData?.filter(item => item.perType === "24_00006-1" || item.perType === "24_00006-2").map(item => {
- //personNameList用于查看详情显示代理人名字，不需要上传，去除
- const { personNameList, ...rest } = item
- return {
- ...rest,
- personId: item.personId.join(',')
- }
- }),
- id: res.data
- }
+ return {
+ ...newObj,
+ personList: fakeData?.filter(item => item.perType === "15_020008-1" || item.perType === "15_020008-2"),
+ agentList: fakeData?.filter(item => item.perType === "24_00006-1" || item.perType === "24_00006-2").map(item => {
+ return {
+ ...item,
+ personId: item.personId.join(',')
+ }
+ }),
+ id: id
}
}
}
@@ -156,7 +160,7 @@
</Steps>
</div>
<Preview style={{ display: isReview ? '' : 'none' }} />
- <VisitorRegister formRef={formRef} style={{ display: isReview ? 'none' : '' }} />
+ <VisitorRegister formRef={formRef} style={{ display: isReview ? 'none' : '' }} mainId={id} />
<div className="dataSync-excel">
<Space size="large" style={{ margin: '4px 14px' }}>
<Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={handleSave} >保存</Button>
--
Gitblit v1.8.0