Step F6：AE & 风险/问题管理（PV）

2025-12-16 22:17:26 +08:00
parent e047756b9c
commit abb5b0a107
42 changed files with 779 additions and 3 deletions
@@ -0,0 +1,84 @@
+<template>
+  <el-card class="attachment-card">
+    <template #header>
+      <div class="header">
+        <span>附件</span>
+        <el-upload
+          v-if="canUpload"
+          :http-request="onUpload"
+          :show-file-list="false"
+          :auto-upload="false"
+          :limit="1"
+        >
+          <el-button size="small" type="primary">上传</el-button>
+        </el-upload>
+      </div>
+    </template>
+    <el-table :data="attachments" v-loading="loading" style="width: 100%">
+      <el-table-column prop="filename" label="文件名" />
+      <el-table-column prop="uploaded_by" label="上传人" width="160" />
+      <el-table-column prop="uploaded_at" label="上传时间" width="180" />
+      <el-table-column label="操作" width="120">
+        <template #default="scope">
+          <el-link type="primary" :href="scope.row.file_path" target="_blank">下载</el-link>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { fetchAttachments, uploadAttachment } from "../api/attachments";
+import { useStudyStore } from "../store/study";
+
+interface Props {
+  studyId: string;
+  entityType: string;
+  entityId: string;
+  canUpload?: boolean;
+}
+
+const props = defineProps<Props>();
+const study = useStudyStore();
+const attachments = ref<any[]>([]);
+const loading = ref(false);
+
+const load = async () => {
+  if (!props.studyId) 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 onUpload = async (options: any) => {
+  if (!study.currentStudy) return;
+  loading.value = true;
+  try {
+    await uploadAttachment(study.currentStudy.id, props.entityType, props.entityId, options.file as File);
+    ElMessage.success("上传成功");
+    load();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "上传失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => load());
+</script>
+
+<style scoped>
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>
@@ -0,0 +1,101 @@
+<template>
+  <el-card class="comment-card">
+    <template #header>
+      <div class="header">
+        <span>评论</span>
+        <el-button v-if="canComment" type="primary" size="small" @click="showInput = !showInput">新增</el-button>
+      </div>
+    </template>
+    <div v-if="showInput" class="input-area">
+      <el-input v-model="newComment" type="textarea" rows="3" placeholder="输入评论" />
+      <div class="actions">
+        <el-button size="small" @click="showInput = false">取消</el-button>
+        <el-button size="small" type="primary" :loading="loading" @click="submit">提交</el-button>
+      </div>
+    </div>
+    <el-timeline>
+      <el-timeline-item v-for="c in comments" :key="c.id" :timestamp="c.created_at">
+        <div class="comment-item">
+          <strong>{{ c.created_by }}</strong>
+          <p>{{ c.content }}</p>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { fetchComments, createComment } from "../api/comments";
+import { useStudyStore } from "../store/study";
+
+interface Props {
+  studyId: string;
+  entityType: string;
+  entityId: string;
+  canComment?: boolean;
+}
+
+const props = defineProps<Props>();
+const comments = ref<any[]>([]);
+const loading = ref(false);
+const newComment = ref("");
+const showInput = ref(false);
+const study = useStudyStore();
+
+const load = async () => {
+  if (!props.studyId) return;
+  loading.value = true;
+  try {
+    const { data } = await fetchComments(props.studyId, props.entityType, props.entityId);
+    comments.value = data.items || data || [];
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "评论加载失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+const submit = async () => {
+  if (!newComment.value.trim()) {
+    ElMessage.warning("请输入评论");
+    return;
+  }
+  if (!study.currentStudy) return;
+  loading.value = true;
+  try {
+    await createComment(study.currentStudy.id, props.entityType, props.entityId, { content: newComment.value });
+    ElMessage.success("提交成功");
+    newComment.value = "";
+    showInput.value = false;
+    load();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "提交失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => load());
+</script>
+
+<style scoped>
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.input-area {
+  margin-bottom: 12px;
+}
+.actions {
+  margin-top: 8px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.comment-item p {
+  margin: 4px 0 0;
+}
+</style>
@@ -0,0 +1,128 @@
+<template>
+  <el-dialog :title="isEdit ? '编辑问题' : '新增问题'" v-model="visible" width="600px" @close="onClose">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="form.title" />
+      </el-form-item>
+      <el-form-item label="类别" prop="category">
+        <el-select v-model="form.category" placeholder="请选择">
+          <el-option v-for="c in categories" :key="c" :label="c" :value="c" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="等级" prop="level">
+        <el-select v-model="form.level" placeholder="请选择">
+          <el-option v-for="l in levels" :key="l" :label="l" :value="l" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="截止日期" prop="due_date">
+        <el-date-picker v-model="form.due_date" type="date" value-format="YYYY-MM-DD" />
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input v-model="form.description" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="onClose">取消</el-button>
+      <el-button type="primary" :loading="submitting" @click="onSubmit">提交</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import type { FormInstance, FormRules } from "element-plus";
+import { ElMessage } from "element-plus";
+import { createIssue, updateIssue } from "../api/issues";
+import { useStudyStore } from "../store/study";
+
+interface Props {
+  modelValue: boolean;
+  issue?: Record<string, any>;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(["update:modelValue", "success"]);
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v: boolean) => emit("update:modelValue", v),
+});
+
+const formRef = ref<FormInstance>();
+const submitting = ref(false);
+const study = useStudyStore();
+
+const categories = ["RISK", "ISSUE", "PROTOCOL_DEVIATION"];
+const levels = ["LOW", "MEDIUM", "HIGH", "CRITICAL"];
+
+const form = reactive({
+  title: "",
+  category: "ISSUE",
+  level: "MEDIUM",
+  due_date: "",
+  description: "",
+});
+
+const rules: FormRules = {
+  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+  category: [{ required: true, message: "请选择类别", trigger: "change" }],
+  level: [{ required: true, message: "请选择等级", trigger: "change" }],
+};
+
+const isEdit = computed(() => !!props.issue);
+
+watch(
+  () => props.issue,
+  (val) => {
+    if (val) {
+      Object.assign(form, {
+        title: val.title || "",
+        category: val.category || "ISSUE",
+        level: val.level || "MEDIUM",
+        due_date: val.due_date || "",
+        description: val.description || "",
+      });
+    } else {
+      Object.assign(form, {
+        title: "",
+        category: "ISSUE",
+        level: "MEDIUM",
+        due_date: "",
+        description: "",
+      });
+    }
+  },
+  { immediate: true }
+);
+
+const onClose = () => {
+  visible.value = false;
+};
+
+const onSubmit = async () => {
+  if (!formRef.value) return;
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return;
+    if (!study.currentStudy) {
+      ElMessage.error("未选择项目");
+      return;
+    }
+    submitting.value = true;
+    try {
+      const payload = { ...form };
+      if (isEdit.value && props.issue) {
+        await updateIssue(study.currentStudy.id, props.issue.id, payload);
+      } else {
+        await createIssue(study.currentStudy.id, payload);
+      }
+      ElMessage.success("提交成功");
+      emit("success");
+      onClose();
+    } catch (e: any) {
+      ElMessage.error(e?.response?.data?.message || "提交失败");
+    } finally {
+      submitting.value = false;
+    }
+  });
+};
+</script>
@@ -20,6 +20,8 @@
        <el-menu-item index="/study/milestones">里程碑</el-menu-item>
        <el-menu-item index="/study/tasks">任务</el-menu-item>
        <el-menu-item index="/study/subjects">受试者</el-menu-item>
+        <el-menu-item index="/study/aes">AE</el-menu-item>
+        <el-menu-item index="/study/issues">风险/问题</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>