feat: 教育管理员订阅计划展示

src/component/Administrator/SE/allUser/addAllUser.vue

@@ -91,7 +91,7 @@
         <a-select
           v-model:value="subscriptionPlanId"
           style="width: 250px"
-          :options="planOptions"
+          :options="activePlanOptions"
           :field-names="{ label: 'name', value: 'id' }"
           :placeholder="$t('admin.SelectPlan')"
         ></a-select>
@@ -106,7 +106,7 @@
     <a-spin size="large" />
   </div>
 </template>
-<script>
+<script lang="ts">
 import {
   defineComponent,
   ref,
@@ -115,6 +115,7 @@ import {
   onMounted,
   nextTick,
   toRefs,
+  computed,
 } from "vue";
 import { Https } from "@/tool/https";
 import { Modal, message } from "ant-design-vue";
@@ -134,6 +135,13 @@ export default defineComponent({
   setup(props, { emit }) {
 	const {t} = useI18n()
     const { planOptions } = toRefs(props)
+    // 筛选出状态为 ACTIVE 的订阅计划
+    const activePlanOptions = computed(() => {
+      if (!planOptions.value || !Array.isArray(planOptions.value)) {
+        return []
+      }
+      return planOptions.value.filter((plan: any) => plan.status === 'ACTIVE')
+    })
     let operations = reactive({
       operationsModal: false,
       operationsEdit: false,
@@ -303,6 +311,7 @@ export default defineComponent({
       blur,
       setOk,
       planOptions,
+      activePlanOptions
     };
   },
   data() {

src/component/Administrator/SE/allUser/index.vue

@@ -85,11 +85,17 @@
           v-for="plan in planFilterOptions"
           :key="plan.id"
           class="plan_item"
-          :class="{ active: subscriptionPlanId === plan.id }"
+          :class="{ 
-          @click="selectPlanFilter(plan.id)"
+            active: subscriptionPlanId === plan.id,
+            disabled: plan.status === 'PENDING'
+          }"
+          @click="plan.status !== 'PENDING' && selectPlanFilter(plan.id)"
         >
           <span class="plan_name">{{ plan.name }}</span>
-          <MoreOutlined class="plan_more_icon" @click.stop="openPlanRenameModal(plan)" />
+          <MoreOutlined 
+            class="plan_more_icon" 
+            @click.stop="plan.status !== 'PENDING' && openPlanRenameModal(plan)" 
+          />
         </div>
       </div>
       <a-table
@@ -430,7 +436,7 @@ export default defineComponent({
       if (!orgId) return
       Https.axiosPost(Https.httpUrls.searchSubscribeByOrg, {
         organizationId: orgId,
-        status: ['ACTIVE']
+        status: ['ACTIVE','PENDING']
       }).then(res => {
         // 将与当前用户 subscriptionPlanId 相同的订阅计划放到第一个
         const userSubscriptionPlanId = store.state.UserHabit.userDetail.subscriptionPlanId
@@ -698,6 +704,19 @@ export default defineComponent({
       background: #ffffff;
       color: #000000;
     }
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: #d9d9d9;
+      border-color: #d9d9d9;
+      color: #999;
+
+      &:hover {
+        background-color: #d9d9d9;
+        color: #999;
+      }
+    }
   }
 
   .plan_item {

src/component/Administrator/subscriptionPlan.vue

@@ -36,7 +36,7 @@
             @change="handleOrganizationChange"
           >
             <a-select-option value="ADD_ORGANIZATION" class="add-organization-option">
-              + 添加组织
+              + Create Organization
             </a-select-option>
             <a-select-option
               v-for="item in organizationOptions"
@@ -213,7 +213,7 @@
               @change="handleOrganizationChange"
             >
               <a-select-option value="ADD_ORGANIZATION" class="add-organization-option">
-                + 添加组织
+                + Create Organization
               </a-select-option>
               <a-select-option
                 v-for="item in organizationOptions"
@@ -248,6 +248,7 @@
               v-model:value="formState.currentPeriodStart"
               value-format="X"
               style="width: 250px"
+              :disabledDate="disabledDate"
               class="range_picker"
               placeholder="Select the start time"
             >
@@ -373,13 +374,22 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, onMounted, onBeforeUnmount, computed, nextTick, useTemplateRef } 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'
 import store from '@/store'
 import type { FormInstance, Rule } from 'ant-design-vue/es/form'
 import { debounce } from 'lodash-es'
+import dayjs, { Dayjs } from 'dayjs'
 
 type PlanStatus = 'PENDING' | 'ACTIVE' | 'EXPIRED'
 interface SubscriptionPlan {
@@ -396,6 +406,10 @@ interface SubscriptionPlan {
   endStamp: number
 }
 
+const disabledDate = (current: Dayjs) => {
+  return current && current < dayjs().subtract(1, 'days').endOf('day')
+}
+
 const searchForm = reactive({
   name: '',
   startTime: '',
@@ -470,8 +484,8 @@ const getStatusColor = (status?: string) =>
   statusColorMap[normalizeStatus(status) as PlanStatus] || 'default'
 
 const columns = [
-  { title: 'Name', dataIndex: 'name', key: 'name', align: 'center',width: 180  },
+  { title: 'Name', dataIndex: 'name', key: 'name', align: 'center', width: 180 },
-  { title: 'ID', dataIndex: 'id', key: 'id', align: 'center' ,width: 80},
+  { title: 'ID', dataIndex: 'id', key: 'id', align: 'center', width: 80 },
   {
     title: 'Organization',
     dataIndex: 'organizationName',
@@ -479,23 +493,35 @@ const columns = [
     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: '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',
     align: 'center',
-    width:200
+    width: 200
   },
   {
     title: 'End Time',
     dataIndex: 'currentPeriodEnd',
     key: 'currentPeriodEnd',
     align: 'center',
-    width:200
+    width: 200
   },
-  { title: 'Status', dataIndex: 'status', key: 'status', align: 'center' ,width: 100},
+  { title: 'Status', dataIndex: 'status', key: 'status', align: 'center', width: 100 },
   {
     title: 'Credit Limit',
     dataIndex: 'creditLimit',