ref: v3变更,，完成整合，同步v2.2508.4 -250902

src/views/neData/n3iwf-sub/index.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { listN3IWFSubList } from '@/api/neData/n3iwf';
+import useNeStore from '@/store/modules/ne';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { currentCoreUid } from '@/hooks/useCoreUid';
+const { t } = useI18n();
+const neStore = useNeStore();
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**核心网标识 */
+  coreUid: currentCoreUid(),
+  /**网元标识 */
+  neUid: undefined,
+  /**imsi */
+  imsi: '',
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    imsi: '',
+  });
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'small',
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: 'IMSI',
+    dataIndex: 'imsi',
+    sorter: (a: any, b: any) => Number(a.imsi) - Number(b.imsi),
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: 'Active Time',
+    dataIndex: 'activeTime',
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: 'Registration State	',
+    dataIndex: 'regState',
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: 'Network Access Identity',
+    dataIndex: 'nai',
+    align: 'left',
+    width: 500,
+  },
+];
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**查询列表, pageNum初始页数 */
+function fnGetList() {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  listN3IWFSubList(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      const { total, rows } = res.data;
+      tableState.data = rows;
+    } else {
+      tableState.data = [];
+    }
+    tableState.loading = false;
+  });
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  neStore.neCascaderOptions.forEach(item => {
+    if (item.value === 'N3IWF') {
+      neOtions.value = JSON.parse(JSON.stringify(item.children));
+    }
+  });
+  if (neOtions.value.length === 0) {
+    message.warning({
+      content: t('common.noData'),
+      duration: 2,
+    });
+    return;
+  }
+  if (neOtions.value.length > 0) {
+    queryParams.neUid = neOtions.value[0].value;
+  }
+
+  // 获取列表数据
+  fnGetList();
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item label="N3IWF" name="neUid ">
+              <a-select
+                v-model:value="queryParams.neUid"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="IMSI" name="imsi">
+              <a-input v-model:value="queryParams.imsi" allow-clear></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList()">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title> </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>
+              {{
+                tableState.seached
+                  ? t('common.switch.show')
+                  : t('common.switch.hide')
+              }}
+            </template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.searchBarText')"
+              :un-checked-children="t('common.searchBarText')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown placement="bottomRight" trigger="click">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="imsi"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="false"
+        :scroll="{ y: 'calc(100vh - 480px)' }"
+      >
+      </a-table>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped></style>