fe.ems.vue3/src/views/system/quick-start/components/NeInfoConfigPara5G.vue

<script setup lang="ts">
import { Modal, message } from 'ant-design-vue/lib';
import { onMounted, reactive, toRaw } from 'vue';
import { fnToStepName } from '../hooks/useStep';
import useI18n from '@/hooks/useI18n';
import {
  listNeInfo,
  getPara5GFilee,
  savePara5GFile,
  updateNeInfo,
} from '@/api/ne/neInfo';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import Para5GForm from '@/views/ne/neQuickSetup/components/Para5GForm.vue';
const { t } = useI18n();

/**对象信息信息状态类型 */
type StateType = {
  /**加载等待 */
  loading: boolean;
  /**保存文件标记 */
  saveFile: boolean;
  /**表单数据 */
  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({
  loading: false,
  saveFile: false,
  from: {},
  omcInfo: {},
  hasNE: {
    amf: false,
    upf: false,
    ims: false,
    mme: false,
  },
  confirmLoading: false,
});

/**保存信息 */
function fnSave() {
  if (state.confirmLoading) return;
  state.confirmLoading = true;
  savePara5GFile({
    fileType: 'yaml',
    content: toRaw(state.from),
    syncNe: [],
  })
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS) {
        message.success(t('views.system.quickStart.savePara5GOk'));
        state.saveFile = true;
        // 更新omc_ip
        state.omcInfo.ip = state.from.sbi.omc_ip;
        updateNeInfo(toRaw(state.omcInfo));
      } else {
        message.warning(res.nsg);
      }
    })
    .finally(() => {
      state.confirmLoading = false;
    });
}

/**获取网元列表填充IP */
function fnGetList() {
  state.loading = true;
  Promise.all([
    getPara5GFilee(),
    listNeInfo({
      pageNum: 1,
      pageSize: 20,
    }),
  ]).then(resArr => {
    // 已保存的配置
    if (resArr[0].code === RESULT_CODE_SUCCESS) {
      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);
            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;
          case 'SMSC':
            state.from.sbi.smsc_ip = item.ip;
            break;
        }
      }
    }
    state.loading = false;
  });
}

/**返回上一步 */
function fnStepPrev() {
  Modal.confirm({
    title: t('common.tipTitle'),
    content: t('views.system.quickStart.stepPara5GStepPrev'),
    onOk() {
      fnToStepName('NeInfoConfig');
    },
  });
}

/**下一步操作 */
function fnStepNext(stepName: 'NeInfoSoftwareInstall') {
  if (stepName === 'NeInfoSoftwareInstall') {
    Modal.confirm({
      title: t('common.tipTitle'),
      content: t('views.system.quickStart.stepPara5GStepNext'),
      onOk() {
        fnToStepName('NeInfoSoftwareInstall');
      },
    });
  }
}

onMounted(() => {
  fnGetList();
});
</script>

<template>
  <div class="ne">
    <a-spin tip="Loading..." style="width: 100%" :spinning="state.loading">
      <!-- 公共参数表单 -->
      <Para5GForm v-model:data="state.from" :ne="state.hasNE"></Para5GForm>
    </a-spin>

    <div class="ne-oper">
      <a-space direction="horizontal" :size="18">
        <a-button @click="fnStepPrev()">
          {{ t('views.system.quickStart.stepPrev') }}
        </a-button>
        <a-button
          type="primary"
          ghost
          :loading="state.confirmLoading"
          @click="fnSave()"
        >
          {{ t('views.system.quickStart.save') }}
        </a-button>
        <a-button
          type="primary"
          @click="fnStepNext('NeInfoSoftwareInstall')"
          :disabled="!state.saveFile"
        >
          {{ t('views.system.quickStart.stepNext') }}
        </a-button>
      </a-space>
    </div>
  </div>
</template>

<style lang="less" scoped>
.ne {
  padding-top: 12px;
  overflow-x: hidden;
  overflow-y: auto;

  &-oper {
    padding-top: 24px;
    text-align: end;
  }
}
</style>