费用管理内容优化-初步

frontend/src/components/attachments/AttachmentList.vue

@@ -24,8 +24,11 @@
           {{ displayDateTime(scope.row.uploaded_at) }}
         </template>
       </el-table-column>
-      <el-table-column :label="TEXT.common.labels.actions" width="180">
+      <el-table-column :label="TEXT.common.labels.actions" width="220">
         <template #default="scope">
+          <el-button link type="primary" size="small" @click="preview(scope.row)">
+            {{ TEXT.common.actions.view }}
+          </el-button>
           <el-button link type="primary" size="small" @click="download(scope.row)">{{ TEXT.common.actions.download }}</el-button>
           <el-button
             v-if="canDelete(scope.row)"
@@ -40,6 +43,19 @@
       </el-table-column>
     </el-table>
   </el-card>
+
+  <el-dialog v-model="previewVisible" :title="previewTitle" width="720px" :close-on-click-modal="false">
+    <div v-if="previewError" class="preview-error">
+      {{ previewError }}
+    </div>
+    <template v-else>
+      <img v-if="previewType === 'image'" :src="previewUrl" class="preview-media" />
+      <iframe v-else-if="previewType === 'pdf'" :src="previewUrl" class="preview-frame" />
+      <div v-else class="preview-error">
+        {{ TEXT.common.messages.previewNotSupported }}
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -65,6 +81,11 @@ const loading = ref(false);
 const auth = useAuthStore();
 const study = useStudyStore();
 const members = ref<any[]>([]);
+const previewVisible = ref(false);
+const previewUrl = ref("");
+const previewType = ref<"image" | "pdf" | "other">("other");
+const previewTitle = ref(TEXT.common.labels.preview);
+const previewError = ref("");
 
 const load = async () => {
   if (!props.studyId || !props.entityId) return;
@@ -107,6 +128,25 @@ const download = (row: any) => {
   window.open(url, "_blank");
 };
 
+const detectPreviewType = (row: any) => {
+  const mime = (row?.mime_type || row?.content_type || "").toLowerCase();
+  if (mime.startsWith("image/")) return "image";
+  if (mime === "application/pdf") return "pdf";
+  return "other";
+};
+
+const preview = (row: any) => {
+  previewError.value = "";
+  previewType.value = detectPreviewType(row);
+  previewTitle.value = row?.filename || TEXT.common.labels.preview;
+  const token = localStorage.getItem("ctms_token");
+  previewUrl.value = row?.url || (token ? `/api/v1/attachments/${row.id}/download?token=${token}` : `/api/v1/attachments/${row.id}/download`);
+  if (previewType.value === "other") {
+    previewError.value = TEXT.common.messages.previewNotSupported;
+  }
+  previewVisible.value = true;
+};
+
 const canDelete = (row: any) => {
   const userId = auth.user?.id;
   const role = auth.user?.role;
@@ -141,4 +181,24 @@ onMounted(async () => {
   align-items: center;
   margin-bottom: 8px;
 }
+
+.preview-frame {
+  width: 100%;
+  height: 520px;
+  border: none;
+}
+
+.preview-media {
+  max-width: 100%;
+  max-height: 520px;
+  display: block;
+  margin: 0 auto;
+}
+
+.preview-error {
+  color: var(--ctms-text-secondary);
+  font-size: 13px;
+  padding: 12px 0;
+  text-align: center;
+}
 </style>