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

frontend/src/views/fees/ContractFeeDetail.vue

@@ -6,7 +6,7 @@
         <p class="page-subtitle">{{ TEXT.modules.feeContracts.detailSubtitle }}</p>
       </div>
       <div class="actions">
-        <el-button type="primary" :disabled="!canWrite" @click="goEdit" class="header-action-btn copy-btn">
+        <el-button type="primary" :disabled="!canWrite || isReadOnly" @click="goEdit" class="header-action-btn copy-btn">
           <el-icon class="el-icon--left"><Edit /></el-icon>
           {{ TEXT.common.actions.edit }}
         </el-button>
@@ -106,6 +106,7 @@
           :entity-type="'contract_fee'"
           :entity-id="contractId"
           :groups="attachmentGroups"
+          :readonly="isReadOnly"
         />
       </el-card>
     </template>
@@ -115,6 +116,7 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
 import { Edit } from "@element-plus/icons-vue";
 import { getContractFee } from "../../api/feeContracts";
 import { fetchSites } from "../../api/sites";
@@ -145,6 +147,14 @@ const detail = reactive<any>({
   payments: [],
 });
 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 isReadOnly = computed(() => !!detail.center_id && siteActiveMap.value[detail.center_id] === false);
 
 const attachmentGroups = [
   {
@@ -204,7 +214,13 @@ const formatAmountWan = (value: any) => {
   return (numberValue / 10000).toFixed(2);
 };
 
-const goEdit = () => router.push(`/fees/contracts/${contractId}/edit`);
+const goEdit = () => {
+  if (isReadOnly.value) {
+    ElMessage.warning("中心已停用");
+    return;
+  }
+  router.push(`/fees/contracts/${contractId}/edit`);
+};
 const goBack = () => router.push("/fees/contracts");
 
 onMounted(async () => {