UX-3 附件上传删除功能

2025-12-17 16:16:47 +08:00
parent 9ca30d12f8
commit 1e6cae6b6e
39 changed files with 514 additions and 15 deletions
@@ -0,0 +1,67 @@
+<template>
+  <div class="uploader">
+    <el-upload
+      :http-request="doUpload"
+      :show-file-list="false"
+      :limit="1"
+      :disabled="loading"
+      :auto-upload="true"
+    >
+      <el-button type="primary" :loading="loading">上传附件</el-button>
+    </el-upload>
+    <el-progress v-if="progress > 0 && progress < 100" :percentage="progress" :stroke-width="6" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+import { uploadAttachment } from "../../api/attachments";
+
+const props = defineProps<{
+  studyId: string;
+  entityType: string;
+  entityId: string;
+  maxSizeMb?: number;
+}>();
+const emit = defineEmits(["uploaded"]);
+
+const progress = ref(0);
+const loading = ref(false);
+const maxSize = props.maxSizeMb ?? 50;
+
+const doUpload = async (options: any) => {
+  const file: File = options.file;
+  if (!file) return;
+  if (file.size > maxSize * 1024 * 1024) {
+    ElMessage.error(`文件大小不能超过 ${maxSize}MB`);
+    return;
+  }
+  progress.value = 0;
+  loading.value = true;
+  try {
+    await uploadAttachment(props.studyId, props.entityType, props.entityId, file, {
+      onUploadProgress: (evt: ProgressEvent) => {
+        if (evt.total) {
+          progress.value = Math.round((evt.loaded / evt.total) * 100);
+        }
+      },
+    });
+    ElMessage.success("上传成功");
+    emit("uploaded");
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "上传失败");
+  } finally {
+    progress.value = 0;
+    loading.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.uploader {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+</style>