保存进度!
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
* @Author: Kane Wang <wangkane@qq.com>
|
||||
* @Date: 2025-11-21 10:19:11
|
||||
* @LastEditors: Kane Wang
|
||||
* @LastModified: 2025-11-21 10:36:19
|
||||
* @LastModified: 2025-11-27 17:41:28
|
||||
* @FilePath: src/types/upload_file.ts
|
||||
* @Description:
|
||||
*
|
||||
@@ -19,7 +19,8 @@ interface UploadFileResponse
|
||||
interface UploadedFile
|
||||
{
|
||||
fileName: string;
|
||||
localFilePath: string;
|
||||
absoluteFilePath: string;
|
||||
relativeFilePath: string;
|
||||
}
|
||||
|
||||
export {
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
const API_URL= {
|
||||
URL_UPLOAD_FILE: import.meta.env.VITE_APP_URL_UPLOAD_FILE,
|
||||
URL_MOVE_FILE: import.meta.env.VITE_APP_URL_MOVE_FILE,
|
||||
URL_PREFIX: import.meta.env.VITE_APP_URL_PREFIX,
|
||||
};
|
||||
|
||||
console.log( API_URL );
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
/**
|
||||
* @author Kane Wang <wangkane@qq.com>
|
||||
* @date 2025-11-19 21:08:58
|
||||
* Copyright © CPIC All rights reserved
|
||||
*/
|
||||
|
||||
interface UploadFileResponse
|
||||
{
|
||||
success: boolean;
|
||||
message: string;
|
||||
fileList: UploadedFile[] | null;
|
||||
}
|
||||
|
||||
interface UploadedFile
|
||||
{
|
||||
fileName: string;
|
||||
localFilePath: string;
|
||||
}
|
||||
|
||||
export { type UploadFileResponse, type UploadedFile };
|
||||
@@ -48,7 +48,10 @@ Copyright © CPIC All rights reserved
|
||||
<el-col :span="5" />
|
||||
<el-col :span="3">
|
||||
<div class="button-wrapper-right">
|
||||
<el-button type="primary" icon="document">
|
||||
<el-button
|
||||
type="primary" icon="document"
|
||||
@click="onPreviewUploadedFile(1)"
|
||||
>
|
||||
提交
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -75,7 +78,11 @@ Copyright © CPIC All rights reserved
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="200px">
|
||||
<template #default="file">
|
||||
<el-button type="primary" icon="search" circle />
|
||||
<el-button
|
||||
type="primary" icon="search"
|
||||
circle
|
||||
@click="onPreviewUploadedFile(file.row.rowIndex)"
|
||||
/>
|
||||
<el-button
|
||||
type="danger" icon="delete"
|
||||
circle
|
||||
@@ -107,6 +114,30 @@ Copyright © CPIC All rights reserved
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
v-model="ui.showPreviewDialog" :close-on-click-model="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="true"
|
||||
align-center
|
||||
title="文件预览"
|
||||
width="1024px"
|
||||
>
|
||||
<VueOfficePdf
|
||||
v-if="ui.isPDF" :src="ui.fileURL"
|
||||
style="height:calc(100vh - 100px);"
|
||||
@error="errorHandle"
|
||||
/>
|
||||
<VueOfficeDocx
|
||||
v-if="ui.isDOCX" :src="ui.fileURL"
|
||||
style="height:calc(100vh - 100px);"
|
||||
@error="errorHandle"
|
||||
/>
|
||||
<VueOfficeExcel
|
||||
v-if="ui.isXLSX" :src="ui.fileURL"
|
||||
style="height:calc(100vh - 100px);"
|
||||
@error="errorHandle"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -117,26 +148,35 @@ import {type RegulatoryData, type RegulatoryFile} from "@/types/regulatory/regul
|
||||
import { type UploadedFile, type UploadFileResponse } from "@/types/upload_file.ts";
|
||||
import {API_URL} from "@/utils/config.ts";
|
||||
import { getFileType } from "@/utils/utils";
|
||||
import VueOfficePdf from "@vue-office/pdf";
|
||||
import VueOfficeDocx from "@vue-office/docx";
|
||||
import VueOfficeExcel from "@vue-office/excel";
|
||||
|
||||
interface UI{
|
||||
showUI: boolean;
|
||||
showUploadDialog: boolean;
|
||||
showPreviewDialog: boolean;
|
||||
urlFileUpload: string;
|
||||
uploadParameters: {
|
||||
fileName: string;
|
||||
};
|
||||
newRegulatory: RegulatoryData;
|
||||
showFileList: boolean;
|
||||
isPDF: boolean;
|
||||
isDOCX: boolean;
|
||||
isXLSX: boolean;
|
||||
fileURL: string;
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "NewRegulatory",
|
||||
components: {},
|
||||
components: {VueOfficePdf, VueOfficeDocx, VueOfficeExcel,},
|
||||
setup()
|
||||
{
|
||||
const ui: UI = reactive({
|
||||
showUI: true,
|
||||
showUploadDialog: false,
|
||||
showPreviewDialog: false,
|
||||
urlFileUpload: API_URL.URL_UPLOAD_FILE,
|
||||
uploadParameters: {
|
||||
fileName: "1234",
|
||||
@@ -149,6 +189,10 @@ export default {
|
||||
regulatory_files: [],
|
||||
},
|
||||
showFileList: false,
|
||||
isPDF: true,
|
||||
isDOCX: false,
|
||||
isXLSX: false,
|
||||
fileURL: "http://10.39.0.1:8080/regulatory/%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E9%83%A8/test.pdf",
|
||||
});
|
||||
|
||||
const headerCellStyle = reactive(
|
||||
@@ -193,6 +237,11 @@ export default {
|
||||
|
||||
};
|
||||
|
||||
const onPreviewUploadedFile = ( rowId: number ): void =>
|
||||
{
|
||||
ui.showPreviewDialog = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 用来给 el-table 行设置样式。
|
||||
* 其中给row加一个参数rowIndex,用行号赋值。
|
||||
@@ -240,10 +289,10 @@ export default {
|
||||
}
|
||||
|
||||
const uploadedFile: RegulatoryFile = {
|
||||
regulatory_file_name: response.fileList[0]?.fileName ?? "",
|
||||
local_file_path: response.fileList[0]?.localFilePath ?? "",
|
||||
file_type: getFileType( response.fileList[0]?.localFilePath ),
|
||||
file_url: "",
|
||||
regulatory_file_name: response.fileList[0].fileName ?? "",
|
||||
local_file_path: response.fileList[0]?.absoluteFilePath ?? "",
|
||||
file_type: getFileType( response.fileList[0]?.fileName ),
|
||||
file_url: API_URL.URL_PREFIX + response.fileList[0]?.relativeFilePath,
|
||||
};
|
||||
|
||||
ui.newRegulatory.regulatory_files?.push( uploadedFile );
|
||||
@@ -266,6 +315,11 @@ export default {
|
||||
}
|
||||
};
|
||||
|
||||
const errorHandle = ()=>
|
||||
{
|
||||
ElMessage.error( "渲染文档出错!" );
|
||||
};
|
||||
|
||||
return {
|
||||
ui,
|
||||
headerCellStyle,
|
||||
@@ -274,6 +328,8 @@ export default {
|
||||
tableRowClassName,
|
||||
showUploadFileDialog,
|
||||
onDeleteUploadedFile,
|
||||
onPreviewUploadedFile,
|
||||
errorHandle,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -299,4 +355,9 @@ export default {
|
||||
:deep(.el-input) .el-input__inner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
min-width: calc(100wh - 100px);
|
||||
max-width: calc(100wh - 100px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user