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>