9.1 评标室预约上传照片
This commit is contained in:
jl-zhoujl2
153
src/components/ElecBidEvaluation/ExpertPhotoUpload.tsx
Normal file
153
src/components/ElecBidEvaluation/ExpertPhotoUpload.tsx
Normal file
@ -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;
|
||||
@ -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<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) {
|
||||
return <a onClick={() => downloadFileObjectId(record.facePicName)}>{record.name}</a>
|
||||
if (record.faceId) {
|
||||
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) }, }}>
|
||||
</ExtendUpload>
|
||||
<ExpertPhotoUpload maxSize={60} />
|
||||
</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("当前专家无照片，请上传");
|
||||
|
||||
Reference in New Issue
Block a user