保存进度！
This commit is contained in:
28
code/web/regulatory-management-util/src/types/upload_file.ts
Normal file
28
code/web/regulatory-management-util/src/types/upload_file.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* @Author: Kane Wang <wangkane@qq.com>
|
||||
* @Date: 2025-11-21 10:19:11
|
||||
* @LastEditors: Kane Wang
|
||||
* @LastModified: 2025-11-21 10:36:19
|
||||
* @FilePath: src/types/upload_file.ts
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) 2025 by Kane All rights reserved
|
||||
*/
|
||||
|
||||
interface UploadFileResponse
|
||||
{
|
||||
success: boolean;
|
||||
message: string;
|
||||
fileList: UploadedFile[];
|
||||
}
|
||||
|
||||
interface UploadedFile
|
||||
{
|
||||
fileName: string;
|
||||
localFilePath: string;
|
||||
}
|
||||
|
||||
export {
|
||||
type UploadedFile,
|
||||
type UploadFileResponse
|
||||
};
|
||||
18
code/web/regulatory-management-util/src/utils/config.ts
Normal file
18
code/web/regulatory-management-util/src/utils/config.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* @Author: Kane Wang <wangkane@qq.com>
|
||||
* @Date: 2025-11-21 09:39:59
|
||||
* @LastEditors: Kane Wang
|
||||
* @LastModified: 2025-11-21 09:40:00
|
||||
* @FilePath: src/utils/config.ts
|
||||
* @Description: 保存应用的配置参数。
|
||||
*
|
||||
* Copyright (c) 2025 by Kane All rights reserved
|
||||
*/
|
||||
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,
|
||||
};
|
||||
|
||||
console.log( API_URL );
|
||||
|
||||
export { API_URL };
|
||||
@@ -2,9 +2,55 @@
|
||||
* @Author: Kane Wang <wangkane@qq.com>
|
||||
* @Date: 2025-10-23 16:52:10
|
||||
* @LastEditors: Kane Wang
|
||||
* @LastModified: 2025-10-23 17:04:54
|
||||
* @LastModified: 2025-11-21 11:17:40
|
||||
* @FilePath: src/utils/utils.ts
|
||||
* @Description:
|
||||
* @Description: 提供 一些功能性的函数
|
||||
*
|
||||
* Copyright (c) 2025 by Kane All rights reserved
|
||||
*/
|
||||
|
||||
/**
|
||||
* 取文件路径末尾的扩展名作为文件类型
|
||||
* @param filePath 文件路径
|
||||
* @returns 文件类型字符串
|
||||
*/
|
||||
function getFileType( filePath: string ): string
|
||||
{
|
||||
let type = "未知类型";
|
||||
|
||||
if ( filePath == null || filePath.length == 0 )
|
||||
{
|
||||
return type;
|
||||
}
|
||||
|
||||
const startIndex = filePath.lastIndexOf( "." );
|
||||
const fileType = filePath.slice( startIndex + 1 ).toUpperCase();
|
||||
|
||||
// ignore-eslint-next-line
|
||||
switch( fileType )
|
||||
{
|
||||
case "DOCX":
|
||||
type = "WPS文档";
|
||||
break;
|
||||
case "XLSX":
|
||||
type = "WPS表格";
|
||||
break;
|
||||
case "PDF":
|
||||
type = "PDF文档";
|
||||
break;
|
||||
case "JPG":
|
||||
case "PNG":
|
||||
case "BMP":
|
||||
case "GIF":
|
||||
type = "图片文件";
|
||||
break;
|
||||
default:
|
||||
type = "未知文件类型";
|
||||
}
|
||||
|
||||
// type = fileType.length != 0 ? fileType + "文件" : "未知类型";
|
||||
|
||||
return type;
|
||||
}
|
||||
|
||||
export { getFileType };
|
||||
@@ -12,7 +12,7 @@ Copyright © CPIC All rights reserved
|
||||
<span>名称</span>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input style="text-align:center;" />
|
||||
<el-input v-model.trim.lazy="ui.newRegulatory.regulatory_name" style="text-align:center;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
@@ -20,13 +20,13 @@ Copyright © CPIC All rights reserved
|
||||
<span>部门</span>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input />
|
||||
<el-input v-model.trim="ui.newRegulatory.department_name" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<span>发布、修订年份</span>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input />
|
||||
<el-input v-model.lazy.number.trim="ui.newRegulatory.release_year" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
@@ -34,7 +34,7 @@ Copyright © CPIC All rights reserved
|
||||
<span>备注</span>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input type="textarea" :rows="3" />
|
||||
<el-input v-model.lazy.trim="ui.newRegulatory.comment" type="textarea" :rows="3" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
@@ -43,9 +43,6 @@ Copyright © CPIC All rights reserved
|
||||
<el-button type="primary" icon="document" @click="showUploadFileDialog">
|
||||
新增文档
|
||||
</el-button>
|
||||
<el-button type="primary" icon="document">
|
||||
新增文档
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5" />
|
||||
@@ -63,21 +60,27 @@ Copyright © CPIC All rights reserved
|
||||
border
|
||||
:head-cell-style="headerCellStyle"
|
||||
empty-text="请上传文件"
|
||||
:data="ui.newRegulatory.regulatory_files"
|
||||
>
|
||||
<el-table-column label="文件名" align="center" width="200px">
|
||||
<el-table-column label="文件名" align="center">
|
||||
<template #default="file">
|
||||
<span>{{ file.row.filename }}</span>
|
||||
<span>{{ file.row.regulatory_file_name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="文件类型" align="center">
|
||||
<el-table-column label="文件类型" align="center" width="200px">
|
||||
<template #default="file">
|
||||
<span>{{ file.row.filename }}</span>
|
||||
<span>{{ file.row.file_type }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="200px">
|
||||
<el-button type="primary" icon="search">
|
||||
查看
|
||||
</el-button>
|
||||
<template #default="file">
|
||||
<el-button type="primary" icon="search" circle />
|
||||
<el-button
|
||||
type="danger" icon="delete"
|
||||
circle
|
||||
@click="onDeleteUploadedFile(file.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="upload-dialog-wrapper">
|
||||
@@ -108,18 +111,41 @@ Copyright © CPIC All rights reserved
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {reactive, ref} from "vue";
|
||||
import { type UploadProps, type UploadFile, type UploadFiles, ElMessage, ElMessageBox } from "element-plus";
|
||||
import {type RegulatoryData, type RegulatoryFile} from "@/types/regulatory/regulatory.ts";
|
||||
import { type UploadedFile, type UploadFileResponse } from "@/types/upload_file.ts";
|
||||
import {API_URL} from "@/utils/config.ts";
|
||||
import { getFileType } from "@/utils/utils";
|
||||
|
||||
interface UI{
|
||||
showUI: boolean;
|
||||
showUploadDialog: boolean;
|
||||
urlFileUpload: string;
|
||||
uploadParameters: {
|
||||
fileName: string;
|
||||
};
|
||||
newRegulatory: RegulatoryData;
|
||||
showFileList: boolean;
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "NewRegulatory",
|
||||
components: {},
|
||||
setup()
|
||||
{
|
||||
const ui = reactive({
|
||||
const ui: UI = reactive({
|
||||
showUI: true,
|
||||
showUploadDialog: false,
|
||||
urlFileUpload: "",
|
||||
urlFileUpload: API_URL.URL_UPLOAD_FILE,
|
||||
uploadParameters: {
|
||||
"file-name": "1234",
|
||||
fileName: "1234",
|
||||
},
|
||||
newRegulatory: {
|
||||
department_name: "",
|
||||
release_year: "",
|
||||
regulatory_name: "",
|
||||
comment: "",
|
||||
regulatory_files: [],
|
||||
},
|
||||
showFileList: false,
|
||||
});
|
||||
@@ -133,19 +159,78 @@ export default {
|
||||
textAlign: "center",
|
||||
});
|
||||
|
||||
const onUploadSuccess = ()=> {};
|
||||
|
||||
const showUploadFileDialog = (): void =>
|
||||
{
|
||||
ui.showUploadDialog = true;
|
||||
};
|
||||
|
||||
/*表格操作相关 */
|
||||
const onDeleteUploadedFile = ( rowId: any ): void =>
|
||||
{
|
||||
console.log( "点击的rowid：", rowId );
|
||||
};
|
||||
|
||||
const onUploadSuccess: UploadProps["onSuccess"] = ( response: UploadFileResponse, uploadFile: UploadFile, uploadFiles: UploadFiles ): void =>
|
||||
{
|
||||
console.log( "测试上传制度文件结果：", response );
|
||||
|
||||
ui.showUploadDialog = false;
|
||||
|
||||
// 先判断成功标志位
|
||||
if ( response.success )
|
||||
{
|
||||
// 成功，把文件写入清单
|
||||
if ( response.fileList === null || response.fileList.length === 0 )
|
||||
{
|
||||
// 上传文件路径有问题，提示一下
|
||||
ElMessageBox.confirm(
|
||||
"上传文件的保存路径有误，请联系开发人员。",
|
||||
"上传文件错误",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
type: "warning",
|
||||
center: true,
|
||||
}
|
||||
)
|
||||
.then((): void => {})
|
||||
.catch((): void => {});
|
||||
}
|
||||
|
||||
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: "",
|
||||
};
|
||||
|
||||
ui.newRegulatory.regulatory_files?.push( uploadedFile );
|
||||
console.log( "文件列表", ui.newRegulatory.regulatory_files );
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
// 失败了，提示一下
|
||||
ElMessageBox.confirm(
|
||||
response.message,
|
||||
"上传文件错误",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
type: "warning",
|
||||
center: true,
|
||||
}
|
||||
)
|
||||
.then((): void => {})
|
||||
.catch((): void => {});
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
ui,
|
||||
headerCellStyle,
|
||||
cellStyle,
|
||||
onUploadSuccess,
|
||||
showUploadFileDialog,
|
||||
onDeleteUploadedFile,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user