feat: 网元主机表单校验和提示翻译

2024-03-09 18:08:40 +08:00
parent 249d89af88
commit dce068fcb1
5 changed files with 426 additions and 9 deletions
--- a/src/api/ne/neHost.ts
+++ b/src/api/ne/neHost.ts
@@ -74,4 +74,17 @@ export function testNeHost(data: Record<string, any>) {
    method: 'post',
    data: data,
  });
-}
+}
+
+/**
+ * 网元主机SSH方式检查服务器环境
+ * @param data 网元主机对象
+ * @returns object
+ */
+export function neHostCheckInfo(data: Record<string, any>) {
+  return request({
+    url: '/ne/host/checkBySSH',
+    method: 'post',
+    data: data,
+  });
+}
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -601,10 +601,12 @@ export default {
        addr: "IP Addr",
        addrPlease: "Please fill in the host IP address correctly",
        port: "Port",
+        portPlease: "Please fill in the host port number correctly",
        user: "Login User",
        userPlease: "Please fill in the host login user correctly",
        authMode: "Auth Mode",
        password: "Password",
+        passwordPlease: "Please fill in the host login password correctly",
        privateKey: "Private Key",
        privateKeyPlease: "Please fill in the private key characters correctly ~/.ssh/id_rsa",
        passPhrase: "Private Key Cipher",
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -601,10 +601,12 @@ export default {
        addr: "IP地址",
        addrPlease: "请正确填写主机IP地址",
        port: "端口",
+        portPlease: "请正确填写主机端口号",
        user: "用户名",
        userPlease: "请正确填写主机登录用户",
        authMode: "认证模式",
        password: "密码",
+        passwordPlease: "请正确填写主机登录密码",
        privateKey: "私钥",
        privateKeyPlease: "请正确填写私钥字符内容 ~/.ssh/id_rsa",
        passPhrase: "私钥密码",
--- a/src/views/ne/neHost/index.vue
+++ b/src/views/ne/neHost/index.vue
@@ -257,10 +257,16 @@ const modalStateFrom = Form.useForm(
      {
        required: true,
        min: 1,
-        max: 50,
+        max: 128,
        message: t('views.ne.neHost.addrPlease'),
      },
    ],
+    port: [
+      {
+        required: true,
+        message: t('views.ne.neHost.portPlease'),
+      },
+    ],
    user: [
      {
        required: true,
@@ -269,6 +275,22 @@ const modalStateFrom = Form.useForm(
        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'),
+      },
+    ],
  })
 );

@@ -305,12 +327,19 @@ function fnModalVisibleByEdit(roleId?: string | number) {
 * 进行表达规则校验
 */
 function fnModalOk() {
+  if (modalState.confirmLoading) return;
+  const form = toRaw(modalState.from);
+  const validateArr = ['title', 'addr', 'port', 'user'];
+  if (form.authMode === '0') {
+    validateArr.push('password');
+  } else {
+    validateArr.push('privateKey');
+  }
  modalStateFrom
-    .validate()
+    .validate(validateArr)
    .then(() => {
      modalState.confirmLoading = true;
-      const from = toRaw(modalState.from);
-      const neHost = from.hostId ? updateNeHost(from) : addNeHost(from);
+      const neHost = form.hostId ? updateNeHost(form) : addNeHost(form);
      const hide = message.loading(t('common.loading'), 0);
      neHost
        .then(res => {
@@ -380,13 +409,20 @@ function fnRecordDelete(hostId: string) {
 * 对话框弹出测试连接
 */
 function fnModalTest() {
+  if (modalState.confirmLoading) return;
+  const form = toRaw(modalState.from);
+  const validateArr = ['title', 'addr', 'port', 'user'];
+  if (form.authMode === '0') {
+    validateArr.push('password');
+  } else {
+    validateArr.push('privateKey');
+  }
  modalStateFrom
-    .validate()
+    .validate(validateArr)
    .then(() => {
      modalState.confirmLoading = true;
-      const from = toRaw(modalState.from);
      const hide = message.loading(t('common.loading'), 0);
-      testNeHost(from)
+      testNeHost(form)
        .then(res => {
          if (res.code === RESULT_CODE_SUCCESS) {
            message.success({
@@ -664,7 +700,11 @@ onMounted(() => {
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.ne.neHost.port')" name="port">
+              <a-form-item
+                :label="t('views.ne.neHost.port')"
+                name="port"
+                v-bind="modalStateFrom.validateInfos.port"
+              >
                <a-input-number
                  v-model:value="modalState.from.port"
                  :min="10"
@@ -711,6 +751,7 @@ onMounted(() => {
            v-if="modalState.from.authMode === '0'"
            :label="t('views.ne.neHost.password')"
            name="password"
+            v-bind="modalStateFrom.validateInfos.password"
            :label-col="{ span: 3 }"
            :label-wrap="true"
          >
@@ -726,6 +767,7 @@ onMounted(() => {
            <a-form-item
              :label="t('views.ne.neHost.privateKey')"
              name="privateKey"
+              v-bind="modalStateFrom.validateInfos.privateKey"
              :label-col="{ span: 3 }"
              :label-wrap="true"
            >
--- a/src/views/tool/neQuickSetup/components/StepCheck.vue
+++ b/src/views/tool/neQuickSetup/components/StepCheck.vue
@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw } from 'vue';
+import { message, Form } 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 useDictStore from '@/store/modules/dict';
+const { getDict } = useDictStore();
+const { t } = useI18n();
+const emit = defineEmits(['next']);
+const props = defineProps({
+  state: {
+    type: Object,
+  },
+});
+
+/**字典数据 */
+let dict: {
+  /**认证模式 */
+  neHostAuthMode: DictType[];
+} = reactive({
+  neHostAuthMode: [],
+});
+
+/**检查对象信息状态类型 */
+type CheckStateType = {
+  /**服务器信息 */
+  info: Record<string, any>;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**检查对象信息状态 */
+let checkState: CheckStateType = 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: '192.168.2.211',
+    port: 22,
+    user: 'agtuser',
+    authMode: '0',
+    password: 'admin123',
+    privateKey: '',
+    passPhrase: '',
+    remark: '',
+  },
+  confirmLoading: false,
+});
+
+/**表单属性和校验规则 */
+const checkStateFrom = Form.useForm(
+  checkState.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 fnModalTest() {
+  if (checkState.confirmLoading) return;
+  const form = toRaw(checkState.from);
+  const validateArr = ['addr', 'port', 'user'];
+  if (form.authMode === '0') {
+    validateArr.push('password');
+  } else {
+    validateArr.push('privateKey');
+  }
+  checkStateFrom
+    .validate(validateArr)
+    .then(() => {
+      checkState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      neHostCheckInfo(form)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            checkState.info = res.data;
+            emit('next', {
+              info: checkState.info,
+              from: checkState.from,
+            });
+            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,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          checkState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+function fnModalTestReset() {
+  checkStateFrom.resetFields();
+}
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([getDict('ne_host_authMode')]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.neHostAuthMode = resArr[0].value;
+    }
+  });
+  // 状态还原
+  if (props.state) {
+    if (props.state.info) {
+      const info = toRaw(props.state.info);
+      Object.assign(checkState.info, info);
+    }
+    if (props.state.from) {
+      const from = toRaw(props.state.from);
+      Object.assign(checkState.from, from);
+    }
+  }
+});
+</script>
+
+<template>
+  <a-descriptions :column="{ lg: 3, md: 2, sm: 2, xs: 1 }" bordered>
+    <a-descriptions-item label="服务器IP" :span="3">
+      {{ checkState.info.addr }}
+    </a-descriptions-item>
+    <a-descriptions-item label="系统">
+      {{ checkState.info.kernelName }}
+    </a-descriptions-item>
+    <a-descriptions-item label="架构">
+      {{ checkState.info.machine }}
+    </a-descriptions-item>
+    <a-descriptions-item label="内核">
+      {{ checkState.info.kernelRelease }}
+    </a-descriptions-item>
+    <a-descriptions-item>
+      <template #label>
+        平台
+        <a-tooltip placement="topLeft">
+          <template #title> 支持 Ubuntu、Ubuntu </template>
+          <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+        </a-tooltip>
+      </template>
+      {{ checkState.info.prettyName }}
+    </a-descriptions-item>
+    <a-descriptions-item label="主机名">
+      {{ checkState.info.nodename }}
+    </a-descriptions-item>
+    <a-descriptions-item label="安全">
+      <a-tag :color="checkState.info.sudo ? 'success' : 'error'">
+        <template #icon>
+          <CheckCircleOutlined v-if="checkState.info.sudo" />
+          <CloseCircleOutlined v-else />
+        </template>
+        可提权
+      </a-tag>
+      <a-tag :color="checkState.info.sshLink ? 'success' : 'error'">
+        <template #icon>
+          <CheckCircleOutlined v-if="checkState.info.sshLink" />
+          <CloseCircleOutlined v-else />
+        </template>
+        可免密直连
+      </a-tag>
+    </a-descriptions-item>
+    <a-descriptions-item label="连接检查" :span="2">
+      <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="checkState.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="checkState.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="checkState.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="checkState.from.authMode"
+                default-value="0"
+                :options="dict.neHostAuthMode"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          v-if="checkState.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="checkState.from.password"
+            :maxlength="128"
+            :placeholder="t('common.inputPlease')"
+          >
+          </a-input-password>
+        </a-form-item>
+
+        <template v-if="checkState.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="checkState.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="checkState.from.passPhrase"
+              :maxlength="128"
+              :placeholder="t('common.inputPlease')"
+            >
+            </a-input-password>
+          </a-form-item>
+        </template>
+
+        <a-form-item :wrapper-col="{ span: 14, offset: 3 }">
+          <a-button
+            type="primary"
+            html-type="submit"
+            @click="fnModalTest()"
+            :loading="checkState.confirmLoading"
+          >
+            {{ t('views.ne.neHost.test') }}
+          </a-button>
+          <a-button style="margin-left: 12px" @click="fnModalTestReset()">
+            重置
+          </a-button>
+        </a-form-item>
+      </a-form>
+    </a-descriptions-item>
+  </a-descriptions>
+</template>
+
+<style lang="less" scoped></style>