From c7835eac66cc4a322dd71a79610f5f4f351f304b Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Tue, 03 Sep 2024 11:40:40 +0800
Subject: [PATCH] 文件上传接口
---
gz-customerSystem/src/components/ArcoUpload/index.jsx | 103 ++++++++++++--------
gz-customerSystem/src/views/register/index.less | 11 +-
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 137 +++++++++++++-------------
3 files changed, 136 insertions(+), 115 deletions(-)
diff --git a/gz-customerSystem/src/components/ArcoUpload/index.jsx b/gz-customerSystem/src/components/ArcoUpload/index.jsx
index 61f5fd4..e9f5cca 100644
--- a/gz-customerSystem/src/components/ArcoUpload/index.jsx
+++ b/gz-customerSystem/src/components/ArcoUpload/index.jsx
@@ -1,3 +1,11 @@
+/*
+ * @Author: dminyi 1301963064@qq.com
+ * @Date: 2024-09-02 19:56:05
+ * @LastEditors: dminyi 1301963064@qq.com
+ * @LastEditTime: 2024-09-03 11:34:07
+ * @FilePath: \gzDyh\gz-customerSystem\src\components\ArcoUpload\index.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
import React, { useEffect, useState } from 'react'
import { Upload, Form } from '@arco-design/web-react';
import {
@@ -19,6 +27,14 @@
export default function ArcoUpload(props) {
const [myFileList, setMyFileList] = useState([])
+
+ const handleFileListChange = (fileList) => {
+ setMyFileList(fileList);
+ if (props.onFileListChange) {
+ props.onFileListChange(fileList.length);
+ }
+ };
+
useEffect(() => {
if (props.editData) {
console.log(props.editData[props.field]);
@@ -27,48 +43,53 @@
}, [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) => {
- 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);
+ <>
+ <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) => {
+ 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 && props.handleDelFile) {
- props.handleDelFile(response.data[0].id)
- }
- setMyFileList(fileList)
- }}
- {...props.params}//自定义
- />
- </FormItem>
+ //删除文件
+ if (isDel && props.handleDelFile) {
+ props.handleDelFile(response.data[0].id)
+ }
+ // setMyFileList(fileList)
+ handleFileListChange(fileList);
+ }}
+ {...props.params}//自定义
+ />
+ </FormItem>
+
+ </>
+
)
}
diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less
index 0672fc1..c3f7746 100644
--- a/gz-customerSystem/src/views/register/index.less
+++ b/gz-customerSystem/src/views/register/index.less
@@ -178,11 +178,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;
@@ -434,4 +434,5 @@
display: flex;
gap: 8px;
margin-bottom: 8px;
-}
\ 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 89134f4..7f00626 100644
--- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
@@ -17,17 +17,25 @@
import AgentDialog from "./agentDialog";
import NewFileCheck from '../../../filesCheck/newFileCheck';
import { IconLink } from '@arco-design/web-react/icon';
-import MapView from './map'
-import { scan } from '@/assets/images/icon'
-import { EventLevelDrawer, MattersDetail } from './levelDetail'
-import DocumentScanner from '../../handleFeedback/component/FileUpLoad'
+import MapView from './map';
+import { scan } from '@/assets/images/icon';
+import { EventLevelDrawer, MattersDetail } from './levelDetail';
+import DocumentScanner from '../../handleFeedback/component/FileUpLoad';
+import ArcoUpload from '@/components/ArcoUpload';
+
const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息
const FormItem = Form.Item;
const InputSearch = Input.Search;
+const appUrl = $$.appUrl;
+
+function delFile(id) {
+ return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } });
+}
const VisitorRegister = (props) => {
+ const formRef = useRef();
const [dialogType, setDialogType] = useState();//添加当事人的类型
const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制
const [fakeData, setFakeData] = useState([]);//当事人信息数据
@@ -35,7 +43,7 @@
const [scanImage, setScanImage] = useState(false);
const [scaned, setScaned] = useState(false);
const [upload, setUpLoad] = useState(false);
- const [sourceType, setSourceType] = useState('09_01010-1');
+ const [sourceType, setSourceType] = useState('1');
const [filesCheck, setFilesCheck] = useState(false);
const [fileView, setFileView] = useState();
const [fileTip, setFileTip] = useState('0');
@@ -44,12 +52,18 @@
const [apply, setApply] = useState(false);
const [editData, setEditData] = useState(null);
const [agentVisible, setAgentVisible] = useState(false);
+ const [fileLength, setFileLength] = useState('');
const peopleMap = {
'15_020008-1': '申请方',
'15_020008-2': '被申请方',
'24_00006-1': '申请方代理人',
'24_00006-2': '被申请方代理人'
}
+
+ const fileType = [
+ { value: '1', label: '申请材料' },
+ { value: '2', label: '证据材料' },
+ ]
useEffect(() => {
if (props.formRef.current) {
@@ -60,89 +74,74 @@
const personIconType = (v) => {
switch (v) {
- case '09_01010-1':
+ case '1':
return [applyMaterials, applyMaterials_active,
];
- case '09_01010-2':
+ case '2':
return [evidenceMaterials, evidenceMaterials_active];
}
}
+ const handleChangeFile = (data) => {
+ console.log(data, 'handleChangeFile')
+ if (data.data && data.data.length != 0) {
+ if (data.data[0].idcardOcrResult) {
+ const { birthday, ...rest } = data.data[0].idcardOcrResult
+ //回填信息
+ formRef.current.setFieldsValue({
+ ...rest
+ })
+ }
+ }
+ }
+
+ //删除文件
+ const handleDelFile = async (id) => {
+ const res = await delFile(id)
+ if (res.type) {
+ $$.infoSuccess({ content: '删除成功！' });
+ }
+ }
+
+
const formType = (type) => {
- if (type === '09_01010-1') {
+ if (type === '1') {
//申请材料
return (
<>
<Col span={24}>
- <FormItem
+ <ArcoUpload
+ params={{
+ action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00014-1`,
+ }}
field='file'
-
- >
- <Upload
- drag
- multiple
- accept='image/*'
- action='/'
- height={158}
- onDrop={(e) => {
- }}
- showUploadList={{
- // Please dont remove this comment
- fileIcon: <IconLink style={{ color: '#1D2129' }} />,
- }}
- onChange={(v) => {
- setFileTip((prevLength) => {
- if (v.length > 0) {
- console.log(v, 'vvvvvvv');
- return v.length;
- }
- return v.length;
- });
- }}
- tip='支持png、 jpg、excel、word、pdf等格式的文件上传，每次上传大小不超过10M'
- />
-
- </FormItem>
- {fileTip > 0 && <div style={{ position: 'absolute', top: '203px', left: '16px', color: '#86909C' }}> 申请材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileTip}</span></div>}
- </Col>
+ handleChangeFile={handleChangeFile}
+ label='身份证明材料'
+ editData={props.editData}
+ handleDelFile={handleDelFile}
+ onFileListChange={(v) => setFileLength(v)}
+ fileTip
+ />
+ {fileLength && <div style={{ position: 'absolute', top: '233px', left: '16px', color: '#86909C' }} > 申请材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileLength}</span></div>}
+ </Col >
</>
)
}
- if (type === '09_01010-2') {
+ if (type === '2') {
//证据材料
return (
<>
<Col span={24}>
- <FormItem
+ <ArcoUpload
+ params={{
+ action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00014-2`,
+ }}
field='file'
-
- >
- <Upload
- drag
- multiple
- accept='image/*'
- action='/'
- height={158}
- onDrop={(e) => {
- }}
- showUploadList={{
- // Please dont remove this comment
- fileIcon: <IconLink style={{ color: '#1D2129' }} />,
- }}
- onChange={(v) => {
- setFileTip((prevLength) => {
- if (v.length > 0) {
- console.log(v, 'vvvvvvv');
- return v.length;
- }
- return v.length;
- });
- }}
- tip='支持png、 jpg、excel、word、pdf等格式的文件上传，每次上传大小不超过10M'
- />
-
- </FormItem>
- {fileTip > 0 && <div style={{ position: 'absolute', top: '203px', left: '16px', color: '#86909C' }}> 证据材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileTip}</span></div>}
+ handleChangeFile={handleChangeFile}
+ label='身份证明材料'
+ editData={props.editData}
+ handleDelFile={handleDelFile}
+ />
</Col>
</>
)
@@ -584,7 +583,7 @@
<Modal style={{ width: '512px' }} visible={upload} onCancel={() => setUpLoad(false)} footer={null} title='上传材料' centered>
<div style={{ paddingTop: '8px' }}>
<Row gutter={[30, 24]}>
- {$$.options.fileOwnerType.map((x, t) => {
+ {fileType.map((x, t) => {
return (
<Col span={12} key={t}>
<div
--
Gitblit v1.8.0