From 3c5843b2e53db2ae94f07b26550a14309d49a8fc Mon Sep 17 00:00:00 2001
From: yaojn <yaojn@techsure.com.cn>
Date: Thu, 5 Jun 2025 11:25:16 +0800
Subject: [PATCH] =?UTF-8?q?-=20[=E4=BF=AE=E5=A4=8D]=E6=89=A7=E8=A1=8C?=
 =?UTF-8?q?=E5=99=A8=E7=BB=84=E7=AE=A1=E7=90=86=EF=BC=9A=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=BD=91=E6=AE=B5=20IP/=E5=AD=90=E7=BD=91=E6=8E=A9=E7=A0=81?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=20=20=20=20-=20[=E5=85=B3=E8=81=94]#[1436347?=
 =?UTF-8?q?418509312]=E6=89=A7=E8=A1=8C=E5=99=A8=E7=BB=84=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=EF=BC=9A=E4=BC=98=E5=8C=96=E7=BD=91=E6=AE=B5=20IP/?=
 =?UTF-8?q?=E5=AD=90=E7=BD=91=E6=8E=A9=E7=A0=81=E5=B1=95=E7=A4=BA=20http:/?=
 =?UTF-8?q?/192.168.0.96:8090/demo/rdm.html#/bug-detail/939050947543040/93?=
 =?UTF-8?q?9050947543057/1436347418509312?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../runner/networkip-mask-dialog.vue          | 72 +++++++++++++++++++
 .../framework/runner/runnergroup-manage.vue   | 30 +++++++-
 2 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 src/views/pages/framework/runner/networkip-mask-dialog.vue

diff --git a/src/views/pages/framework/runner/networkip-mask-dialog.vue b/src/views/pages/framework/runner/networkip-mask-dialog.vue
new file mode 100644
index 00000000..2d28a848
--- /dev/null
+++ b/src/views/pages/framework/runner/networkip-mask-dialog.vue
@@ -0,0 +1,72 @@
+<template>
+  <TsDialog v-bind="dialogSetting" @on-close="closeDialog" @on-cancel="closeDialog">
+    <template v-slot>
+      <div class="network-dialog-wrapper">
+        <span
+          v-for="(item) in networkList"
+          :key="item.id"
+          class="networkip-mask-list border-color bg-op radius-sm mb-xs"
+        >
+          {{ item.networkIp }} / {{ item.mask }}
+        </span>
+      </div>
+    </template>
+  </TsDialog>
+</template>
+<script>
+export default {
+  name: '',
+  components: {},
+  directives: {},
+  props: {
+    networkList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dialogSetting: {
+        title: '查看更多网段IP/子网掩码',
+        type: 'modal',
+        width: 'small',
+        isShow: true,
+        hasFooter: false,
+        maskClose: true
+      }
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    closeDialog() {
+      this.$emit('close');
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {}
+};
+</script>
+<style lang="less">
+.network-dialog-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  .networkip-mask-list {
+    border: 1px solid;
+    padding: 6px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/src/views/pages/framework/runner/runnergroup-manage.vue b/src/views/pages/framework/runner/runnergroup-manage.vue
index d2e0f38f..5c357881 100644
--- a/src/views/pages/framework/runner/runnergroup-manage.vue
+++ b/src/views/pages/framework/runner/runnergroup-manage.vue
@@ -27,10 +27,17 @@
           >
             <template slot="groupNetworkList" slot-scope="{ row }">
               <!-- 网段IP/子网掩码 -->
-              <div v-if="row.groupNetworkList.length > 0">
-                <div v-for="item in row.groupNetworkList" :key="item.id">
+              <div v-if="row.groupNetworkList && row.groupNetworkList.length > 0">
+                <div
+                  v-for="item in row.groupNetworkList.slice(0,3)"
+                  :key="item.id"
+                  class="mb-xs"
+                >
                   {{ item.networkIp }} / {{ item.mask }}
                 </div>
+                <template v-if="row.groupNetworkList.length >= 3">
+                  <span class="tsfont-option-horizontal text-href" @click.stop="openNetworkIpMaskDialog(row.groupNetworkList)">查看更多</span>
+                </template>
               </div>
             </template>
             <template slot="runnerCount" slot-scope="{ row }">
@@ -83,6 +90,12 @@
         </div>
       </template>
     </TsDialog>
+    <NetworkipMaskDialog
+      v-if="isShowNetworkIpMaskDialog"
+      :networkList="groupNetworkList"
+      @close="closeNetworkIpMaskDialog"
+    >
+    </NetworkipMaskDialog>
   </div>
 
 </template>
@@ -94,7 +107,8 @@ export default {
     TsTable: () => import('@/resources/components/TsTable/TsTable.vue'),
     GroupAddDialog: () => import('./group-add-dialog.vue'),
     GroupEditDialog: () => import('./group-edit-dialog.vue'),
-    RunnerRelate: () => import('./runner-relate.vue')
+    RunnerRelate: () => import('./runner-relate.vue'),
+    NetworkipMaskDialog: () => import('./networkip-mask-dialog.vue')
   },
   filters: {},
   props: {
@@ -108,6 +122,8 @@ export default {
       runnerRowData: {}, // 点击数量，获取行的数据
       isShowGroupAddDialog: false,
       isShowRunnerGroupEdit: false,
+      isShowNetworkIpMaskDialog: false,
+      groupNetworkList: [],
       runnerGroupData: {},
       runnerManageDialog: {
         type: 'modal',
@@ -292,6 +308,14 @@ export default {
       let textList = '';
       textList = list.slice(3);
       return textList;
+    },
+    openNetworkIpMaskDialog(groupNetworkList) {
+      this.isShowNetworkIpMaskDialog = true;
+      this.groupNetworkList = groupNetworkList;
+    },
+    closeNetworkIpMaskDialog() {
+      this.isShowNetworkIpMaskDialog = false;
+      this.groupNetworkList = [];
     }
   },
   computed: {},
-- 
Gitee