9.1 评标室预约上传照片

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<string> =>
+    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<ExpertPhotoUpload> = (props) => {
+    const { maxSize, value, onChange, uploadProps } = { maxSize: 1024, ...props, }
+    //预览弹窗
+    const [previewVisible, setPreviewVisible] = useState(false);
+    //预览图片的base64
+    const [previewImage, setPreviewImage] = useState('');
+    //objectId
+    const [uploadObjectId, setUploadObjectId] = useState<string>();
+    //文件列表
+    const [fileList, setFileList] = useState<any[]>([]);
+
+    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 = (
+        <div>
+            <PlusOutlined />
+            <div style={{ marginTop: 8 }}>上传</div>
+        </div>
+    );
+    //获取雪花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 (
+        <>
+            <Upload
+                action={uploadAttachmentPath}
+                data={{
+                    appCode: 'ebtp-cloud-frontend',
+                    objectId: uploadObjectId,
+                }}
+                headers={{
+                    Authorization: getUserToken(),
+                    currentRoleCode: getSessionRoleData()?.roleCode,
+                }}
+                name="multipartFiles"
+                listType="picture-card"
+                fileList={fileList}
+                onPreview={handlePreview}
+                onChange={handleChange}
+                beforeUpload={beforeUpload}
+                accept=".jpg,.png,.jpeg"
+                {...uploadProps}
+            >
+                {uploadProps?.disabled || fileList.length >= 1 ? null : uploadButton}
+            </Upload>
+            <Modal visible={previewVisible} title="查看" footer={null} onCancel={handleCancel} centered>
+                <img alt="example" style={{ width: '100%' }} src={previewImage} />
+            </Modal>
+        </>
+    );
+};
+
+export default ExpertPhotoUpload;

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 { downloadFile } from '@/utils/DownloadUtils';
-import ExtendUpload from "@/utils/ExtendUpload";
+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<boolean>(false);//电子评标室-评标室预约选择 2022.8.26 zhoujianlong
   const [selectEvalDisabled, setSelectEvalDisabled] = useState<boolean>(true);//电子评标室-评标室预约选择不可选状态控制 true-不可填写 false-可填写 2022.8.26 zhoujianlong
   const [selectEvalData, setSelectEvalData] = useState<any>();//电子评标室-评标室预约选择-数据 2022.8.26 zhoujianlong
-  const [userPhotoId, setUserPhotoId] = useState<string>("");//电子评标室-录入外部专家-相片id 2022.8.29 zhoujianlong
+  // const [userPhotoId, setUserPhotoId] = useState<string>("");//电子评标室-录入外部专家-相片id 2022.8.29 zhoujianlong
   const [appoType, setAppoType] = useState<string>("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) {
+        if (record.faceId) {
-          return <a onClick={() => downloadFileObjectId(record.facePicName)}>{record.name}</a>
+          return <a onClick={() => downloadFile({ uid: record.faceId })}>{record.name}</a>
         };
         return '-';
       }
@@ -1020,7 +1020,6 @@ const JudgingPanel: React.FC<{}> = () => {
               updateKeyMemSet(record.key);
               changeBtnSet(true);
               formMem.setFieldsValue({ ...record });
-              setUserPhotoId(record.facePicName);
             }}>修改</Button>
             <Popconfirm
               placement="topRight"
@@ -1038,7 +1037,6 @@ const JudgingPanel: React.FC<{}> = () => {
               changeMemberIdSet(record.id);
               changeBtnSet(false);
               formMem.setFieldsValue({ ...record });
-              setUserPhotoId(record.facePicName);
             }}>更换</Button>
             <Button type='text' hidden={!open || allEnd || btnAuthority(['ebtp-agency-project-manager', 'ebtp-purchase'])} onClick={async () => {
               await rePassWord(record.id);
@@ -1331,7 +1329,7 @@ const JudgingPanel: React.FC<{}> = () => {
           onClose={() => {
             setAdd(false);
             changeBtnSet(true);
-            formMem.resetFields();
+            // formMem.resetFields();
           }}
           visible={add}
           getContainer={false}
@@ -1400,11 +1398,10 @@ const JudgingPanel: React.FC<{}> = () => {
             </FormItem></Col></Row>
             <Form.Item label="照片" style={{ marginBottom: 0 }}>
               <Form.Item
-                name="facePicName"
+                name="faceId"
                 style={{ display: 'inline-block', width: '60%' }}
               >
-                <ExtendUpload bid={userPhotoId} btnName="上传照片" maxCount={1} maxSize={30} uploadProps={{ name: "file", disabled: false, accept: ".jpeg,.jpg,.png", listType: 'picture', onPreview(file) { window.open(file.url) }, }}>
+                <ExpertPhotoUpload maxSize={60} />
-                </ExtendUpload>
               </Form.Item>
               <Form.Item
                 style={{ display: 'inline-block', width: '40%', position: "relative", right: '24%' }}
@@ -1758,7 +1755,7 @@ const JudgingPanel: React.FC<{}> = () => {
         if (res?.code == 200) {
           const data = res?.data;
           if (data) {
-            setUserPhotoId(data);
+            formMem.setFieldsValue({ faceId: data });
             message.info("获取专家照片成功");
           } else {
             message.info("当前专家无照片，请上传");