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

frontend/src/views/fees/SpecialExpenses.vue

@@ -3,7 +3,6 @@
     <div class="page-header">
       <div>
         <h1 class="page-title">{{ TEXT.modules.feeSpecials.title }}</h1>
-        <p class="page-subtitle">{{ TEXT.modules.feeSpecials.subtitle }}</p>
       </div>
       <el-button type="primary" :disabled="!canWrite" @click="goNew" class="header-action-btn">
         <el-icon class="el-icon--left"><Plus /></el-icon>
@@ -109,7 +108,13 @@
     <StateLoading v-else-if="loading" :rows="6" />
 
     <el-card v-else class="table-card" shadow="never">
-      <el-table :data="expenses" style="width: 100%" @row-click="onRowClick" :header-cell-style="{ background: '#f8f9fb' }">
+      <el-table
+        :data="sortedExpenses"
+        style="width: 100%"
+        @row-click="onRowClick"
+        :header-cell-style="{ background: '#f8f9fb' }"
+        :row-class-name="expenseRowClass"
+      >
         <el-table-column :label="TEXT.common.fields.occurDate" width="140">
           <template #default="scope">
             <span class="date-text">{{ displayDate(scope.row.happen_date) }}</span>
@@ -161,7 +166,7 @@
               link
               type="danger"
               size="small"
-              :disabled="!canWrite"
+              :disabled="!canWrite || isInactiveSite(scope.row.center_id)"
               @click.stop="remove(scope.row)"
             >
               {{ TEXT.common.actions.delete }}
@@ -169,7 +174,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <StateEmpty v-if="expenses.length === 0" :description="TEXT.modules.feeSpecials.empty" />
+      <StateEmpty v-if="sortedExpenses.length === 0" :description="TEXT.modules.feeSpecials.empty" />
     </el-card>
   </div>
 </template>
@@ -199,6 +204,19 @@ const loading = ref(false);
 const errorMessage = ref("");
 const expenses = ref<any[]>([]);
 const sites = ref<any[]>([]);
+const siteActiveMap = computed(() => {
+  const map: Record<string, boolean> = {};
+  sites.value.forEach((site) => {
+    if (site?.id) map[site.id] = !!site.is_active;
+  });
+  return map;
+});
+const isInactiveSite = (siteId?: string) => !!siteId && siteActiveMap.value[siteId] === false;
+const expenseRowClass = ({ row }: { row: any }) =>
+  `${row?.id ? "clickable-row" : ""}${isInactiveSite(row?.center_id) ? " row-inactive" : ""}`.trim();
+const sortedExpenses = computed(() =>
+  [...expenses.value].sort((a, b) => Number(isInactiveSite(a?.center_id)) - Number(isInactiveSite(b?.center_id)))
+);
 
 const filters = reactive({
   centerId: "",
@@ -287,6 +305,10 @@ const onRowClick = (row: any) => {
 
 const remove = async (row: any) => {
   if (!row?.id || !canWrite.value) return;
+  if (isInactiveSite(row?.center_id)) {
+    ElMessage.warning("中心已停用");
+    return;
+  }
   const ok = await ElMessageBox.confirm(TEXT.common.confirm.delete, TEXT.common.labels.tips).catch(() => null);
   if (!ok) return;
   try {
@@ -444,4 +466,16 @@ onMounted(async () => {
 .text-muted {
   color: var(--ctms-text-placeholder);
 }
+
+</style>
+
+<style>
+.row-inactive td {
+  color: var(--ctms-text-secondary);
+  background-color: #fff7d6 !important;
+}
+
+.row-inactive .el-tag {
+  opacity: 0.6;
+}
 </style>