管理后台前后端逻辑、UI美化

frontend/src/views/ia/FinanceSpecial.vue

@@ -29,7 +29,14 @@
     </el-card>
 
     <el-card>
-      <el-table :data="items" v-loading="loading" style="width: 100%" class="ctms-table" @row-click="onRowClick">
+      <el-table
+        :data="sortedItems"
+        v-loading="loading"
+        style="width: 100%"
+        class="ctms-table"
+        @row-click="onRowClick"
+        :row-class-name="specialRowClass"
+      >
         <el-table-column prop="site_name" :label="TEXT.common.fields.site" min-width="160" />
         <el-table-column prop="fee_type" :label="TEXT.common.fields.type" width="120">
           <template #default="scope">
@@ -54,21 +61,30 @@
         </el-table-column>
         <el-table-column :label="TEXT.common.labels.actions" width="120">
           <template #default="scope">
-            <el-button link type="danger" size="small" @click.stop="remove(scope.row)">{{ TEXT.common.actions.delete }}</el-button>
+            <el-button
+              link
+              type="danger"
+              size="small"
+              :disabled="isInactiveSite(scope.row.site_name)"
+              @click.stop="remove(scope.row)"
+            >
+              {{ TEXT.common.actions.delete }}
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
-      <StateEmpty v-if="!loading && items.length === 0" :description="TEXT.modules.financeSpecials.empty" />
+      <StateEmpty v-if="!loading && sortedItems.length === 0" :description="TEXT.modules.financeSpecials.empty" />
     </el-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import { computed, 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 { fetchSites } from "../../api/sites";
 import { displayDate, displayDateTime, displayEnum } from "../../utils/display";
 import StateEmpty from "../../components/StateEmpty.vue";
 import { TEXT } from "../../locales";
@@ -77,11 +93,37 @@ const router = useRouter();
 const study = useStudyStore();
 const loading = ref(false);
 const items = ref<any[]>([]);
+const sites = ref<any[]>([]);
 const filters = reactive({
   site_name: "",
   fee_type: "",
 });
 
+const siteActiveMap = computed(() => {
+  const map: Record<string, boolean> = {};
+  sites.value.forEach((site) => {
+    if (site?.name) map[site.name] = !!site.is_active;
+  });
+  return map;
+});
+const isInactiveSite = (siteName?: string) => !!siteName && siteActiveMap.value[siteName] === false;
+const specialRowClass = ({ row }: { row: any }) =>
+  `${row?.id ? "clickable-row" : ""}${isInactiveSite(row?.site_name) ? " row-inactive" : ""}`.trim();
+const sortedItems = computed(() =>
+  [...items.value].sort((a, b) => Number(isInactiveSite(a?.site_name)) - Number(isInactiveSite(b?.site_name)))
+);
+
+const loadSites = async () => {
+  const studyId = study.currentStudy?.id;
+  if (!studyId) return;
+  try {
+    const { data } = await fetchSites(studyId, { limit: 500 });
+    sites.value = Array.isArray(data) ? data : data.items || [];
+  } catch {
+    sites.value = [];
+  }
+};
+
 const load = async () => {
   const studyId = study.currentStudy?.id;
   if (!studyId) return;
@@ -115,6 +157,10 @@ const onRowClick = (row: any) => {
 const remove = async (row: any) => {
   const studyId = study.currentStudy?.id;
   if (!studyId) return;
+  if (isInactiveSite(row?.site_name)) {
+    ElMessage.warning("中心已停用");
+    return;
+  }
   const ok = await ElMessageBox.confirm(TEXT.common.confirm.delete, TEXT.common.labels.tips).catch(() => null);
   if (!ok) return;
   try {
@@ -126,7 +172,10 @@ const remove = async (row: any) => {
   }
 };
 
-onMounted(load);
+onMounted(async () => {
+  await loadSites();
+  load();
+});
 </script>
 
 <style scoped>
@@ -157,4 +206,16 @@ onMounted(load);
 .filter-card :deep(.el-form-item) {
   margin-bottom: 0;
 }
+
+</style>
+
+<style>
+.row-inactive td {
+  color: var(--ctms-text-secondary);
+  background-color: #fff7d6 !important;
+}
+
+.row-inactive .el-tag {
+  opacity: 0.6;
+}
 </style>