UX-3 附件上传删除功能

frontend/src/api/attachments.ts

@@ -1,12 +1,21 @@
-import { apiGet, apiPost } from "./axios";
+import { apiGet, apiPost, apiDelete } from "./axios";
 
 export const fetchAttachments = (studyId: string, entityType: string, entityId: string) =>
   apiGet(`/api/v1/studies/${studyId}/${entityType}/${entityId}/attachments`);
 
-export const uploadAttachment = (studyId: string, entityType: string, entityId: string, file: File) => {
+export const uploadAttachment = (
+  studyId: string,
+  entityType: string,
+  entityId: string,
+  file: File,
+  options?: Record<string, any>
+) => {
   const formData = new FormData();
   formData.append("file", file);
   return apiPost(`/api/v1/studies/${studyId}/${entityType}/${entityId}/attachments`, formData, {
     headers: { "Content-Type": "multipart/form-data" },
+    ...options,
   });
 };
+
+export const deleteAttachment = (attachmentId: string) => apiDelete(`/api/v1/attachments/${attachmentId}`);

frontend/src/api/axios.ts

@@ -52,5 +52,7 @@ export const apiPost = <T = unknown>(url: string, data?: unknown, config?: Axios
   instance.post<T>(url, data, config);
 export const apiPatch = <T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig) =>
   instance.patch<T>(url, data, config);
+export const apiDelete = <T = unknown>(url: string, config?: AxiosRequestConfig) =>
+  instance.delete<T>(url, config);
 
 export default instance;

frontend/src/components/attachments/AttachmentList.vue

@@ -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>

frontend/src/components/attachments/AttachmentUploader.vue

@@ -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>

frontend/src/components/attachments/attachmentUtils.ts

@@ -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`;
+};

frontend/src/utils/permission.ts

@@ -19,6 +19,7 @@ const PERMISSIONS: Record<string, string[]> = {
   "finance.pay": ["ADMIN", "PM"],
   "imp.transaction": ["ADMIN", "PM", "IMP"],
   "faq.edit": ["ADMIN", "PM"],
+  "dataquery.edit": ["ADMIN", "PM", "CRA"],
 };
 
 const REASONS: Record<string, string> = {
@@ -33,6 +34,7 @@ const REASONS: Record<string, string> = {
   "finance.pay": "支付确认需要 PM/ADMIN 权限",
   "imp.transaction": "仅 IMP/PM/ADMIN 可操作台账",
   "faq.edit": "仅 PM/ADMIN 可维护 FAQ",
+  "dataquery.edit": "仅 PM/CRA/ADMIN 可编辑数据问题",
 };
 
 export const usePermission = () => {

frontend/src/views/AeDetail.vue

@@ -27,7 +27,12 @@
         <CommentList :study-id="studyId" entity-type="aes" :entity-id="ae.id" :can-comment="true" />
       </el-tab-pane>
       <el-tab-pane label="附件">
-        <AttachmentList :study-id="studyId" entity-type="aes" :entity-id="ae.id" :can-upload="canClose" />
+        <AttachmentList
+          :study-id="studyId"
+          entity-type="aes"
+          :entity-id="ae.id"
+          :show-uploader="true"
+        />
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -44,7 +49,7 @@ import { fetchAes, updateAe } from "../api/aes";
 import { useStudyStore } from "../store/study";
 import { useAuthStore } from "../store/auth";
 import CommentList from "../components/CommentList.vue";
-import AttachmentList from "../components/AttachmentList.vue";
+import AttachmentList from "../components/attachments/AttachmentList.vue";
 import PermissionAction from "../components/PermissionAction.vue";
 import { usePermission } from "../utils/permission";
 

frontend/src/views/DataQueryDetail.vue

@@ -27,7 +27,12 @@
         <CommentList :study-id="studyId" entity-type="data-queries" :entity-id="query.id" :can-comment="true" />
       </el-tab-pane>
       <el-tab-pane label="附件">
-        <AttachmentList :study-id="studyId" entity-type="data-queries" :entity-id="query.id" :can-upload="canEdit" />
+        <AttachmentList
+          :study-id="studyId"
+          entity-type="data-queries"
+          :entity-id="query.id"
+          :show-uploader="true"
+        />
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -45,7 +50,8 @@ import { fetchSubjects } from "../api/subjects";
 import { useStudyStore } from "../store/study";
 import { useAuthStore } from "../store/auth";
 import CommentList from "../components/CommentList.vue";
-import AttachmentList from "../components/AttachmentList.vue";
+import AttachmentList from "../components/attachments/AttachmentList.vue";
+import { usePermission } from "../utils/permission";
 
 const route = useRoute();
 const study = useStudyStore();
@@ -61,10 +67,8 @@ const subjectMap = computed(() =>
   }, {})
 );
 
-const canEdit = computed(() => {
-  const role = auth.user?.role;
-  return role === "ADMIN" || role === "PM" || role === "CRA";
-});
+const { can } = usePermission();
+const canEdit = computed(() => can("dataquery.edit"));
 
 const enrichOverdue = (item: any) => {
   if (!item) return item;

frontend/src/views/FinanceDetail.vue

@@ -28,6 +28,15 @@
       </el-descriptions>
     </el-card>
 
+    <el-card class="mt-12" v-if="item">
+      <AttachmentList
+        :study-id="study.currentStudy?.id || ''"
+        entity-type="finance"
+        :entity-id="item.id"
+        :show-uploader="true"
+      />
+    </el-card>
+
     <FinanceForm v-model="showEdit" :item="item" @success="loadItem" />
   </div>
 </template>
@@ -39,6 +48,7 @@ import { ElMessage } from "element-plus";
 import FinanceStatusActions from "../components/FinanceStatusActions.vue";
 import FinanceForm from "../components/FinanceForm.vue";
 import PermissionAction from "../components/PermissionAction.vue";
+import AttachmentList from "../components/attachments/AttachmentList.vue";
 import { fetchFinanceItem } from "../api/finance";
 import { useStudyStore } from "../store/study";
 import { useAuthStore } from "../store/auth";

frontend/src/views/IssueDetail.vue

@@ -24,7 +24,12 @@
         <CommentList :study-id="studyId" entity-type="issues" :entity-id="issue.id" :can-comment="true" />
       </el-tab-pane>
       <el-tab-pane label="附件">
-        <AttachmentList :study-id="studyId" entity-type="issues" :entity-id="issue.id" :can-upload="canEdit" />
+        <AttachmentList
+          :study-id="studyId"
+          entity-type="issues"
+          :entity-id="issue.id"
+          :show-uploader="true"
+        />
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -43,7 +48,7 @@ import { useAuthStore } from "../store/auth";
 import PermissionAction from "../components/PermissionAction.vue";
 import { usePermission } from "../utils/permission";
 import CommentList from "../components/CommentList.vue";
-import AttachmentList from "../components/AttachmentList.vue";
+import AttachmentList from "../components/attachments/AttachmentList.vue";
 
 const route = useRoute();
 const study = useStudyStore();