pcf动态提示

src/api/configManage/configParam.ts

@@ -462,3 +462,144 @@ export async function updateNeConfigReload(neType: string, neId: string) {
   }
   return result;
 }
+
+/**
+ * 从参数配置PCF中获取对应信息提供给PCC用户策略输入框
+ * @param neType 网元类型
+ * @param topTag
+ * @param neId
+ * @returns object { wrRule, dataArr }
+ */
+export async function getPCCRule(neId: any) {
+  return await Promise.allSettled([
+    // 获取参数规则
+    request({
+      url: `/api/rest/systemManagement/v1/elementType/pcf/objectType/config/pccRules`,
+      method: 'get',
+      params: {
+        ne_id: neId,
+      },
+      timeout: 1_000,
+    }),
+    // 获取对应信息
+    request({
+      url: `/api/rest/systemManagement/v1/elementType/pcf/objectType/config/sessionRules`,
+      method: 'get',
+      params: {
+        ne_id: neId,
+      },
+      timeout: 1_000,
+    }),
+    request({
+      url: `/api/rest/systemManagement/v1/elementType/pcf/objectType/config/qosTemplate`,
+      method: 'get',
+      params: {
+        ne_id: neId,
+      },
+      timeout: 1_000,
+    }),
+    request({
+      url: `/api/rest/systemManagement/v1/elementType/pcf/objectType/config/headerEnrichTemplate`,
+      method: 'get',
+      params: {
+        ne_id: neId,
+      },
+      timeout: 1_000,
+    }),
+    request({
+      url: `/api/rest/systemManagement/v1/elementType/pcf/objectType/config/serviceAreaRestriction`,
+      method: 'get',
+      params: {
+        ne_id: neId,
+      },
+      timeout: 1_000,
+    }),
+  ]).then(resArr => {
+    let pccJson: any = new Map();
+    let sessJson: any = new Map();
+    let qosJson: any = new Map();
+    let headerJson: any = new Map();
+    let sarJson: any = new Map();
+    // 规则数据
+    if (resArr[0].status === 'fulfilled') {
+      const itemV = resArr[0].value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data?.data)
+      ) {
+        let itemData = itemV.data.data;
+        itemData.forEach((item: any) => {
+          pccJson.set(item.ruleId,{ value: item.ruleId, label: item.ruleId });
+        });
+      }
+    }
+
+    if (resArr[1].status === 'fulfilled') {
+      const itemV = resArr[1].value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data?.data)
+      ) {
+        let itemData = itemV.data.data;
+        itemData.forEach((item: any) => {
+          sessJson.set(item.ruleId,{ value: item.ruleId, label: item.ruleId });
+        });
+      }
+    }
+
+    if (resArr[2].status === 'fulfilled') {
+      const itemV = resArr[2].value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data?.data)
+      ) {
+        let itemData = itemV.data.data;
+        itemData.forEach((item: any) => {
+          qosJson.set(item.qosId,{ value: item.qosId, label: item.qosId });
+        });
+      }
+    }
+
+    if (resArr[3].status === 'fulfilled') {
+      const itemV = resArr[3].value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data?.data)
+      ) {
+        let itemData = itemV.data.data;
+        itemData.forEach((item: any) => {
+          headerJson.set(item.templateName,{
+            value: item.templateName,
+            label: item.templateName,
+          });
+        });
+      }
+    }
+
+    if (resArr[4].status === 'fulfilled') {
+      const itemV = resArr[4].value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data?.data)
+      ) {
+        let itemData = itemV.data.data;
+        itemData.forEach((item: any) => {
+          sarJson.set(item.name,{ value: item.name, label: item.name });
+        });
+      }
+    }
+
+    pccJson = Array.from(pccJson.values());
+    sessJson = Array.from(sessJson.values());
+    qosJson = Array.from(qosJson.values());
+    headerJson = Array.from(headerJson.values());
+    sarJson = Array.from(sarJson.values());
+
+    return { pccJson, sessJson, qosJson, headerJson, sarJson };
+  });
+}

src/views/neUser/pcf/index.vue

@@ -17,6 +17,7 @@ import {
   batchDelRule,
   batchUpdateRule,
 } from '@/api/neUser/pcf';
+import { getPCCRule } from '@/api/configManage/configParam';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -27,6 +28,15 @@ const { t } = useI18n();
 /**网元参数 */
 let neOtions = ref<Record<string, any>[]>([]);
 
+/**表单中多选的OPTION */
+const pcfRuleOption = reactive({
+  pccOpt: [],
+  sessOpt: [],
+  qosOpt: [],
+  headerOpt: [],
+  sarOpt: [],
+});
+
 /**查询参数 */
 let queryParams = reactive({
   /**网元ID */
@@ -214,10 +224,10 @@ let modalState: ModalStateType = reactive({
     imsi: '',
     msisdn: '',
     qosAudio: '',
-    pccRules: 'internet|ims_sig',
+    pccRules: undefined,
     rfsp: 0,
     uePolicy: '',
-    sessRules: 'internet|ims_sig',
+    sessRules: undefined,
     sar: '',
     hdrEnrich: '',
     qosVideo: '',
@@ -247,35 +257,46 @@ const modalStateFrom = Form.useForm(
  * @param noticeId 网元id, 不传为新增
  */
 function fnModalVisibleByEdit(row?: Record<string, any>) {
-  modalState.isBatch = false;
+  getPCCRule(queryParams.neId)
-  if (!row) {
+    .then((res: any) => {
-    modalStateFrom.resetFields(); //重置表单
+      console.log(res);
-    modalState.title = t('views.neUser.pcf.addTitle');
+      pcfRuleOption.pccOpt = res.pccJson;
-    modalState.visibleByEdit = true;
+      pcfRuleOption.sessOpt = res.sessJson;
-    modalState.type = 'add';
+      pcfRuleOption.qosOpt = res.qosJson;
-  } else {
+      pcfRuleOption.headerOpt = res.headerJson;
-    if (modalState.confirmLoading) return;
+      pcfRuleOption.sarOpt = res.sarJson;
-    const hide = message.loading(t('common.loading'), 0);
+    })
-    modalState.confirmLoading = true;
+    .finally(() => {
-    const neID = queryParams.neId || '-';
+      modalState.isBatch = false;
-    getRule(neID, row.imsi)
+      if (!row) {
-      .then(res => {
+        modalStateFrom.resetFields(); //重置表单
-        if (res.code === RESULT_CODE_SUCCESS) {
+        modalState.title = t('views.neUser.pcf.addTitle');
-          modalState.from = Object.assign(modalState.from, res.data);
+        modalState.visibleByEdit = true;
-          modalState.title = t('views.neUser.pcf.updateTitle', {
+        modalState.type = 'add';
-            imsi: row.imsi,
+      } else {
+        if (modalState.confirmLoading) return;
+        const hide = message.loading(t('common.loading'), 0);
+        modalState.confirmLoading = true;
+        const neID = queryParams.neId || '-';
+        getRule(neID, row.imsi)
+          .then(res => {
+            if (res.code === RESULT_CODE_SUCCESS) {
+              modalState.from = Object.assign(modalState.from, res.data);
+              modalState.title = t('views.neUser.pcf.updateTitle', {
+                imsi: row.imsi,
+              });
+              modalState.visibleByEdit = true;
+              modalState.type = 'update';
+            } else {
+              message.error(t('common.getInfoFail'), 2);
+            }
+          })
+          .finally(() => {
+            hide();
+            modalState.confirmLoading = false;
           });
-          modalState.visibleByEdit = true;
+      }
-          modalState.type = 'update';
+    });
-        } else {
-          message.error(t('common.getInfoFail'), 2);
-        }
-      })
-      .finally(() => {
-        hide();
-        modalState.confirmLoading = false;
-      });
-  }
 }
 
 /**
@@ -551,6 +572,10 @@ function fnModalUploadImportUpload(file: File) {
     });
 }
 
+function filterOption(value: any, option: any) {
+  return option.value.toUpperCase().indexOf(value.toUpperCase()) >= 0;
+}
+
 onMounted(() => {
   // 获取网元网元列表
   useNeInfoStore()
@@ -945,38 +970,26 @@ onMounted(() => {
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="PCC Rules" name="pccRules">
-                <a-input
+                <a-select
                   v-model:value="modalState.from.pccRules"
                   allow-clear
-                  :maxlength="64"
+                  mode="tags"
-                >
+                  :token-separators="['|']"
-                  <template #prefix>
+                  :options="pcfRuleOption.pccOpt"
-                    <a-tooltip placement="topLeft">
+                  :title="t('views.neUser.pcf.pccRuleTip')"
-                      <template #title>
+                />
-                        {{ t('views.neUser.pcf.pccRuleTip') }}
-                      </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                    </a-tooltip>
-                  </template>
-                </a-input>
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="SESS Rules" name="sessRules">
-                <a-input
+                <a-select
                   v-model:value="modalState.from.sessRules"
                   allow-clear
-                  :maxlength="64"
+                  mode="tags"
-                >
+                  :token-separators="['|']"
-                  <template #prefix>
+                  :options="pcfRuleOption.sessOpt"
-                    <a-tooltip placement="topLeft">
+                  :title="t('views.neUser.pcf.sessRuleTip')"
-                      <template #title>
+                />
-                        {{ t('views.neUser.pcf.sessRuleTip') }}
-                      </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                    </a-tooltip>
-                  </template>
-                </a-input>
               </a-form-item>
             </a-col>
           </a-row>
@@ -984,38 +997,22 @@ onMounted(() => {
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="QOS Audio" name="qosAudio">
-                <a-input
+                <a-auto-complete
                   v-model:value="modalState.from.qosAudio"
                   allow-clear
-                  :maxlength="64"
+                  :options="pcfRuleOption.qosOpt"
-                >
+                  :filter-option="filterOption"
-                  <template #prefix>
+                />
-                    <a-tooltip placement="topLeft">
-                      <template #title>
-                        {{ t('views.neUser.pcf.qosAudioTip') }}
-                      </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                    </a-tooltip>
-                  </template>
-                </a-input>
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="QOS Video" name="qosVideo">
-                <a-input
+                <a-auto-complete
                   v-model:value="modalState.from.qosVideo"
                   allow-clear
-                  :maxlength="64"
+                  :options="pcfRuleOption.qosOpt"
-                >
+                  :filter-option="filterOption"
-                  <template #prefix>
+                />
-                    <a-tooltip placement="topLeft">
-                      <template #title>
-                        {{ t('views.neUser.pcf.qosVideoTip') }}
-                      </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                    </a-tooltip>
-                  </template>
-                </a-input>
               </a-form-item>
             </a-col>
           </a-row>
@@ -1023,20 +1020,12 @@ onMounted(() => {
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="HDR Enrich" name="hdrEnrich">
-                <a-input
+                <a-auto-complete
                   v-model:value="modalState.from.hdrEnrich"
                   allow-clear
-                  :maxlength="64"
+                  :options="pcfRuleOption.headerOpt"
-                >
+                  :filter-option="filterOption"
-                  <template #prefix>
+                />
-                    <a-tooltip placement="topLeft">
-                      <template #title>
-                        {{ t('views.neUser.pcf.hdrTip') }}
-                      </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                    </a-tooltip>
-                  </template>
-                </a-input>
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">
@@ -1062,21 +1051,12 @@ onMounted(() => {
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="Sar" name="sar">
-                <a-input
+                <a-auto-complete
                   v-model:value="modalState.from.sar"
                   allow-clear
-                  :maxlength="64"
+                  :options="pcfRuleOption.sarOpt"
-                >
+                  :filter-option="filterOption"
-                  <template #prefix>
+                />
-                    <a-tooltip placement="topLeft">
-                      <template #title>
-                        {{ t('views.neUser.pcf.sarTip1') }}<br />
-                        {{ t('views.neUser.pcf.sarTip2') }}<br />
-                      </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                    </a-tooltip>
-                  </template>
-                </a-input>
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">