zhouchengcheng/ctms
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

启动与授权-初步优化

Browse Source
This commit is contained in:
Cheng Zhou
2026-01-15 11:25:13 +08:00
parent 4fc5f0ee9b
commit 05c1f9579a
28 changed files with 1082 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/attachments/AttachmentList.vue
+67 -9
View File
@@ -1,7 +1,7 @@
<template>
<el-card>
<div class="header">
<span>{{ TEXT.common.labels.attachments }}</span>
<span>{{ headerTitle }}</span>
<AttachmentUploader
:study-id="studyId"
:entity-type="entityType"
@@ -27,7 +27,7 @@
<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 }}
{{ TEXT.common.labels.preview }}
</el-button>
<el-button link type="primary" size="small" @click="download(scope.row)">{{ TEXT.common.actions.download }}</el-button>
<el-button
@@ -59,7 +59,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { computed, onMounted, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchAttachments, deleteAttachment } from "../../api/attachments";
import AttachmentUploader from "./AttachmentUploader.vue";
@@ -74,6 +74,7 @@ const props = defineProps<{
studyId: string;
entityType: string;
entityId: string;
title?: string;
}>();
const attachments = ref<any[]>([]);
@@ -83,9 +84,12 @@ const study = useStudyStore();
const members = ref<any[]>([]);
const previewVisible = ref(false);
const previewUrl = ref("");
const previewObjectUrl = ref("");
const previewType = ref<"image" | "pdf" | "other">("other");
const previewTitle = ref(TEXT.common.labels.preview);
const previewError = ref("");
const previewLoading = ref(false);
const headerTitle = computed(() => props.title || TEXT.common.labels.attachments);
const load = async () => {
if (!props.studyId || !props.entityId) return;
@@ -122,25 +126,72 @@ const uploaderLabel = (row: any) => {
return displayUser(row.uploaded_by_id || row.uploaded_by, { members: memberMap });
};
const download = (row: any) => {
const getDownloadUrl = (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");
return row?.url || (token ? `/api/v1/attachments/${row.id}/download?token=${token}` : `/api/v1/attachments/${row.id}/download`);
};
const getPreviewUrl = (row: any) => {
const token = localStorage.getItem("ctms_token");
return token ? `/api/v1/attachments/${row.id}/preview?token=${token}` : `/api/v1/attachments/${row.id}/preview`;
};
const download = (row: any) => {
const url = getDownloadUrl(row);
const link = document.createElement("a");
link.href = url;
link.download = row?.filename || "download";
link.rel = "noopener";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const getFileName = (row: any) => (row?.filename || "").toLowerCase();
const getMimeType = (row: any) => (row?.mime_type || row?.content_type || "").toLowerCase();
const detectPreviewType = (row: any) => {
const mime = (row?.mime_type || row?.content_type || "").toLowerCase();
const mime = getMimeType(row);
if (mime.startsWith("image/")) return "image";
if (mime === "application/pdf") return "pdf";
const name = getFileName(row);
if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".webp", ".svg"].some((ext) => name.endsWith(ext))) return "image";
if (name.endsWith(".pdf")) return "pdf";
return "other";
};
const previewImage = async (downloadUrl: string) => {
previewLoading.value = true;
try {
const token = localStorage.getItem("ctms_token");
const headers: Record<string, string> = {};
if (token) headers.Authorization = `Bearer ${token}`;
const response = await fetch(downloadUrl, { headers });
if (!response.ok) throw new Error("preview failed");
const blob = await response.blob();
if (previewObjectUrl.value) URL.revokeObjectURL(previewObjectUrl.value);
previewObjectUrl.value = URL.createObjectURL(blob);
previewUrl.value = previewObjectUrl.value;
} catch {
previewUrl.value = downloadUrl;
} finally {
previewLoading.value = false;
}
};
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`);
const downloadUrl = getDownloadUrl(row);
if (previewType.value === "image") {
previewUrl.value = "";
previewImage(downloadUrl);
} else if (previewType.value === "pdf") {
previewUrl.value = getPreviewUrl(row);
} else {
previewUrl.value = downloadUrl;
}
if (previewType.value === "other") {
previewError.value = TEXT.common.messages.previewNotSupported;
}
@@ -172,6 +223,13 @@ onMounted(async () => {
await Promise.all([loadMembers()]);
load();
});
watch(previewVisible, (visible) => {
if (!visible && previewObjectUrl.value) {
URL.revokeObjectURL(previewObjectUrl.value);
previewObjectUrl.value = "";
}
});
</script>
<style scoped>
frontend/src/components/fees/FeeAttachmentPanel.vue
+80 -16
View File
@@ -41,7 +41,7 @@
<el-table-column :label="TEXT.common.labels.actions" width="160">
<template #default="scope">
<el-button link type="primary" size="small" @click="preview(scope.row)">
{{ TEXT.common.actions.view }}
{{ TEXT.common.labels.preview }}
</el-button>
<el-button link type="primary" size="small" @click="download(scope.row)">
{{ TEXT.common.actions.download }}
@@ -79,7 +79,7 @@
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { listFeeAttachments, uploadFeeAttachment, deleteFeeAttachment, getFeeAttachmentDownloadUrl } from "../../api/feeAttachments";
import { fetchAttachments, uploadAttachment, deleteAttachment } from "../../api/attachments";
import { listMembers } from "../../api/members";
import { useAuthStore } from "../../store/auth";
import { useStudyStore } from "../../store/study";
@@ -112,9 +112,11 @@ const study = useStudyStore();
const members = ref<any[]>([]);
const previewVisible = ref(false);
const previewUrl = ref("");
const previewObjectUrl = ref("");
const previewType = ref<"image" | "pdf" | "other">("other");
const previewTitle = ref(TEXT.common.labels.preview);
const previewError = ref("");
const previewLoading = ref(false);
const isUploading = (key: string) => (progressMap[key] || 0) > 0 && (progressMap[key] || 0) < 100;
@@ -130,13 +132,19 @@ const loadMembers = async () => {
};
const load = async () => {
if (!props.entityType || !props.entityId) return;
const studyId = study.currentStudy?.id;
if (!studyId || !props.entityType || !props.entityId) return;
loading.value = true;
try {
const { data } = await listFeeAttachments(props.entityType, props.entityId);
const items = Array.isArray(data?.data) ? data?.data : [];
props.groups.forEach((group) => {
grouped[group.key] = items.filter((item: any) => item.file_type === group.key || item.fileType === group.key);
const results = await Promise.all(
props.groups.map(async (group) => {
const entityType = `${props.entityType}_${group.key}`;
const { data } = await fetchAttachments(studyId, entityType, props.entityId);
return { key: group.key, items: data?.items || data || [] };
})
);
results.forEach((group) => {
grouped[group.key] = Array.isArray(group.items) ? group.items : [];
});
} catch (e: any) {
ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
@@ -157,9 +165,24 @@ const uploaderLabel = (row: any) => {
return displayUser(row.uploaded_by_id || row.uploaded_by, { members: memberMap });
};
const getDownloadUrl = (row: any) => {
const token = localStorage.getItem("ctms_token");
return row?.url || (token ? `/api/v1/attachments/${row.id}/download?token=${token}` : `/api/v1/attachments/${row.id}/download`);
};
const getPreviewUrl = (row: any) => {
const token = localStorage.getItem("ctms_token");
return token ? `/api/v1/attachments/${row.id}/preview?token=${token}` : `/api/v1/attachments/${row.id}/preview`;
};
const getFileName = (row: any) => (row?.filename || "").toLowerCase();
const getMimeType = (row: any) => (row?.mime_type || row?.content_type || "").toLowerCase();
const doUpload = async (fileType: string, options: any) => {
const file: File = options.file;
if (!file || props.readonly) return;
const studyId = study.currentStudy?.id;
if (!studyId) return;
const maxSize = props.maxSizeMb ?? 50;
if (file.size > maxSize * 1024 * 1024) {
ElMessage.error(`${TEXT.common.messages.fileTooLarge} ${maxSize}MB`);
@@ -167,7 +190,8 @@ const doUpload = async (fileType: string, options: any) => {
}
progressMap[fileType] = 0;
try {
await uploadFeeAttachment(props.entityType, props.entityId, fileType, file, {
const entityType = `${props.entityType}_${fileType}`;
await uploadAttachment(studyId, entityType, props.entityId, file, {
onUploadProgress: (evt: ProgressEvent) => {
if (evt.total) {
progressMap[fileType] = Math.round((evt.loaded / evt.total) * 100);
@@ -184,17 +208,47 @@ const doUpload = async (fileType: string, options: any) => {
};
const detectPreviewType = (row: any) => {
const mime = (row?.mime_type || row?.content_type || "").toLowerCase();
const mime = getMimeType(row);
if (mime.startsWith("image/")) return "image";
if (mime === "application/pdf") return "pdf";
const name = getFileName(row);
if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".webp", ".svg"].some((ext) => name.endsWith(ext))) return "image";
if (name.endsWith(".pdf")) return "pdf";
return "other";
};
const previewImage = async (downloadUrl: string) => {
previewLoading.value = true;
try {
const token = localStorage.getItem("ctms_token");
const headers: Record<string, string> = {};
if (token) headers.Authorization = `Bearer ${token}`;
const response = await fetch(downloadUrl, { headers });
if (!response.ok) throw new Error("preview failed");
const blob = await response.blob();
if (previewObjectUrl.value) URL.revokeObjectURL(previewObjectUrl.value);
previewObjectUrl.value = URL.createObjectURL(blob);
previewUrl.value = previewObjectUrl.value;
} catch {
previewUrl.value = downloadUrl;
} finally {
previewLoading.value = false;
}
};
const preview = (row: any) => {
previewError.value = "";
previewType.value = detectPreviewType(row);
previewTitle.value = row?.filename || TEXT.common.labels.preview;
previewUrl.value = row?.url || getFeeAttachmentDownloadUrl(row.id);
const downloadUrl = getDownloadUrl(row);
if (previewType.value === "image") {
previewUrl.value = "";
previewImage(downloadUrl);
} else if (previewType.value === "pdf") {
previewUrl.value = getPreviewUrl(row);
} else {
previewUrl.value = downloadUrl;
}
if (previewType.value === "other") {
previewError.value = TEXT.common.messages.previewNotSupported;
}
@@ -202,11 +256,14 @@ const preview = (row: any) => {
};
const download = (row: any) => {
if (row?.url) {
window.open(row.url, "_blank");
return;
}
window.open(getFeeAttachmentDownloadUrl(row.id), "_blank");
const url = getDownloadUrl(row);
const link = document.createElement("a");
link.href = url;
link.download = row?.filename || "download";
link.rel = "noopener";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const canDelete = (row: any) => {
@@ -223,7 +280,7 @@ const remove = async (row: any) => {
const ok = await ElMessageBox.confirm(TEXT.common.confirm.delete, TEXT.common.labels.tips).catch(() => null);
if (!ok) return;
try {
await deleteFeeAttachment(row.id);
await deleteAttachment(row.id);
ElMessage.success(TEXT.common.messages.deleteSuccess);
load();
} catch (e: any) {
@@ -242,6 +299,13 @@ onMounted(async () => {
await loadMembers();
load();
});
watch(previewVisible, (visible) => {
if (!visible && previewObjectUrl.value) {
URL.revokeObjectURL(previewObjectUrl.value);
previewObjectUrl.value = "";
}
});
</script>
<style scoped>