新增 统一配置网元

src/views/system/quick-start/components/NeInfoConfig.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { Modal, message } from 'ant-design-vue/lib';
-import { onMounted, reactive, toRaw } from 'vue';
+import { onMounted, reactive, ref, toRaw } from 'vue';
 import {
   addNeInfo,
   delNeInfo,
   listAllNeInfo,
+  getNeInfo,
   updateNeInfo,
 } from '@/api/ne/neInfo';
 import { neHostAuthorizedRSA, testNeHost } from '@/api/ne/neHost';
@@ -48,81 +49,90 @@ const tabState: TabStateType = reactive({
   confirmLoading: false,
 });
 
-/**
+/**对话框对象信息状态类型 */
- * 导航标签关闭
+type ModalStateType = {
- * @param id 标签的key
+  /**新增框或修改框是否显示 */
- */
+  visibleByEdit: boolean;
-function fnTabClose(key: string) {
+  /**标题 */
-  // 获取当前项下标
+  title: string;
-  const tabIndex = tabState.panes.findIndex(tab => tab.key === key);
+  /**表单数据 */
-  if (tabIndex === -1) return;
+  from: Record<string, any>;
-  const item = tabState.panes[tabIndex];
+  /**确定按钮 loading */
-  Modal.confirm({
+  confirmLoading: boolean;
-    title: t('common.tipTitle'),
+  /**更新加载数据按钮 loading */
-    content: `${item.data.neName} ${t('views.ne.neInfo.delTip')}`,
+  loadDataLoading: boolean;
-    onOk() {
+};
-      if (item.data.id) delNeInfo(item.data.id);
 
-      tabState.panes.splice(tabIndex, 1);
+/**对话框对象信息状态 */
-      // 激活前一项标签
+let modalState: ModalStateType = reactive({
-      const idx = tabIndex === 0 ? 0 : tabIndex - 1;
+  visibleByEdit: false,
-      tabState.activeKey = tabState.panes[idx].id;
+  title: '网元配置',
-    },
+  from: {
-  });
-}
-
-/**新建网元信息 */
-function fnTabCreate() {
-  const neId = `${new Date().getMilliseconds()}`.padStart(3, '0');
-  tabState.panes.push({
-    key: `New@${neId}`,
-    data: {
     id: undefined,
-      neId: neId,
     neType: '',
-      neName: `New_${neId}`,
+    neId: '',
+    neName: '',
     ip: '',
     port: 33030,
     pvFlag: 'PNF',
-      rmUid: `4400HXNew${neId}`,
+    rmUid: '',
     neAddress: '',
     dn: '-',
     vendorName: '-',
     province: '-',
-      // 主机
+    hosts: [],
-      hosts: [
-        {
-          hostId: undefined,
-          hostType: 'ssh',
-          groupId: '1',
-          title: 'SSH_NE_22',
-          addr: '',
-          port: 22,
-          user: 'omcuser',
-          authMode: '2',
-          password: '',
-          privateKey: '',
-          passPhrase: '',
-          remark: '',
   },
-        {
+  confirmLoading: false,
-          hostId: undefined,
+  loadDataLoading: false,
-          hostType: 'telnet',
-          groupId: '1',
-          title: 'Telnet_NE_4100',
-          addr: '',
-          port: 4100,
-          user: 'admin',
-          authMode: '0',
-          password: 'admin',
-          remark: '',
-        },
-      ],
-    },
-    status: false,
 });
-  tabState.activeKey = `New@${neId}`;
+
-}
+/**表格状态 */
+let tableState: any = reactive({
+  loading: false,
+  size: 'small',
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: any = [
+  {
+    title: t('common.operate'),
+    dataIndex: 'operation',
+    key: 'operation',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.common.neType'),
+    dataIndex: 'neType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.common.neId'),
+    dataIndex: 'neId',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: t('views.ne.common.ipAddr'),
+    dataIndex: 'ip',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: t('views.ne.neHost.user'),
+    dataIndex: 'hosts',
+    customRender(opt: any) {
+      const hosts = opt.value;
+      return hosts[0].user;
+    },
+    align: 'left',
+    width: 100,
+  },
+];
 
 /**
  * 测试主机连接
@@ -198,12 +208,154 @@ function fnNeTypeChange(v: any, data: any) {
   }
 }
 
+//打开新增或修改界面
+function fnModalVisibleByEdit(record?: any) {
+  if (!record) {
+    //modalStateFrom.resetFields();
+    modalState.title = t('views.configManage.neManage.addNe');
+    const neId = `${new Date().getMilliseconds()}`.padStart(3, '0');
+    modalState.from = {
+      id: undefined,
+      neId: neId,
+      neType: '',
+      neName: `New_${neId}`,
+      ip: '',
+      port: 33030,
+      pvFlag: 'PNF',
+      rmUid: `4400HXNew${neId}`,
+      neAddress: '',
+      dn: '-',
+      vendorName: '-',
+      province: '-',
+      // 主机
+      hosts: [
+        {
+          hostId: undefined,
+          hostType: 'ssh',
+          groupId: '1',
+          title: 'SSH_NE_22',
+          addr: '',
+          port: 22,
+          user: 'omcuser',
+          authMode: '2',
+          password: '',
+          privateKey: '',
+          passPhrase: '',
+          remark: '',
+        },
+        {
+          hostId: undefined,
+          hostType: 'telnet',
+          groupId: '1',
+          title: 'Telnet_NE_4100',
+          addr: '',
+          port: 4100,
+          user: 'admin',
+          authMode: '0',
+          password: 'admin',
+          remark: '',
+        },
+      ],
+    };
+    modalState.visibleByEdit = true;
+  } else {
+    //获取单个网元信息 当修改时
+    if (modalState.confirmLoading) return;
+    const hide = message.loading(t('common.loading'), 0);
+    modalState.confirmLoading = true;
+
+    getNeInfo(record.id).then(res => {
+      modalState.confirmLoading = false;
+      hide();
+      if (res.code === RESULT_CODE_SUCCESS) {
+        Object.assign(modalState.from, res.data);
+        modalState.title = t('views.configManage.neManage.editNe');
+        modalState.visibleByEdit = true;
+      } else {
+        message.error(t('common.getInfoFail'), 2);
+      }
+    });
+  }
+}
+
+/**新增或修改网元 */
+function fnModalOk() {
+  modalState.confirmLoading = true;
+  const from = toRaw(modalState.from);
+  from.rmUid = `4400HX${from.neType}${from.neId}`; // 4400HX1AMF001
+  from.neName = `${from.neType}_${from.neId}`; // AMF_001
+  const result = from.id ? updateNeInfo(from) : addNeInfo(from);
+  const hide = message.loading(t('common.loading'), 0);
+  result
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('common.operateOk'),
+          duration: 3,
+        });
+        fnGetList();
+      } else {
+        message.error({
+          content: `${res.msg}`,
+          duration: 3,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+      fnModalCancel();
+    });
+}
+
+/**
+ * 删除网元
+ * @param data 当前选项的data
+ */
+function fnDelete(data: any) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: `${data.neName} ${t('views.ne.neInfo.delTip')}`,
+    onOk() {
+      tableState.loading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      delNeInfo(data.id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success(t('common.operateOk'), 3);
+            tableState.loading = false;
+            fnGetList();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          tableState.loading = false;
+        });
+    },
+  });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalState.confirmLoading = false;
+  tabState.confirmLoading = false;
+}
+
 /**
  * 表单修改网元IP
  */
 function fnNeIPChange(e: any, data: any) {
   const v = e.target.value;
-  if (v.length < 7) return;
+  if (v.length < 7) return; //IP地址长度
+  //主机host数组addr都置成e.target.value
   for (const host of data.hosts) {
     host.addr = v;
   }
@@ -231,59 +383,6 @@ function modalStateFromEqualIPV4AndIPV6(
   return Promise.resolve();
 }
 
-/**保存信息 */
-function fnSaveFinish(pane: any) {
-  tabState.confirmLoading = true;
-  const from = toRaw(pane);
-  from.rmUid = `4400HX${from.neType}${from.neId}`; // 4400HX1AMF001
-  from.neName = `${from.neType}_${from.neId}`; // AMF_001
-  const result = from.id ? updateNeInfo(from) : addNeInfo(from);
-  const hide = message.loading(t('common.loading'), 0);
-  result
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        if (res.data) {
-          pane.id = res.data;
-        }
-
-        const tabItem = tabState.panes.find(
-          tab => tab.key === tabState.activeKey
-        );
-        if (tabItem) {
-          tabItem.status = false;
-          tabItem.data.neName = from.neName;
-          tabItem.status = true;
-        }
-        message.success({
-          content: t('common.operateOk'),
-          duration: 3,
-        });
-      } else {
-        const tabItem = tabState.panes.find(
-          tab => tab.key === tabState.activeKey
-        );
-        if (tabItem) {
-          tabItem.status = true;
-          tabItem.data.neName = from.neName;
-          tabItem.status = false;
-        }
-        message.error({
-          content: `${res.msg}`,
-          duration: 3,
-        });
-      }
-    })
-    .finally(() => {
-      hide();
-      tabState.confirmLoading = false;
-    });
-}
-
-/**保存信息有错误的情况 */
-function fnSaveFinishFailed(e: any) {
-  message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-}
-
 /**返回上一步 */
 function fnStepPrev() {
   Modal.confirm({
@@ -295,14 +394,26 @@ function fnStepPrev() {
   });
 }
 
-/**下一步操作 */
+/**下一步操作 先全部集体发过去请求新增 */
 function fnStepNext(stepName: 'NeInfoConfigPara5G') {
+  let promises = tabState.panes.map((item: any) => {
+    return item.id ? updateNeInfo(item) : addNeInfo(item);
+  });
+
   if (stepName === 'NeInfoConfigPara5G') {
     Modal.confirm({
       title: t('common.tipTitle'),
       content: t('views.system.quickStart.stepNeInfoStepNext'),
+      okButtonProps: {
+        loading: tabState.confirmLoading,
+      },
       onOk() {
+        // 使用 Promise.allSettled 等待所有 Promise 完成
+        tabState.confirmLoading = true;
+        Promise.allSettled(promises).finally(() => {
+          tabState.confirmLoading = false;
           fnToStepName('NeInfoConfigPara5G');
+        });
       },
     });
   }
@@ -314,26 +425,15 @@ function fnGetList() {
     bandHost: true,
   }).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      tabState.panes = [];
       for (const item of res.data) {
         if (item.neType === 'OMC' || !Array.isArray(item.hosts)) continue;
-        tabState.panes.push({
+        tabState.panes.push(item);
-          key: `${item.neType}@${item.neId}`,
-          data: item,
-          status: false,
-        });
-      }
-      // 没有终端信息时，新建一个占位
-      if (tabState.panes.length === 0) {
-        fnTabCreate();
-      }
-      // 选择首个
-      if (tabState.panes.length > 0) {
-        tabState.activeKey = tabState.panes[0].key;
       }
     }
   });
 }
-
+//
 onMounted(() => {
   // 初始字典数据
   Promise.allSettled([
@@ -360,51 +460,63 @@ onMounted(() => {
 
 <template>
   <div class="ne">
-    <a-tabs
+    <a-table
-      class="neinfo-tabs"
+      class="table"
-      hide-add
+      row-key="imsi"
-      tab-position="top"
+      :columns="tableColumns"
-      type="editable-card"
+      :loading="tableState.loading"
-      :tab-bar-gutter="8"
+      :data-source="tabState.panes"
-      :tab-bar-style="{ margin: '0' }"
+      :size="tableState.size"
-      v-model:activeKey="tabState.activeKey"
+      :pagination="false"
-      @edit="(key:any) => fnTabClose(key as string)"
+      :scroll="{ y: 'calc(100vh - 480px)' }"
+      @resizeColumn="(w:number, col:any) => (col.width = w)"
     >
-      <template #rightExtra>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'operation'">
           <a-space :size="8" align="center">
-          <a-tooltip placement="topRight">
+            <a-tooltip>
-            <template #title>
+              <template #title>{{ t('common.editText') }}</template>
-              {{ t('views.ne.neInfo.addTitle') }}
+              <a-button
+                type="link"
+                @click.prevent="fnModalVisibleByEdit(record)"
+              >
+                <template #icon>
+                  <FormOutlined />
+                </template>
+              </a-button>
+            </a-tooltip>
+            <a-tooltip>
+              <template #title> {{ t('common.deleteText') }}</template>
+              <a-button type="link" @click.prevent="fnDelete(record)">
+                <template #icon>
+                  <delete-outlined />
                 </template>
-            <a-button type="default" shape="circle" @click="fnTabCreate()">
-              <template #icon><PlusOutlined /></template>
               </a-button>
             </a-tooltip>
           </a-space>
         </template>
-
-      <a-tab-pane
-        v-for="pane in tabState.panes"
-        :key="pane.key"
-        :closable="tabState.panes.length > 1"
-      >
-        <template #tab>
-          <a-badge
-            :status="pane.status ? 'success' : 'default'"
-            :text="pane.data.neName"
-          />
       </template>
-
+    </a-table>
-        <!-- {{ pane.data }} -->
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
+      :keyboard="false"
+      :mask-closable="false"
+      :visible="modalState.visibleByEdit"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    >
       <a-form
-          :name="pane.key"
+        name="modalStateFrom"
         layout="horizontal"
-          :model="pane.data"
         :label-col="{ span: 6 }"
         :labelWrap="true"
+        :model="modalState.from"
         autocomplete="off"
-          @finish="fnSaveFinish(pane.data)"
-          @finishFailed="fnSaveFinishFailed"
       >
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
@@ -417,13 +529,13 @@ onMounted(() => {
               }"
             >
               <a-auto-complete
-                  v-model:value="pane.data.neType"
+                v-model:value="modalState.from.neType"
                 :options="
                   NE_TYPE_LIST.filter(s => s !== 'OMC').map(v => ({
                     value: v,
                   }))
                 "
-                  @change="(v:any) => fnNeTypeChange(v, pane.data)"
+                @change="(v:any) => fnNeTypeChange(v, modalState.from)"
               >
                 <a-input
                   allow-clear
@@ -435,15 +547,14 @@ onMounted(() => {
                       <template #title>
                         {{ t('views.ne.common.neTypeTip') }}
                       </template>
-                        <InfoCircleOutlined
+                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                          style="color: rgba(0, 0, 0, 0.45)"
-                        />
                     </a-tooltip>
                   </template>
                 </a-input>
               </a-auto-complete>
             </a-form-item>
           </a-col>
+
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.ne.common.neId')"
@@ -454,7 +565,7 @@ onMounted(() => {
               }"
             >
               <a-input
-                  v-model:value="pane.data.neId"
+                v-model:value="modalState.from.neId"
                 allow-clear
                 :placeholder="t('views.ne.common.neIdPlease')"
                 :maxlength="24"
@@ -477,17 +588,21 @@ onMounted(() => {
             <a-form-item
               :label="t('views.ne.common.ipAddr')"
               name="ip"
-                :rules="{
+              :rules="[
+                {
                   required: true,
+                },
+                {
                   validator: modalStateFromEqualIPV4AndIPV6,
-                }"
+                },
+              ]"
             >
               <a-input
-                  v-model:value="pane.data.ip"
+                v-model:value="modalState.from.ip"
                 allow-clear
                 :placeholder="t('views.ne.common.ipAddrPlease')"
                 :maxlength="128"
-                  @change="(e:any) => fnNeIPChange(e, pane.data)"
+                @change="(e:any) => fnNeIPChange(e, modalState.from)"
               >
                 <template #prefix>
                   <a-tooltip placement="topLeft">
@@ -505,7 +620,7 @@ onMounted(() => {
           <a-col :lg="12" :md="12" :xs="24"> </a-col>
         </a-row>
 
-          <template v-if="pane.data.hosts.length > 0">
+        <template v-if="modalState.from.hosts.length > 0">
           <a-divider orientation="left">
             {{ t('views.ne.neInfo.hostConfig') }}
           </a-divider>
@@ -515,7 +630,7 @@ onMounted(() => {
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item :label="t('views.ne.neHost.addr')">
                 <a-input
-                    v-model:value="pane.data.hosts[0].addr"
+                  v-model:value="modalState.from.hosts[0].addr"
                   allow-clear
                   :maxlength="128"
                   :placeholder="t('common.inputPlease')"
@@ -526,7 +641,7 @@ onMounted(() => {
             <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="pane.data.hosts[0].port"
+                  v-model:value="modalState.from.hosts[0].port"
                   :min="10"
                   :max="65535"
                   :step="1"
@@ -542,7 +657,7 @@ onMounted(() => {
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item :label="t('views.ne.neHost.user')">
                 <a-input
-                    v-model:value="pane.data.hosts[0].user"
+                  v-model:value="modalState.from.hosts[0].user"
                   allow-clear
                   :maxlength="32"
                   :placeholder="t('common.inputPlease')"
@@ -553,7 +668,7 @@ onMounted(() => {
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item :label="t('views.ne.neHost.authMode')">
                 <a-select
-                    v-model:value="pane.data.hosts[0].authMode"
+                  v-model:value="modalState.from.hosts[0].authMode"
                   default-value="0"
                   :options="dict.neHostAuthMode"
                 >
@@ -563,27 +678,27 @@ onMounted(() => {
           </a-row>
 
           <a-form-item
-              v-if="pane.data.hosts[0].authMode === '0'"
+            v-if="modalState.from.hosts[0].authMode === '0'"
             :label="t('views.ne.neHost.password')"
             :label-col="{ span: 3 }"
             :label-wrap="true"
           >
             <a-input-password
-                v-model:value="pane.data.hosts[0].password"
+              v-model:value="modalState.from.hosts[0].password"
               :maxlength="128"
               :placeholder="t('common.inputPlease')"
             >
             </a-input-password>
           </a-form-item>
 
-            <template v-if="pane.data.hosts[0].authMode === '1'">
+          <template v-if="modalState.from.hosts[0].authMode === '1'">
             <a-form-item
               :label="t('views.ne.neHost.privateKey')"
               :label-col="{ span: 3 }"
               :label-wrap="true"
             >
               <a-textarea
-                  v-model:value="pane.data.hosts[0].privateKey"
+                v-model:value="modalState.from.hosts[0].privateKey"
                 :auto-size="{ minRows: 4, maxRows: 6 }"
                 :maxlength="3000"
                 :show-count="true"
@@ -597,7 +712,7 @@ onMounted(() => {
               :label-wrap="true"
             >
               <a-input-password
-                  v-model:value="pane.data.hosts[0].passPhrase"
+                v-model:value="modalState.from.hosts[0].passPhrase"
                 :maxlength="128"
                 :placeholder="t('common.inputPlease')"
               >
@@ -614,7 +729,7 @@ onMounted(() => {
             <a-button
               type="dashed"
               shape="round"
-                @click="fnHostTest(pane.data.hosts[0])"
+              @click="fnHostTest(modalState.from.hosts[0])"
               :disabled="tabState.confirmLoading"
             >
               <template #icon><LinkOutlined /></template>
@@ -622,11 +737,11 @@ onMounted(() => {
 
             <a-button
               type="link"
-                @click="fnHostAuthorized(pane.data.hosts[0])"
+              @click="fnHostAuthorized(modalState.from.hosts[0])"
               :disabled="tabState.confirmLoading"
               v-if="
-                  pane.data.hosts[0].hostType === 'ssh' &&
+                modalState.from.hosts[0].hostType === 'ssh' &&
-                  pane.data.hosts[0].authMode !== '2'
+                modalState.from.hosts[0].authMode !== '2'
               "
             >
               {{ t('views.ne.neHost.authRSA') }}
@@ -634,7 +749,7 @@ onMounted(() => {
           </a-form-item>
         </template>
 
-          <a-form-item :wrapper-col="{ offset: 10, span: 4 }">
+        <!-- <a-form-item :wrapper-col="{ offset: 10, span: 4 }">
           <a-button
             type="primary"
             ghost
@@ -643,13 +758,18 @@ onMounted(() => {
           >
             {{ t('views.system.quickStart.save') }}
           </a-button>
-          </a-form-item>
+        </a-form-item> -->
       </a-form>
-      </a-tab-pane>
+    </ProModal>
-    </a-tabs>
 
     <div class="ne-oper">
       <a-space direction="horizontal" :size="18">
+        <!-- 添加网元 -->
+        <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+          <template #icon><PlusOutlined /></template>
+          {{ t('common.addText') }}
+        </a-button>
+
         <a-button @click="fnStepPrev()" :disabled="tabState.confirmLoading">
           {{ t('views.system.quickStart.exit') }}
         </a-button>
@@ -657,7 +777,7 @@ onMounted(() => {
         <a-button
           type="primary"
           @click="fnStepNext('NeInfoConfigPara5G')"
-          :disabled="tabState.confirmLoading"
+          :loading="tabState.confirmLoading"
         >
           {{ t('views.system.quickStart.stepNext') }}
         </a-button>