增加租户名的自动完成框

2024-07-15 15:51:46 +08:00
parent af5ac7d29a
commit 51226fbfb4
3 changed files with 89 additions and 58 deletions
--- a/src/views/neUser/base5G/index.vue
+++ b/src/views/neUser/base5G/index.vue
@@ -11,6 +11,7 @@ import useNeInfoStore from '@/store/modules/neinfo';
 import { useRoute } from 'vue-router';
 import { ColumnsType } from 'ant-design-vue/lib/table';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
+import { listTenant } from '@/api/system/tenant';
 const neInfoStore = useNeInfoStore();
 const route = useRoute();
 const { t } = useI18n();
@@ -22,6 +23,7 @@ let promises = ref<any[]>([]);

 /**查询参数 */
 let queryParams = reactive({
+  tenantNameArr: <Record<string, any>[]>[],
  /**45G类型 */
  totalType: '',
  /**网元ID */
@@ -41,6 +43,7 @@ let queryParams = reactive({
 /**查询参数重置 */
 function fnQueryReset() {
  queryParams = Object.assign(queryParams, {
+    tenantNameArr: [],
    neId: '',
    id: '',
    tenantName: '',
@@ -148,47 +151,6 @@ function fnTableSize({ key }: MenuInfo) {
  tableState.size = key as SizeType;
 }

-/**查询列表, pageNum初始页数 */
-function fnGetList(pageNum?: number) {
-  if (tableState.loading) return;
-  tableState.loading = true;
-  if (pageNum) {
-    queryParams.pageNum = pageNum;
-  }
-
-  let toBack: Record<string, any> = {
-    neType: queryParams.neType[0],
-    neId: queryParams.neType[1],
-    nbId: queryParams.id,
-    tenantName: queryParams.tenantName,
-    pageNum: queryParams.pageNum,
-    pageSize: queryParams.pageSize,
-  };
-  listBase5G(toRaw(toBack)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
-      // 取消勾选
-      if (tableState.selectedRowKeys.length > 0) {
-        tableState.selectedRowKeys = [];
-      }
-      tablePagination.total = res.total;
-      tableState.data = res.rows;
-      if (
-        tablePagination.total <=
-          (queryParams.pageNum - 1) * tablePagination.pageSize &&
-        queryParams.pageNum !== 1
-      ) {
-        tableState.loading = false;
-        fnGetList(queryParams.pageNum - 1);
-      }
-    } else {
-      //AMF返回404是代表没找到这个数据 GNB_NOT_FOUND
-      tablePagination.total = 0;
-      tableState.data = [];
-    }
-    tableState.loading = false;
-  });
-}
-
 /**查询4G或者5G及45G列表, pageNum初始页数 */
 function fnGet45GList(pageNum?: number) {
  if (tableState.loading) return;
@@ -270,6 +232,11 @@ function fnGet45GList(pageNum?: number) {
  });
 }

+//自动完成框不区分大小写
+function filterOption(input: string, option: any) {
+  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
+}
+
 onMounted(() => {
  // 获取网元网元列表
  neInfoStore
@@ -292,6 +259,21 @@ onMounted(() => {
      // fnGetList();
      fnGet45GList();
    });
+
+  //查询租户
+  listTenant({ parentId: 0 }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      queryParams.tenantNameArr = []; //上面置为空数组时会报错 故在此
+      res.data.forEach((item: any) => {
+        if (item.parentId === '0') {
+          queryParams.tenantNameArr.push({
+            value: item.tenantName,
+            label: item.tenantName,
+          });
+        }
+      });
+    }
+  });
 });
 </script>

@@ -324,20 +306,16 @@ onMounted(() => {
              <a-input v-model:value="queryParams.id" allow-clear></a-input>
            </a-form-item>
          </a-col>
-          <a-col
-            :lg="6"
-            :md="12"
-            :xs="24"
-            :gutter="16"
-          >
+          <a-col :lg="6" :md="12" :xs="24" :gutter="16">
            <a-form-item
              :label="t('views.neUser.sub.tenantName')"
              name="tenantName "
            >
-              <a-input
+              <a-auto-complete
                v-model:value="queryParams.tenantName"
-                allow-clear
-              ></a-input>
+                :options="queryParams.tenantNameArr"
+                :filter-option="filterOption"
+              ></a-auto-complete>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :xs="24">
--- a/src/views/neUser/ims/index.vue
+++ b/src/views/neUser/ims/index.vue
@@ -9,6 +9,8 @@ import { listUEInfoByIMS } from '@/api/neUser/ims';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { listTenant } from '@/api/system/tenant';
+
 const { t } = useI18n();

 /**网元参数 */
@@ -16,6 +18,7 @@ let neOtions = ref<Record<string, any>[]>([]);

 /**查询参数 */
 let queryParams = reactive({
+  tenantNameArr: <Record<string, any>[]>[],
  /**网元ID */
  neId: undefined,
  /**IMSI */
@@ -33,6 +36,7 @@ let queryParams = reactive({
 /**查询参数重置 */
 function fnQueryReset() {
  queryParams = Object.assign(queryParams, {
+    tenantNameArr: [],
    imsi: '',
    msisdn: '',
    tenantName: '',
@@ -179,6 +183,11 @@ function fnGetList(pageNum?: number) {
  });
 }

+//自动完成框不区分大小写
+function filterOption(input: string, option: any) {
+  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
+}
+
 onMounted(() => {
  // 获取网元网元列表
  useNeInfoStore()
@@ -208,6 +217,21 @@ onMounted(() => {
      // 获取列表数据
      fnGetList();
    });
+
+  //查询租户
+  listTenant({ parentId: 0 }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      queryParams.tenantNameArr = []; //上面置为空数组时会报错 故在此
+      res.data.forEach((item: any) => {
+        if (item.parentId === '0') {
+          queryParams.tenantNameArr.push({
+            value: item.tenantName,
+            label: item.tenantName,
+          });
+        }
+      });
+    }
+  });
 });
 </script>

@@ -232,7 +256,11 @@ onMounted(() => {
          </a-col>
          <a-col :lg="8" :md="12" :xs="24">
            <a-form-item label="IMSI" name="imsi">
-              <a-input v-model:value="queryParams.imsi" allow-clear :maxlength="15"></a-input>
+              <a-input
+                v-model:value="queryParams.imsi"
+                allow-clear
+                :maxlength="15"
+              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :xs="24">
@@ -246,10 +274,11 @@ onMounted(() => {
              :label="t('views.neUser.sub.tenantName')"
              name="tenantName "
            >
-              <a-input
+              <a-auto-complete
                v-model:value="queryParams.tenantName"
-                allow-clear
-              ></a-input>
+                :options="queryParams.tenantNameArr"
+                :filter-option="filterOption"
+              ></a-auto-complete>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :xs="24">
--- a/src/views/neUser/ue/index.vue
+++ b/src/views/neUser/ue/index.vue
@@ -10,6 +10,7 @@ import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
+import { listTenant } from '@/api/system/tenant';
 import useUserStore from '@/store/modules/user';

 const { t } = useI18n();
@@ -19,6 +20,7 @@ let neOtions = ref<Record<string, any>[]>([]);

 /**查询参数 */
 let queryParams = reactive({
+  tenantNameArr: <Record<string, any>[]>[],
  /**网元ID */
  neId: undefined,
  /**IMSI */
@@ -36,6 +38,7 @@ let queryParams = reactive({
 /**查询参数重置 */
 function fnQueryReset() {
  queryParams = Object.assign(queryParams, {
+    tenantNameArr: [],
    imsi: '',
    msisdn: '',
    tenantName: '',
@@ -260,6 +263,11 @@ function fnGetList(pageNum?: number) {
  });
 }

+//自动完成框不区分大小写
+function filterOption(input: string, option: any) {
+  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
+}
+
 onMounted(() => {
  // 获取网元网元列表
  useNeInfoStore()
@@ -289,6 +297,21 @@ onMounted(() => {
      // 获取列表数据
      fnGetList();
    });
+
+  //查询租户
+  listTenant({ parentId: 0 }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      queryParams.tenantNameArr = []; //上面置为空数组时会报错 故在此
+      res.data.forEach((item: any) => {
+        if (item.parentId === '0') {
+          queryParams.tenantNameArr.push({
+            value: item.tenantName,
+            label: item.tenantName,
+          });
+        }
+      });
+    }
+  });
 });
 </script>

@@ -327,10 +350,11 @@ onMounted(() => {
              :label="t('views.neUser.sub.tenantName')"
              name="tenantName "
            >
-              <a-input
+              <a-auto-complete
                v-model:value="queryParams.tenantName"
-                allow-clear
-              ></a-input>
+                :options="queryParams.tenantNameArr"
+                :filter-option="filterOption"
+              ></a-auto-complete>
            </a-form-item>
          </a-col>