|
|
|
@ -0,0 +1,154 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog
|
|
|
|
|
v-model="dialogFormVisible"
|
|
|
|
|
:title="`${paramsProps.title}`"
|
|
|
|
|
draggable
|
|
|
|
|
append-to-body
|
|
|
|
|
:destroy-on-close="true"
|
|
|
|
|
width="500"
|
|
|
|
|
@close="closeDialog"
|
|
|
|
|
>
|
|
|
|
|
<el-upload
|
|
|
|
|
class="upload-demo"
|
|
|
|
|
drag
|
|
|
|
|
method="PUT"
|
|
|
|
|
:action="signature"
|
|
|
|
|
:multiple="true"
|
|
|
|
|
:before-upload="uploadBefore"
|
|
|
|
|
:on-success="uploadSuccess"
|
|
|
|
|
:on-exceed="uploadExceed"
|
|
|
|
|
:on-change="uploadChange"
|
|
|
|
|
:limit="5"
|
|
|
|
|
:show-file-list="true"
|
|
|
|
|
list-type="picture"
|
|
|
|
|
v-model:file-list="fileList"
|
|
|
|
|
>
|
|
|
|
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
|
|
<div class="el-upload__text">拖动文件到此区域 或 <em>点击上传</em></div>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts" name="uploadDialog">
|
|
|
|
|
import { ref, onMounted } from "vue";
|
|
|
|
|
import { ElMessage, UploadUserFile } from "element-plus";
|
|
|
|
|
import { getFileExtIcon, getUpladFileSignature, addResData } from "@/api/modules/res";
|
|
|
|
|
|
|
|
|
|
const dialogFormVisible = ref(false);
|
|
|
|
|
|
|
|
|
|
const fileList = ref<UploadUserFile[]>([]);
|
|
|
|
|
|
|
|
|
|
const iconList = ref<any>([]);
|
|
|
|
|
|
|
|
|
|
const signature = ref(
|
|
|
|
|
"http://10.10.14.210:9000/dsideal/resources/d0a9a28e-ca25-4844-b6c0-5f66f0fd631b.doc?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AOxWewe7pywwEc1NQeP6%2F20241031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241031T082920Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=7f596c972b5c22f73a001460504e1aaa905431a32e3dab456e57e9bc40ad7094"
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const paramsProps = ref<View.DefaultParams>({
|
|
|
|
|
title: "",
|
|
|
|
|
row: {},
|
|
|
|
|
updateId: 0,
|
|
|
|
|
getTableList: undefined
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const acceptParams = (params: View.DefaultParams) => {
|
|
|
|
|
paramsProps.value = params;
|
|
|
|
|
dialogFormVisible.value = true;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const uploadBefore = async rawFile => {
|
|
|
|
|
const fileExt = rawFile.name.split(".").pop();
|
|
|
|
|
//获取上传文件签名
|
|
|
|
|
const res = await getUpladFileSignature({ extension: fileExt });
|
|
|
|
|
signature.value = res.data.signature;
|
|
|
|
|
|
|
|
|
|
//给rawFile增加属性,用于保存资源数据的参数
|
|
|
|
|
rawFile.file_ext = fileExt;
|
|
|
|
|
rawFile.file_name = res.data.object_name;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const uploadChange = async (uploadFile, uploadFiles) => {
|
|
|
|
|
if (uploadFile.status == "ready") {
|
|
|
|
|
const fileExt = uploadFile.name.split(".").pop();
|
|
|
|
|
const imageExt = ["jpg", "jpeg", "png", "gif", "bmp"];
|
|
|
|
|
const isImage = imageExt.includes(fileExt.toLowerCase());
|
|
|
|
|
if (!isImage) {
|
|
|
|
|
const extObj = iconList.value.find(item => item.ext === fileExt);
|
|
|
|
|
if (extObj) {
|
|
|
|
|
uploadFile.url = extObj.thumb_name;
|
|
|
|
|
} else {
|
|
|
|
|
const extOtherObj = iconList.value.find(item => item.ext === "other");
|
|
|
|
|
uploadFile.url = extOtherObj.thumb_name;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const uploadSuccess = (response, uploadFile, uploadFiles) => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const _index = fileList.value.findIndex(item => item.name === uploadFile.name);
|
|
|
|
|
fileList.value.splice(_index, 1);
|
|
|
|
|
}, 3000);
|
|
|
|
|
|
|
|
|
|
addRes(
|
|
|
|
|
uploadFile.name.split(".").slice(0, -1).join("."),
|
|
|
|
|
uploadFile.size,
|
|
|
|
|
uploadFile.raw.file_ext,
|
|
|
|
|
uploadFile.raw.file_name,
|
|
|
|
|
paramsProps.value.row.scheme_id,
|
|
|
|
|
paramsProps.value.row.structure_id,
|
|
|
|
|
paramsProps.value.row.stage_id,
|
|
|
|
|
paramsProps.value.row.subject_id
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const uploadExceed = () => {
|
|
|
|
|
ElMessage.warning(`一次最多只能选择5个文件上传!`);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const getFileExtIconList = async () => {
|
|
|
|
|
const res = await getFileExtIcon();
|
|
|
|
|
iconList.value = res.data;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const addRes = async (resource_title, resource_size_int, extension, file_name, scheme_id, structure_id, stage_id, subject_id) => {
|
|
|
|
|
await addResData({
|
|
|
|
|
resource_title,
|
|
|
|
|
resource_size_int,
|
|
|
|
|
extension,
|
|
|
|
|
file_name,
|
|
|
|
|
file_md5: "1",
|
|
|
|
|
scheme_id,
|
|
|
|
|
structure_id,
|
|
|
|
|
stage_id,
|
|
|
|
|
subject_id
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const closeDialog = () => {
|
|
|
|
|
paramsProps.value.getTableList!();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getFileExtIconList();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
|
acceptParams
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
:deep(li) {
|
|
|
|
|
height: 50px; /* 设置固定高度 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-upload-list__item) {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-upload-list__item-thumbnail) {
|
|
|
|
|
height: 30px;
|
|
|
|
|
width: none;
|
|
|
|
|
}
|
|
|
|
|
</style>
|