信息架构/菜单框架大重构-20260109

2026-01-09 11:19:04 +08:00
parent ba3cf95b8a
commit 9021c7fe2b
188 changed files with 7632 additions and 11658 deletions
@@ -0,0 +1,154 @@
+<template>
+  <div class="page">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">特殊费用</h1>
+        <p class="page-subtitle">记录差旅、住宿等特殊费用</p>
+      </div>
+      <el-button type="primary" @click="goNew">新增特殊费用</el-button>
+    </div>
+
+    <el-card class="filter-card">
+      <el-form :inline="true" :model="filters">
+        <el-form-item label="分中心">
+          <el-input v-model="filters.site_name" placeholder="输入分中心名称" clearable />
+        </el-form-item>
+        <el-form-item label="费用类型">
+          <el-select v-model="filters.fee_type" placeholder="选择类型" clearable>
+            <el-option label="差旅" value="差旅" />
+            <el-option label="住宿" value="住宿" />
+            <el-option label="交通" value="交通" />
+            <el-option label="其他" value="其他" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="load">查询</el-button>
+          <el-button @click="resetFilters">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <el-table :data="items" v-loading="loading" style="width: 100%">
+        <el-table-column prop="site_name" label="分中心" min-width="160" />
+        <el-table-column prop="fee_type" label="费用类型" width="120" />
+        <el-table-column prop="occur_date" label="发生日期" width="140">
+          <template #default="scope">
+            {{ displayDate(scope.row.occur_date) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="staff_name" label="人员" min-width="120" />
+        <el-table-column label="金额" width="140">
+          <template #default="scope">
+            {{ scope.row.amount }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="updated_at" label="更新时间" width="180">
+          <template #default="scope">
+            {{ displayDateTime(scope.row.updated_at) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template #default="scope">
+            <el-button link type="primary" size="small" @click="goDetail(scope.row.id)">详情</el-button>
+            <el-button link type="primary" size="small" @click="goEdit(scope.row.id)">编辑</el-button>
+            <el-button link type="danger" size="small" @click="remove(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <StateEmpty v-if="!loading && items.length === 0" description="暂无特殊费用记录" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useStudyStore } from "../../store/study";
+import { listFinanceSpecials, deleteFinanceSpecial } from "../../api/financeSpecials";
+import { displayDate, displayDateTime } from "../../utils/display";
+import StateEmpty from "../../components/StateEmpty.vue";
+
+const router = useRouter();
+const study = useStudyStore();
+const loading = ref(false);
+const items = ref<any[]>([]);
+const filters = reactive({
+  site_name: "",
+  fee_type: "",
+});
+
+const load = async () => {
+  const studyId = study.currentStudy?.id;
+  if (!studyId) return;
+  loading.value = true;
+  try {
+    const { data } = await listFinanceSpecials(studyId, {
+      site_name: filters.site_name || undefined,
+      fee_type: filters.fee_type || undefined,
+    });
+    items.value = Array.isArray(data) ? data : data.items || [];
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "加载失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+const resetFilters = () => {
+  filters.site_name = "";
+  filters.fee_type = "";
+  load();
+};
+
+const goNew = () => router.push("/finance/special/new");
+const goDetail = (id: string) => router.push(`/finance/special/${id}`);
+const goEdit = (id: string) => router.push(`/finance/special/${id}/edit`);
+
+const remove = async (row: any) => {
+  const studyId = study.currentStudy?.id;
+  if (!studyId) return;
+  const ok = await ElMessageBox.confirm("确认删除该特殊费用？", "提示").catch(() => null);
+  if (!ok) return;
+  try {
+    await deleteFinanceSpecial(studyId, row.id);
+    ElMessage.success("已删除");
+    load();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "删除失败");
+  }
+};
+
+onMounted(load);
+</script>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.page-subtitle {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--ctms-text-secondary);
+}
+
+.filter-card :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+</style>