bugfix: 教育版管理员页面分页器消失

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="admin_page">
+  <div class="admin_page all-user">
     <div class="admin_table_search">
       <div class="admin_state">
         <div class="admin_state_item">
@@ -16,10 +16,56 @@
             </template>
           </a-range-picker>
         </div>
+        <!-- <div class="admin_state_item">
+                    <span>Country or Region:</span>
+					<a-select
+                        v-model:value="country"
+						:allowClear="true"
+						show-search
+                        style="width: 230px"
+                        :filter-option="filterOption"
+                        placeholder="Select Item..."
+                        max-tag-count="responsive"
+                        :options="allCountry"
+                    ></a-select>
+                </div> -->
+        <!-- <div class="admin_state_item">
+                    <span>Email:</span>
+                    <input
+                        v-model="email"
+                        placeholder="Please enter email"
+                        @keydown.enter="gettrialList"
+                        type="text"
+                        style="width: 230px"
+                    />
+                </div> -->
         <div class="admin_state_item">
           <span>{{ $t('admin.UserName') }}:</span>
-          <SelectUser v-model:value="ids" multiple valueKey="label" labelKey="email" />
+          <a-select
+            v-model:value="ids"
+            mode="multiple"
+            style="width: 230px"
+            :field-names="{ label: 'label', value: 'label' }"
+            :filter-option="filterOption"
+            :placeholder="$t('admin.selectUserName')"
+            max-tag-count="responsive"
+            :options="allUserList"
+            @keydown.enter="gettrialList"
+          ></a-select>
         </div>
+        <!-- <div class="admin_state_item">
+                    <span>User Type:</span>
+                    <a-select
+                        v-model:value="systemUser"
+                        size="large"
+                        style="width: 230px"
+                        optionFilterProp="label"
+                        :options="state"
+                        placeholder="Please select"
+                        allowClear
+                        show-search
+                    ></a-select>
+                </div> -->
       </div>
       <div class="admin_search">
         <div class="admin_search_item" @click="searchHistoryList">
@@ -70,31 +116,6 @@
       </div>
     </div>
     <div class="admin_table_content" ref="historyTable">
-      <div class="admin_state_list plan_list">
-        <div
-          v-for="plan in planFilterOptions"
-          :key="plan.id"
-          class="plan_item"
-          :class="{
-            active: subscriptionPlanId === plan.id,
-            disabled: plan.status === 'PENDING'
-          }"
-          @click="plan.status !== 'PENDING' && selectPlanFilter(plan.id)"
-        >
-          <a-tooltip v-if="plan.status === 'PENDING'">
-            <template #title>{{ $t('admin.PlanStart') }} {{ plan.startTime }}</template>
-            <span class="plan_name">{{ plan.name }}</span>
-            <MoreOutlined class="plan_more_icon" />
-          </a-tooltip>
-          <template v-else>
-            <span class="plan_name">{{ plan.name }}</span>
-            <MoreOutlined
-              class="plan_more_icon"
-              @click.stop="plan.status !== 'PENDING' && openPlanRenameModal(plan)"
-            />
-          </template>
-        </div>
-      </div>
       <a-table
         @resizeColumn="handleResizeColumn"
         :loading="tableLoading"
@@ -126,6 +147,12 @@
             <div class="operate_item" @click="deleteAagree(record)">
               {{ $t('admin.Delete') }}
             </div>
+            <!-- <div
+							class="operate_item"
+							@click="deleteGroup(record, index)"
+						>
+							Delete
+						</div> -->
           </div>
         </template>
       </a-table>
@@ -133,31 +160,7 @@
     <allUserPoerationsVue
       ref="allUserPoerationsVue"
       @searchHistoryList="searchHistoryList"
-      :plan-options="planFilterOptions"
     ></allUserPoerationsVue>
-    <div class="renamePlanModal" ref="renamePlanModal"></div>
-    <!-- 重命名订阅计划弹窗 -->
-    <a-modal
-      v-model:visible="renamePlanModalVisible"
-      :title="$t('admin.RenamePlan')"
-      @ok="confirmRenamePlan"
-      @cancel="cancelRenamePlan"
-      :ok-text="$t('admin.OK')"
-      :cancel-text="$t('admin.Cancel')"
-      :get-container="() => $refs.renamePlanModal"
-    >
-      <div class="rename-plan-form">
-        <div class="admin_state_item">
-          <span>{{ $t('admin.PlanName') }}:</span>
-          <a-input
-            v-model:value="renamePlanForm.planName"
-            :placeholder="$t('admin.InputPlanName')"
-            style="width: 250px"
-            @pressEnter="confirmRenamePlan"
-          />
-        </div>
-      </div>
-    </a-modal>
   </div>
 </template>
 <script lang="ts">
@@ -168,24 +171,20 @@ import {
   computed,
   reactive,
   toRefs,
-  unref,
+  onMounted
-  watch
 } from 'vue'
 import { formatTime } from '@/tool/util'
 import { useStore } from 'vuex'
 import { Https } from '@/tool/https'
-import { Modal, message, Input } from 'ant-design-vue'
+import { Modal, message } from 'ant-design-vue'
-import { ExclamationCircleOutlined, MoreOutlined } from '@ant-design/icons-vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import allUserPoerationsVue from './addAllUser.vue'
 import { useI18n } from 'vue-i18n'
 import SelectUser from '@/component/common/SelectUser.vue'
 export default defineComponent({
-  components: { allUserPoerationsVue, MoreOutlined, SelectUser },
+  components: { allUserPoerationsVue },
   setup() {
     const store: any = useStore()
-    const currentOrganizationId = computed(
-      () => store.state.UserHabit.userDetail.organizationId
-    )
     const selectedRowKeys = ref([]) as any
     const onSelectChange = (changableRowKeys: string[]) => {
       selectedRowKeys.value = changableRowKeys
@@ -193,6 +192,9 @@ export default defineComponent({
     let filter: any = reactive({
       dataList: [],
       tableLoading: false,
+      allUserList: computed(() => {
+        return store.state.adminPage.allUserList
+      }),
       allCountry: [],
       rowSelection: computed(() => {
         return {
@@ -201,7 +203,6 @@ export default defineComponent({
         }
       })
     })
-
     const { t } = useI18n()
 
     let filterData: any = reactive({
@@ -217,16 +218,10 @@ export default defineComponent({
       systemUser: '',
       order: '', //'Ascending  升序 Descending 降序'
       orderBy: '',
-      userName: '',
+      userName: ''
-      subscriptionPlanId: ''
     })
 
     let renameData: any = ref({}) //修改名字选中的数据
-    const renamePlanModalVisible = ref(false)
-    const renamePlanForm = reactive({
-      planId: null as number | null,
-      planName: ''
-    })
     const columns: any = computed(() => {
       return [
         {
@@ -253,6 +248,13 @@ export default defineComponent({
           key: 'userName',
           width: 150,
           ellipsis: true
+          // customRender: (record: any) => {
+          //     let time = formatTime(
+          //         record.text / 1000,
+          //         "YYYY-MM-DD hh:mm:ss"
+          //     );
+          //     return time;
+          // },
         },
         {
           title: t('admin.language'),
@@ -276,6 +278,10 @@ export default defineComponent({
         {
           title: t('admin.Credits'),
           align: 'center',
+          // width: 150,
+          // minWidth: 100,
+          // maxWidth: 200,
+          // resizable: true,
           dataIndex: 'credits',
           key: 'credits',
           width: 100,
@@ -303,6 +309,7 @@ export default defineComponent({
           width: 120,
           align: 'center',
           fixed: 'right',
+          // slots:{customRender:'action'}
           Operations: true
         }
       ]
@@ -347,8 +354,7 @@ export default defineComponent({
         (filterData.order = ''), //'Ascending  升序 Descending 降序'
         (filterData.orderBy = ''), //'Ascending  升序 Descending 降序'
         (filterData.systemUser = ''),
-        (filterData.userName = ''),
+        (filterData.userName = '')
-        (filterData.subscriptionPlanId = '')
     }
     let setHistoryListData = () => {
       let startDate: any = filterData.rangePickerValue?.[0]
@@ -371,17 +377,18 @@ export default defineComponent({
         order: filterData.order,
         orderBy: filterData.orderBy,
         // userName: filterData.userName,
-        userName: filterData.ids,
+        userName: filterData.ids
-        subscriptionPlanId: filterData.subscriptionPlanId
       }
       return data
     }
     //获取列表
-    const gettrialList = () => {
+    let gettrialList = () => {
       filter.tableLoading = true
       let data = setHistoryListData()
       Https.axiosPost(Https.httpUrls.subAccountList, data).then((rv: any) => {
         if (rv) {
+          console.log(rv)
+          // this.dataList = rv
           filter.dataList = rv.content
           filterData.total = rv.total
           filter.tableLoading = false
@@ -410,70 +417,6 @@ export default defineComponent({
       // 使用 option.label 进行搜索
       return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
     }
-    // 订阅计划筛选（按钮点击）
-    const selectPlanFilter = async (planId: string) => {
-      filterData.subscriptionPlanId = planId
-      // 切换管理员订阅计划
-      Https.axiosGet(Https.httpUrls.switchSubscribePlan, {
-        params: {
-          targetSubscriptionPlanId: planId,
-          adminAccId: store.state.UserHabit.userDetail.id
-        }
-      }).then((res: any) => {
-        console.log(res)
-      })
-      searchHistoryList()
-    }
-    const planFilterOptions = ref([])
-    const fetchSubscribePlanList = () => {
-      const orgId = currentOrganizationId.value
-      if (!orgId) return
-      Https.axiosPost(Https.httpUrls.searchSubscribeByOrg, {
-        organizationId: orgId,
-        status: ['ACTIVE', 'PENDING']
-      }).then(res => {
-        res.forEach(plan => {
-          plan.startTime = formatTime(plan.currentPeriodStart, 'YYYY-MM-DD hh:mm:ss')
-        })
-        // 将与当前用户 subscriptionPlanId 相同的订阅计划放到第一个
-        const userSubscriptionPlanId = store.state.UserHabit.userDetail.subscriptionPlanId
-        if (userSubscriptionPlanId && Array.isArray(res)) {
-          const sortedList = [...res].sort((a: any, b: any) => {
-            const isAUserPlan = a.id == userSubscriptionPlanId
-            const isBUserPlan = b.id == userSubscriptionPlanId
-            if (isAUserPlan && !isBUserPlan) return -1
-            if (!isAUserPlan && isBUserPlan) return 1
-            return 0
-          })
-          planFilterOptions.value = sortedList
-        } else {
-          planFilterOptions.value = res
-        }
-        console.log(planFilterOptions.value)
-      })
-    }
-    // 监听组织ID，获取到值后再拉取订阅计划
-    watch(
-      () => currentOrganizationId.value,
-      orgId => {
-        if (orgId) {
-          fetchSubscribePlanList()
-          const userSubscriptionPlanId =
-            store.state.UserHabit.userDetail.subscriptionPlanId
-          if (userSubscriptionPlanId) {
-            selectPlanFilter(userSubscriptionPlanId)
-          }
-        }
-      },
-      { immediate: true }
-    )
-    // 打开重命名弹窗（基于当前点击的计划）
-    const openPlanRenameModal = plan => {
-      renamePlanForm.planId = plan.id
-      renamePlanForm.planName = plan?.name || ''
-      renamePlanModalVisible.value = true
-      console.log(renamePlanForm)
-    }
     let addhHistoryList = () => {
       allUserPoerationsVue.value.init({ value: 'Add', label: t('admin.add') }, '')
     }
@@ -578,33 +521,6 @@ export default defineComponent({
         gettrialList()
       })
     }
-
-    // 确认重命名
-    const confirmRenamePlan = () => {
-      if (!renamePlanForm.planName || !renamePlanForm.planName.trim()) {
-        message.warning(t('admin.PlanNameRequired'))
-        return
-      }
-
-      Https.axiosPost(Https.httpUrls.updateSubscribePlan, {
-        id: renamePlanForm.planId,
-        name: renamePlanForm.planName.trim()
-      })
-        .then((rv: any) => {
-          message.success(t('admin.RenamePlanSuccess'))
-          renamePlanModalVisible.value = false
-          fetchSubscribePlanList()
-        })
-        .catch((error: any) => {
-          message.error(error.message || t('admin.RenamePlanFailed'))
-        })
-    }
-    // 取消重命名
-    const cancelRenamePlan = () => {
-      renamePlanModalVisible.value = false
-      renamePlanForm.planId = null
-      renamePlanForm.planName = ''
-    }
     onMounted(() => {
       let allCountry: any = sessionStorage.getItem('allCountry')
       if (allCountry) {
@@ -629,15 +545,7 @@ export default defineComponent({
       ExportAccountData,
       uploadTemplate,
       deleteList,
-      deleteAagree,
+      deleteAagree
-      planFilterOptions,
-      selectPlanFilter,
-      openPlanRenameModal,
-      renamePlanModalVisible,
-      renamePlanForm,
-      confirmRenamePlan,
-      cancelRenamePlan,
-      fetchSubscribePlanList
     }
   },
   data() {
@@ -649,21 +557,10 @@ export default defineComponent({
     }
   },
   mounted() {
-    this.updateTableHeight()
+    let historyTable: any = this.$refs.historyTable
-    window.addEventListener('resize', this.updateTableHeight)
+    this.historyTableHeight = historyTable.clientHeight - 200
   },
-  beforeUnmount() {
+  methods: {}
-    window.removeEventListener('resize', this.updateTableHeight)
-  },
-  methods: {
-    updateTableHeight() {
-      const historyTable: any = this.$refs.historyTable
-      if (historyTable) {
-        // 为底部分页器预留固定空间，使表格部分高度固定且分页器始终可见
-        this.historyTableHeight = historyTable.clientHeight - 200
-      }
-    }
-  }
 })
 </script>
 <style lang="less" scoped>
@@ -693,76 +590,10 @@ export default defineComponent({
     font-size: 1.6rem;
   }
 }
-.plan_list {
+.all-user {
-  margin-top: 1rem;
+  .admin_table_content {
-  display: flex;
+    :deep(.ant-table-wrapper) {
-  // flex-wrap: wrap;
+      overflow: hidden ;
-  padding-left: 2.8rem;
-  column-gap: 0.6rem;
-  margin-bottom: 2rem;
-  .plan_item {
-    height: 4rem;
-    width: auto;
-    min-width: 10rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    // font-size: 1.8rem;
-
-    font-weight: 600;
-    border-radius: 1.3rem;
-    color: #fff;
-    cursor: pointer;
-    border: 1.8px solid #000;
-    background-color: #000;
-    padding: 0 1rem 0 2rem;
-
-    &:hover {
-      color: #000;
-      background-color: #fff;
-    }
-
-    &.active {
-      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 {
-    column-gap: 0.6rem;
-  }
-
-  .plan_more_icon {
-    font-size: 1.6rem;
-    cursor: pointer;
-  }
-}
-.subscription-plan-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.rename-plan-form {
-  padding: 2rem 0;
-  .admin_state_item {
-    display: flex;
-    align-items: center;
-    > span {
-      width: 10rem;
-      margin-right: 1rem;
     }
   }
 }