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

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>