feat: 网元安装页面

src/views/tool/neQuickSetup/components/StepCheck.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw } from 'vue';
-import { message, Form } from 'ant-design-vue/lib';
+import { message, Form, Modal } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { neHostCheckInfo } from '@/api/ne/neHost';
+import { neHostAuthorizedRSA, neHostCheckInfo } from '@/api/ne/neHost';
 import useDictStore from '@/store/modules/dict';
+import { stepState } from '../hooks/useStep';
 const { getDict } = useDictStore();
 const { t } = useI18n();
-const emit = defineEmits(['next']);
-const props = defineProps({
-  state: {
-    type: Object,
-  },
-});
 
 /**字典数据 */
 let dict: {
@@ -35,7 +30,7 @@ type CheckStateType = {
 /**检查对象信息状态 */
 let checkState: CheckStateType = reactive({
   info: {
-    addr: '0.0.0.0',
+    addr: '未连接',
     kernelName: '-',
     kernelRelease: '-',
     machine: '-',
@@ -49,11 +44,11 @@ let checkState: CheckStateType = reactive({
     hostType: 'ssh',
     groupId: '1',
     title: 'SSH_NE_22',
-    addr: '192.168.2.211',
+    addr: '192.168.5.57',
     port: 22,
     user: 'agtuser',
     authMode: '0',
-    password: 'admin123',
+    password: 'QWERqwer',
     privateKey: '',
     passPhrase: '',
     remark: '',
@@ -116,25 +111,52 @@ function fnCheckInfo() {
   } else {
     validateArr.push('privateKey');
   }
+
+  checkState.confirmLoading = true;
+  const hide = message.loading(t('common.loading'), 0);
   checkStateFrom
     .validate(validateArr)
     .then(() => {
-      checkState.confirmLoading = true;
+      Object.assign(checkState.info, {
-      const hide = message.loading(t('common.loading'), 0);
+        addr: '未连接',
-      neHostCheckInfo(form)
+        kernelName: '-',
+        kernelRelease: '-',
+        machine: '-',
+        nodename: '-',
+        prettyName: '-',
+        sshLink: false,
+        sudo: false,
+      });
+      stepState.stepNext = false;
+      return neHostCheckInfo(form);
+    })
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS) {
         checkState.info = res.data;
-            emit('next', {
+        if (!res.data.sudo) {
-              info: checkState.info,
+          message.warning({
-              from: checkState.from,
+            content: `请配置服务器授予当前用户无密码 sudo 权限，确保有权限进行软件包安装`,
-            });
-            message.success({
-              content: `${form.addr}:${form.port} ${t(
-                'views.ne.neHost.testOk'
-              )}`,
             duration: 2,
           });
+          return;
+        }
+        if (!res.data.sshLink) {
+          message.warning({
+            content: `请配置服务器间免密信任关系，确保服务器间文件传输功能`,
+            duration: 2,
+          });
+          return;
+        }
+        message.success({
+          content: `${form.addr}:${form.port} ${t('views.ne.neHost.testOk')}`,
+          duration: 2,
+        });
+        // 记录当前步骤状态信息
+        stepState.states[stepState.current] = {
+          info: checkState.info,
+          from: checkState.from,
+        };
+        stepState.stepNext = true;
       } else {
         message.error({
           content: `${form.addr}:${form.port} ${res.msg}`,
@@ -142,14 +164,13 @@ function fnCheckInfo() {
         });
       }
     })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    })
     .finally(() => {
       hide();
       checkState.confirmLoading = false;
     });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
 }
 
 /**测试连接检查信息表单重置 */
@@ -157,6 +178,32 @@ function fnCheckInfoReset() {
   checkStateFrom.resetFields();
 }
 
+/**SSH连接-免密直连 */
+function fnSSHLink() {
+  if (checkState.info.sshLink) return;
+  Modal.confirm({
+    title: '提示',
+    content: '是否要配置免密直连？',
+    onOk: () => {
+      const form = toRaw(checkState.from);
+      neHostAuthorizedRSA(form).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: `操作成功`,
+            duration: 2,
+          });
+          checkState.info.sshLink = true;
+        } else {
+          message.error({
+            content: `操作失败`,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
 onMounted(() => {
   // 初始字典数据
   Promise.allSettled([getDict('ne_host_authMode')]).then(resArr => {
@@ -165,13 +212,14 @@ onMounted(() => {
     }
   });
   // 状态还原
-  if (props.state) {
+  const state = stepState.states[stepState.current];
-    if (props.state.info) {
+  if (state) {
-      const info = toRaw(props.state.info);
+    if (state.info) {
+      const info = toRaw(state.info);
       Object.assign(checkState.info, info);
     }
-    if (props.state.from) {
+    if (state.from) {
-      const from = toRaw(props.state.from);
+      const from = toRaw(state.from);
       Object.assign(checkState.from, from);
     }
   }
@@ -205,7 +253,7 @@ onMounted(() => {
     <a-descriptions-item label="主机名">
       {{ checkState.info.nodename }}
     </a-descriptions-item>
-    <a-descriptions-item label="安全">
+    <a-descriptions-item label="授予权限">
       <a-tag :color="checkState.info.sudo ? 'success' : 'error'">
         <template #icon>
           <CheckCircleOutlined v-if="checkState.info.sudo" />
@@ -213,7 +261,12 @@ onMounted(() => {
         </template>
         可提权
       </a-tag>
-      <a-tag :color="checkState.info.sshLink ? 'success' : 'error'">
+
+      <a-tag
+        :color="checkState.info.sshLink ? 'success' : 'error'"
+        style="cursor: pointer"
+        @click="fnSSHLink()"
+      >
         <template #icon>
           <CheckCircleOutlined v-if="checkState.info.sshLink" />
           <CloseCircleOutlined v-else />
@@ -336,14 +389,14 @@ onMounted(() => {
           </a-form-item>
         </template>
 
-        <a-form-item :wrapper-col="{ span: 14, offset: 3 }">
+        <a-form-item :wrapper-col="{ span: 8, offset: 3 }">
           <a-button
             type="primary"
             html-type="submit"
             @click="fnCheckInfo()"
             :loading="checkState.confirmLoading"
           >
-            {{ t('views.ne.neHost.test') }}
+            进行连接
           </a-button>
           <a-button style="margin-left: 12px" @click="fnCheckInfoReset()">
             重置

src/views/tool/neQuickSetup/components/StepInstall.vue

@@ -1,39 +1,28 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw, watch } from 'vue';
+import { reactive, onMounted, toRaw, watch, ref } from 'vue';
-import { message, Form } from 'ant-design-vue/lib';
+import { message, Form, Upload } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import {
+  RESULT_CODE_ERROR,
+  RESULT_CODE_SUCCESS,
+} from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
 import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
-import { testNeHost } from '@/api/ne/neHost';
+import TerminalSSH from '@/components/TerminalSSH/index.vue';
-import useDictStore from '@/store/modules/dict';
 import { ColumnsType } from 'ant-design-vue/lib/table';
 import {
   addNeSoftware,
-  installNeSoftware,
+  installCheckNeSoftware,
   listNeSoftware,
 } from '@/api/ne/neSoftware';
 import { parseDateToStr } from '@/utils/date-utils';
 import { FileType } from 'ant-design-vue/lib/upload/interface';
 import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 import { uploadFileChunk } from '@/api/tool/file';
-const { getDict } = useDictStore();
+import { stepState } from '../hooks/useStep';
 const { t } = useI18n();
 const emit = defineEmits(['next']);
-const props = defineProps({
-  state: {
-    type: Object,
-  },
-});
-
-/**字典数据 */
-let dict: {
-  /**认证模式 */
-  neHostAuthMode: DictType[];
-} = reactive({
-  neHostAuthMode: [],
-});
 
 /**表格字段列 */
 let tableColumns: ColumnsType = [
@@ -138,7 +127,6 @@ function fnTableSelectedRowKeys(
   keys: (string | number)[],
   selectedRows: any[]
 ) {
-  console.log(keys, selectedRows);
   tableState.selectedRowKeys = keys;
   // 选择的表单数据填充
   const row = selectedRows[0];
@@ -172,10 +160,18 @@ function fnGetList(pageNum?: number) {
 
 /**安装对象信息状态类型 */
 type InstallStateType = {
-  /**表单数据 */
+  /**步骤 */
-  from: {
+  setp: 'pkg' | 'preinput' | 'ssh';
+  /**安装步骤命令 */
+  setpSSHArr: string[];
+  /**安装步骤命令-当前执行 */
+  setpSSHIdx: number;
+  /**主机ID */
+  hostId: string;
   /**文件操作类型 上传 or 选择 */
   optionType: 'upload' | 'option';
+  /**表单数据 */
+  from: {
     /**网元类型 */
     neType: string;
     fileName: string;
@@ -188,14 +184,16 @@ type InstallStateType = {
   confirmLoading: boolean;
   /**上传文件 */
   uploadFiles: any[];
-  /**安装日志 */
-  logMsg: string;
 };
 
 /**安装对象信息状态 */
 let installState: InstallStateType = reactive({
-  from: {
+  setp: 'pkg',
+  setpSSHArr: [],
+  setpSSHIdx: 0,
+  hostId: '',
   optionType: 'upload',
+  from: {
     neType: '',
     fileName: '',
     path: '',
@@ -204,7 +202,6 @@ let installState: InstallStateType = reactive({
   },
   confirmLoading: false,
   uploadFiles: [],
-  logMsg: '',
 });
 
 /**
@@ -212,7 +209,7 @@ let installState: InstallStateType = reactive({
  */
 function fnNeTypeChange(v: any) {
   tableState.queryParams.neType = v;
-  if (installState.from.optionType === 'option') {
+  if (installState.optionType === 'option') {
     fnGetList(1);
   }
 }
@@ -221,13 +218,13 @@ function fnNeTypeChange(v: any) {
  * 表单修改文件操作类型
  */
 function fnOptionTypeChange() {
-  if (installState.from.optionType === 'upload') {
+  if (installState.optionType === 'upload') {
     installState.from.fileName = '';
     installState.from.path = '';
     installState.from.version = '';
     installState.from.comment = '';
   }
-  if (installState.from.optionType === 'option') {
+  if (installState.optionType === 'option') {
     tableState.queryParams.neType = installState.from.neType;
     fnGetList(1);
   }
@@ -274,7 +271,7 @@ function fnBeforeUploadFile(file: FileType) {
       }),
       3
     );
-    return false;
+    return Upload.LIST_IGNORE;
   }
   // 根据给定的软件名取版本号 ims-r2.2312.x-ub22.deb
   const matches = fileName.match(/([0-9.]+[0-9x]+)/);
@@ -283,7 +280,11 @@ function fnBeforeUploadFile(file: FileType) {
   }
   const neTypeIndex = fileName.indexOf('-');
   if (neTypeIndex !== -1) {
-    installState.from.neType = fileName.substring(0, neTypeIndex).toUpperCase();
+    const neType = fileName.substring(0, neTypeIndex).toUpperCase();
+    if (installState.from.neType !== neType) {
+      message.error('请上传对应网元类型的安装包', 3);
+      return Upload.LIST_IGNORE;
+    }
   }
   return true;
 }
@@ -324,11 +325,13 @@ function fnInstallUpload() {
     .then(() => {
       installState.confirmLoading = true;
       const hide = message.loading(t('common.loading'), 0);
+      // 新增软件包
       addNeSoftware(form)
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             // 安装网元
-            return installNeSoftware(form);
+            Object.assign(form, { hostId: installState.hostId });
+            return installCheckNeSoftware(form);
           } else {
             message.error(res.msg, 3);
           }
@@ -336,7 +339,9 @@ function fnInstallUpload() {
         .then(res => {
           if (!res) return;
           if (res.code === RESULT_CODE_SUCCESS) {
-            console.log(res);
+            installState.setpSSHArr = res.data;
+            installState.setpSSHIdx = 0;
+            installState.setp = 'ssh';
           } else {
             message.error(res.msg, 3);
           }
@@ -351,21 +356,19 @@ function fnInstallUpload() {
     });
 }
 
-/**软件包上传安装表单重置 */
-function fnInstallInfoReset() {
-  installStateFrom.resetFields();
-}
-
 /**软件包选择安装 */
 function fnInstallOptions() {
   if (installState.confirmLoading) return;
   const form = toRaw(installState.from);
+  Object.assign(form, { hostId: installState.hostId });
   installState.confirmLoading = true;
   const hide = message.loading(t('common.loading'), 0);
-  installNeSoftware(form)
+  installCheckNeSoftware(form)
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS) {
-        console.log(res);
+        installState.setpSSHArr = res.data;
+        installState.setpSSHIdx = 0;
+        installState.setp = 'preinput';
       } else {
         message.error(res.msg, 3);
       }
@@ -376,13 +379,99 @@ function fnInstallOptions() {
     });
 }
 
-onMounted(() => {
+/**安装检查预输入 */
-  // 初始字典数据
+function fnInstallPreinput() {
-  Promise.allSettled([getDict('ne_host_authMode')]).then(resArr => {
+  if (installState.confirmLoading) return;
-    if (resArr[0].status === 'fulfilled') {
+  // IMS
-      dict.neHostAuthMode = resArr[0].value;
+  if (installState.from.neType === 'IMS') {
+    const modipplmn = installState.setpSSHArr[1];
+    modipplmn.replace('{PUBIP}', '192.168.5.57');
+    modipplmn.replace('{MCC}', '001');
+    modipplmn.replace('{MNC}', '01');
+    const modintraip = installState.setpSSHArr[2];
+    modintraip.replace('{PRIIP}', '192.168.5.57');
   }
-  });
+  installState.setpSSHIdx = 0;
+  installState.setp = 'ssh';
+}
+
+/**安装终端 */
+const installTerminal = ref();
+
+/**
+ * 终端连接状态
+ * @param data 主机连接结果
+ */
+function fnTerminalConnect(data: Record<string, any>) {
+  console.log('fnTerminalConnect', data);
+}
+
+/**
+ * 终端消息数据
+ * @param data 主机连接结果
+ */
+function fnTerminalMessage(res: Record<string, any>) {
+  const { code, requestId, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
+    return;
+  }
+  console.log('fnTerminalMessage', data);
+
+  // 安装遇到问题
+  if (data.includes('Errors were encountered while processing:')) {
+    installTerminal.value.send('logout');
+    return;
+  }
+
+  // 安装成功后退出
+  if (data.includes('software install successful')) {
+    installTerminal.value.send('logout');
+    message.success('软件安装成功', 3);
+    // 记录当前步骤状态信息
+    stepState.states[stepState.current] = { from: {} };
+    stepState.stepNext = true;
+    return;
+  }
+
+  // IMS预输入
+  if (data.includes('(P/I/S-CSCF Config)? <y/n>')) {
+    installTerminal.value.send('y');
+    return;
+  }
+
+  // 命令结束后继续输入命令
+  if (data.endsWith('$ ')) {
+    console.log('结束');
+    const cmdStr = installState.setpSSHArr[installState.setpSSHIdx];
+    if (cmdStr) {
+      installTerminal.value.send(cmdStr);
+      installState.setpSSHIdx += 1;
+    }
+    return;
+  }
+}
+
+/**
+ * 终端关闭状态
+ * @param data 主机连接结果
+ */
+function fnTerminalClose(data: Record<string, any>) {
+  console.log('fnTerminalClose', data);
+}
+
+/**终端重新安装 */
+function fnTerminalReset() {
+  installState.setpSSHIdx = 0;
+  installState.setp = 'pkg';
+  installState.optionType = 'option';
+}
+
+onMounted(() => {
+  // 读取上一步的网元信息
+  const stepPrevFrom = stepState.states[stepState.current - 1].from;
+  installState.from.neType = stepPrevFrom.neType;
+  installState.hostId = stepPrevFrom.hostIds.split(',')[0];
 });
 </script>
 
@@ -391,8 +480,12 @@ onMounted(() => {
     name="installStateFrom"
     layout="horizontal"
     :label-col="{ span: 3 }"
+    :wrapper-col="{ span: 8 }"
     :label-wrap="true"
   >
+    <div>---- 安装软件包</div>
+
+    <template v-if="installState.setp === 'pkg'">
       <a-form-item
         :label="t('views.configManage.softwareManage.neType')"
         name="neType"
@@ -400,6 +493,7 @@ onMounted(() => {
       >
         <a-auto-complete
           v-model:value="installState.from.neType"
+          :disabled="true"
           :options="NE_TYPE_LIST.map(v => ({ value: v }))"
           @change="fnNeTypeChange"
         >
@@ -407,6 +501,7 @@ onMounted(() => {
             allow-clear
             :placeholder="t('common.inputPlease')"
             :maxlength="32"
+            :disabled="true"
           >
             <template #prefix>
               <a-tooltip placement="topLeft">
@@ -422,7 +517,7 @@ onMounted(() => {
 
       <a-form-item label="软件来源" name="optionType">
         <a-radio-group
-        v-model:value="installState.from.optionType"
+          v-model:value="installState.optionType"
           button-style="solid"
           @change="fnOptionTypeChange"
           :disabled="installState.confirmLoading"
@@ -433,7 +528,7 @@ onMounted(() => {
       </a-form-item>
 
       <!-- 重新上传 -->
-    <template v-if="installState.from.optionType === 'upload'">
+      <template v-if="installState.optionType === 'upload'">
         <a-form-item
           :label="t('views.configManage.softwareManage.version')"
           name="version"
@@ -488,8 +583,8 @@ onMounted(() => {
       </template>
 
       <!-- 选择已上传 -->
-    <template v-if="installState.from.optionType === 'option'">
+      <template v-if="installState.optionType === 'option'">
-      <a-form-item label="选择记录" name="option">
+        <a-form-item label="选择记录" name="option" :wrapper-col="{ span: 24 }">
           <a-table
             class="table"
             row-key="id"
@@ -525,32 +620,31 @@ onMounted(() => {
       </template>
 
       <a-form-item :wrapper-col="{ span: 14, offset: 3 }">
-      <template v-if="installState.from.optionType === 'upload'">
+        <template v-if="installState.optionType === 'upload'">
           <a-button
             type="primary"
             html-type="submit"
             @click="fnInstallUpload()"
             :loading="installState.confirmLoading"
           >
-          进行安装
+            安装检查
-        </a-button>
-        <a-button style="margin-left: 12px" @click="fnInstallInfoReset()">
-          重置
           </a-button>
         </template>
         <a-button
-        v-if="installState.from.optionType === 'option'"
+          v-if="installState.optionType === 'option'"
           type="primary"
           html-type="submit"
           @click="fnInstallOptions()"
           :loading="installState.confirmLoading"
         >
-        进行安装
+          安装检查
         </a-button>
       </a-form-item>
+    </template>
 
-    --- 安装前预输入
+    <div>--- 安装前预输入</div>
 
+    <template v-if="installState.setp === 'preinput'">
       <a-form-item
         name="info"
         label="安装前预输入"
@@ -560,31 +654,51 @@ onMounted(() => {
         <div style="align-items: center">-----</div>
       </a-form-item>
 
-    ---- 安装进行日志结果
+      <a-form-item :wrapper-col="{ span: 14, offset: 3 }">
+        <a-button
+          type="primary"
+          html-type="submit"
+          @click="fnInstallPreinput()"
+          :loading="installState.confirmLoading"
+        >
+          开始安装
+        </a-button>
+      </a-form-item>
+    </template>
 
+    <div>---- 安装进行信息</div>
+
+    <template v-if="installState.setp === 'ssh'">
       <a-form-item
         name="info"
         label="安装日志"
         :label-col="{ span: 3 }"
+        :wrapper-col="{ span: 24 }"
         :label-wrap="true"
       >
-      <CodemirrorEdite
+        <TerminalSSH
-        :value="installState.logMsg"
+          ref="installTerminal"
-        :disabled="true"
+          :id="installState.hostId"
-        :editor-style="{ height: '400px !important' }"
+          :hostId="installState.hostId"
-      ></CodemirrorEdite>
+          init-cmd="clear"
+          @connect="fnTerminalConnect"
+          @message="fnTerminalMessage"
+          @close="fnTerminalClose"
+        >
+        </TerminalSSH>
       </a-form-item>
 
       <a-form-item :wrapper-col="{ span: 14, offset: 3 }">
         <a-button
           type="primary"
           html-type="submit"
-        @click="fnInstallOptions()"
+          @click="fnTerminalReset()"
           :loading="installState.confirmLoading"
         >
-        重新安装
+          返回重新选择安装
         </a-button>
       </a-form-item>
+    </template>
   </a-form>
 </template>
 

src/views/tool/neQuickSetup/components/StepNeInfo.vue

@@ -0,0 +1,469 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw } from 'vue';
+import { message, Form, Modal } from 'ant-design-vue/lib';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useNeInfoStore from '@/store/modules/neinfo';
+import { addNeInfo, updateNeInfo, getTypeAndIDNeInfo } from '@/api/ne/neInfo';
+import { NE_TYPE_LIST } from '@/constants/ne-constants';
+import { stepState } from '../hooks/useStep';
+const { t } = useI18n();
+const emit = defineEmits(['next']);
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByEdit: false,
+  title: '网元',
+  from: {
+    id: undefined,
+    neId: '001',
+    neType: 'OMC',
+    neName: '',
+    ip: '',
+    port: 3030,
+    pvFlag: 'PNF',
+    rmUid: '4400HX1OMC001',
+    neAddress: '',
+    dn: '',
+    vendorName: '',
+    province: '',
+    // 主机
+    hosts: [
+      {
+        hostId: undefined,
+        hostType: 'ssh',
+        groupId: '1',
+        title: 'SSH_NE_22',
+        addr: '',
+        port: 22,
+        user: 'user',
+        authMode: '0',
+        password: 'user',
+        privateKey: '',
+        passPhrase: '',
+        remark: '',
+      },
+      {
+        hostId: undefined,
+        hostType: 'telnet',
+        groupId: '1',
+        title: 'Telnet_NE_4100',
+        addr: '',
+        port: 4100,
+        user: 'user',
+        authMode: '0',
+        password: 'user',
+        remark: '',
+      },
+    ],
+  },
+  confirmLoading: false,
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    neType: [
+      {
+        required: true,
+        message: '请输入网元类型',
+      },
+    ],
+    neId: [
+      {
+        required: true,
+        message: '请输入网元标识',
+      },
+    ],
+    rmUid: [
+      {
+        required: true,
+        message: '请输入资源唯一标识',
+      },
+    ],
+    ip: [
+      {
+        required: true,
+        message: '请输入网元IP地址',
+      },
+    ],
+    neName: [
+      {
+        required: true,
+        message: '请输入网元名称',
+      },
+    ],
+  })
+);
+
+/**测试连接检查信息 */
+function fnNeInfo() {
+  const from = toRaw(modalState.from);
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+      return getTypeAndIDNeInfo(from.neType, from.neId);
+    })
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.warning({
+          content: `${from.neType} 已存在网元标识：${from.neId} ，资源唯一标识：${from.rmUid}`,
+          duration: 3,
+        });
+        from.id = res.data.id;
+        from.hostIds = res.data.hostIds;
+        const hostIds = res.data.hostIds.split(',');
+        if (hostIds.length == 2) {
+          from.hosts[0].hostId = hostIds[0];
+          from.hosts[1].hostId = hostIds[1];
+        }
+        return true;
+      } else {
+        message.success({
+          content: `${from.neType} 可使用网元标识：${from.neId}`,
+          duration: 3,
+        });
+        return false;
+      }
+    })
+    .then(state => {
+      let confirmTitle = '新增提示';
+      let confirmContent = '是否新增为新的网元信息并继续？';
+      if (state) {
+        confirmTitle = '更新提示';
+        confirmContent = '是否更新替换已存在网元信息并继续？';
+      }
+      Modal.confirm({
+        title: confirmTitle,
+        content: confirmContent,
+        okText: '确认',
+        cancelText: '取消',
+        onCancel: () => {
+          from.id = undefined;
+        },
+        onOk: () => {
+          const result = from.id ? updateNeInfo(from) : addNeInfo(from);
+          const hide = message.loading(t('common.loading'), 0);
+          result
+            .then(res => {
+              if (res.code === RESULT_CODE_SUCCESS) {
+                message.success({
+                  content: '操作成功',
+                  duration: 3,
+                });
+                // 刷新缓存的网元信息
+                useNeInfoStore()
+                  .fnRefreshNelist()
+                  .then(neRes => {
+                    const itemNe = neRes.data.find(
+                      (item: any) =>
+                        item.neType === from.neType && item.neId === from.neId
+                    );
+                    if (itemNe) {
+                      Object.assign(from, itemNe);
+                      // 记录当前步骤状态信息
+                      stepState.states[stepState.current] = { from };
+                      stepState.stepNext = true;
+                    }
+                  });
+              } else {
+                message.error({
+                  content: `${t('views.configManage.neManage.operFail')}`,
+                  duration: 3,
+                });
+              }
+            })
+            .finally(() => {
+              hide();
+              modalState.confirmLoading = false;
+            });
+        },
+      });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    })
+    .finally(() => {
+      modalState.confirmLoading = false;
+    });
+}
+
+onMounted(() => {
+  // 读取上一步的主机信息
+  const statePerv = stepState.states[stepState.current - 1];
+  modalState.from.ip = statePerv.from.addr;
+  Object.assign(modalState.from.hosts[0], statePerv.from);
+  Object.assign(modalState.from.hosts[1], {
+    addr: modalState.from.ip,
+    user: 'admin',
+    password: 'admin',
+  });
+
+  // 状态还原
+  const state = stepState.states[stepState.current];
+  if (state) {
+    if (state.from) {
+      const from = toRaw(state.from);
+      Object.assign(modalState.from, from);
+    }
+  }
+});
+</script>
+
+<template>
+  <a-form
+    name="modalStateFrom"
+    layout="horizontal"
+    :label-col="{ span: 6 }"
+    :labelWrap="true"
+  >
+    <a-row :gutter="16">
+      <a-col :lg="12" :md="12" :xs="24">
+        <a-form-item
+          :label="t('views.configManage.neManage.neType')"
+          name="neType"
+          v-bind="modalStateFrom.validateInfos.neType"
+        >
+          <a-auto-complete
+            v-model:value="modalState.from.neType"
+            :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+          >
+            <a-input
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="32"
+            >
+              <template #prefix>
+                <a-tooltip placement="topLeft">
+                  <template #title>
+                    {{ t('views.configManage.neManage.neTypeTip') }}
+                  </template>
+                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                </a-tooltip>
+              </template>
+            </a-input>
+          </a-auto-complete>
+        </a-form-item>
+      </a-col>
+      <a-col :lg="12" :md="12" :xs="24">
+        <a-form-item
+          :label="t('views.configManage.neManage.pvflag')"
+          name="pvFlag"
+          v-bind="modalStateFrom.validateInfos.pvFlag"
+        >
+          <a-select v-model:value="modalState.from.pvFlag" default-value="PNF">
+            <a-select-opt-group :label="t('views.configManage.neManage.pnf')">
+              <a-select-option value="PNF">PNF</a-select-option>
+            </a-select-opt-group>
+            <a-select-opt-group :label="t('views.configManage.neManage.vnf')">
+              <a-select-option value="VNF">VNF</a-select-option>
+            </a-select-opt-group>
+          </a-select>
+        </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.configManage.neManage.neId')"
+          name="neId"
+          v-bind="modalStateFrom.validateInfos.neId"
+        >
+          <a-input
+            v-model:value="modalState.from.neId"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+            :maxlength="32"
+          ></a-input>
+        </a-form-item>
+      </a-col>
+      <a-col :lg="12" :md="12" :xs="24">
+        <a-form-item
+          :label="t('views.configManage.neManage.neName')"
+          name="neName"
+          v-bind="modalStateFrom.validateInfos.neName"
+        >
+          <a-input
+            v-model:value="modalState.from.neName"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+            :maxlength="64"
+          >
+          </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.configManage.neManage.ip')"
+          name="ip"
+          v-bind="modalStateFrom.validateInfos.ip"
+        >
+          <a-input
+            v-model:value="modalState.from.ip"
+            allow-clear
+            :disabled="true"
+            :placeholder="t('common.inputPlease')"
+            :maxlength="128"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  <div>
+                    {{ t('views.ne.neInfo.ipAddr') }}
+                  </div>
+                </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="t('views.configManage.neManage.port')"
+          name="port"
+          v-bind="modalStateFrom.validateInfos.port"
+        >
+          <a-input-number
+            v-model:value="modalState.from.port"
+            style="width: 100%"
+            :min="1"
+            :max="65535"
+            placeholder="<=65535"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  <div>{{ t('views.configManage.neManage.portTip') }}</div>
+                </template>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input-number>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-form-item
+      :label="t('views.configManage.neManage.uid')"
+      name="rmUid"
+      v-bind="modalStateFrom.validateInfos.rmUid"
+      :label-col="{ span: 3 }"
+      :labelWrap="true"
+    >
+      <a-input
+        v-model:value="modalState.from.rmUid"
+        allow-clear
+        :placeholder="t('common.inputPlease')"
+        :maxlength="40"
+      >
+        <template #prefix>
+          <a-tooltip placement="topLeft">
+            <template #title>
+              <div>
+                {{ t('views.ne.neInfo.rmUID') }}
+              </div>
+            </template>
+            <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+          </a-tooltip>
+        </template>
+      </a-input>
+    </a-form-item>
+
+    <a-row :gutter="16">
+      <a-col :lg="12" :md="12" :xs="24">
+        <a-form-item
+          :label="t('views.configManage.neManage.mac')"
+          name="neAddress"
+        >
+          <a-input
+            v-model:value="modalState.from.neAddress"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+            :maxlength="64"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  <div>{{ t('views.configManage.neManage.macTip') }}</div>
+                </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="t('views.configManage.neManage.dn')" name="dn">
+          <a-input
+            v-model:value="modalState.from.dn"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+            :maxlength="255"
+          ></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.configManage.neManage.vendorName')"
+          name="vendorName"
+        >
+          <a-input
+            v-model:value="modalState.from.vendorName"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+            :maxlength="64"
+          >
+          </a-input>
+        </a-form-item>
+      </a-col>
+      <a-col :lg="12" :md="12" :xs="24">
+        <a-form-item
+          :label="t('views.configManage.neManage.province')"
+          name="province"
+        >
+          <a-input
+            v-model:value="modalState.from.province"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+            :maxlength="32"
+          ></a-input>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-form-item :wrapper-col="{ span: 14, offset: 3 }">
+      <a-button
+        type="primary"
+        html-type="submit"
+        @click="fnNeInfo()"
+        :loading="modalState.confirmLoading"
+      >
+        检查信息
+      </a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<style lang="less" scoped></style>

src/views/tool/neQuickSetup/hooks/useStep.ts

@@ -23,6 +23,10 @@ export const stepState: StepStateType = reactive({
       title: '环境检查',
       description: '服务器检查，触发免密脚本',
     },
+    {
+      title: '网元信息',
+      description: '记录下所安装网元基础信息',
+    },
     {
       title: '网元安装',
       description: '安装包上传执行安装启动服务等待10秒停止服务',
@@ -44,18 +48,12 @@ export const stepState: StepStateType = reactive({
   states: [],
 });
 
-export function fnStepNext(e?: any) {
+export function fnStepNext() {
-  console.log(e);
-  if (e) {
-    stepState.states[stepState.current] = e;
-    stepState.stepNext = true;
-    return;
-  }
   stepState.current++;
-  // stepState.stepNext = false;
+  stepState.stepNext = false;
 }
 
 export function fnStepPrev() {
   stepState.current--;
-  // stepState.stepNext = true;
+  stepState.stepNext = true;
 }

src/views/tool/neQuickSetup/index.vue

@@ -1,20 +1,13 @@
 <script lang="ts" setup>
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal, message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/lib';
 import StepCheck from './components/StepCheck.vue';
+import StepNeInfo from './components/StepNeInfo.vue';
 import StepInstall from './components/StepInstall.vue';
 import StepConfig from './components/StepConfig.vue';
 import StepActivate from './components/StepActivate.vue';
 import StepFinish from './components/StepFinish.vue';
-import { reactive, toRaw } from 'vue';
-import { parseDuration } from '@/utils/date-utils';
-import { listNeHost } from '@/api/ne/neHost';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { useRouter } from 'vue-router';
 import { stepState, fnStepPrev, fnStepNext } from './hooks/useStep';
-import useI18n from '@/hooks/useI18n';
-const { t } = useI18n();
-const router = useRouter();
 </script>
 
 <template>
@@ -73,27 +66,12 @@ const router = useRouter();
       </template>
 
       <!-- 步骤页面 -->
-      <StepCheck
+      <StepCheck v-if="stepState.current === 0"></StepCheck>
-        v-if="stepState.current === 0"
+      <StepNeInfo v-if="stepState.current === 1"></StepNeInfo>
-        :state="stepState.states[stepState.current]"
+      <StepInstall v-if="stepState.current === 2"></StepInstall>
-        @next="e => fnStepNext(e)"
+      <StepConfig v-if="stepState.current === 3"></StepConfig>
-      ></StepCheck>
+      <StepActivate v-if="stepState.current === 4"></StepActivate>
-      <StepInstall
+      <StepFinish v-if="stepState.current === 5"></StepFinish>
-        v-if="stepState.current === 1"
-        @next="fnStepNext"
-      ></StepInstall>
-      <StepConfig
-        v-if="stepState.current === 2"
-        @next="fnStepNext"
-      ></StepConfig>
-      <StepActivate
-        v-if="stepState.current === 3"
-        @next="fnStepNext"
-      ></StepActivate>
-      <StepFinish
-        v-if="stepState.current === 4"
-        @next="fnStepNext"
-      ></StepFinish>
     </a-card>
   </PageContainer>
 </template>