feat: 编辑时不可修改订阅计划状态&布局修改

src/component/Administrator/subscriptionPlan.vue

@@ -79,56 +79,61 @@
 
     <a-card class="table-card" :bordered="false">
       <div class="table-card__header">
-        <div class="table-card__title">Subscription Plan</div>
         <a-button type="primary" @click="openCreate">New Subscription Plan</a-button>
       </div>
-      <a-table
-        :data-source="tableData"
-        :columns="columns"
-        :loading="tableLoading"
-        row-key="id"
-        :pagination="{
-          showSizeChanger: true,
-          current: searchForm.page,
-          pageSize: searchForm.size,
-          total: searchForm.total,
-          showQuickJumper: true,
-          bordered: false
-        }"
-      >
-        <template #bodyCell="{ column, record }">
-          <template
-            v-if="
-              column.key === 'currentPeriodStart' || column.key === 'currentPeriodEnd'
-            "
-          >
-            {{ formatTime(record[column.key], 'YYYY-MM-DD hh:mm:ss') }}
-          </template>
+      <div ref="historyTable" class="table-wrapper">
+        <a-table
+          :data-source="tableData"
+          :columns="columns"
+          :loading="tableLoading"
+          :bordered="false"
+          row-key="id"
+          @change="changePage"
+          @resizeColumn="handleResizeColumn"
+          :scroll="{ y: historyTableHeight }"
+          :pagination="{
+            showSizeChanger: true,
+            current: searchForm.page,
+            pageSize: searchForm.size,
+            total: searchForm.total,
+            showQuickJumper: true,
+            bordered: false
+          }"
+        >
+          <template #bodyCell="{ column, record }">
+            <template
+              v-if="
+                column.key === 'currentPeriodStart' || column.key === 'currentPeriodEnd'
+              "
+            >
+              {{ formatTime(record[column.key], 'YYYY-MM-DD hh:mm:ss') }}
+            </template>
 
-          <template v-if="column.key === 'status'">
-            <a-tag :color="getStatusColor(record.status)">
-              {{ record.status }}
-            </a-tag>
-          </template>
-          <template v-if="column.key === 'adminAccId'">
-            {{ allUserList.find(item => item.value === record.adminAccId)?.label }}
-          </template>
+            <template v-if="column.key === 'status'">
+              <a-tag :color="getStatusColor(record.status)">
+                {{ record.status }}
+              </a-tag>
+            </template>
+            <template v-if="column.key === 'adminAccId'">
+              {{ allUserList.find(item => item.value === record.adminAccId)?.label }}
+            </template>
 
-          <template v-else-if="column.key === 'actions'">
-            <a-space>
-              <a @click="openEdit(record)">Edit</a>
-              <a-popconfirm
-                title="Confirm to delete this subscription plan?"
-                ok-text="Confirm"
-                cancel-text="Cancel"
-                @confirm="removePlan(record.id)"
-              >
-                <a class="danger-text">Delete</a>
-              </a-popconfirm>
-            </a-space>
+            <template v-else-if="column.key === 'actions'">
+              <a-space>
+                <a @click="openEdit(record)">Edit</a>
+                <a-popconfirm
+                  title="Confirm to delete this subscription plan?"
+                  ok-text="Confirm"
+                  cancel-text="Cancel"
+                  @confirm="removePlan(record.id)"
+                >
+                  <a class="danger-text">Delete</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
           </template>
-        </template>
-      </a-table>
+        </a-table>
+      </div>
     </a-card>
 
     <div class="subscriptionPlanModal" ref="subscriptionPlanModal"></div>
@@ -182,7 +187,7 @@
       </div>
       <div class="subscriptionPlan_center admin_page">
         <div class="form_content">
-          <div class="admin_state_item">
+          <div class="admin_state_item" v-if="!isEditMode">
             <span>
               Name:
               <span>*</span>
@@ -191,7 +196,6 @@
               v-model:value="formState.name"
               placeholder="Input the name"
               style="width: 250px"
-              :disabled="isEditMode"
             />
           </div>
           <div class="admin_state_item">
@@ -293,7 +297,7 @@
               placeholder="Input the credit limit"
             />
           </div>
-          <div class="admin_state_item">
+          <div class="admin_state_item" v-if="!isEditMode">
             <span>Status:</span>
             <a-select
               v-model:value="formState.status"
@@ -369,7 +373,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, onMounted, computed, nextTick } from 'vue'
+import { reactive, ref, onMounted, onBeforeUnmount, computed, nextTick, useTemplateRef } from 'vue'
 import { message } from 'ant-design-vue'
 import { Https } from '@/tool/https'
 import { formatTime } from '@/tool/util'
@@ -466,28 +470,69 @@ const getStatusColor = (status?: string) =>
   statusColorMap[normalizeStatus(status) as PlanStatus] || 'default'
 
 const columns = [
-  { title: 'Name', dataIndex: 'name', key: 'name' },
-  { title: 'ID', dataIndex: 'id', key: 'id' },
-  { title: 'Organization', dataIndex: 'organizationName', key: 'organizationName' },
-  { title: 'Admin Account', dataIndex: 'adminAccId', key: 'adminAccId' },
-  { title: 'Account Num', dataIndex: 'accountNum', key: 'accountNum' },
+  { title: 'Name', dataIndex: 'name', key: 'name', align: 'center',width: 180  },
+  { title: 'ID', dataIndex: 'id', key: 'id', align: 'center' ,width: 80},
+  {
+    title: 'Organization',
+    dataIndex: 'organizationName',
+    key: 'organizationName',
+    align: 'center',
+    width: 180
+  },
+  { title: 'Admin Account', dataIndex: 'adminAccId', key: 'adminAccId', align: 'center' ,width: 180},
+  { title: 'Account Num', dataIndex: 'accountNum', key: 'accountNum', align: 'center' ,width: 120},
   {
     title: 'Start Time',
     dataIndex: 'currentPeriodStart',
-    key: 'currentPeriodStart'
+    key: 'currentPeriodStart',
+    align: 'center',
+    width:200
   },
   {
     title: 'End Time',
     dataIndex: 'currentPeriodEnd',
-    key: 'currentPeriodEnd'
+    key: 'currentPeriodEnd',
+    align: 'center',
+    width:200
   },
-  { title: 'Status', dataIndex: 'status', key: 'status' },
-  { title: 'Credit Limit', dataIndex: 'creditLimit', key: 'creditLimit' },
-  { title: 'Operations', key: 'actions', width: 160 }
+  { title: 'Status', dataIndex: 'status', key: 'status', align: 'center' ,width: 100},
+  {
+    title: 'Credit Limit',
+    dataIndex: 'creditLimit',
+    key: 'creditLimit',
+    align: 'center',
+    width: 120
+  },
+  { title: 'Operations', key: 'actions', width: 160, align: 'center', fixed: 'right' }
 ]
+
+const historyTable = ref()
+const historyTableHeight = ref(0)
+const handleResizeColumn = (w: any, col: any) => {
+  col.width = w
+}
+
+const calculateTableHeight = () => {
+  nextTick(() => {
+    if (historyTable.value) {
+      historyTableHeight.value = historyTable.value.clientHeight - 200
+    }
+  })
+}
+
+const handleResize = () => {
+  calculateTableHeight()
+}
+
 onMounted(async () => {
   await getOrganizationList()
   await handleSearch()
+  calculateTableHeight()
+  window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
 })
 
 const handleFetchTableData = async () => {
@@ -513,6 +558,12 @@ const resetFormState = () => {
   formState.status = undefined
 }
 
+const changePage = (pagination: any) => {
+  searchForm.page = pagination.current
+  searchForm.size = pagination.pageSize
+  handleFetchTableData()
+}
+
 const handleSearch = () => {
   searchForm.page = 1
   handleFetchTableData()
@@ -551,11 +602,13 @@ const openEdit = (record: SubscriptionPlan) => {
   formState.accountNum = (record as any).accountNum || null
   formState.status = record.status
   formState.id = record.id
-  
+
   // 检查组织ID是否在已加载的组织列表中，如果不在，则添加临时项
   if (record.organizationId) {
     const orgExists = organizationOptions.value.some(
-      (org: any) => org.id === record.organizationId || String(org.id) === String(record.organizationId)
+      (org: any) =>
+        org.id === record.organizationId ||
+        String(org.id) === String(record.organizationId)
     )
     if (!orgExists) {
       // 从表格数据中获取组织名称，如果存在则添加临时项
@@ -571,7 +624,7 @@ const openEdit = (record: SubscriptionPlan) => {
       }
     }
   }
-  
+
   modalVisible.value = true
 }
 
@@ -695,25 +748,24 @@ const getOrganizationList = async (isLoadMore = false) => {
   }
   organizationLoading.value = true
   try {
-    const rv: any = await Https.axiosPost(
-      Https.httpUrls.queryOrganization,
-      organizationParams
-    )
+    const { total, ...requestParams } = organizationParams
+    const rv: any = await Https.axiosPost(Https.httpUrls.queryOrganization, requestParams)
     if (rv) {
       const newRecords = rv.records || []
-      // 去重：如果新数据中包含已存在的组织ID，则移除旧项（包括临时项），保留新项
-      const existingIds = new Set(
-        organizationOptions.value.map((org: any) => String(org.id))
-      )
-      const newIds = new Set(newRecords.map((org: any) => String(org.id)))
-      
-      // 移除会被新数据覆盖的旧项（包括临时项）
-      organizationOptions.value = organizationOptions.value.filter(
-        (org: any) => !newIds.has(String(org.id))
-      )
-      
-      // 追加新数据
-      organizationOptions.value = [...organizationOptions.value, ...newRecords]
+      // 遍历新数据，如果已存在则覆盖，不存在则追加
+      newRecords.forEach((newOrg: any) => {
+        const newOrgId = String(newOrg.id)
+        const existingIndex = organizationOptions.value.findIndex(
+          (org: any) => String(org.id) === newOrgId
+        )
+        if (existingIndex !== -1) {
+          // 如果已存在，用新数据覆盖旧项
+          organizationOptions.value[existingIndex] = newOrg
+        } else {
+          // 如果不存在，追加到末尾
+          organizationOptions.value.push(newOrg)
+        }
+      })
       organizationParams.total = rv.total || 0
     }
   } finally {
@@ -802,33 +854,64 @@ const filterOption = (input: string, option: any) => {
 
 <style lang="less" scoped>
 .subscription-plan {
-  padding: 20px 24px 32px 0;
+  padding: 2rem 2.4rem 3.2rem 0;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
 
   .search-card {
-    margin-bottom: 16px;
+    margin-bottom: 1.6rem;
   }
 
   .table-card {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    :deep(.ant-card-body) {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      padding: 2.4rem;
+    }
+
     .table-card__header {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 12px;
+      justify-content: flex-end;
+      margin-bottom: 2.6rem;
+      flex-shrink: 0;
+    }
 
-      .table-card__title {
-        font-size: 18px;
-        font-weight: 500;
-      }
+    .table-wrapper {
+      flex: 1;
+      overflow: hidden;
+      min-height: 0;
     }
 
     .danger-text {
       color: #ff4d4f;
     }
+    :deep(.ant-table-cell::before) {
+      display: none;
+    }
+
+    :deep(.ant-table-thead > tr > th) {
+      border-bottom: none;
+    }
+    :deep(.ant-table-tbody > tr > td) {
+      border: none;
+    }
+
+    :deep(.ant-table-tbody > tr:hover > td) {
+      background: rgb(202, 202, 202);
+    }
   }
 }
 :deep(.subscriptionPlan_modal) {
   .ant-modal-body {
-    height: calc(65rem * 1.2);
+    // height: calc(65rem * 1.2);
     display: flex;
     flex-direction: column;
     padding: 2.5rem 3rem;