|
@@ -12,6 +12,7 @@
|
|
|
:limit="1"
|
|
|
:disabled="!!file"
|
|
|
:before-upload="upload"
|
|
|
+ :file-list="fileList"
|
|
|
:http-request="() => {}"
|
|
|
:on-preview="previewFile"
|
|
|
:accept="accept"
|
|
@@ -23,6 +24,15 @@
|
|
|
<template v-slot:tip>
|
|
|
<div class="el-upload__tip">注:可上传{{ size }}以内的{{ formatDesc }}</div>
|
|
|
</template>
|
|
|
+ <template v-slot:file="{ file }: { file: UploadFile }">
|
|
|
+ <div class="file" @click.stop="previewFile()">
|
|
|
+ <div>
|
|
|
+ <el-icon><Document /></el-icon>
|
|
|
+ <span class="name">{{ file.name }}</span>
|
|
|
+ </div>
|
|
|
+ <el-icon @click.stop="removeFile()"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="附件标题:" class="mandatory">
|
|
@@ -47,7 +57,7 @@ import {
|
|
|
import { maxFileSize } from "@/constant/caseFile";
|
|
|
import { useUpload } from "@/hook/upload";
|
|
|
import { CaseFile, addCaseFile } from "@/store/caseFile";
|
|
|
-import { ElMessage } from "element-plus";
|
|
|
+import { ElMessage, UploadFile } from "element-plus";
|
|
|
import { computed, ref, watchEffect } from "vue";
|
|
|
import { QuiskExpose } from "@/helper/mount";
|
|
|
|
|
@@ -62,7 +72,7 @@ const caseFile = ref<CaseFile>({
|
|
|
filesTitle: "",
|
|
|
} as any);
|
|
|
|
|
|
-const { size, upload, removeFile, previewFile, file, accept } = useUpload({
|
|
|
+const { size, fileList, upload, removeFile, previewFile, file, accept } = useUpload({
|
|
|
maxSize: maxFileSize,
|
|
|
formats: props.fileType === FileDrawType ? DrawFormats : OtherFormats,
|
|
|
});
|
|
@@ -93,8 +103,22 @@ defineExpose<QuiskExpose>({
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
.upload-demo {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
+.file {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|