添加UPF租赁类型时选择RMUID下拉框

src/i18n/locales/en-US.ts

@@ -1823,6 +1823,10 @@ export default {
         APN:'APN Rental',
         IMSI:'Card Rental',
         treeSelectTip:'Please select the tenant to be configured on the left side',
+        upfTip:'Select the UPF RmUid that you want to configure',
+        imsiTip:'',
+        radioTip:'Please fill in the base station ID',
+        defaultTip:'Please select Tenancy Asset and then fill in Asset Key',
       },
       post:{
         positionInfo:'Position Information',

src/i18n/locales/zh-CN.ts

@@ -1823,6 +1823,10 @@ export default {
         APN:'APN租用',
         IMSI:'卡租用',
         treeSelectTip:'请在左侧选择需要配置的租户',
+        upfTip:'请选择需要配置的UPF的RmUid',
+        imsiTip:'',
+        radioTip:'请填写基站ID',
+        defaultTip:'请选择租赁类型后再填写租赁标识',
       },
       post:{
         positionInfo:'岗位信息',

src/views/system/tenant/index.vue

@@ -16,6 +16,7 @@ import {
 import useDictStore from '@/store/modules/dict';
 import { parseDateToStr } from '@/utils/date-utils';
 import { Form, Modal, message } from 'ant-design-vue';
+import { listNeInfo } from '@/api/ne/neInfo';
 import { AnyARecord } from 'dns';
 
 const neInfoStore = useNeInfoStore();
@@ -55,6 +56,8 @@ let collapsible = ref<boolean>(true);
 
 const showButtonsKey = ref(null);
 
+const keyTip = ref<any>(t('views.system.tenant.defaultTip'));
+
 /**改变收起状态 */
 function changeCollapsible() {
   collapsible.value = !collapsible.value;
@@ -66,9 +69,12 @@ let dict: {
   sysNormalDisable: DictType[];
   /**租户类型 */
   sysTenancyType: DictType[];
+  /**实时的UPF RMUID 不是字典 */
+  allRmUid: any[];
 } = reactive({
   sysNormalDisable: [],
   sysTenancyType: [],
+  allRmUid: [],
 });
 
 /**查询参数 */
@@ -363,7 +369,6 @@ function fnModalOk() {
               content: t('common.msgSuccess', { msg: modalState.title }),
               duration: 2,
             });
-            console.log(res.data);
             modalState.visibleByEdit = false;
 
             modalStateFrom.resetFields();
@@ -532,13 +537,32 @@ function fnTypeRecordDelete(
     },
   });
 }
-function showButtons(key: any) {
-  console.log(key);
-  showButtonsKey.value = key;
+
+//选择租赁类型
+function fnTypeChange(value: any, options: any) {
+  if (value === 'UPF') {
+    listNeInfo({ neType: 'UPF', pageNum: 1, pageSize: 10000 }).then(res => {
+      /** 查询最新的UPF的所有RMUID*/
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+        dict.allRmUid = res.rows.map((item: any) => {
+          return { option: item.rmUid, value: item.rmUid };
+        });
+      }
+    });
+  }
+
+  const tipMapping: any = {
+    UPF: t('views.system.tenant.upfTip'),
+    IMSI: t('views.system.tenant.imsiTip'),
+    RADIO: t('views.system.tenant.radioTip'),
+  };
+
+  keyTip.value = tipMapping[value];
 }
 
-function hideButtons() {
-  showButtonsKey.value = null;
+//自动完成框不区分大小写
+function filterOption(input: string, option: any) {
+  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
 }
 
 function resetModal() {
@@ -779,37 +803,6 @@ onMounted(() => {
           </a-input>
         </a-form-item>
 
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item
-              :label="t('views.system.tenant.type')"
-              name="type"
-              :labelWrap="true"
-              v-show="modalState.from.parentId !== '0'"
-            >
-              <a-select
-                v-model:value="modalState.from.tenancyType"
-                allow-clear
-                :options="dict.sysTenancyType"
-              >
-              </a-select>
-            </a-form-item>
-          </a-col>
-
-          <a-col :lg="24" :md="24" :xs="24">
-            <a-form-item
-              :label="t('views.system.tenant.key')"
-              name="key"
-              :label-col="{ span: 4 }"
-              v-show="modalState.from.parentId !== '0'"
-            >
-              <a-input
-                v-model:value="modalState.from.tenancyKey"
-                allow-clear
-              ></a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.tenant.status')" name="status">
@@ -853,6 +846,7 @@ onMounted(() => {
                 v-model:value="modalState.typeFrom.tenancyType"
                 allow-clear
                 :options="dict.sysTenancyType"
+                @change="fnTypeChange"
               >
               </a-select>
             </a-form-item>
@@ -862,12 +856,21 @@ onMounted(() => {
             <a-form-item
               :label="t('views.system.tenant.key')"
               name="key"
+              :extra="keyTip"
               :label-col="{ span: 4 }"
             >
               <a-input
                 v-model:value="modalState.typeFrom.tenancyKey"
                 allow-clear
+                v-show="modalState.typeFrom.tenancyType != 'UPF'"
               ></a-input>
+              <a-auto-complete
+                v-model:value="modalState.typeFrom.tenancyKey"
+                allow-clear
+                v-show="modalState.typeFrom.tenancyType == 'UPF'"
+                :options="dict.allRmUid"
+                :filter-option="filterOption"
+              />
             </a-form-item>
           </a-col>
         </a-row>
@@ -896,5 +899,11 @@ onMounted(() => {
 .treeNode {
   display: inline-block;
   width: 130px; /* 设置你想要的宽度 */
+  overflow: hidden; /* 超出部分隐藏 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+  line-height: 30px; /* 设置行高，使文本垂直居中 */
+  vertical-align: middle; /* 垂直居中 */
+  white-space: nowrap; /* 不换行 */
+  font-size: 16px; /* 设置字体大小 */
 }
 </style>