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

frontend/src/views/fees/ContractFees.vue

@@ -3,7 +3,6 @@
     <div class="page-header">
       <div>
         <h1 class="page-title">{{ TEXT.modules.feeContracts.title }}</h1>
-        <p class="page-subtitle">{{ TEXT.modules.feeContracts.subtitle }}</p>
       </div>
       <el-button type="primary" :disabled="!canWrite" @click="goNew" class="header-action-btn">
         <el-icon class="el-icon--left"><Plus /></el-icon>
@@ -94,7 +93,13 @@
     <StateLoading v-else-if="loading" :rows="6" />
 
     <el-card v-else class="table-card" shadow="never">
-      <el-table :data="contracts" style="width: 100%" @row-click="onRowClick" :header-cell-style="{ background: '#f8f9fb' }">
+      <el-table
+        :data="sortedContracts"
+        style="width: 100%"
+        @row-click="onRowClick"
+        :row-class-name="contractRowClass"
+        :header-cell-style="{ background: '#f8f9fb' }"
+      >
         <el-table-column prop="center_name" :label="TEXT.common.fields.site" min-width="180">
           <template #default="scope">
             <div class="site-cell">
@@ -163,7 +168,7 @@
               link
               type="danger"
               size="small"
-              :disabled="!canWrite"
+              :disabled="!canWrite || isInactiveSite(scope.row.center_id)"
               @click.stop="remove(scope.row)"
             >
               {{ TEXT.common.actions.delete }}
@@ -171,7 +176,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <StateEmpty v-if="contracts.length === 0" :description="TEXT.modules.feeContracts.empty" />
+      <StateEmpty v-if="sortedContracts.length === 0" :description="TEXT.modules.feeContracts.empty" />
     </el-card>
   </div>
 </template>
@@ -201,6 +206,19 @@ const loading = ref(false);
 const errorMessage = ref("");
 const contracts = 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 sortedContracts = computed(() =>
+  [...contracts.value].sort((a, b) => Number(isInactiveSite(a?.center_id)) - Number(isInactiveSite(b?.center_id)))
+);
+const contractRowClass = ({ row }: { row: any }) =>
+  `${row?.id ? "clickable-row" : ""}${isInactiveSite(row?.center_id) ? " row-inactive" : ""}`.trim();
 
 const filters = reactive({
   centerId: "",
@@ -279,6 +297,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 {
@@ -438,4 +460,16 @@ onMounted(async () => {
   color: var(--ctms-text-regular);
   font-family: var(--el-font-family);
 }
+
+</style>
+
+<style>
+.row-inactive td {
+  color: var(--ctms-text-secondary);
+  background-color: #fff7d6 !important;
+}
+
+.row-inactive .el-tag {
+  opacity: 0.6;
+}
 </style>