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

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",

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: "创建时间",

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>
 

src/views/ne/neInfo/components/EditModal.vue

@@ -39,22 +39,26 @@ let dict: {
 /**
  * 对话框弹出测试连接
  */
-function fnModalTest() {
+function fnModalTest(row: Record<string, any>) {
-  testNeHost({})
+  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
+              <a-form-item :label="t('views.ne.neHost.addr')">
-                :label="t('views.ne.neHost.addr')"
+                <a-input
-                name="addr"
+                  v-model:value="host.addr"
-                v-bind="modalStateFrom.validateInfos.addr"
+                  allow-clear
+                  :maxlength="128"
+                  :placeholder="t('common.inputPlease')"
                 >
-                <a-input v-model:value="host.addr" allow-clear :maxlength="50">
                 </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
+              <a-form-item :label="t('views.ne.neHost.user')">
-                :label="t('views.ne.neHost.user')"
+                <a-input
-                name="user"
+                  v-model:value="host.user"
-                v-bind="modalStateFrom.validateInfos.user"
+                  allow-clear
+                  :maxlength="50"
+                  :placeholder="t('common.inputPlease')"
                 >
-                <a-input v-model:value="host.user" allow-clear> </a-input>
+                </a-input>
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
+              <a-form-item :label="t('views.ne.neHost.authMode')">
-                :label="t('views.ne.neHost.authMode')"
-                name="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>

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: '状态',
+    title: t('views.ne.neInfo.state'),
-    dataIndex: 'serverState',
+    dataIndex: 'status',
-    key: 'serverState',
+    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'">
+          <template v-if="column.key === 'status'">
-            <a-tag :color="record.serverState.online ? 'processing' : 'error'">
+            <DictTag :options="dict.neInfoStatus" :value="record.status" />
-              {{ record.serverState.online ? '正常' : '异常' }}
-            </a-tag>
           </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>{{
+                <template #title>
-                  t('views.configManage.neManage.restart')
+                  {{ t('views.configManage.neManage.restart') }}
-                }}</template>
+                </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="