From 286e3f18409ae3f64dd7a63f722902024f14a86c Mon Sep 17 00:00:00 2001 From: jl-zhoujl2 Date: Thu, 1 Sep 2022 09:38:29 +0800 Subject: [PATCH] =?UTF-8?q?9.1=20=E8=AF=84=E6=A0=87=E5=AE=A4=E9=A2=84?= =?UTF-8?q?=E7=BA=A6=E4=B8=8A=E4=BC=A0=E7=85=A7=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ElecBidEvaluation/ExpertPhotoUpload.tsx | 153 ++++++++++++++++++ .../JudgingPanel/List/index.tsx | 23 ++- 2 files changed, 163 insertions(+), 13 deletions(-) create mode 100644 src/components/ElecBidEvaluation/ExpertPhotoUpload.tsx diff --git a/src/components/ElecBidEvaluation/ExpertPhotoUpload.tsx b/src/components/ElecBidEvaluation/ExpertPhotoUpload.tsx new file mode 100644 index 0000000..df2b7ac --- /dev/null +++ b/src/components/ElecBidEvaluation/ExpertPhotoUpload.tsx @@ -0,0 +1,153 @@ +import { createNewFileBid, removeFileByOid } from '@/services/download_'; +import { downloadPath, uploadAttachmentPath } from '@/utils/DownloadUtils'; +import { getSessionRoleData, getUserToken } from '@/utils/session'; +import { PlusOutlined } from '@ant-design/icons'; +import { message, Modal, Spin, Upload } from 'antd'; +import type { RcFile, UploadProps } from 'antd/es/upload'; +import type { UploadFile } from 'antd/es/upload/interface'; +import React, { useEffect, useState } from 'react'; + +const getBase64 = (file: RcFile): Promise => + new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result as string); + reader.onerror = error => reject(error); + }); + +interface ExpertPhotoUpload { + maxSize?: number | undefined; //文件大小KB 默认1024KB + value?: string | null; //文档中心fileId + onChange?: (fileId: string | null) => void; //回调 + uploadProps?: UploadProps; +} +/** + * 图片上传 仅用fileId objectId随机生成 + * @param props + * @returns + */ +const ExpertPhotoUpload: React.FC = (props) => { + const { maxSize, value, onChange, uploadProps } = { maxSize: 1024, ...props, } + //预览弹窗 + const [previewVisible, setPreviewVisible] = useState(false); + //预览图片的base64 + const [previewImage, setPreviewImage] = useState(''); + //objectId + const [uploadObjectId, setUploadObjectId] = useState(); + //文件列表 + const [fileList, setFileList] = useState([]); + + const handleCancel = () => setPreviewVisible(false); + + const handlePreview = async (file: UploadFile) => { + if (!file.url && !file.preview) { + file.preview = await getBase64(file.originFileObj as RcFile); + } + + setPreviewImage(file.url || (file.preview as string)); + setPreviewVisible(true); + }; + + const handleChange: UploadProps['onChange'] = ({ file, fileList: newFileList }) => { + if (file.status === 'uploading') { + setFileList(newFileList); + } else if (file.status === 'removed') { + //删除文件 + removeFileByOid(file.uid).then(res => { + if (res.success) { + onChange && onChange(null); + message.success("删除成功"); + } + }) + } else if (file.status === 'done') { + onChange && onChange(file?.response.data[0].sysStorageVO.fileId); + message.success("上传成功"); + } else if (file.status === 'error') { + message.error("上传失败，请重新上传"); + } + }; + //上传前校验 + const beforeUpload = (file: RcFile) => { + const fileType = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg'; + const fileSize = file.size / 1024;//精确到KB + console.log("fileSize", fileSize) + const fileListLength = fileList.length; + if (!fileType) { + message.error(`上传失败，${file.name}类型不正确，请选择png、jpg、jpeg类型的图片`); + return Upload.LIST_IGNORE; + } + if (fileSize >= maxSize) { + message.error(`上传失败，${file.name}大小为${fileSize.toFixed(2)}KB，超过允许的大小${maxSize}KB`); + return Upload.LIST_IGNORE; + } + if (fileListLength >= 1) { + message.error(`上传失败，${file.name}数量为${fileListLength}个，超过允许的数量 1 个`); + return Upload.LIST_IGNORE; + } + return true; + } + + const uploadButton = ( +
+ +
上传
+
+ ); + //获取雪花id，上传用 + const getObjectId = () => { + createNewFileBid().then(res => { + setUploadObjectId(res.id); + }) + } + //回显文件列表 + const getFileList = (fileId: string | null | undefined) => { + if (fileId) { + return [{ + uid: fileId, + name: 'image.png', + status: 'done', + url: downloadPath + "?fileId=" + fileId, + }] + } + return []; + } + + useEffect(() => { + !uploadProps?.disabled && getObjectId(); + }, []) + + useEffect(() => { + setFileList(() => getFileList(value)); + }, [value]) + + return ( + <> + + {uploadProps?.disabled || fileList.length >= 1 ? null : uploadButton} + + + example + + + ); +}; + +export default ExpertPhotoUpload; \ No newline at end of file diff --git a/src/pages/Tender/ProjectManager/JudgingPanel/List/index.tsx b/src/pages/Tender/ProjectManager/JudgingPanel/List/index.tsx index b052ffc..da6ac1d 100644 --- a/src/pages/Tender/ProjectManager/JudgingPanel/List/index.tsx +++ b/src/pages/Tender/ProjectManager/JudgingPanel/List/index.tsx @@ -12,8 +12,8 @@ import { UploadOutlined } from '@ant-design/icons'; import { btnAuthority } from '@/utils/authority'; import RiskPrevention from '@/utils/RiskPrevention'; import BidEvalAppointment from '@/components/ElecBidEvaluation/BidEvalAppointment'; -import { downloadFile, downloadFileObjectId, getFileListByBid } from '@/utils/DownloadUtils'; -import ExtendUpload from "@/utils/ExtendUpload"; +import { downloadFile } from '@/utils/DownloadUtils'; +import ExpertPhotoUpload from '@/components/ElecBidEvaluation/ExpertPhotoUpload'; const JudgingPanel: React.FC<{}> = () => { const modalHeight = window.innerHeight * 96 / 100; @@ -49,7 +49,7 @@ const JudgingPanel: React.FC<{}> = () => { const [selectEvalVisible, setSelectEvalVisible] = useState(false);//电子评标室-评标室预约选择 2022.8.26 zhoujianlong const [selectEvalDisabled, setSelectEvalDisabled] = useState(true);//电子评标室-评标室预约选择不可选状态控制 true-不可填写 false-可填写 2022.8.26 zhoujianlong const [selectEvalData, setSelectEvalData] = useState();//电子评标室-评标室预约选择-数据 2022.8.26 zhoujianlong - const [userPhotoId, setUserPhotoId] = useState("");//电子评标室-录入外部专家-相片id 2022.8.29 zhoujianlong + // const [userPhotoId, setUserPhotoId] = useState("");//电子评标室-录入外部专家-相片id 2022.8.29 zhoujianlong const [appoType, setAppoType] = useState("0");//电子评标室-预约框状态 2022.8.29 zhoujianlong function getShouName() { @@ -1000,10 +1000,10 @@ const JudgingPanel: React.FC<{}> = () => { { title: '通知结果备注', dataIndex: 'remark', }, { title: '照片', - dataIndex: 'facePicName', + dataIndex: 'faceId', render: (_, record) => { - if (record.facePicName) { - return downloadFileObjectId(record.facePicName)}>{record.name} + if (record.faceId) { + return downloadFile({ uid: record.faceId })}>{record.name} }; return '-'; } @@ -1020,7 +1020,6 @@ const JudgingPanel: React.FC<{}> = () => { updateKeyMemSet(record.key); changeBtnSet(true); formMem.setFieldsValue({ ...record }); - setUserPhotoId(record.facePicName); }}>修改 = () => { changeMemberIdSet(record.id); changeBtnSet(false); formMem.setFieldsValue({ ...record }); - setUserPhotoId(record.facePicName); }}>更换