NEZ-1789 feat：ping,trace页面改为标签输入框

2022-04-14 17:41:00 +08:00
parent ff37d50c9a
commit d51e8833b2
6 changed files with 221 additions and 42 deletions
--- a/nezha-fronted/src/assets/css/components/page/tool/ping.scss
+++ b/nezha-fronted/src/assets/css/components/page/tool/ping.scss
@@ -1,4 +1,38 @@
 .ping{
+  .top-tool-left{
+    // align-items: center;
+  }
+  .ipInput{
+    width:250px;
+    min-height: 36px;
+    max-height: 62px;
+  }
+  .ti-tag-input{
+    background: transparent ;
+  }
+  .vue-tags-input,.ti-new-tag-input {
+    .ti-input {
+      min-height: 36px;
+      max-height: 62px;
+      overflow-y: auto;
+      box-sizing: border-box;
+      border-radius: 2px;
+      border: 1px solid $--button-icon-border-color !important;
+      .ti-tag.ti-valid {
+        background-color: $--value-background-color;
+        color: $--value-color;
+      }
+      .ti-new-tag-input {
+        color: $--color-text-regular !important;
+      }
+      .ti-tags{
+        .ti-tag{
+          word-break: break-all;
+        }
+      }
+    }
+    .ti-input:hover{}
+  }
  .choose{
    width: 50px !important;
    height: 36px !important;
@@ -37,9 +71,14 @@
      background: $--color-primary;
    }
  }
-
+  .main-container{
+    display: flex;
+    flex-direction: column;
+  }
  .nz-table2{
-    height: calc(100% - 64px) !important;
+    height: auto !important;
+    overflow: hidden;
+    flex: 1;
    .empty{
      width: 100%;
      height: 100%;
@@ -47,7 +86,7 @@
      justify-content: center;
      align-items: center;
      .el-steps{
-        width: 620px;
+        width: 600px;
      }
      .el-step__icon{
        width: 64px;
@@ -77,6 +116,7 @@
    }
    .data-wrap{
      height: 100%;
+      overflow: hidden;
      .data-top{
        width: 100%;
        padding-left: 15px;
@@ -95,6 +135,7 @@
      }
      .data-bottom{
        height: calc(100% - 50px) !important;
+        overflow: hidden;
        .details{
          padding: 20px;
        }
--- a/nezha-fronted/src/assets/css/components/page/tool/trace.scss
+++ b/nezha-fronted/src/assets/css/components/page/tool/trace.scss
@@ -1,4 +1,38 @@
 .trace{
+  .top-tool-left{
+    // align-items: center;
+  }
+  .ipInput{
+    width:250px;
+    min-height: 36px;
+    max-height: 62px;
+  }
+  .ti-tag-input{
+    background: transparent ;
+  }
+  .vue-tags-input,.ti-new-tag-input {
+    .ti-input {
+      min-height: 36px;
+      max-height: 62px;
+      overflow-y: auto;
+      box-sizing: border-box;
+      border-radius: 2px;
+      border: 1px solid $--button-icon-border-color !important;
+      .ti-tag.ti-valid {
+        background-color: $--value-background-color;
+        color: $--value-color;
+      }
+      .ti-new-tag-input {
+        color: $--color-text-regular !important;
+      }
+      .ti-tags{
+        .ti-tag{
+          word-break: break-all;
+        }
+      }
+    }
+    .ti-input:hover{}
+  }
  .choose{
    width: 50px !important;
    height: 36px !important;
@@ -37,9 +71,14 @@
      background: $--color-primary;
    }
  }
-
+  .main-container{
+    display: flex;
+    flex-direction: column;
+  }
  .nz-table2{
-    height: calc(100% - 64px) !important;
+    height: auto !important;
+    overflow: hidden;
+    flex: 1;
    .empty{
      width: 100%;
      height: 100%;
@@ -47,7 +86,7 @@
      justify-content: center;
      align-items: center;
      .el-steps{
-        width: 620px;
+        width: 600px;
      }
      .el-step__icon{
        width: 64px;
@@ -77,6 +116,7 @@
    }
    .data-wrap{
      height: 100%;
+      overflow: hidden;
      .data-top{
        width: 100%;
        padding-left: 15px;
@@ -95,6 +135,7 @@
      }
      .data-bottom{
        height: calc(100% - 50px) !important;
+        overflow: hidden;
        .details{
          padding: 20px;
        }
--- a/nezha-fronted/src/components/common/table/tool/pingTable.vue
+++ b/nezha-fronted/src/components/common/table/tool/pingTable.vue
@@ -67,35 +67,43 @@ export default {
        {
          label: this.$t('overall.dc'),
          prop: 'dc',
-          sortable: true
+          sortable: true,
+          minWidth: 200
        }, {
          label: this.$t('ping.sourceIp'),
          prop: 'source',
-          sortable: true
+          sortable: true,
+          minWidth: 200
        }, {
          label: this.$t('ping.targetIp'),
          prop: 'ip',
-          sortable: true
+          sortable: true,
+          minWidth: 200
        }, {
          label: this.$t('overall.state'),
          prop: 'state',
-          sortable: true
+          sortable: true,
+          width: 150
        }, {
          label: this.$t('ping.packetLossRate'),
          prop: 'rate',
-          sortable: true
+          sortable: true,
+          minWidth: 200
        }, {
          label: this.$t('ping.rttAverage'),
          prop: 'avg',
-          sortable: true
+          sortable: true,
+          minWidth: 200
        }, {
          label: this.$t('ping.rttMinimum'),
          prop: 'min',
-          sortable: true
+          sortable: true,
+          minWidth: 200
        }, {
          label: this.$t('ping.rttMaximum'),
          prop: 'max',
-          sortable: true
+          sortable: true,
+          minWidth: 200
        }
      ]
    }
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -18,7 +18,7 @@
        <button id="asset-filter" :class="[dataListLayout.indexOf('clickSearch') > -1?'is-focus':'' ]" class="top-tool-btn margin-r-10" @click.stop="showClickSearch">
          <i class="nz-icon nz-icon-funnel"></i>
        </button>
-        <pick-time v-model="searchTime" :sign="sign?sign:'message'" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
+        <pick-time v-model="searchTime" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
        <button id="roles-add" v-has="'alertMessage_view'" :title="$t('overall.exportExcelLower')" class="top-tool-btn margin-r-10"
                type="button" @click="showExportDialog">
          <i class="nz-icon-download1 nz-icon"></i>
@@ -177,7 +177,6 @@ export default {
  mixins: [dataListMixin, routerPathParams],
  data () {
    return {
-      sign:'',
      chartLoading: false,
      chartInfo: {},
      alertMessageNzTableHeightOffset: 242,
@@ -579,8 +578,6 @@ export default {
      })
    },
    messageDetail (row) {
-      this.sign = Number(row.alertRule.id)
-      console.log(this.sign);
      this.$get('/alert/rule/' + row.alertRule.id).then(res => {
        this.currentMsg = { ...row, alertRule: { ...res.data } }
        this.$nextTick(() => {
--- a/nezha-fronted/src/components/page/tool/ping.vue
+++ b/nezha-fronted/src/components/page/tool/ping.vue
@@ -5,7 +5,16 @@
      :from="fromRoute.ping"
    >
    <template v-slot:top-tool-left>
-      <el-input v-model="ip" size='medium' style="width:250px" :placeholder="$t('overall.placeHolder')+' IP/Hostname'"></el-input>
+      <vue-tags-input
+        class="ipInput"
+        v-model="ip"
+        :placeholder="$t('overall.placeHolder')+' IP'"
+        :add-from-paste="false"
+        :tags="tags"
+        @tags-changed="newTags => tags = newTags"
+        @before-adding-tag="value => beforeAddTag(value)"
+        @adding-duplicate="value => addDuplicate(value)"
+      />
      <el-popover
        placement="bottom"
        width="220"
@@ -58,7 +67,7 @@
        <el-steps align-center>
          <el-step>
            <span class="nz-icon nz-icon-edit" slot="icon"></span>
-            <p class="txt" slot="title">{{$t('overall.placeHolder')}} IP/Hostname</p>
+            <p class="txt" slot="title">{{$t('overall.placeHolder')}} IP</p>
          </el-step>
          <el-step>
            <span class="el-icon-more" slot="icon"></span>
@@ -73,7 +82,7 @@
      <!-- 存在任务id时展示表格 -->
      <div class="data-wrap" v-show="tid!==undefined">
        <div class="data-top">
-          <span>IP {{$t('ping.total')}}:{{total}}</span>
+          <span>{{$t('asset.total')}}:{{total}}</span>
          <span>{{$t('ping.done')}}:{{done}}</span>
          <span>{{$t('ping.progress')}}:{{process}}%</span>
        </div>
@@ -94,15 +103,20 @@
 </template>

 <script>
+import bus from '@/libs/bus'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import pingTable from '@/components/common/table/tool/pingTable'
+import VueTagsInput from '@johmun/vue-tags-input'
 import { positiveInteger } from '../../common/js/validate'
+const ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
+const ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
 export default {
  mixins: [dataListMixin],
  components: {
    nzDataList,
-    pingTable
+    pingTable,
+    VueTagsInput
  },
  data () {
    return {
@@ -112,6 +126,7 @@ export default {
      // 弹出框是否显示
      visible: false,
      ip: '',
+      tags: [],
      // 是否全选
      checkAll: true,
      isIndeterminate: false,
@@ -146,6 +161,27 @@ export default {
    this.getDataCenter()
  },
  methods: {
+    // 使用防抖是因为,防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
+    validateHost: bus.debounce(function () {
+      this.$message.error(this.$t('validate.host'))
+    },
+    50),
+    // 使用防抖是因为,防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
+    validateDuplicate: bus.debounce(function () {
+      this.$message.error(this.$t('ping.duplicate') + ' IP')
+    },
+    50),
+    // 添加标签之前
+    beforeAddTag ({ tag, addTag }) {
+      if (!ipv4.test(tag.text) && !ipv6.test(tag.text)) {
+        return this.validateHost()
+      }
+      addTag()
+    },
+    // 添加重复的标签
+    addDuplicate () {
+      return this.validateDuplicate()
+    },
    close () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
@@ -177,16 +213,25 @@ export default {
    },
    // 开始任务
    startTask () {
-      const ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
-      const ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
-      if (!ipv4.test(this.ip) && !ipv6.test(this.ip)) {
-        return this.$message.error(this.$t('validate.host'))
-      }
      if (!this.flag) {
        return false
      }
-      this.flag = false
-      this.getId()
+      setTimeout(() => {
+        if (this.ip) {
+          // 校验ip格式
+          if (!ipv4.test(this.ip) && !ipv6.test(this.ip)) {
+            return this.validateHost()
+          }
+          // 判断ip是否重复
+          if (this.tags.some(item => item.text === this.ip)) {
+            return this.validateDuplicate()
+          }
+        } else if (!this.tags.length) {
+          return this.validateHost()
+        }
+        this.flag = false
+        this.getId()
+      })
    },
    // 请求dataCenter
    getDataCenter () {
@@ -201,8 +246,9 @@ export default {
    // 请求任务id
    async getId () {
      this.loading = true
+      const ipArr = this.tags.map(item => item.text)
      const params = {
-        ip: this.ip,
+        ips: ipArr.join(','),
        dcIds: this.checked.join(','),
        timeout: this.ruleForm.timeout
      }
--- a/nezha-fronted/src/components/page/tool/trace.vue
+++ b/nezha-fronted/src/components/page/tool/trace.vue
@@ -5,7 +5,16 @@
      :from="fromRoute.trace"
    >
    <template v-slot:top-tool-left>
-      <el-input v-model="ip" size='medium' style="width:250px" :placeholder="$t('overall.placeHolder')+' IP/Hostname'"></el-input>
+      <vue-tags-input
+        class="ipInput"
+        v-model="ip"
+        :placeholder="$t('overall.placeHolder')+' IP'"
+        :add-from-paste="false"
+        :tags="tags"
+        @tags-changed="newTags => tags = newTags"
+        @before-adding-tag="value => beforeAddTag(value)"
+        @adding-duplicate="value => addDuplicate(value)"
+      />
      <el-popover
        placement="bottom"
        width="220"
@@ -64,7 +73,7 @@
        <el-steps align-center>
          <el-step>
            <span class="nz-icon nz-icon-edit" slot="icon"></span>
-            <p class="txt" slot="title">{{$t('overall.placeHolder')}} IP/Hostname</p>
+            <p class="txt" slot="title">{{$t('overall.placeHolder')}}IP</p>
          </el-step>
          <el-step>
            <span class="el-icon-more" slot="icon"></span>
@@ -79,7 +88,7 @@
      <!-- 存在任务id时展示表格 -->
      <div class="data-wrap" v-show="tid!==undefined">
        <div class="data-top">
-          <span>IP {{$t('ping.total')}}:{{total}}</span>
+          <span>{{$t('asset.total')}}:{{total}}</span>
          <span>{{$t('ping.done')}}:{{done}}</span>
          <span>{{$t('ping.progress')}}:{{process}}%</span>
        </div>
@@ -100,15 +109,20 @@
 </template>

 <script>
+import bus from '@/libs/bus'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import traceTable from '@/components/common/table/tool/traceTable'
+import VueTagsInput from '@johmun/vue-tags-input'
 import { positiveInteger } from '../../common/js/validate'
+const ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
+const ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
 export default {
  mixins: [dataListMixin],
  components: {
    nzDataList,
-    traceTable
+    traceTable,
+    VueTagsInput
  },
  data () {
    return {
@@ -118,6 +132,7 @@ export default {
      // 弹出框是否显示
      visible: false,
      ip: '',
+      tags: [],
      // 是否全选
      checkAll: true,
      isIndeterminate: false,
@@ -155,6 +170,27 @@ export default {
    this.getDataCenter()
  },
  methods: {
+    // 使用防抖是因为,防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
+    validateHost: bus.debounce(function () {
+      this.$message.error(this.$t('validate.host'))
+    },
+    50),
+    // 使用防抖是因为,防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
+    validateDuplicate: bus.debounce(function () {
+      this.$message.error(this.$t('ping.duplicate') + ' IP')
+    },
+    50),
+    // 添加标签之前
+    beforeAddTag ({ tag, addTag }) {
+      if (!ipv4.test(tag.text) && !ipv6.test(tag.text)) {
+        return this.validateHost()
+      }
+      addTag()
+    },
+    // 添加重复的标签
+    addDuplicate () {
+      return this.validateDuplicate()
+    },
    close () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
@@ -186,16 +222,25 @@ export default {
    },
    // 开始任务
    startTask () {
-      const ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
-      const ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
-      if (!ipv4.test(this.ip) && !ipv6.test(this.ip)) {
-        return this.$message.error(this.$t('validate.host'))
-      }
      if (!this.flag) {
        return false
      }
-      this.flag = false
-      this.getId()
+      setTimeout(() => {
+        if (this.ip) {
+          // 校验ip格式
+          if (!ipv4.test(this.ip) && !ipv6.test(this.ip)) {
+            return this.validateHost()
+          }
+          // 判断ip是否重复
+          if (this.tags.some(item => item.text === this.ip)) {
+            return this.validateDuplicate()
+          }
+        } else if (!this.tags.length) {
+          return this.validateHost()
+        }
+        this.flag = false
+        this.getId()
+      })
    },
    // 请求dataCenter
    getDataCenter () {
@@ -210,8 +255,9 @@ export default {
    // 请求任务id
    async getId () {
      this.loading = true
+      const ipArr = this.tags.map(item => item.text)
      const params = {
-        ip: this.ip,
+        ips: ipArr.join(','),
        dcIds: this.checked.join(','),
        maxHops: this.ruleForm.maxHops,
        timeout: this.ruleForm.timeout