Step F9：费用管理（Finance）前端

2025-12-17 14:07:23 +08:00
parent 25fa11b9cc
commit a10590ef8d
20 changed files with 661 additions and 2 deletions
@@ -0,0 +1,111 @@
+<template>
+  <div class="page">
+    <el-card v-loading="loading">
+      <div class="header">
+        <div>
+          <h3>{{ item?.title }}</h3>
+          <el-tag :type="statusTag(item?.status)">{{ item?.status }}</el-tag>
+        </div>
+        <div class="header-actions" v-if="item">
+          <el-button v-if="canEditDraft" size="small" @click="showEdit = true">编辑</el-button>
+          <FinanceStatusActions :item="item" @success="loadItem" />
+        </div>
+      </div>
+      <el-descriptions :column="2" border class="mt-12" v-if="item">
+        <el-descriptions-item label="类别">{{ item.category }}</el-descriptions-item>
+        <el-descriptions-item label="金额">￥{{ formatAmount(item.amount) }} {{ item.currency }}</el-descriptions-item>
+        <el-descriptions-item label="发生日期">{{ item.occur_date }}</el-descriptions-item>
+        <el-descriptions-item label="中心">{{ item.site_id || "-" }}</el-descriptions-item>
+        <el-descriptions-item label="受试者">{{ item.subject_id || "-" }}</el-descriptions-item>
+        <el-descriptions-item label="状态时间">
+          提交: {{ item.submitted_at || "-" }} / 审批: {{ item.approved_at || "-" }} /
+          支付: {{ item.paid_at || "-" }}
+        </el-descriptions-item>
+        <el-descriptions-item label="驳回原因">{{ item.reject_reason || "-" }}</el-descriptions-item>
+        <el-descriptions-item label="描述">{{ item.description || "-" }}</el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <FinanceForm v-model="showEdit" :item="item" @success="loadItem" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import FinanceStatusActions from "../components/FinanceStatusActions.vue";
+import FinanceForm from "../components/FinanceForm.vue";
+import { fetchFinanceItem } from "../api/finance";
+import { useStudyStore } from "../store/study";
+import { useAuthStore } from "../store/auth";
+
+const study = useStudyStore();
+const auth = useAuthStore();
+const route = useRoute();
+
+const item = ref<any>(null);
+const loading = ref(false);
+const showEdit = ref(false);
+const canEditDraft = computed(() => {
+  const role = auth.user?.role;
+  return item.value?.status === "DRAFT" && (role === "ADMIN" || role === "PM" || role === "CRA");
+});
+
+const loadItem = async () => {
+  if (!study.currentStudy) return;
+  const id = route.params.itemId as string;
+  loading.value = true;
+  try {
+    const { data } = await fetchFinanceItem(study.currentStudy.id, id);
+    item.value = data;
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "加载失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+const statusTag = (status?: string) => {
+  switch (status) {
+    case "DRAFT":
+      return "info";
+    case "SUBMITTED":
+      return "warning";
+    case "APPROVED":
+      return "success";
+    case "REJECTED":
+      return "danger";
+    case "PAID":
+      return "success";
+    default:
+      return "info";
+  }
+};
+
+const formatAmount = (num?: number | string) => {
+  const n = Number(num);
+  return Number.isFinite(n) ? n.toFixed(2) : "0.00";
+};
+
+onMounted(async () => {
+  if (!auth.user && auth.token) {
+    await auth.fetchMe().catch(() => {});
+  }
+  await loadItem();
+});
+</script>
+
+<style scoped>
+.page {
+  padding: 16px;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.mt-12 {
+  margin-top: 12px;
+}
+</style>