From 44844bfa7fb3f6254327cbd680885f80d2842e87 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 30 Apr 2024 19:59:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BD=91=E5=85=83=E5=AE=89=E8=A3=85?=
 =?UTF-8?q?=E6=A3=80=E6=9F=A5=E9=A1=B5=E9=9D=A2=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ne/neQuickSetup/components/Start.vue      | 437 ++++++++++++++++++
 1 file changed, 437 insertions(+)
 create mode 100644 src/views/ne/neQuickSetup/components/Start.vue

diff --git a/src/views/ne/neQuickSetup/components/Start.vue b/src/views/ne/neQuickSetup/components/Start.vue
new file mode 100644
index 00000000..80437366
--- /dev/null
+++ b/src/views/ne/neQuickSetup/components/Start.vue
@@ -0,0 +1,437 @@
+<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 { neHostAuthorizedRSA, neHostCheckInfo } from '@/api/ne/neHost';
+import useDictStore from '@/store/modules/dict';
+import { fnToStepName, stepState } from '../hooks/useStep';
+const { getDict } = useDictStore();
+const { t } = useI18n();
+
+/**字典数据 */
+let dict: {
+  /**认证模式 */
+  neHostAuthMode: DictType[];
+} = reactive({
+  neHostAuthMode: [],
+});
+
+/**对象信息状态类型 */
+type StateType = {
+  /**服务器信息 */
+  info: Record<string, any>;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**是否可以下一步 */
+  stepNext: boolean;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对象信息状态 */
+let state: StateType = reactive({
+  info: {
+    addr: '0.0.0.0',
+    kernelName: '-',
+    kernelRelease: '-',
+    machine: '-',
+    nodename: '-',
+    prettyName: '-',
+    sshLink: false,
+    sudo: false,
+  },
+  from: {
+    hostId: undefined,
+    hostType: 'ssh',
+    groupId: '1',
+    title: 'SSH_NE_22',
+    addr: '172.60.5.150',
+    port: 22,
+    user: 'agtuser',
+    authMode: '2',
+    password: 'admin123',
+    privateKey: '',
+    passPhrase: '',
+    remark: '',
+  },
+  stepNext: false,
+  confirmLoading: false,
+});
+
+/**表单属性和校验规则 */
+const checkStateFrom = Form.useForm(
+  state.from,
+  reactive({
+    addr: [
+      {
+        required: true,
+        min: 1,
+        max: 128,
+        message: t('views.ne.neHost.addrPlease'),
+      },
+    ],
+    port: [
+      {
+        required: true,
+        message: t('views.ne.neHost.portPlease'),
+      },
+    ],
+    user: [
+      {
+        required: true,
+        min: 1,
+        max: 50,
+        message: t('views.ne.neHost.userPlease'),
+      },
+    ],
+    password: [
+      {
+        required: true,
+        min: 1,
+        max: 128,
+        message: t('views.ne.neHost.passwordPlease'),
+      },
+    ],
+    privateKey: [
+      {
+        required: true,
+        min: 1,
+        max: 128,
+        message: t('views.ne.neHost.privateKeyPlease'),
+      },
+    ],
+  })
+);
+
+/**测试连接检查信息 */
+function fnCheckInfo() {
+  if (state.confirmLoading) return;
+  const form = toRaw(state.from);
+  console.log(form);
+  const validateArr = ['addr', 'port', 'user'];
+  if (form.authMode === '0') {
+    validateArr.push('password');
+  }
+  if (form.authMode === '1') {
+    validateArr.push('privateKey');
+  }
+
+  state.confirmLoading = true;
+  const hide = message.loading(t('common.loading'), 0);
+  checkStateFrom
+    .validate(validateArr)
+    .then(() => {
+      Object.assign(state.info, {
+        addr: '0.0.0.0',
+        kernelName: '-',
+        kernelRelease: '-',
+        machine: '-',
+        nodename: '-',
+        prettyName: '-',
+        sshLink: false,
+        sudo: false,
+      });
+      return neHostCheckInfo(form);
+    })
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        state.info = res.data;
+        if (!res.data.sudo) {
+          message.warning({
+            content: `请配置服务器授予当前用户无密码 sudo 权限，确保有权限进行软件包安装`,
+            duration: 2,
+          });
+          return;
+        }
+        // if (!res.data.sshLink) {
+        //   message.warning({
+        //     content: `请配置服务器间免密信任关系，确保服务器间文件传输功能`,
+        //     duration: 2,
+        //   });
+        //   return;
+        // }
+
+        stepState.neHost = form; // 保存主机连接信息
+        state.stepNext = true; // 开启下一步
+        message.success({
+          content: `${form.addr}:${form.port} ${t('views.ne.neHost.testOk')}`,
+          duration: 2,
+        });
+      } else {
+        message.error({
+          content: `${form.addr}:${form.port} ${res.msg}`,
+          duration: 2,
+        });
+      }
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    })
+    .finally(() => {
+      hide();
+      state.confirmLoading = false;
+    });
+}
+
+/**测试连接检查信息表单重置 */
+function fnCheckInfoReset() {
+  Object.assign(state.info, {
+    addr: '0.0.0.0',
+    kernelName: '-',
+    kernelRelease: '-',
+    machine: '-',
+    nodename: '-',
+    prettyName: '-',
+    sshLink: false,
+    sudo: false,
+  });
+  state.stepNext = false;
+  checkStateFrom.resetFields();
+}
+
+/**测试主机连接-免密直连 */
+function fnHostAuthorized() {
+  if (state.confirmLoading) return;
+
+  Modal.confirm({
+    title: '提示',
+    content: '是否要配置免密直连？',
+    onOk: () => {
+      const form = toRaw(state.from);
+      state.confirmLoading = true;
+      neHostAuthorizedRSA(form).then(res => {
+        state.confirmLoading = false;
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: `操作成功`,
+            duration: 2,
+          });
+        } else {
+          message.error({
+            content: `操作失败`,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**下一步操作 */
+function fnStepNext() {
+  if (!state.stepNext) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: '确认要下一步进行配置网元信息？',
+    onOk() {
+      fnToStepName('NeInfoConfig');
+    },
+  });
+}
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([getDict('ne_host_authMode')]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.neHostAuthMode = resArr[0].value;
+    }
+  });
+});
+</script>
+
+<template>
+  <a-descriptions :column="{ lg: 3, md: 2, sm: 2, xs: 1 }" bordered>
+    <a-descriptions-item label="服务器IP" :span="3">
+      {{ state.info.addr }}
+    </a-descriptions-item>
+    <a-descriptions-item label="系统">
+      {{ state.info.kernelName }}
+    </a-descriptions-item>
+    <a-descriptions-item label="架构">
+      {{ state.info.machine }}
+    </a-descriptions-item>
+    <a-descriptions-item label="内核">
+      {{ state.info.kernelRelease }}
+    </a-descriptions-item>
+    <a-descriptions-item>
+      <template #label>
+        平台
+        <a-tooltip placement="topLeft">
+          <template #title> 支持 Ubuntu </template>
+          <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+        </a-tooltip>
+      </template>
+      {{ state.info.prettyName }}
+    </a-descriptions-item>
+    <a-descriptions-item label="主机名">
+      {{ state.info.nodename }}
+    </a-descriptions-item>
+    <a-descriptions-item label="授予权限">
+      <a-tag :color="state.info.sudo ? 'success' : 'error'">
+        <template #icon>
+          <CheckCircleOutlined v-if="state.info.sudo" />
+          <CloseCircleOutlined v-else />
+        </template>
+        可提权
+      </a-tag>
+
+      <a-tag :color="state.info.sshLink ? 'success' : 'error'">
+        <template #icon>
+          <CheckCircleOutlined v-if="state.info.sshLink" />
+          <CloseCircleOutlined v-else />
+        </template>
+        可免密直连
+      </a-tag>
+    </a-descriptions-item>
+    <a-descriptions-item label="连接检查">
+      <a-form
+        name="checkStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :label-wrap="true"
+      >
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.ne.neHost.addr')"
+              name="addr"
+              v-bind="checkStateFrom.validateInfos.addr"
+            >
+              <a-input
+                v-model:value="state.from.addr"
+                allow-clear
+                :maxlength="128"
+                :placeholder="t('common.inputPlease')"
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.ne.neHost.port')"
+              name="port"
+              v-bind="checkStateFrom.validateInfos.port"
+            >
+              <a-input-number
+                v-model:value="state.from.port"
+                :min="10"
+                :max="65535"
+                :step="1"
+                style="width: 100%"
+              ></a-input-number>
+            </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.ne.neHost.user')"
+              name="user"
+              v-bind="checkStateFrom.validateInfos.user"
+            >
+              <a-input
+                v-model:value="state.from.user"
+                allow-clear
+                :maxlength="50"
+                :placeholder="t('common.inputPlease')"
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.ne.neHost.authMode')">
+              <a-select
+                v-model:value="state.from.authMode"
+                default-value="0"
+                :options="dict.neHostAuthMode"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          v-if="state.from.authMode === '0'"
+          :label="t('views.ne.neHost.password')"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+          name="password"
+          v-bind="checkStateFrom.validateInfos.password"
+        >
+          <a-input-password
+            v-model:value="state.from.password"
+            :maxlength="128"
+            :placeholder="t('common.inputPlease')"
+          >
+          </a-input-password>
+        </a-form-item>
+
+        <template v-if="state.from.authMode === '1'">
+          <a-form-item
+            :label="t('views.ne.neHost.privateKey')"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+            name="privateKey"
+            v-bind="checkStateFrom.validateInfos.privateKey"
+          >
+            <a-textarea
+              v-model:value="state.from.privateKey"
+              :auto-size="{ minRows: 4, maxRows: 6 }"
+              :maxlength="3000"
+              :show-count="true"
+              :placeholder="t('views.ne.neHost.privateKeyPlease')"
+            />
+          </a-form-item>
+
+          <a-form-item
+            :label="t('views.ne.neHost.passPhrase')"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-input-password
+              v-model:value="state.from.passPhrase"
+              :maxlength="128"
+              :placeholder="t('common.inputPlease')"
+            >
+            </a-input-password>
+          </a-form-item>
+        </template>
+
+        <a-form-item :wrapper-col="{ span: 10, offset: 3 }">
+          <a-space direction="horizontal" :size="18">
+            <a-button
+              type="primary"
+              html-type="submit"
+              @click="fnCheckInfo()"
+              :loading="state.confirmLoading"
+            >
+              进行连接
+            </a-button>
+            <a-button
+              type="default"
+              @click="fnStepNext()"
+              :disabled="!state.stepNext"
+            >
+              下一步
+            </a-button>
+
+            <a-button
+              type="dashed"
+              @click="fnHostAuthorized()"
+              :loading="state.confirmLoading"
+              v-if="state.from.authMode !== '2'"
+            >
+              免密授权
+            </a-button>
+
+            <a-button type="link" @click="fnCheckInfoReset()"> 重置 </a-button>
+          </a-space>
+        </a-form-item>
+      </a-form>
+    </a-descriptions-item>
+  </a-descriptions>
+</template>
+
+<style lang="less" scoped></style>