|
|
<template>
|
|
|
<el-dialog
|
|
|
v-model="dialogFormVisible"
|
|
|
:title="`${paramsProps.title}`"
|
|
|
draggable
|
|
|
append-to-body
|
|
|
:destroy-on-close="true"
|
|
|
width="500"
|
|
|
>
|
|
|
<el-upload
|
|
|
class="upload-demo"
|
|
|
drag
|
|
|
method="PUT"
|
|
|
action="http://10.10.14.210:9000/dsideal/resources/77d45a2c-af46-4c47-bc4e-056a9335e131.doc?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AOxWewe7pywwEc1NQeP6%2F20241030%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241030T071930Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=bb1c75d0acbeb287a28d4810dd8d4c518ef3cb98a3dc2001abbcf0a31dd7173e"
|
|
|
:multiple="true"
|
|
|
: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 } from "@/api/modules/res";
|
|
|
|
|
|
const dialogFormVisible = ref(false);
|
|
|
|
|
|
const fileList = ref<UploadUserFile[]>([]);
|
|
|
|
|
|
const iconList = ref<any>([]);
|
|
|
|
|
|
const paramsProps = ref<View.DefaultParams>({
|
|
|
title: "",
|
|
|
row: {},
|
|
|
updateId: 0,
|
|
|
getTableList: undefined
|
|
|
});
|
|
|
|
|
|
const acceptParams = (params: View.DefaultParams) => {
|
|
|
console.log(params);
|
|
|
paramsProps.value = params;
|
|
|
dialogFormVisible.value = true;
|
|
|
};
|
|
|
|
|
|
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);
|
|
|
};
|
|
|
|
|
|
const uploadExceed = () => {
|
|
|
ElMessage.warning(`一次最多只能选择5个文件上传！`);
|
|
|
};
|
|
|
|
|
|
const getFileExtIconList = async () => {
|
|
|
const res = await getFileExtIcon();
|
|
|
iconList.value = res.data;
|
|
|
};
|
|
|
|
|
|
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>
|
