feat: 教育管理员操作订阅计划& 刷新页面保持当前页面

src/component/Administrator/subscriptionPlan.vue

@@ -58,6 +58,16 @@
             :options="allUserList"
           ></a-select>
         </a-form-item>
+        <a-form-item label="Status">
+          <a-select
+            v-model:value="searchForm.status"
+            mode="multiple"
+            allow-clear
+            placeholder="Select Status"
+            style="width: 220px"
+            :options="statusOption"
+          />
+        </a-form-item>
         <a-form-item>
           <a-space>
             <a-button type="primary" @click="handleSearch">Search</a-button>
@@ -94,13 +104,10 @@
           >
             {{ formatTime(record[column.key], 'YYYY-MM-DD hh:mm:ss') }}
           </template>
-          <!-- <template v-if="column.key === 'organizationId'">
-            {{ organizationOptions.find(item => item.id === record[column.key]).name }}
-          </template> -->
 
           <template v-if="column.key === 'status'">
-            <a-tag :color="statusColorMap[record.status]">
-              {{ statusLabelMap[record.status] }}
+            <a-tag :color="getStatusColor(record.status)">
+              {{ record.status }}
             </a-tag>
           </template>
           <template v-if="column.key === 'adminAccId'">
@@ -200,7 +207,6 @@
               @popupScroll="handleOrganizationScroll"
               @select="handleOrganizationSelect"
               @change="handleOrganizationChange"
-              :disabled="isEditMode"
             >
               <a-select-option value="ADD_ORGANIZATION" class="add-organization-option">
                 + 添加组织
@@ -291,7 +297,7 @@
       </div>
       <div class="subscriptionPlan_btn admin_page">
         <div class="admin_search_item" @click="cancelModal">Close</div>
-        <div class="admin_search_item" @click="handleSubmit">OK</div>
+        <div class="admin_search_item" @click="handleSubmitDebounced">OK</div>
       </div>
     </a-modal>
 
@@ -359,8 +365,9 @@ import { Https } from '@/tool/https'
 import { formatTime } from '@/tool/util'
 import store from '@/store'
 import type { FormInstance, Rule } from 'ant-design-vue/es/form'
+import { debounce } from 'lodash-es'
 
-type PlanStatus = 'active' | 'paused' | 'ended'
+type PlanStatus = 'PENDING' | 'ACTIVE' | 'EXPIRED'
 interface SubscriptionPlan {
   id: number
   name: string
@@ -381,6 +388,7 @@ const searchForm = reactive({
   endTime: '',
   organizationId: undefined as string | undefined,
   adminAccId: undefined as string | undefined,
+  status: [] as PlanStatus[] | [],
   id: '',
   page: 1,
   size: 10,
@@ -413,16 +421,39 @@ const organizationForm = reactive({
 })
 
 const statusLabelMap: Record<PlanStatus, string> = {
-  active: 'Active',
-  paused: 'Paused',
-  ended: 'Ended'
+  PENDING: 'Pending',
+  ACTIVE: 'Active',
+  EXPIRED: 'Expired'
 }
 const statusColorMap: Record<PlanStatus, string> = {
-  active: 'green',
-  paused: 'orange',
-  ended: 'red'
+  PENDING: 'blue',
+  ACTIVE: 'green',
+  EXPIRED: 'red'
 }
 
+const statusOption = ref([
+  {
+    label: 'Pending',
+    value: 'PENDING'
+  },
+  {
+    label: 'Active',
+    value: 'ACTIVE'
+  },
+  {
+    label: 'Expired',
+    value: 'EXPIRED'
+  }
+])
+
+const normalizeStatus = (status?: string): PlanStatus | undefined => {
+  if (!status) return undefined
+  const upper = status.toUpperCase() as PlanStatus
+  return upper
+}
+const getStatusColor = (status?: string) =>
+  statusColorMap[normalizeStatus(status) as PlanStatus] || 'default'
+
 const columns = [
   { title: 'Name', dataIndex: 'name', key: 'name' },
   { title: 'ID', dataIndex: 'id', key: 'id' },
@@ -452,16 +483,7 @@ const handleFetchTableData = async () => {
   tableLoading.value = true
   return Https.axiosPost(Https.httpUrls.searchAllSubscribePlan, searchForm)
     .then(res => {
-      tableData.value = res.records.map(item => {
-        const organization = organizationOptions.value.find(
-          el => el.id === item.organizationId
-        ) || { name: '' }
-        return {
-          ...item,
-          organizationName: organization.name || ''
-        }
-        debugger
-      })
+      tableData.value = res.records
       searchForm.total = res.total
     })
     .finally(() => {
@@ -490,6 +512,7 @@ const handleReset = () => {
   searchForm.endTime = ''
   searchForm.organizationId = undefined
   searchForm.adminAccId = undefined
+  searchForm.status = []
   searchForm.id = ''
   handleSearch()
 }
@@ -508,8 +531,8 @@ const openEdit = (record: SubscriptionPlan) => {
   modalTitle.value = 'Edit Subscription Plan'
   isEditMode.value = true
   formState.name = record.name
-  formState.currentPeriodStart = record.currentPeriodStart
-  formState.currentPeriodEnd = record.currentPeriodEnd
+  formState.currentPeriodStart = String(record.currentPeriodStart)
+  formState.currentPeriodEnd = String(record.currentPeriodEnd)
   formState.organizationId = record.organizationId
   formState.adminAccId = record.adminAccId
   formState.creditLimit = record.creditLimit
@@ -590,6 +613,12 @@ const handleSubmit = async () => {
   }
 }
 
+// 防抖包装，避免重复点击
+const handleSubmitDebounced = debounce(handleSubmit, 500, {
+  leading: true,
+  trailing: false
+})
+
 const cancelModal = () => {
   modalVisible.value = false
   resetFormState()