feat: 网元快速安装多语言翻译

src/views/ne/neQuickSetup/components/NeInfoConfig.vue

@@ -2,7 +2,6 @@
 import { Form, Modal, message } from 'ant-design-vue/lib';
 import { onMounted, reactive, toRaw } from 'vue';
 import { addNeInfo, getNeInfoByTypeAndID, updateNeInfo } from '@/api/ne/neInfo';
-import { neHostAuthorizedRSA, testNeHost } from '@/api/ne/neHost';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
 import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
@@ -79,9 +78,9 @@ let modalState: ModalStateType = reactive({
         title: 'Telnet_NE_4100',
         addr: '',
         port: 4100,
-        user: 'user',
+        user: 'admin',
         authMode: '0',
-        password: 'user',
+        password: 'admin',
         remark: '',
       },
     ],
@@ -96,13 +95,13 @@ const modalStateFrom = Form.useForm(
     neType: [
       {
         required: true,
-        message: '请输入网元类型',
+        message: t('views.ne.common.neTypePlease'),
       },
     ],
     neId: [
       {
         required: true,
-        message: '请输入网元标识',
+        message: t('views.ne.common.neIdPlease'),
       },
     ],
     ip: [
@@ -111,12 +110,6 @@ const modalStateFrom = Form.useForm(
         validator: modalStateFromEqualIPV4AndIPV6,
       },
     ],
-    port: [
-      {
-        required: true,
-        message: '请输入网元IP端口',
-      },
-    ],
   })
 );
 
@@ -142,60 +135,6 @@ function modalStateFromEqualIPV4AndIPV6(
   return Promise.resolve();
 }
 
-/**
- * 测试主机连接
- */
-function fnHostTest(row: Record<string, any>) {
-  if (modalState.confirmLoading || !row.addr) return;
-  modalState.confirmLoading = true;
-  const hide = message.loading(t('common.loading'), 0);
-  testNeHost(row)
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success({
-          content: `${row.addr}:${row.port} ${t('views.ne.neHost.testOk')}`,
-          duration: 2,
-        });
-      } else {
-        message.error({
-          content: `${row.addr}:${row.port} ${res.msg}`,
-          duration: 2,
-        });
-      }
-    })
-    .finally(() => {
-      hide();
-      modalState.confirmLoading = false;
-    });
-}
-
-/**测试主机连接-免密直连 */
-function fnHostAuthorized(row: Record<string, any>) {
-  if (modalState.confirmLoading) return;
-
-  Modal.confirm({
-    title: '提示',
-    content: '是否要配置免密直连？',
-    onOk: () => {
-      modalState.confirmLoading = true;
-      neHostAuthorizedRSA(row).then(res => {
-        modalState.confirmLoading = false;
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: `操作成功`,
-            duration: 2,
-          });
-        } else {
-          message.error({
-            content: `操作失败`,
-            duration: 2,
-          });
-        }
-      });
-    },
-  });
-}
-
 /**
  * 对话框弹出确认执行函数
  * 进行表达规则校验
@@ -230,11 +169,11 @@ function fnModalOk() {
       }
     })
     .then(isUpdate => {
-      let confirmTitle = '新增提示';
-      let confirmContent = `是否新增为新的网元信息并继续？`;
+      let confirmTitle = t('views.ne.neQuickSetup.configAddTitle');
+      let confirmContent = t('views.ne.neQuickSetup.configAddTip');
       if (isUpdate) {
-        confirmTitle = '更新提示';
-        confirmContent = `是否更新到已存在网元信息并继续？`;
+        confirmTitle = t('views.ne.neQuickSetup.configUpdateTitle');
+        confirmContent = t('views.ne.neQuickSetup.configUpdateTip');
       }
       Modal.confirm({
         title: confirmTitle,
@@ -266,7 +205,7 @@ function fnModalOk() {
                 modalState.stepNext = true; // 开启下一步
               } else {
                 message.error({
-                  content: `${t('common.operateErr')}`,
+                  content: res.msg,
                   duration: 3,
                 });
               }
@@ -304,9 +243,9 @@ function fnNeTypeChange(v: any) {
       title: 'Telnet_NE_5002',
       addr: modalState.from.ip,
       port: 5002,
-      user: 'user',
+      user: 'admin',
       authMode: '0',
-      password: 'user',
+      password: 'admin',
       remark: '',
     });
   }
@@ -327,7 +266,7 @@ function fnNeIPChange(e: any) {
 function fnStepPrev() {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: '确认要放弃当前变更返回上一步吗？',
+    content: t('views.ne.neQuickSetup.stepPrevTip'),
     onOk() {
       fnRestStepState();
       fnToStepName('Start');
@@ -340,7 +279,7 @@ function fnStepNext() {
   if (!modalState.stepNext) return;
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: '确认要下一步进行网元软件安装？',
+    content: t('views.ne.neQuickSetup.configStepNext'),
     onOk() {
       fnToStepName('NeInfoSoftwareInstall');
     },
@@ -390,9 +329,9 @@ onMounted(() => {
       :labelWrap="true"
     >
       <a-row :gutter="16">
-        <a-col :lg="12" :md="12" :xs="24">
+        <a-col :lg="6" :md="6" :xs="24" :offset="6">
           <a-form-item
-            :label="t('views.configManage.neManage.neType')"
+            :label="t('views.ne.common.neType')"
             name="neType"
             v-bind="modalStateFrom.validateInfos.neType"
           >
@@ -411,7 +350,7 @@ onMounted(() => {
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title>
-                      {{ t('views.configManage.neManage.neTypeTip') }}
+                      {{ t('views.ne.common.neTypeTip') }}
                     </template>
                     <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
@@ -420,9 +359,9 @@ onMounted(() => {
             </a-auto-complete>
           </a-form-item>
         </a-col>
-        <a-col :lg="12" :md="12" :xs="24">
+        <a-col :lg="6" :md="6" :xs="24">
           <a-form-item
-            :label="t('views.configManage.neManage.neId')"
+            :label="t('views.ne.common.neId')"
             name="neId"
             v-bind="modalStateFrom.validateInfos.neId"
           >
@@ -435,7 +374,7 @@ onMounted(() => {
               <template #prefix>
                 <a-tooltip placement="topLeft">
                   <template #title>
-                    {{ t('views.configManage.neManage.neIdTip') }}
+                    {{ t('views.ne.common.neIdTip') }}
                   </template>
                   <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                 </a-tooltip>
@@ -446,9 +385,9 @@ onMounted(() => {
       </a-row>
 
       <a-row :gutter="16">
-        <a-col :lg="12" :md="12" :xs="24">
+        <a-col :lg="6" :md="6" :xs="24" :offset="6">
           <a-form-item
-            :label="t('views.configManage.neManage.ip')"
+            :label="t('views.ne.common.ipAddr')"
             name="ip"
             v-bind="modalStateFrom.validateInfos.ip"
           >
@@ -464,7 +403,7 @@ onMounted(() => {
                 <a-tooltip placement="topLeft">
                   <template #title>
                     <div>
-                      {{ t('views.ne.neInfo.ipAddr') }}
+                      {{ t('views.ne.common.ipAddrTip') }}
                     </div>
                   </template>
                   <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
@@ -473,9 +412,9 @@ onMounted(() => {
             </a-input>
           </a-form-item>
         </a-col>
-        <a-col :lg="12" :md="12" :xs="24">
+        <a-col :lg="6" :md="6" :xs="24">
           <a-form-item
-            :label="t('views.configManage.neManage.port')"
+            :label="t('views.ne.common.port')"
             name="port"
             v-bind="modalStateFrom.validateInfos.port"
           >
@@ -490,7 +429,7 @@ onMounted(() => {
               <template #prefix>
                 <a-tooltip placement="topLeft">
                   <template #title>
-                    <div>{{ t('views.configManage.neManage.portTip') }}</div>
+                    <div>{{ t('views.ne.common.portTip') }}</div>
                   </template>
                   <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                 </a-tooltip>
@@ -499,173 +438,29 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-
-      <a-divider orientation="left">
-        {{ t('views.ne.neInfo.hostConfig') }}
-      </a-divider>
-
-      <!-- 主机连接配置 -->
-      <a-collapse class="collapse" ghost>
-        <a-collapse-panel
-          v-for="host in modalState.from.hosts"
-          :key="host.title"
-          :header="`${host.hostType.toUpperCase()} ${host.port}`"
-        >
-          <a-row :gutter="16">
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.ne.neHost.addr')">
-                <a-input
-                  v-model:value="host.addr"
-                  allow-clear
-                  :maxlength="128"
-                  :placeholder="t('common.inputPlease')"
-                  :disabled="true"
-                >
-                </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">
-                <a-input-number
-                  v-model:value="host.port"
-                  :min="10"
-                  :max="65535"
-                  :step="1"
-                  :maxlength="5"
-                  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')">
-                <a-input
-                  v-model:value="host.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="host.authMode"
-                  default-value="0"
-                  :options="dict.neHostAuthMode"
-                  :disabled="host.hostType === 'telnet'"
-                >
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-
-          <a-form-item
-            v-if="host.authMode === '0'"
-            :label="t('views.ne.neHost.password')"
-            :label-col="{ span: 3 }"
-            :label-wrap="true"
-          >
-            <a-input-password
-              v-model:value="host.password"
-              :maxlength="128"
-              :placeholder="t('common.inputPlease')"
-            >
-            </a-input-password>
-          </a-form-item>
-
-          <template v-if="host.authMode === '1'">
-            <a-form-item
-              :label="t('views.ne.neHost.privateKey')"
-              :label-col="{ span: 3 }"
-              :label-wrap="true"
-            >
-              <a-textarea
-                v-model:value="host.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="host.passPhrase"
-                :maxlength="128"
-                :placeholder="t('common.inputPlease')"
-              >
-              </a-input-password>
-            </a-form-item>
-          </template>
-
-          <a-form-item
-            :label="t('views.ne.neHost.remark')"
-            :label-col="{ span: 3 }"
-            :label-wrap="true"
-          >
-            <a-textarea
-              v-model:value="host.remark"
-              :auto-size="{ minRows: 1, maxRows: 6 }"
-              :maxlength="450"
-              :show-count="true"
-              :placeholder="t('common.inputPlease')"
-            />
-          </a-form-item>
-
-          <a-form-item
-            :label="t('views.ne.neHost.test')"
-            name="test"
-            :label-col="{ span: 3 }"
-            :label-wrap="true"
-          >
-            <a-button
-              type="primary"
-              shape="round"
-              @click="fnHostTest(host)"
-              :loading="modalState.confirmLoading"
-            >
-              <template #icon><LinkOutlined /></template>
-            </a-button>
-
-            <a-button
-              type="link"
-              @click="fnHostAuthorized(host)"
-              :loading="modalState.confirmLoading"
-              v-if="host.hostType === 'ssh' && host.authMode !== '2'"
-            >
-              免密授权
-            </a-button>
-          </a-form-item>
-        </a-collapse-panel>
-      </a-collapse>
     </a-form>
 
     <div class="ne-oper">
       <a-space direction="horizontal" :size="18">
-        <a-button @click="fnStepPrev()"> 上一步 </a-button>
-
-        <a-button
-          type="primary"
-          @click="fnModalOk()"
-          :loading="modalState.confirmLoading"
-        >
-          保存信息
+        <a-button @click="fnStepPrev()">
+          {{ t('views.ne.neQuickSetup.stepPrev') }}
         </a-button>
 
         <a-button
-          type="default"
+          type="primary"
+          ghost
+          @click="fnModalOk()"
+          :loading="modalState.confirmLoading"
+        >
+          {{ t('views.ne.neQuickSetup.stepSave') }}
+        </a-button>
+
+        <a-button
+          type="primary"
           @click="fnStepNext()"
           :disabled="!modalState.stepNext"
         >
-          下一步
+          {{ t('views.ne.neQuickSetup.stepNext') }}
         </a-button>
       </a-space>
     </div>
@@ -674,10 +469,15 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .ne {
-  padding-top: 12px;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+
+  & .ant-form {
+    flex: 1;
+  }
 
   &-oper {
-    padding-top: 24px;
     text-align: end;
   }
 }