feat: 网元信息页面多语言翻译

2024-03-06 09:57:36 +08:00
parent e5896c8513
commit 79809b56e9
5 changed files with 141 additions and 91 deletions
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -574,6 +574,24 @@ export default {
      },
    },
    ne: {
+      neInfo: {
+        version: "Version",
+        serialNum: 'Serial Number',
+        expiryDate: 'Expiry Date',
+        state: "State",
+        serviceState: "Service Status",
+        normalcy: "Normal",
+        exceptions: "Abnormal",
+        info: 'Status Message',
+        resourceInfo: 'Resource Situation',
+        sysMem: "SYS Mem",
+        sysCpu: "SYS CPU",
+        sysDisk: "SYS Store",
+        neCpu: "NE CPU",
+        hostConfig: "Connection Configuration",
+        rmUID: "Data resource location identifiers are used for data tagging such as logging, alarm reporting, etc.",
+        ipAddr: "Support IPV4/IPV6, synchronize the change of the configuration address of the following configuration",
+      },
      neHost: {
        hostType: "Type",
        groupId: "Group",
@@ -587,6 +605,7 @@ export default {
        authMode: "Auth Mode",
        password: "Password",
        privateKey: "Private Key",
+        privateKeyPlease: "Please fill in the private key characters correctly ~/.ssh/id_rsa",
        passPhrase: "Private Key Cipher",
        remark: "Remark",
        createTime: "Time",
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -574,6 +574,24 @@ export default {
      },
    },
    ne: {
+      neInfo: {
+        version: "网元版本",
+        serialNum: '序列号',
+        expiryDate: '许可证到期日期',
+        state: "网元状态",
+        serviceState: "服务状态",
+        normalcy: "正常",
+        exceptions: "异常",
+        info: '状态信息',
+        resourceInfo: '资源情况',
+        sysMem: "系统内存",
+        sysCpu: "系统CPU",
+        sysDisk: "系统存储",
+        neCpu: "网元CPU",
+        hostConfig: "终端连接配置",
+        rmUID: "数据资源定位标识符用于日志、告警上报等数据标记",
+        ipAddr: "支持IPV4/IPV6,同步变更下方配置的配置地址",
+      },
      neHost: {
        hostType: "主机类型",
        groupId: "分组",
@@ -587,6 +605,7 @@ export default {
        authMode: "认证模式",
        password: "密码",
        privateKey: "私钥",
+        privateKeyPlease: "请正确填写私钥字符内容 ~/.ssh/id_rsa",
        passPhrase: "私钥密码",
        remark: "备注信息",
        createTime: "创建时间",
--- a/src/views/ne/neHost/index.vue
+++ b/src/views/ne/neHost/index.vue
@@ -727,6 +727,7 @@ onMounted(() => {
                :auto-size="{ minRows: 4, maxRows: 6 }"
                :maxlength="3000"
                :show-count="true"
+                :placeholder="t('views.ne.neHost.privateKeyPlease')"
              />
            </a-form-item>

--- a/src/views/ne/neInfo/components/EditModal.vue
+++ b/src/views/ne/neInfo/components/EditModal.vue
@@ -39,22 +39,26 @@ let dict: {
 /**
 * 对话框弹出测试连接
 */
-function fnModalTest() {
-  testNeHost({})
+function fnModalTest(row: Record<string, any>) {
+  if (modalState.confirmLoading) 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: t('views.ne.neHost.testOk'),
+          content: `${row.addr}:${row.port} ${t('views.ne.neHost.testOk')}`,
          duration: 2,
        });
      } else {
        message.error({
-          content: `${res.msg}`,
+          content: `${row.addr}:${row.port} ${res.msg}`,
          duration: 2,
        });
      }
    })
    .finally(() => {
+      hide();
      modalState.confirmLoading = false;
    });
 }
@@ -276,7 +280,6 @@ function fnNeIPChange(e: any) {
 watch(
  () => props.visible,
  val => {
-    console.log(val);
    if (val) fnModalVisibleByEdit(props.editId);
  }
 );
@@ -304,6 +307,7 @@ onMounted(() => {
 <template>
  <DraggableModal
    width="800px"
+    :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
    :keyboard="false"
    :mask-closable="false"
    :visible="modalState.visibleByEdit"
@@ -378,6 +382,7 @@ onMounted(() => {
            <a-input
              v-model:value="modalState.from.neId"
              allow-clear
+              :placeholder="t('common.inputPlease')"
              :maxlength="32"
            ></a-input>
          </a-form-item>
@@ -391,6 +396,7 @@ onMounted(() => {
            <a-input
              v-model:value="modalState.from.neName"
              allow-clear
+              :placeholder="t('common.inputPlease')"
              :maxlength="64"
            >
            </a-input>
@@ -408,6 +414,7 @@ onMounted(() => {
            <a-input
              v-model:value="modalState.from.ip"
              allow-clear
+              :placeholder="t('common.inputPlease')"
              :maxlength="128"
              @change="fnNeIPChange"
            >
@@ -415,7 +422,7 @@ onMounted(() => {
                <a-tooltip placement="topLeft">
                  <template #title>
                    <div>
-                      支持IPV4/IPV6,修改改属性会同步变更下方配置的客户端连接地址
+                      {{ t('views.ne.neInfo.ipAddr') }}
                    </div>
                  </template>
                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
@@ -460,13 +467,15 @@ onMounted(() => {
        <a-input
          v-model:value="modalState.from.rmUid"
          allow-clear
+          :placeholder="t('common.inputPlease')"
          :maxlength="40"
-          :placeholder="t('views.configManage.neManage.uidTip')"
        >
          <template #prefix>
            <a-tooltip placement="topLeft">
              <template #title>
-                <div>用于日志、告警等数据资源定位标识符</div>
+                <div>
+                  {{ t('views.ne.neInfo.rmUID') }}
+                </div>
              </template>
              <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
            </a-tooltip>
@@ -483,6 +492,7 @@ onMounted(() => {
            <a-input
              v-model:value="modalState.from.neAddress"
              allow-clear
+              :placeholder="t('common.inputPlease')"
              :maxlength="64"
            >
              <template #prefix>
@@ -501,6 +511,7 @@ onMounted(() => {
            <a-input
              v-model:value="modalState.from.dn"
              allow-clear
+              :placeholder="t('common.inputPlease')"
              :maxlength="255"
            ></a-input>
          </a-form-item>
@@ -516,6 +527,7 @@ onMounted(() => {
            <a-input
              v-model:value="modalState.from.vendorName"
              allow-clear
+              :placeholder="t('common.inputPlease')"
              :maxlength="64"
            >
            </a-input>
@@ -529,67 +541,33 @@ onMounted(() => {
            <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-divider orientation="left">
+        {{ t('views.ne.neInfo.hostConfig') }}
+      </a-divider>
+
      <!-- 主机连接配置 -->
      <a-collapse class="collapse" ghost>
-        <a-collapse-panel key="host" header="配置主机">
-          <a-row :gutter="16">
-            <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
-                ></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                :label="t('views.configManage.neManage.sync')"
-                name="province"
-              >
-                <a-switch
-                  v-model:checked="modalState.from.sync"
-                  :checked-children="t('views.configManage.neManage.open')"
-                  :un-checked-children="t('views.configManage.neManage.close')"
-                />
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-collapse-panel>
        <a-collapse-panel
-          :key="host.title"
          v-for="host in modalState.from.hosts"
+          :key="host.title"
+          :header="`${host.hostType.toUpperCase()} ${host.port}`"
        >
-          <template #header>
-            <div class="collapse-header">
-              <div>{{ `${host.hostType.toUpperCase()} ${host.port}` }}</div>
-              <a-button
-                size="small"
-                type="primary"
-                shape="round"
-                @click.prevent="fnModalTest"
-                :loading="modalState.confirmLoading"
-              >
-                <template #icon><LinkOutlined /></template>
-              </a-button>
-            </div>
-          </template>
          <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="modalStateFrom.validateInfos.addr"
-              >
-                <a-input v-model:value="host.addr" allow-clear :maxlength="50">
+              <a-form-item :label="t('views.ne.neHost.addr')">
+                <a-input
+                  v-model:value="host.addr"
+                  allow-clear
+                  :maxlength="128"
+                  :placeholder="t('common.inputPlease')"
+                >
                </a-input>
              </a-form-item>
            </a-col>
@@ -608,19 +586,18 @@ onMounted(() => {

          <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="modalStateFrom.validateInfos.user"
-              >
-                <a-input v-model:value="host.user" allow-clear> </a-input>
+              <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')"
-                name="authMode"
-              >
+              <a-form-item :label="t('views.ne.neHost.authMode')">
                <a-select
                  v-model:value="host.authMode"
                  default-value="0"
@@ -635,18 +612,20 @@ onMounted(() => {
          <a-form-item
            v-if="host.authMode === '0'"
            :label="t('views.ne.neHost.password')"
-            name="password"
            :label-col="{ span: 3 }"
            :label-wrap="true"
          >
-            <a-input-password v-model:value="host.password" :maxlength="128">
+            <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')"
-              name="privateKey"
              :label-col="{ span: 3 }"
              :label-wrap="true"
            >
@@ -655,18 +634,19 @@ onMounted(() => {
                :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')"
-              name="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>
@@ -674,7 +654,6 @@ onMounted(() => {

          <a-form-item
            :label="t('views.ne.neHost.remark')"
-            name="remark"
            :label-col="{ span: 3 }"
            :label-wrap="true"
          >
@@ -683,6 +662,7 @@ onMounted(() => {
              :auto-size="{ minRows: 1, maxRows: 6 }"
              :maxlength="450"
              :show-count="true"
+              :placeholder="t('common.inputPlease')"
            />
          </a-form-item>

@@ -695,7 +675,7 @@ onMounted(() => {
            <a-button
              type="primary"
              shape="round"
-              @click="fnModalTest"
+              @click="fnModalTest(host)"
              :loading="modalState.confirmLoading"
            >
              <template #icon><LinkOutlined /></template>
--- a/src/views/ne/neInfo/index.vue
+++ b/src/views/ne/neInfo/index.vue
@@ -11,8 +11,18 @@ import EditModal from './components/EditModal.vue';
 import useNeInfoStore from '@/store/modules/neinfo';
 import { listNeInfo, delNeInfo } from '@/api/ne/neInfo';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
+import useDictStore from '@/store/modules/dict';
+const { getDict } = useDictStore();
 const { t } = useI18n();

+/**字典数据 */
+let dict: {
+  /**网元信息状态 */
+  neInfoStatus: DictType[];
+} = reactive({
+  neInfoStatus: [],
+});
+
 /**查询参数 */
 let queryParams = reactive({
  /**网元类型 */
@@ -102,9 +112,9 @@ let tableColumns: ColumnsType = [
    width: 50,
  },
  {
-    title: '状态',
-    dataIndex: 'serverState',
-    key: 'serverState',
+    title: t('views.ne.neInfo.state'),
+    dataIndex: 'status',
+    key: 'status',
    align: 'left',
    width: 100,
  },
@@ -362,6 +372,13 @@ function fnGetList(pageNum?: number) {
 }

 onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([getDict('ne_info_status')]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.neInfoStatus = resArr[0].value;
+    }
+  });
+
  // 刷新缓存的网元信息
  useNeInfoStore()
    .fnRefreshNelist()
@@ -507,10 +524,8 @@ onMounted(() => {
        }"
      >
        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'serverState'">
-            <a-tag :color="record.serverState.online ? 'processing' : 'error'">
-              {{ record.serverState.online ? '正常' : '异常' }}
-            </a-tag>
+          <template v-if="column.key === 'status'">
+            <DictTag :options="dict.neInfoStatus" :value="record.status" />
          </template>
          <template v-if="column.key === 'id'">
            <a-space :size="8" align="center">
@@ -535,9 +550,9 @@ onMounted(() => {
                </a-button>
              </a-tooltip>
              <a-tooltip>
-                <template #title>{{
-                  t('views.configManage.neManage.restart')
-                }}</template>
+                <template #title>
+                  {{ t('views.configManage.neManage.restart') }}
+                </template>
                <a-button
                  type="link"
                  @click.prevent="fnRecordMore('restart', record)"
@@ -594,24 +609,40 @@ onMounted(() => {
        </template>
        <template #expandedRowRender="{ record }">
          <div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
-            <a-divider orientation="left">状态信息</a-divider>
+            <a-divider orientation="left">
+              {{ t('views.ne.neInfo.info') }}
+            </a-divider>
            <div>
-              <span>网元版本：</span>
+              <span>{{ t('views.ne.neInfo.serviceState') }}：</span>
+              <a-tag
+                :color="record.serverState.online ? 'processing' : 'error'"
+              >
+                {{
+                  record.serverState.online
+                    ? t('views.ne.neInfo.normalcy')
+                    : t('views.ne.neInfo.exceptions')
+                }}
+              </a-tag>
+            </div>
+            <div>
+              <span>{{ t('views.ne.neInfo.version') }}：</span>
              <span>{{ record.serverState.version }}</span>
            </div>
            <div>
-              <span>序列号：</span>
+              <span>{{ t('views.ne.neInfo.serialNum') }}：</span>
              <span>{{ record.serverState.sn }}</span>
            </div>
            <div>
-              <span>许可证到期日期：</span>
+              <span>{{ t('views.ne.neInfo.expiryDate') }}：</span>
              <span>{{ record.serverState.expire }}</span>
            </div>
          </div>
          <div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
-            <a-divider orientation="left">资源情况</a-divider>
+            <a-divider orientation="left">
+              {{ t('views.ne.neInfo.resourceInfo') }}
+            </a-divider>
            <div>
-              <span>网元CPU：</span>
+              <span>{{ t('views.ne.neInfo.neCpu') }}：</span>
              <a-progress
                status="normal"
                :stroke-color="
@@ -625,7 +656,7 @@ onMounted(() => {
              />
            </div>
            <div>
-              <span>系统CPU：</span>
+              <span>{{ t('views.ne.neInfo.sysCpu') }}：</span>
              <a-progress
                status="normal"
                :stroke-color="
@@ -639,7 +670,7 @@ onMounted(() => {
              />
            </div>
            <div>
-              <span>系统内存：</span>
+              <span>{{ t('views.ne.neInfo.sysMem') }}：</span>
              <a-progress
                status="normal"
                :stroke-color="
@@ -653,7 +684,7 @@ onMounted(() => {
              />
            </div>
            <div>
-              <span>系统存储：</span>
+              <span>{{ t('views.ne.neInfo.sysDisk') }}：</span>
              <a-progress
                status="normal"
                :stroke-color="