Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

2025-12-17 15:33:34 +08:00
parent 5672307e33 b160709f16
commit 697dc36df4
8 changed files with 1445 additions and 1029 deletions
--- a/src/component/Administrator/SE/allUser/addAllUser.vue
+++ b/src/component/Administrator/SE/allUser/addAllUser.vue
@@ -86,6 +86,16 @@
          style="width: 250px"
        />
      </div>
+      <div class="admin_state_item" v-if="title?.value == 'Edit'">
+        <span>{{ $t('admin.SubscribePlan') }}: <span>*</span></span>
+        <a-select
+          v-model:value="subscriptionPlanId"
+          style="width: 250px"
+          :options="planOptions"
+          :field-names="{ label: 'name', value: 'id' }"
+          :placeholder="$t('admin.SelectPlan')"
+        ></a-select>
+      </div>
    </div>
    <div class="allUserPoeration_btn admin_page">
      <div class="admin_search_item" @click="cancelDsign">{{ $t('admin.Close') }}</div>
@@ -114,9 +124,16 @@ import md5 from "md5";
 import { useI18n } from 'vue-i18n'
 export default defineComponent({
  components: {},
+  props: {
+    planOptions: {
+      type: Array,
+      default: () => []
+    }
+  },
  emits: ["searchHistoryList"],
  setup(props, { emit }) {
 	const {t} = useI18n()
+    const { planOptions } = toRefs(props)
    let operations = reactive({
      operationsModal: false,
      operationsEdit: false,
@@ -130,6 +147,8 @@ export default defineComponent({
      password: "",
      oldPassword: "",
      credits: "",
+      subscriptionPlanId: "",
+      oldSubscriptionPlanId: ""
    });
    let state = ref([
      {
@@ -163,12 +182,18 @@ export default defineComponent({
        // operationsData.validStartTime='2024-08-05T00:00:06'
        // operationsData.validEndTime='2024-08-05T00:00:06'
        operationsData.credits = data.creditsUsageLimit;
+        operationsData.subscriptionPlanId = data.subscriptionPlanId || "";
+        operationsData.oldSubscriptionPlanId = data.subscriptionPlanId || "";
        // operationsData.accountId = data.accountId
        // operationsData.userName = data.userName
        // operationsData.userEmail = data.userEmail
        // operationsData.validStartTime = formatTime(data.validStartTime)
        // operationsData.validEndTime = formatTime(data.validEndTime)
      }
+      if (funStr.value == "Add") {
+        operationsData.subscriptionPlanId = "";
+        operationsData.oldSubscriptionPlanId = "";
+      }
    };
    let focus = (event) => {
      if (operationsData.password == operationsData.oldPassword) {
@@ -187,6 +212,7 @@ export default defineComponent({
        userEmail: operationsData.userEmail,
        userPassword: operationsData.password?md5(operationsData.password + "abc"):'',
        userName: operationsData.userName,
+        subscriptionPlanId: operationsData.subscriptionPlanId
      };
    };
    let setEditData = () => {
@@ -199,6 +225,7 @@ export default defineComponent({
          operationsData.password == operationsData.oldPassword
            ? null
            : md5(operationsData.password + "abc"),
+        subscriptionPlanId: operationsData.subscriptionPlanId
      };
    };
    let cancelDsign = () => {
@@ -207,6 +234,8 @@ export default defineComponent({
      operationsData.userEmail = "";
      operationsData.password = "";
      operationsData.credits = "";
+      operationsData.subscriptionPlanId = "";
+      operationsData.oldSubscriptionPlanId = "";
      operations.operationsModal = false;
    };
    let setOk = () => {
@@ -237,11 +266,26 @@ export default defineComponent({
          message.info("The email format is incorrect");
          return;
        }
-        if (!data.userName || !data.userEmail)
+        if (!data.userName || !data.userEmail || !data.subscriptionPlanId)
          return message.warning("Please check the input box marked with *");
+        const needSwitchPlan =
+          operationsData.subscriptionPlanId &&
+          operationsData.subscriptionPlanId !==
+            operationsData.oldSubscriptionPlanId;
        Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
          (rv) => {
            if (rv) {
+              if (needSwitchPlan) {
+                Https.axiosGet(
+                  Https.httpUrls.switchSubAccountSubscribePlan,
+                  {
+                    params: {
+                      targetSubscriptionPlanId: operationsData.subscriptionPlanId,
+                      subAccId: operationsData.accountId,
+                    },
+                  }
+                );
+              }
              cancelDsign();
              emit("searchHistoryList");
            }
@@ -258,6 +302,7 @@ export default defineComponent({
      focus,
      blur,
      setOk,
+      planOptions,
    };
  },
  data() {
--- a/src/component/Administrator/SE/allUser/index.vue
+++ b/src/component/Administrator/SE/allUser/index.vue
--- a/src/component/Administrator/subscriptionPlan.vue
+++ b/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>
@@ -69,59 +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>
-          <!-- <template v-if="column.key === 'organizationId'">
-            {{ organizationOptions.find(item => item.id === record[column.key]).name }}
-          </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="statusColorMap[record.status]">
-              {{ statusLabelMap[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>
@@ -175,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>
@@ -184,7 +196,6 @@
              v-model:value="formState.name"
              placeholder="Input the name"
              style="width: 250px"
-              :disabled="isEditMode"
            />
          </div>
          <div class="admin_state_item">
@@ -200,7 +211,6 @@
              @popupScroll="handleOrganizationScroll"
              @select="handleOrganizationSelect"
              @change="handleOrganizationChange"
-              :disabled="isEditMode"
            >
              <a-select-option value="ADD_ORGANIZATION" class="add-organization-option">
                + 添加组织
@@ -287,11 +297,21 @@
              placeholder="Input the credit limit"
            />
          </div>
+          <div class="admin_state_item" v-if="!isEditMode">
+            <span>Status:</span>
+            <a-select
+              v-model:value="formState.status"
+              placeholder="Select status"
+              allow-clear
+              style="width: 250px"
+              :options="statusOption"
+            />
+          </div>
        </div>
      </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>

@@ -353,14 +373,15 @@
 </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'
 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 +402,7 @@ const searchForm = reactive({
  endTime: '',
  organizationId: undefined as string | undefined,
  adminAccId: undefined as string | undefined,
+  status: [] as PlanStatus[] | [],
  id: '',
  page: 1,
  size: 10,
@@ -403,7 +425,8 @@ const formState = reactive({
  organizationId: undefined as string | undefined,
  adminAccId: undefined as string | undefined,
  creditLimit: null as number | null,
-  accountNum: null as number | null
+  accountNum: null as number | null,
+  status: undefined as PlanStatus | undefined
 })

 const organizationModalVisible = ref(false)
@@ -413,55 +436,110 @@ 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' },
-  { 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 () => {
  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(() => {
@@ -477,6 +555,13 @@ const resetFormState = () => {
  formState.adminAccId = undefined
  formState.creditLimit = null
  formState.accountNum = null
+  formState.status = undefined
+}
+
+const changePage = (pagination: any) => {
+  searchForm.page = pagination.current
+  searchForm.size = pagination.pageSize
+  handleFetchTableData()
 }

 const handleSearch = () => {
@@ -490,6 +575,7 @@ const handleReset = () => {
  searchForm.endTime = ''
  searchForm.organizationId = undefined
  searchForm.adminAccId = undefined
+  searchForm.status = []
  searchForm.id = ''
  handleSearch()
 }
@@ -508,12 +594,37 @@ 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
  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)
+    )
+    if (!orgExists) {
+      // 从表格数据中获取组织名称，如果存在则添加临时项
+      const orgName = (record as any).organizationName
+      if (orgName) {
+        organizationOptions.value = [
+          {
+            id: record.organizationId,
+            name: orgName
+          },
+          ...organizationOptions.value
+        ]
+      }
+    }
+  }
+
  modalVisible.value = true
 }

@@ -590,6 +701,12 @@ const handleSubmit = async () => {
  }
 }

+// 防抖包装，避免重复点击
+const handleSubmitDebounced = debounce(handleSubmit, 500, {
+  leading: true,
+  trailing: false
+})
+
 const cancelModal = () => {
  modalVisible.value = false
  resetFormState()
@@ -631,12 +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) {
-      organizationOptions.value = [...organizationOptions.value, ...(rv.records || [])]
+      const newRecords = rv.records || []
+      // 遍历新数据，如果已存在则覆盖，不存在则追加
+      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 {
@@ -725,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;