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,105 @@
+<template>
+  <el-card>
+    <div class="header">
+      <span>附件</span>
+      <AttachmentUploader
+        :study-id="studyId"
+        :entity-type="entityType"
+        :entity-id="entityId"
+        @uploaded="load"
+      />
+    </div>
+    <el-table :data="attachments" v-loading="loading" style="width: 100%">
+      <el-table-column prop="filename" label="文件名" min-width="200" />
+      <el-table-column label="大小" width="120">
+        <template #default="scope">{{ formatFileSize(scope.row.file_size) }}</template>
+      </el-table-column>
+      <el-table-column prop="uploaded_by" label="上传人" width="160" />
+      <el-table-column prop="uploaded_at" label="上传时间" width="180" />
+      <el-table-column label="操作" width="180">
+        <template #default="scope">
+          <el-button link type="primary" size="small" @click="download(scope.row)">下载</el-button>
+          <el-button
+            v-if="canDelete(scope.row)"
+            link
+            type="danger"
+            size="small"
+            @click="remove(scope.row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { fetchAttachments, deleteAttachment } from "../../api/attachments";
+import AttachmentUploader from "./AttachmentUploader.vue";
+import { formatFileSize } from "./attachmentUtils";
+import { useAuthStore } from "../../store/auth";
+import { useStudyStore } from "../../store/study";
+
+const props = defineProps<{
+  studyId: string;
+  entityType: string;
+  entityId: string;
+}>();
+
+const attachments = ref<any[]>([]);
+const loading = ref(false);
+const auth = useAuthStore();
+const study = useStudyStore();
+
+const load = async () => {
+  if (!props.studyId || !props.entityId) return;
+  loading.value = true;
+  try {
+    const { data } = await fetchAttachments(props.studyId, props.entityType, props.entityId);
+    attachments.value = data.items || data || [];
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "附件加载失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+const download = (row: any) => {
+  const token = localStorage.getItem("ctms_token");
+  const url = token ? `/api/v1/attachments/${row.id}/download?token=${token}` : `/api/v1/attachments/${row.id}/download`;
+  window.open(url, "_blank");
+};
+
+const canDelete = (row: any) => {
+  const userId = auth.user?.id;
+  const role = auth.user?.role;
+  const projectRole = study.currentStudyRole || (study.currentStudy as any)?.role_in_study;
+  return userId === row.uploaded_by || role === "ADMIN" || projectRole === "PM";
+};
+
+const remove = async (row: any) => {
+  const ok = await ElMessageBox.confirm("确认删除该附件？", "提示").catch(() => null);
+  if (!ok) return;
+  try {
+    await deleteAttachment(row.id);
+    ElMessage.success("已删除");
+    load();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "删除失败");
+  }
+};
+
+onMounted(load);
+</script>
+
+<style scoped>
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+</style>
@@ -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>
@@ -0,0 +1,6 @@
+export const formatFileSize = (bytes: number): string => {
+  if (!bytes && bytes !== 0) return "-";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+};