perf: 网元公共参数合并到网元快速安装，移除相关多语言翻译

2024-07-30 18:22:32 +08:00
parent 6ab4fbea6f
commit bc3940016a
8 changed files with 216 additions and 351 deletions
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -769,23 +769,13 @@ export default {
        uploadChangeOk: 'Network Element renewed license successfully and is being calibrated in the background!',
        uploadChangeFail: "Some network elements failed to update the license, please check whether the service terminal environment is available!",
      },
-      neConfPara5G: {
-        headerTip: 'Check and save the public parameter properties of the network element before performing the installation of the network element, and make sure that the latest parameter properties are applied.',
-        headerTipToPage: 'Jump Installation',
-        save: 'Save',
-        reload: 'Reload',
-        title: 'Save Info',
-        sync: 'Sync to NE',
-        syncNe: 'Select NE',
-        syncNeDone: 'Synchronization to network element terminals complete',
-        saveOk: 'Save Success!', 
-      },
      neConfigBackup: {
        name: "Name",
        downTip: 'Confirmed to download the backup file [{txt}]?',
        title: "Modify Backup {txt}",
      },
      neQuickSetup: {
+        reloadPara5G: 'Reload',
        stepPrev: 'Previous',
        stepPrevTip: 'Confirm that you want to abandon the current change and return to the previous step?',
        stepNext: 'Next',
@@ -1952,6 +1942,7 @@ export default {
        stepNeInfoStepNext: 'Confirm that you want to proceed to the next step to configure the parameters of the network element?',
        stepPara5GTitle: "Configuration Parameter",
        stepPara5GDesc: "Setting network element global parameter information",
+        savePara5GOk: 'Save Success!',
        stepPara5GStepPrev: 'Confirm that you want to abandon the current change and return to the previous step?',
        stepPara5GStepNext: 'Confirm that you want to proceed to the next step for the network element service installation?',
        stepInstallTitle: "Service Install",
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -769,23 +769,13 @@ export default {
        uploadChangeOk: '网元更新许可证成功，正在后台校验！',
        uploadChangeFail: "部分网元更新许可证失败，请检查服务终端环境是否可用！",
      },
-      neConfPara5G: {
-        headerTip: '进行网元安装前检查并保存网元公共参数属性，确认应用为最新参数属性',
-        headerTipToPage: '跳转安装',
-        save: '保存',
-        reload: '刷新',
-        title: '保存信息',
-        sync: '同步到网元',
-        syncNe: '选择网元',
-        syncNeDone: '同步到网元终端完成',
-        saveOk: '保存成功！',
-      },
      neConfigBackup: {
        name: "名称",
        downTip: '确认要下载备份文件【{txt}】吗？',
        title: "修改备份信息 {txt}",
      },
      neQuickSetup: {
+        reloadPara5G: '刷新',
        stepPrev: '上一步',
        stepPrevTip: '确认要放弃当前变更返回上一步吗？',
        stepNext: '下一步',
@@ -1952,6 +1942,7 @@ export default {
        stepNeInfoStepNext: '确认要下一步进行网元配置参数？',
        stepPara5GTitle: "网元配置参数",
        stepPara5GDesc: "设置网元全局参数信息",
+        savePara5GOk: '保存成功！',
        stepPara5GStepPrev: '确认要放弃当前变更返回上一步吗？',
        stepPara5GStepNext: '确认要下一步进行网元服务安装吗？',
        stepInstallTitle: "网元服务安装",
--- a/src/views/ne/neConfPara5G/index.vue
+++ b/src/views/ne/neConfPara5G/index.vue
@@ -1,296 +0,0 @@
-<script setup lang="ts">
-import { reactive, onMounted, toRaw } from 'vue';
-import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import useI18n from '@/hooks/useI18n';
-import {
-  getPara5GFilee,
-  listNeInfo,
-  savePara5GFile,
-  updateNeInfo,
-} from '@/api/ne/neInfo';
-import useNeInfoStore from '@/store/modules/neinfo';
-import Para5GForm from './components/Para5GForm.vue';
-const { t } = useI18n();
-
-/**对象信息信息状态类型 */
-type StateType = {
-  /**保存选择同步到网元窗 */
-  visible: boolean;
-  /**网元选择 */
-  neSelectOtions: any[];
-  /**同步到网元 */
-  sync: boolean;
-  syncNe: string[];
-  syncMsg: string;
-  /**表单数据 */
-  from: Record<string, any>;
-  /**OMC信息，需修改当前的IP */
-  omcInfo: Record<string, any>;
-  /**根据网元显示配置项 */
-  hasNE: {
-    amf: boolean;
-    upf: boolean;
-    ims: boolean;
-    mme: boolean;
-  };
-  /**确定按钮 loading */
-  confirmLoading: boolean;
-};
-
-/**对象信息状态 */
-let state: StateType = reactive({
-  visible: false,
-  neSelectOtions: [],
-  sync: false,
-  syncNe: [],
-  syncMsg: '',
-  from: {},
-  omcInfo: {},
-  hasNE: {
-    amf: false,
-    upf: false,
-    ims: false,
-    mme: false,
-  },
-  confirmLoading: false,
-});
-
-/**对话框弹出确认执行函数*/
-function fnModalOk() {
-  if (state.confirmLoading) return;
-  state.confirmLoading = true;
-  savePara5GFile({
-    content: toRaw(state.from),
-    syncNe: state.sync ? state.syncNe : [],
-  })
-    .then(res => {
-      if (state.sync) {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          state.syncMsg = t('views.ne.neConfPara5G.syncNeDone');
-        } else {
-          state.syncMsg = res.msg;
-        }
-      } else {
-        message.success(t('views.ne.neConfPara5G.saveOk'));
-        // 更新omc_ip
-        state.omcInfo.ip = state.from.sbi.omc_ip;
-        updateNeInfo(toRaw(state.omcInfo));
-      }
-    })
-    .finally(() => {
-      state.confirmLoading = false;
-    });
-}
-
-/**对话框弹出关闭执行函数*/
-function fnModalCancel() {
-  state.visible = false;
-  state.sync = false;
-  state.syncNe = [];
-  state.syncMsg = '';
-}
-
-/**保存文件数据*/
-function fnSaveData() {
-  state.visible = true;
-}
-
-/**获取文件数据*/
-function fnGetData() {
-  state.confirmLoading = true;
-  Promise.all([
-    getPara5GFilee(),
-    listNeInfo({
-      pageNum: 1,
-      pageSize: 20,
-    }),
-  ]).then(resArr => {
-    // 已保存的配置
-    if (resArr[0].code === RESULT_CODE_SUCCESS) {
-      Object.assign(state.from, resArr[0].data);
-    }
-    // 填充固定网元类型的ip
-    if (
-      resArr[1].code === RESULT_CODE_SUCCESS &&
-      Array.isArray(resArr[1].rows)
-    ) {
-      for (const item of resArr[1].rows) {
-        switch (item.neType) {
-          case 'OMC':
-            // state.from.sbi.omc_ip = item.ip;
-            Object.assign(state.omcInfo, item); // 主动改OMC_IP
-            break;
-          case 'IMS':
-            state.from.sbi.ims_ip = item.ip;
-            // state.from.external.ims_sip_ip = item.ip;
-            state.hasNE.ims = true;
-            break;
-          case 'AMF':
-            state.from.sbi.amf_ip = item.ip;
-            state.hasNE.amf = true;
-            break;
-          case 'AUSF':
-            state.from.sbi.ausf_ip = item.ip;
-            break;
-          case 'UDM':
-            state.from.sbi.udm_ip = item.ip;
-            state.from.sbi.db_ip = '0.0.0.0';
-            break;
-          case 'SMF':
-            state.from.sbi.smf_ip = item.ip;
-            break;
-          case 'PCF':
-            state.from.sbi.pcf_ip = item.ip;
-            break;
-          case 'NSSF':
-            state.from.sbi.nssf_ip = item.ip;
-            break;
-          case 'NRF':
-            state.from.sbi.nrf_ip = item.ip;
-            break;
-          case 'UPF':
-            state.from.sbi.upf_ip = item.ip;
-            state.hasNE.upf = true;
-            break;
-          case 'LMF':
-            state.from.sbi.lmf_ip = item.ip;
-            break;
-          case 'NEF':
-            state.from.sbi.nef_ip = item.ip;
-            break;
-          case 'MME':
-            state.from.sbi.mme_ip = item.ip;
-            if (item.ip.includes('.')) {
-              state.from.external.mmes11_ip = item.ip + '/24';
-            }
-            state.hasNE.mme = true;
-            break;
-          case 'N3IWF':
-            state.from.sbi.n3iwf_ip = item.ip;
-            break;
-        }
-      }
-    }
-    state.confirmLoading = false;
-  });
-}
-
-onMounted(() => {
-  useNeInfoStore()
-    .fnNelist()
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        for (const row of res.data) {
-          state.neSelectOtions.push({
-            label: `[${row.neType} ${row.neId}] ${row.neName}`,
-            value: `${row.neType}@${row.neId}`,
-          });
-        }
-      } else {
-        message.warning({
-          content: t('common.noData'),
-          duration: 2,
-        });
-      }
-    })
-    .finally(() => {
-      // 获取文件数据
-      fnGetData();
-    });
-});
-</script>
-
-<template>
-  <PageContainer>
-    <template #content>
-      {{ t('views.ne.neConfPara5G.headerTip') }}
-      <RouterLink :to="{ name: 'NeQuickSetup_2142' }">
-        {{ t('views.ne.neConfPara5G.headerTipToPage') }}
-      </RouterLink>
-    </template>
-
-    <a-card :bordered="false">
-      <!-- 公共参数表单 -->
-      <Para5GForm v-model:data="state.from" :ne="state.hasNE"></Para5GForm>
-
-      <div style="padding: 24px 12px 0; text-align: end">
-        <a-space :size="8" align="center">
-          <a-button
-            type="primary"
-            :loading="state.confirmLoading"
-            @click="fnSaveData()"
-          >
-            <template #icon><SaveOutlined /></template>
-            {{ t('views.ne.neConfPara5G.save') }}
-          </a-button>
-          <a-button
-            type="default"
-            :loading="state.confirmLoading"
-            @click.prevent="fnGetData()"
-          >
-            <template #icon><ReloadOutlined /></template>
-            {{ t('views.ne.neConfPara5G.reload') }}
-          </a-button>
-        </a-space>
-      </div>
-    </a-card>
-
-    <!-- 保存选择同步网元 -->
-    <ProModal
-      :drag="true"
-      :minHeight="0"
-      :keyboard="false"
-      :mask-closable="false"
-      :visible="state.visible"
-      :title="t('views.ne.neConfPara5G.title')"
-      :confirm-loading="state.confirmLoading"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form
-        name="syncNeModal"
-        layout="horizontal"
-        :label-col="{ span: 5 }"
-        :label-wrap="true"
-      >
-        <a-form-item :label="t('views.ne.neConfPara5G.sync')" name="sync">
-          <a-switch
-            :checked-children="t('common.switch.open')"
-            :un-checked-children="t('common.switch.shut')"
-            v-model:checked="state.sync"
-            :disabled="state.confirmLoading"
-          ></a-switch>
-        </a-form-item>
-        <a-form-item
-          :label="t('views.ne.neConfPara5G.syncNe')"
-          name="syncNe"
-          v-if="state.sync"
-        >
-          <a-select
-            v-model:value="state.syncNe"
-            mode="multiple"
-            :placeholder="t('common.selectPlease')"
-            :max-tag-count="3"
-            :options="state.neSelectOtions"
-          >
-            <template #maxTagPlaceholder="omittedValues">
-              <span>+ {{ omittedValues.length }} ...</span>
-            </template>
-          </a-select>
-        </a-form-item>
-        <a-form-item label="Sync Msg" name="syncMsg" v-if="state.syncMsg">
-          <a-textarea
-            :disabled="true"
-            :value="state.syncMsg"
-            :auto-size="{ minRows: 2, maxRows: 8 }"
-            style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
-          />
-        </a-form-item>
-      </a-form>
-    </ProModal>
-  </PageContainer>
-</template>
-
-<style lang="less" scoped></style>
--- a/src/views/ne/neQuickSetup/components/Para5GForm.vue
+++ b/src/views/ne/neQuickSetup/components/Para5GForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted, watch } from 'vue';
+import { reactive, watch } from 'vue';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 const emit = defineEmits(['update:data']);
@@ -98,9 +98,7 @@ let state: StateType = reactive({
 watch(
  () => props.data,
  val => {
-    if (val) {
-      Object.assign(state.from, val);
-    }
+    if (val) Object.assign(state.from, val);
  },
  { deep: true }
 );
@@ -108,9 +106,7 @@ watch(
 watch(
  () => props.ne,
  val => {
-    if (val) {
-      Object.assign(state.hasNE, val);
-    }
+    if (val) Object.assign(state.hasNE, val);
  },
  { deep: true }
 );
@@ -122,8 +118,6 @@ watch(
  },
  { deep: true, immediate: true }
 );
-
-onMounted(() => {});
 </script>

 <template>
--- a/src/views/ne/neQuickSetup/hooks/usePara5G.ts
+++ b/src/views/ne/neQuickSetup/hooks/usePara5G.ts
@@ -0,0 +1,139 @@
+import { onMounted, reactive, toRaw } from 'vue';
+import { getPara5GFilee, savePara5GFile, updateNeInfo } from '@/api/ne/neInfo';
+import useNeInfoStore from '@/store/modules/neinfo';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+
+/**对象信息信息状态类型 */
+type StateType = {
+  /**表单数据 */
+  from: Record<string, any>;
+  /**OMC信息，需修改当前的IP */
+  omcInfo: Record<string, any>;
+  /**根据网元显示配置项 */
+  hasNE: {
+    amf: boolean;
+    upf: boolean;
+    ims: boolean;
+    mme: boolean;
+  };
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+export function usePara5G({ t }: any) {
+  /**对象信息状态 */
+  let state: StateType = reactive({
+    from: {},
+    omcInfo: {},
+    hasNE: {
+      amf: false,
+      upf: false,
+      ims: false,
+      mme: false,
+    },
+    confirmLoading: false,
+  });
+
+  /**载入数据*/
+  function fnReloadData() {
+    state.confirmLoading = true;
+    Promise.all([getPara5GFilee(), useNeInfoStore().fnRefreshNelist()]).then(
+      resArr => {
+        // 已保存的配置
+        if (resArr[0].code === RESULT_CODE_SUCCESS) {
+          Object.assign(state.from, resArr[0].data);
+        }
+        // 填充固定网元类型的ip
+        if (
+          resArr[1].code === RESULT_CODE_SUCCESS &&
+          Array.isArray(resArr[1].data)
+        ) {
+          for (const item of resArr[1].data) {
+            // 公共配置文件sbi的各网元IP
+            switch (item.neType) {
+              case 'OMC':
+                // state.from.sbi.omc_ip = item.ip;
+                Object.assign(state.omcInfo, item); // 主动改OMC_IP
+                break;
+              case 'IMS':
+                state.from.sbi.ims_ip = item.ip;
+                state.hasNE.ims = true;
+                break;
+              case 'AMF':
+                state.from.sbi.amf_ip = item.ip;
+                state.hasNE.amf = true;
+                break;
+              case 'AUSF':
+                state.from.sbi.ausf_ip = item.ip;
+                break;
+              case 'UDM':
+                state.from.sbi.udm_ip = item.ip;
+                state.from.sbi.db_ip = '0.0.0.0';
+                break;
+              case 'SMF':
+                state.from.sbi.smf_ip = item.ip;
+                break;
+              case 'PCF':
+                state.from.sbi.pcf_ip = item.ip;
+                break;
+              case 'NSSF':
+                state.from.sbi.nssf_ip = item.ip;
+                break;
+              case 'NRF':
+                state.from.sbi.nrf_ip = item.ip;
+                break;
+              case 'UPF':
+                state.from.sbi.upf_ip = item.ip;
+                state.hasNE.upf = true;
+                break;
+              case 'LMF':
+                state.from.sbi.lmf_ip = item.ip;
+                break;
+              case 'NEF':
+                state.from.sbi.nef_ip = item.ip;
+                break;
+              case 'MME':
+                state.from.sbi.mme_ip = item.ip;
+                if (item.ip.includes('.')) {
+                  state.from.external.mmes11_ip = item.ip + '/24';
+                }
+                state.hasNE.mme = true;
+                break;
+              case 'N3IWF':
+                state.from.sbi.n3iwf_ip = item.ip;
+                break;
+            }
+          }
+        }
+        state.confirmLoading = false;
+      }
+    );
+  }
+
+  /**保存数据 */
+  async function fnSaveData() {
+    if (state.confirmLoading) return;
+    state.confirmLoading = true;
+    const res = await savePara5GFile({
+      content: toRaw(state.from),
+      syncNe: [],
+    });
+    if (res.code === RESULT_CODE_SUCCESS) {
+      // 更新omc_ip
+      state.omcInfo.ip = state.from.sbi.omc_ip;
+      await updateNeInfo(toRaw(state.omcInfo));
+    }
+    state.confirmLoading = false;
+    return res;
+  }
+
+  onMounted(() => {
+    fnReloadData();
+  });
+
+  return {
+    state,
+    fnReloadData,
+    fnSaveData,
+  };
+}
--- a/src/views/ne/neQuickSetup/hooks/useStep.ts
+++ b/src/views/ne/neQuickSetup/hooks/useStep.ts
@@ -1,4 +1,10 @@
-import { reactive } from 'vue';
+import {
+  defineAsyncComponent,
+  onMounted,
+  reactive,
+  shallowRef,
+  watch,
+} from 'vue';

 /**步骤信息状态类型 */
 type StepStateType = {
@@ -80,3 +86,26 @@ export function fnToStepName(stepName: string) {

  stepState.stepName = stepName;
 }
+
+export function useStep({ t }: any) {
+  // 异步加载组件
+  const Start = defineAsyncComponent(() => import('../components/Start.vue'));
+
+  // 当前组件
+  const currentComponent = shallowRef(Start);
+
+  watch(
+    () => stepState.stepName,
+    v => {
+      const loadComponent = defineAsyncComponent(
+        () => import(`../components/${v}.vue`)
+      );
+      currentComponent.value = loadComponent;
+    }
+  );
+
+  onMounted(() => {
+    fnRestStepState(t);
+  });
+  return { currentComponent };
+}
--- a/src/views/ne/neQuickSetup/index.vue
+++ b/src/views/ne/neQuickSetup/index.vue
@@ -1,34 +1,27 @@
 <script lang="ts" setup>
 import { PageContainer } from 'antdv-pro-layout';
-import { defineAsyncComponent, watch, shallowRef, onMounted } from 'vue';
-import { stepState, fnRestStepState } from './hooks/useStep';
+import Para5GForm from './components/Para5GForm.vue';
+import { stepState, useStep } from './hooks/useStep';
+import { usePara5G } from './hooks/usePara5G';
 import useI18n from '@/hooks/useI18n';
+import { ref } from 'vue';
 const { t } = useI18n();

-// 异步加载组件
-const Start = defineAsyncComponent(() => import('./components/Start.vue'));
+const { currentComponent } = useStep(t);
+const { state, fnReloadData, fnSaveData } = usePara5G(t);

-// 当前组件
-const currentComponent = shallowRef(Start);
-
-watch(
-  () => stepState.stepName,
-  v => {
-    const loadComponent = defineAsyncComponent(
-      () => import(`./components/${v}.vue`)
-    );
-    currentComponent.value = loadComponent;
-  }
-);
-
-onMounted(() => {
-  fnRestStepState(t);
-});
+const installNE = ref(false);
+/**公共参数保存前下一步进行网元安装 */
+function fnNext() {
+  fnSaveData().then(() => {
+    installNE.value = !installNE.value;
+  });
+}
 </script>

 <template>
  <PageContainer>
-    <a-card :bordered="false">
+    <a-card :bordered="false" v-if="installNE">
      <!-- 插槽-卡片左侧 -->
      <template #title>
        <!-- 步骤进度 -->
@@ -46,6 +39,30 @@ onMounted(() => {
      <!-- 步骤页面 -->
      <component :is="currentComponent" />
    </a-card>
+    <a-card :bordered="false" v-else>
+      <!-- 公共参数表单 -->
+      <Para5GForm v-model:data="state.from" :ne="state.hasNE"></Para5GForm>
+
+      <div style="padding: 24px 12px 0; text-align: end">
+        <a-space :size="8" align="center">
+          <a-button
+            type="primary"
+            :loading="state.confirmLoading"
+            @click="fnNext()"
+          >
+            {{ t('views.ne.neQuickSetup.stepNext') }}
+          </a-button>
+          <a-button
+            type="default"
+            :disabled="state.confirmLoading"
+            @click.prevent="fnReloadData()"
+          >
+            <template #icon><ReloadOutlined /></template>
+            {{ t('views.ne.neQuickSetup.reloadPara5G') }}
+          </a-button>
+        </a-space>
+      </div>
+    </a-card>
  </PageContainer>
 </template>

--- a/src/views/system/quick-start/components/NeInfoConfigPara5G.vue
+++ b/src/views/system/quick-start/components/NeInfoConfigPara5G.vue
@@ -10,7 +10,7 @@ import {
  updateNeInfo,
 } from '@/api/ne/neInfo';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import Para5GForm from '@/views/ne/neConfPara5G/components/Para5GForm.vue';
+import Para5GForm from '@/views/ne/neQuickSetup/components/Para5GForm.vue';
 const { t } = useI18n();

 /**对象信息信息状态类型 */
@@ -60,7 +60,7 @@ function fnSave() {
  })
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success(t('views.ne.neConfPara5G.saveOk'));
+        message.success(t('views.system.quickStart.savePara5GOk'));
        state.saveFile = true;
        // 更新omc_ip
        state.omcInfo.ip = state.from.sbi.omc_ip;