添加租户自动补全

src/views/dashboard/imsCDR/index.vue

@@ -21,6 +21,7 @@ import { parseDateToStr, parseDuration } from '@/utils/date-utils';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import saveAs from 'file-saver';
 import PQueue from 'p-queue';
+import { listTenant } from '@/api/system/tenant';
 import useUserStore from '@/store/modules/user';
 const { t } = useI18n();
 const { getDict } = useDictStore();
@@ -43,6 +44,7 @@ let queryRangePicker = ref<[string, string]>(['', '']);
 
 /**查询参数 */
 let queryParams = reactive({
+  tenantNameArr: <Record<string, any>[]>[],
   /**网元类型 */
   neType: 'IMS',
   neId: '001',
@@ -66,6 +68,7 @@ let queryParams = reactive({
 function fnQueryReset() {
   recordTypes.value = ['MOC'];
   queryParams = Object.assign(queryParams, {
+    tenantNameArr: [],
     recordType: 'MOC',
     callerParty: '',
     calledParty: '',
@@ -449,6 +452,11 @@ function wsMessage(res: Record<string, any>) {
   }
 }
 
+//自动完成框不区分大小写
+function filterOption(input: string, option: any) {
+  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
+}
+
 onMounted(() => {
   // 初始字典数据
   Promise.allSettled([getDict('cdr_sip_code'), getDict('cdr_call_type')])
@@ -464,6 +472,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,
+          });
+        }
+      });
+    }
+  });
 });
 
 onBeforeUnmount(() => {
@@ -500,17 +523,6 @@ onBeforeUnmount(() => {
             </a-form-item>
           </a-col>
 
-          <a-col :lg="8" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.neUser.sub.tenantName')"
-              name="tenantName "
-            >
-              <a-input
-                allow-clear
-                v-model:value="queryParams.tenantName"
-              ></a-input>
-            </a-form-item>
-          </a-col>
           <a-col :lg="8" :md="12" :xs="24">
             <a-form-item
               :label="t('views.dashboard.cdr.called')"
@@ -551,6 +563,18 @@ onBeforeUnmount(() => {
               ></a-range-picker>
             </a-form-item>
           </a-col>
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.neUser.sub.tenantName')"
+              name="tenantName "
+            >
+              <a-auto-complete
+                v-model:value="queryParams.tenantName"
+                :options="queryParams.tenantNameArr"
+                :filter-option="filterOption"
+              ></a-auto-complete>
+            </a-form-item>
+          </a-col>
           <a-col :lg="4" :md="12" :xs="24">
             <a-form-item>
               <a-space :size="8">

src/views/dashboard/smfCDR/index.vue

@@ -19,6 +19,8 @@ import { parseDateToStr } from '@/utils/date-utils';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import PQueue from 'p-queue';
 import saveAs from 'file-saver';
+import { listTenant } from '@/api/system/tenant';
+
 const { t } = useI18n();
 const ws = new WS();
 const queue = new PQueue({ concurrency: 1, autoStart: true });
@@ -28,6 +30,7 @@ let queryRangePicker = ref<[string, string]>(['', '']);
 
 /**查询参数 */
 let queryParams = reactive({
+  tenantNameArr: <Record<string, any>[]>[],
   /**网元类型 */
   neType: 'SMF',
   neId: '001',
@@ -49,6 +52,7 @@ let queryParams = reactive({
 /**查询参数重置 */
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
+    tenantNameArr: [],
     subscriberID: '',
     /** 租户名称*/
     tenantName: '',
@@ -460,10 +464,29 @@ function wsMessage(res: Record<string, any>) {
     });
   }
 }
+//自动完成框不区分大小写
+function filterOption(input: string, option: any) {
+  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
+}
 
 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,
+          });
+        }
+      });
+    }
+  });
 });
 
 onBeforeUnmount(() => {
@@ -512,15 +535,16 @@ onBeforeUnmount(() => {
               ></a-range-picker>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="12" :xs="24" >
+          <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.neUser.sub.tenantName')"
               name="tenantName "
             >
-              <a-input
-                allow-clear
+              <a-auto-complete
                 v-model:value="queryParams.tenantName"
-              ></a-input>
+                :options="queryParams.tenantNameArr"
+                :filter-option="filterOption"
+              ></a-auto-complete>
             </a-form-item>
           </a-col>
           <a-col :lg="4" :md="12" :xs="24">