feat: 网元安装页面

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

@@ -1,39 +1,28 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw, watch } from 'vue';
-import { message, Form } from 'ant-design-vue/lib';
+import { reactive, onMounted, toRaw, watch, ref } from 'vue';
+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 useDictStore from '@/store/modules/dict';
+import TerminalSSH from '@/components/TerminalSSH/index.vue';
 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 = {
+  /**步骤 */
+  setp: 'pkg' | 'preinput' | 'ssh';
+  /**安装步骤命令 */
+  setpSSHArr: string[];
+  /**安装步骤命令-当前执行 */
+  setpSSHIdx: number;
+  /**主机ID */
+  hostId: string;
+  /**文件操作类型 上传 or 选择 */
+  optionType: 'upload' | 'option';
   /**表单数据 */
   from: {
-    /**文件操作类型 上传 or 选择 */
-    optionType: 'upload' | 'option';
     /**网元类型 */
     neType: string;
     fileName: string;
@@ -188,14 +184,16 @@ type InstallStateType = {
   confirmLoading: boolean;
   /**上传文件 */
   uploadFiles: any[];
-  /**安装日志 */
-  logMsg: string;
 };
 
 /**安装对象信息状态 */
 let installState: InstallStateType = reactive({
+  setp: 'pkg',
+  setpSSHArr: [],
+  setpSSHIdx: 0,
+  hostId: '',
+  optionType: 'upload',
   from: {
-    optionType: 'upload',
     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(() => {
-  // 初始字典数据
-  Promise.allSettled([getDict('ne_host_authMode')]).then(resArr => {
-    if (resArr[0].status === 'fulfilled') {
-      dict.neHostAuthMode = resArr[0].value;
+/**安装检查预输入 */
+function fnInstallPreinput() {
+  if (installState.confirmLoading) return;
+  // IMS
+  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,200 +480,225 @@ onMounted(() => {
     name="installStateFrom"
     layout="horizontal"
     :label-col="{ span: 3 }"
+    :wrapper-col="{ span: 8 }"
     :label-wrap="true"
   >
-    <a-form-item
-      :label="t('views.configManage.softwareManage.neType')"
-      name="neType"
-      v-bind="installStateFrom.validateInfos.neType"
-    >
-      <a-auto-complete
-        v-model:value="installState.from.neType"
-        :options="NE_TYPE_LIST.map(v => ({ value: v }))"
-        @change="fnNeTypeChange"
+    <div>---- 安装软件包</div>
+
+    <template v-if="installState.setp === 'pkg'">
+      <a-form-item
+        :label="t('views.configManage.softwareManage.neType')"
+        name="neType"
+        v-bind="installStateFrom.validateInfos.neType"
       >
-        <a-input
-          allow-clear
-          :placeholder="t('common.inputPlease')"
-          :maxlength="32"
+        <a-auto-complete
+          v-model:value="installState.from.neType"
+          :disabled="true"
+          :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+          @change="fnNeTypeChange"
         >
-          <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-form-item label="软件来源" name="optionType">
-      <a-radio-group
-        v-model:value="installState.from.optionType"
-        button-style="solid"
-        @change="fnOptionTypeChange"
-        :disabled="installState.confirmLoading"
-      >
-        <a-radio-button value="upload">新上传</a-radio-button>
-        <a-radio-button value="option">已上传</a-radio-button>
-      </a-radio-group>
-    </a-form-item>
-
-    <!-- 重新上传 -->
-    <template v-if="installState.from.optionType === 'upload'">
-      <a-form-item
-        :label="t('views.configManage.softwareManage.version')"
-        name="version"
-        v-bind="installStateFrom.validateInfos.version"
-      >
-        <a-input
-          v-model:value="installState.from.version"
-          allow-clear
-          :placeholder="t('views.configManage.softwareManage.versionPlease')"
-        ></a-input>
+          <a-input
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+            :maxlength="32"
+            :disabled="true"
+          >
+            <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-form-item
-        :label="t('views.configManage.softwareManage.updateComment')"
-        name="comment"
-        v-bind="installStateFrom.validateInfos.comment"
-      >
-        <a-textarea
-          v-model:value="installState.from.comment"
-          :auto-size="{ minRows: 1, maxRows: 4 }"
-          :maxlength="500"
-          :show-count="true"
-          :placeholder="
-            t('views.configManage.softwareManage.updateCommentPlease')
-          "
-        />
-      </a-form-item>
-      <a-form-item
-        :label="t('views.configManage.softwareManage.updateFile')"
-        name="file"
-        v-bind="installStateFrom.validateInfos.path"
-      >
-        <a-upload
-          name="file"
-          v-model:file-list="installState.uploadFiles"
-          accept=".rpm,.deb"
-          list-type="text"
-          :max-count="1"
-          :show-upload-list="{
-            showPreviewIcon: false,
-            showRemoveIcon: false,
-            showDownloadIcon: false,
-          }"
-          :before-upload="fnBeforeUploadFile"
-          :custom-request="fnUploadFile"
+
+      <a-form-item label="软件来源" name="optionType">
+        <a-radio-group
+          v-model:value="installState.optionType"
+          button-style="solid"
+          @change="fnOptionTypeChange"
           :disabled="installState.confirmLoading"
         >
-          <a-button type="default" :disabled="installState.confirmLoading">
-            {{ t('views.configManage.softwareManage.selectFile') }}
-          </a-button>
-        </a-upload>
+          <a-radio-button value="upload">新上传</a-radio-button>
+          <a-radio-button value="option">已上传</a-radio-button>
+        </a-radio-group>
       </a-form-item>
-    </template>
 
-    <!-- 选择已上传 -->
-    <template v-if="installState.from.optionType === 'option'">
-      <a-form-item label="选择记录" name="option">
-        <a-table
-          class="table"
-          row-key="id"
-          :columns="tableColumns"
-          :loading="tableState.loading"
-          :data-source="tableState.data"
-          :pagination="tablePagination"
-          size="small"
-          :scroll="{ x: tableColumns.length * 100, y: '400px' }"
-          :row-selection="{
-            type: 'radio',
-            columnWidth: '48px',
-            selectedRowKeys: tableState.selectedRowKeys,
-            onChange: fnTableSelectedRowKeys,
-          }"
+      <!-- 重新上传 -->
+      <template v-if="installState.optionType === 'upload'">
+        <a-form-item
+          :label="t('views.configManage.softwareManage.version')"
+          name="version"
+          v-bind="installStateFrom.validateInfos.version"
         >
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'fileName'">
-              <a-tooltip placement="topLeft">
-                <template #title>{{ record.path }}</template>
-                <div style="cursor: pointer">{{ record.fileName }}</div>
-              </a-tooltip>
+          <a-input
+            v-model:value="installState.from.version"
+            allow-clear
+            :placeholder="t('views.configManage.softwareManage.versionPlease')"
+          ></a-input>
+        </a-form-item>
+        <a-form-item
+          :label="t('views.configManage.softwareManage.updateComment')"
+          name="comment"
+          v-bind="installStateFrom.validateInfos.comment"
+        >
+          <a-textarea
+            v-model:value="installState.from.comment"
+            :auto-size="{ minRows: 1, maxRows: 4 }"
+            :maxlength="500"
+            :show-count="true"
+            :placeholder="
+              t('views.configManage.softwareManage.updateCommentPlease')
+            "
+          />
+        </a-form-item>
+        <a-form-item
+          :label="t('views.configManage.softwareManage.updateFile')"
+          name="file"
+          v-bind="installStateFrom.validateInfos.path"
+        >
+          <a-upload
+            name="file"
+            v-model:file-list="installState.uploadFiles"
+            accept=".rpm,.deb"
+            list-type="text"
+            :max-count="1"
+            :show-upload-list="{
+              showPreviewIcon: false,
+              showRemoveIcon: false,
+              showDownloadIcon: false,
+            }"
+            :before-upload="fnBeforeUploadFile"
+            :custom-request="fnUploadFile"
+            :disabled="installState.confirmLoading"
+          >
+            <a-button type="default" :disabled="installState.confirmLoading">
+              {{ t('views.configManage.softwareManage.selectFile') }}
+            </a-button>
+          </a-upload>
+        </a-form-item>
+      </template>
+
+      <!-- 选择已上传 -->
+      <template v-if="installState.optionType === 'option'">
+        <a-form-item label="选择记录" name="option" :wrapper-col="{ span: 24 }">
+          <a-table
+            class="table"
+            row-key="id"
+            :columns="tableColumns"
+            :loading="tableState.loading"
+            :data-source="tableState.data"
+            :pagination="tablePagination"
+            size="small"
+            :scroll="{ x: tableColumns.length * 100, y: '400px' }"
+            :row-selection="{
+              type: 'radio',
+              columnWidth: '48px',
+              selectedRowKeys: tableState.selectedRowKeys,
+              onChange: fnTableSelectedRowKeys,
+            }"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'fileName'">
+                <a-tooltip placement="topLeft">
+                  <template #title>{{ record.path }}</template>
+                  <div style="cursor: pointer">{{ record.fileName }}</div>
+                </a-tooltip>
+              </template>
+              <template v-if="column.key === 'comment'">
+                <a-tooltip placement="topLeft">
+                  <template #title>{{ record.comment }}</template>
+                  <div style="cursor: pointer">{{ record.comment }}</div>
+                </a-tooltip>
+              </template>
             </template>
-            <template v-if="column.key === 'comment'">
-              <a-tooltip placement="topLeft">
-                <template #title>{{ record.comment }}</template>
-                <div style="cursor: pointer">{{ record.comment }}</div>
-              </a-tooltip>
-            </template>
-          </template>
-        </a-table>
+          </a-table>
+        </a-form-item>
+      </template>
+
+      <a-form-item :wrapper-col="{ span: 14, offset: 3 }">
+        <template v-if="installState.optionType === 'upload'">
+          <a-button
+            type="primary"
+            html-type="submit"
+            @click="fnInstallUpload()"
+            :loading="installState.confirmLoading"
+          >
+            安装检查
+          </a-button>
+        </template>
+        <a-button
+          v-if="installState.optionType === 'option'"
+          type="primary"
+          html-type="submit"
+          @click="fnInstallOptions()"
+          :loading="installState.confirmLoading"
+        >
+          安装检查
+        </a-button>
       </a-form-item>
     </template>
 
-    <a-form-item :wrapper-col="{ span: 14, offset: 3 }">
-      <template v-if="installState.from.optionType === 'upload'">
+    <div>--- 安装前预输入</div>
+
+    <template v-if="installState.setp === 'preinput'">
+      <a-form-item
+        name="info"
+        label="安装前预输入"
+        :label-col="{ span: 3 }"
+        :label-wrap="true"
+      >
+        <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="fnInstallUpload()"
+          @click="fnInstallPreinput()"
           :loading="installState.confirmLoading"
         >
-          进行安装
+          开始安装
         </a-button>
-        <a-button style="margin-left: 12px" @click="fnInstallInfoReset()">
-          重置
+      </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"
+      >
+        <TerminalSSH
+          ref="installTerminal"
+          :id="installState.hostId"
+          :hostId="installState.hostId"
+          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="fnTerminalReset()"
+          :loading="installState.confirmLoading"
+        >
+          返回重新选择安装
         </a-button>
-      </template>
-      <a-button
-        v-if="installState.from.optionType === 'option'"
-        type="primary"
-        html-type="submit"
-        @click="fnInstallOptions()"
-        :loading="installState.confirmLoading"
-      >
-        进行安装
-      </a-button>
-    </a-form-item>
-
-    --- 安装前预输入
-
-    <a-form-item
-      name="info"
-      label="安装前预输入"
-      :label-col="{ span: 3 }"
-      :label-wrap="true"
-    >
-      <div style="align-items: center">-----</div>
-    </a-form-item>
-
-    ---- 安装进行日志结果
-
-    <a-form-item
-      name="info"
-      label="安装日志"
-      :label-col="{ span: 3 }"
-      :label-wrap="true"
-    >
-      <CodemirrorEdite
-        :value="installState.logMsg"
-        :disabled="true"
-        :editor-style="{ height: '400px !important' }"
-      ></CodemirrorEdite>
-    </a-form-item>
-
-    <a-form-item :wrapper-col="{ span: 14, offset: 3 }">
-      <a-button
-        type="primary"
-        html-type="submit"
-        @click="fnInstallOptions()"
-        :loading="installState.confirmLoading"
-      >
-        重新安装
-      </a-button>
-    </a-form-item>
+      </a-form-item>
+    </template>
   </a-form>
 </template>