From 6bab19d37b0174b1e4ca873c8e3fa4ac8179a588 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Tue, 2 Jul 2024 13:52:33 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-3492=20feat:=20=E6=9B=B4=E6=96=B0Data=20cen?=
 =?UTF-8?q?ter=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/common/rightBox/dcBox.scss |  38 ++
 .../src/assets/css/components/index.scss      |   1 +
 .../src/components/common/rightBox/dcBox.vue  | 379 ++++++++++++++----
 3 files changed, 330 insertions(+), 88 deletions(-)
 create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/dcBox.scss

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/dcBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/dcBox.scss
new file mode 100644
index 000000000..4e474c0ef
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/dcBox.scss
@@ -0,0 +1,38 @@
+.right-box-dc{
+  .subnet-list{
+    .subnet-row{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .subnet-addr{
+        width: 36%;
+      }
+      .subnet-remark{
+        width: 56%;
+      }
+      .subnet-del{
+        width: 5%;
+        height: 28px;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        i{
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .subnet-add{
+    width: 16px;
+    height: 18px;
+    line-height: 18px;
+    text-align: center;
+  }
+}
+.ipSubnet-pop{
+  font-size: 12px;
+  line-height: 16px;
+  p span:last-of-type{
+    margin-left: 8px;
+  }
+}
\ No newline at end of file
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index 0ac5a2ea4..88c661e11 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -62,6 +62,7 @@
 @import './common/rightBox/moduleBox.scss';
 @import './common/rightBox/pipelineSelect.scss';
 @import './common/rightBox/ipam.scss';
+@import './common/rightBox/dcBox.scss';
 @import './common/rightBox/assetMetaBox.scss';
 @import './common/rightBox/chartRightBox/chartRightBox.scss';
 @import './common/rightBox/mibBox.scss';
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index 5fd439b32..db8ff454b 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -1,78 +1,206 @@
 <template>
-  <div v-clickoutside="{obj:editDc, func: esc}" class="right-box right-box-dc">
-      <!-- begin--标题-->
-      <div class="right-box__header">
-        <div class="header__title">{{editDc.id ? ($t("config.dc.editDc")) : $t("overall.createDatacenter")}}</div>
-        <div class="header__operation">
-          <span v-cancel="{obj: editDc, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
-        </div>
+  <div
+    v-clickoutside="{ obj: editDc, func: esc }"
+    class="right-box right-box-dc"
+  >
+    <!-- begin--标题-->
+    <div class="right-box__header">
+      <div class="header__title">
+        {{
+          editDc.id ? $t("config.dc.editDc") : $t("overall.createDatacenter")
+        }}
       </div>
-      <!-- begin--表单-->
-      <div class="right-box__container">
-        <div class="container__form">
-          <el-form label-width="120px" size="small" :model="editDc" label-position = "top" :rules="rules" ref="dcForm">
-            <el-form-item :label='$t("overall.name")' prop="name">
-              <el-input placeholder="" maxlength="64" show-word-limit v-model="editDc.name" size="small" id="dc-box-input-name"></el-input>
-            </el-form-item>
-            <el-form-item :label='$t("asset.location")' prop="location">
-              <el-input placeholder="" maxlength="256" show-word-limit v-model="editDc.location" size="small" id="dc-box-input-location"></el-input>
-            </el-form-item>
-            <el-form-item :label='$t("config.dc.tel")' prop="tel">
-              <el-input placeholder="" maxlength="128" show-word-limit v-model="editDc.tel" size="small" id="dc-box-input-tel"></el-input>
-            </el-form-item>
-            <el-form-item :label='$t("config.dc.principal")' prop="principal">
-              <el-select value-key="id" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside right-box-select-width" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal">
-                <el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id" style="width: 620px">
-                  <span class="user-name" :title="item.name">{{item.name}}</span><span class="user-username" :title="item.username">@{{item.username}}</span>
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('config.system.basic.lnglat')" prop="lnglat">
-              <div style="display: flex">
-                <el-input v-model="editDc.lnglat" maxlength="256" placeholder="" size="small" style="width: calc(100% - 50px);margin-right: 20px;"></el-input>
-                <latlng-picker
-                  ref="latlngPicker"
-                  :append-to-body="false"
-                  :init-data='editDc.lnglat'
-                  :show-zoom="false"
-                  @lnglatChange="lnglatChange"
-                ></latlng-picker>
-              </div>
-            </el-form-item>
-            <el-form-item :label='$t("overall.remark")'>
-              <el-input id="dc-box-input-remark" v-model="editDc.remark" maxlength="256" show-word-limit type="textarea" size="small" :rows="2"></el-input>
-            </el-form-item>
-            <el-form-item :label='$t("overall.state")' prop="state">
-              <el-switch
-                id="dc-box-input-name"
-                v-model="editDc.state"
-                active-value="ON"
-                inactive-value="OFF">
-              </el-switch>
-            </el-form-item>
-          </el-form>
-        </div>
+      <div class="header__operation">
+        <span v-cancel="{ obj: editDc, func: esc }"
+          ><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i
+        ></span>
       </div>
-      <!--底部按钮-->
-      <div class="right-box__footer">
-        <button v-cancel="{obj:editDc,func:esc}" id="dc-box-esc" class="footer__btn footer__btn--light">
-          <span>{{$t('overall.cancel')}}</span>
-        </button>
-        <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="footer__btn" id="dc-box-save">
-          <span>{{$t('overall.save')}}</span>
-        </button>
-      </div>
-
     </div>
+    <!-- begin--表单-->
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form
+          label-width="120px"
+          size="small"
+          :model="editDc"
+          label-position="top"
+          :rules="rules"
+          ref="dcForm"
+        >
+          <el-form-item :label="$t('overall.name')" prop="name">
+            <el-input
+              placeholder=""
+              maxlength="64"
+              show-word-limit
+              v-model="editDc.name"
+              size="small"
+              id="dc-box-input-name"
+            ></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('asset.location')" prop="location">
+            <el-input
+              placeholder=""
+              maxlength="256"
+              show-word-limit
+              v-model="editDc.location"
+              size="small"
+              id="dc-box-input-location"
+            ></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('config.dc.tel')" prop="tel">
+            <el-input
+              placeholder=""
+              maxlength="128"
+              show-word-limit
+              v-model="editDc.tel"
+              size="small"
+              id="dc-box-input-tel"
+            ></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('config.dc.principal')" prop="principal">
+            <el-select
+              value-key="id"
+              class="right-box__select"
+              popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside right-box-select-width"
+              v-model="editDc.principal"
+              placeholder=""
+              size="small"
+              id="dc-box-input-principal"
+            >
+              <el-option
+                v-for="item in userData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                style="width: 620px"
+              >
+                <span class="user-name" :title="item.name">{{ item.name }}</span
+                ><span class="user-username" :title="item.username"
+                  >@{{ item.username }}</span
+                >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('config.system.basic.lnglat')" prop="lnglat">
+            <div style="display: flex">
+              <el-input
+                v-model="editDc.lnglat"
+                maxlength="256"
+                placeholder=""
+                size="small"
+                style="width: calc(100% - 50px); margin-right: 20px"
+              ></el-input>
+              <latlng-picker
+                ref="latlngPicker"
+                :append-to-body="false"
+                :init-data="editDc.lnglat"
+                :show-zoom="false"
+                @lnglatChange="lnglatChange"
+              ></latlng-picker>
+            </div>
+          </el-form-item>
+          <!-- IP subnet -->
+          <el-form-item>
+            <div slot="label">
+              <span>{{ $t("asset.ipSubnet") }}</span>
+              <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside ipSubnet-pop">
+                <div>
+                  <p style="margin-bottom:2px;">{{$t('overall.format')}}</p>
+                  <p><span>IPv4</span><span>x.x.x.x</span></p>
+                  <p><span>IPv4 CIDR</span><span>x.x.x.x/n</span></p>
+                  <p><span>IPv4 Range</span><span>x.x.x.x-y.y.y.y</span></p>
+                  <p><span>IPv6</span><span>x:x:x::x</span></p>
+                  <p><span>IPv6 CIDR</span><span>x:x:x::x/n</span></p>
+                  <p><span>IPv6 Range</span><span>x:x:x::x-y:y:y::y</span></p>
+                </div>
+                <span slot="reference">
+                  <i class="nz-icon nz-icon-info-normal" style="font-size: 14px;display: inline-block;"></i>
+                </span>
+              </el-popover>
+            </div>
+            <ul class="subnet-list">
+              <li class="subnet-row" v-for="(item, index) in editDc.subnet" :key="item.key">
+                <el-form-item
+                  class="subnet-addr"
+                  :prop="'subnet.' + index + '.addr'"
+                  :rules="[
+                    { required: true, message: $t('validate.required'), trigger: 'blur' },
+                    { validator: inputIpv, trigger: 'blur' }
+                  ]"
+                >
+                  <el-input v-model="item.addr" :placeholder="$t('overall.subnet')" size="mini" ></el-input>
+                </el-form-item>
+                <el-form-item
+                  class="subnet-remark"
+                  :prop="'subnet.' + index + '.remark'"
+                >
+                  <el-input v-model="item.remark" :placeholder="$t('overall.remarkOptional')" size="mini" ></el-input>
+                </el-form-item>
+                <div class="subnet-del">
+                  <i :title="$t('overall.delete')" class="nz-icon nz-icon-shanchu1" @click="delSubnet"></i>
+                </div>
+              </li>
+            </ul>
+            <div style="text-align: center;">
+              <span class="right-box-form-add subnet-add" :title="$t('tip.add')" type="button" @click="addSubnet">
+                <i class="nz-icon nz-icon-plus" style="font-size: 16px;"></i>
+              </span>
+            </div>
+          </el-form-item>
+          <el-form-item :label="$t('overall.remark')">
+            <el-input
+              id="dc-box-input-remark"
+              v-model="editDc.remark"
+              maxlength="256"
+              show-word-limit
+              type="textarea"
+              size="small"
+              :rows="2"
+            ></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('overall.state')" prop="state">
+            <el-switch
+              id="dc-box-input-name"
+              v-model="editDc.state"
+              active-value="ON"
+              inactive-value="OFF"
+            >
+            </el-switch>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <!--底部按钮-->
+    <div class="right-box__footer">
+      <button
+        v-cancel="{ obj: editDc, func: esc }"
+        id="dc-box-esc"
+        class="footer__btn footer__btn--light"
+      >
+        <span>{{ $t("overall.cancel") }}</span>
+      </button>
+      <button
+        :class="{ 'nz-btn-disabled': prevent_opt.save }"
+        :disabled="prevent_opt.save"
+        @click="save"
+        class="footer__btn"
+        id="dc-box-save"
+      >
+        <span>{{ $t("overall.save") }}</span>
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
 import latlngPicker from '../latlngPicker'
 import editRigthBox from '../mixin/editRigthBox'
 import { noSpecialChar, latlng } from '@/components/common/js/validate'
+import vm from '../../../entrance/app/main'
 
 const latitudeNum = /^[\-\+]?([1-8]?\d{1}\.\d{1,7}|90\.0{1,7}|[1-8]?\d{1}|90)$/ // 纬度正则验证
-const longitudeNum = /^[\-\+]?(0?\d{1,2}\.\d{1,7}|1[0-7]?\d{1}\.\d{1,7}|180\.0{1,7}|0?\d{1,2}|1[0-7]?\d{1}|180)$/ // 经度正则验证
+const longitudeNum =
+  /^[\-\+]?(0?\d{1,2}\.\d{1,7}|1[0-7]?\d{1}\.\d{1,7}|180\.0{1,7}|0?\d{1,2}|1[0-7]?\d{1}|180)$/ // 经度正则验证
 
 export default {
   name: 'dcBox',
@@ -86,14 +214,33 @@ export default {
   mixins: [editRigthBox],
   data () {
     return {
+      inputIpv (rule, value, callback) {
+        const Ipv4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/
+        const Ipv6 = /^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:)|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}(:[0-9A-Fa-f]{1,4}){1,2})|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){1,3})|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){1,4})|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){1,5})|([0-9A-Fa-f]{1,4}:(:[0-9A-Fa-f]{1,4}){1,6})|(:(:[0-9A-Fa-f]{1,4}){1,7})|(([0-9A-Fa-f]{1,4}:){6}(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])(\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){5}:(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])(\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}:(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])(\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}:(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])(\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}:(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])(\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])){3})|([0-9A-Fa-f]{1,4}:(:[0-9A-Fa-f]{1,4}){0,4}:(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])(\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])){3})|(:(:[0-9A-Fa-f]{1,4}){0,5}:(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])(\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])){3}))$/
+        setTimeout(() => {
+          if (Ipv4.test(value) || Ipv6.test(value)) {
+            callback()
+          } else {
+            callback(new Error(vm.$t('validate.address')))
+          }
+        }, 100)
+      },
       editDc: {},
       rules: {
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          },
           { validator: noSpecialChar, trigger: 'blur' }
         ],
         lnglat: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' },
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'change'
+          },
           { validator: latlng, trigger: 'change' }
         ]
       },
@@ -102,6 +249,16 @@ export default {
     }
   },
   methods: {
+    addSubnet () {
+      this.editDc.subnet?.push({
+        addr: '',
+        remark: '',
+        key: Date.now()
+      })
+    },
+    delSubnet (index) {
+      this.editDc.subnet.splice(index, 1)
+    },
     /* 关闭弹框 */
     esc (refresh) {
       this.prevent_opt.save = false
@@ -119,22 +276,31 @@ export default {
       this.prevent_opt.save = true
       this.$refs.dcForm.validate((valid) => {
         if (valid) {
+          const param = { ...this.editDc }
+          param.subnet.forEach((item) => {
+            delete item.key
+          })
           if (this.editDc.id) {
-            const param = { ...this.editDc }
             const attr = this.$refs.latlngPicker.getAttribute()
             param.latitude = attr.latitude
             param.longitude = attr.longitude
-            this.$put('/dc', param).then(response => {
+            this.$put('/dc', param).then((response) => {
               this.prevent_opt.save = false
               if (response.code === 200) {
-                this.messageShow(this.$t('tip.saveSuccess'), '', { dcId: response.data.id, cabinetBoxShow: true }, false, 'tip.cabinet', 'addCabinet')
+                this.messageShow(
+                  this.$t('tip.saveSuccess'),
+                  '',
+                  { dcId: response.data.id, cabinetBoxShow: true },
+                  false,
+                  'tip.cabinet',
+                  'addCabinet'
+                )
                 this.esc(true)
               } else {
                 this.$message.error(response.msg)
               }
             })
           } else {
-            const param = { ...this.editDc }
             if (param.area) {
               param.areaId = param.area.id
             }
@@ -147,10 +313,17 @@ export default {
             if (!latitudeNum.test(param.latitude)) {
               param.latitude = null
             }
-            this.$post('/dc', param).then(response => {
+            this.$post('/dc', param).then((response) => {
               this.prevent_opt.save = false
               if (response.code === 200) {
-                this.messageShow(this.$t('tip.saveSuccess'), '', { dcId: response.data.id, cabinetBoxShow: true }, true, 'tip.cabinet', 'addCabinet')
+                this.messageShow(
+                  this.$t('tip.saveSuccess'),
+                  '',
+                  { dcId: response.data.id, cabinetBoxShow: true },
+                  true,
+                  'tip.cabinet',
+                  'addCabinet'
+                )
                 this.esc(true)
               } else {
                 this.$message.error(response.msg)
@@ -168,25 +341,33 @@ export default {
     },
     /* 删除 */
     del () {
-      if (this.prevent_opt.save) { return }
+      if (this.prevent_opt.save) {
+        return
+      }
       this.prevent_opt.save = true
       this.$confirm(this.$t('tip.confirmDelete'), {
         confirmButtonText: this.$t('tip.yes'),
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
-      }).then(() => {
-        this.$delete('/dc' + this.editDc.id).then(response => {
-          this.prevent_opt.save = false
-          if (response.code === 200) {
-            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.esc(true)
-          } else {
-            this.$message.error(response.msg)
-          }
-        })
-      }).catch(() => {
-        this.prevent_opt.save = false
       })
+        .then(() => {
+          this.$delete('/dc' + this.editDc.id).then((response) => {
+            this.prevent_opt.save = false
+            if (response.code === 200) {
+              this.$message({
+                duration: 1000,
+                type: 'success',
+                message: this.$t('tip.deleteSuccess')
+              })
+              this.esc(true)
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        })
+        .catch(() => {
+          this.prevent_opt.save = false
+        })
     },
     selectArea (area) {
       this.editDc.area.id = area.id
@@ -199,20 +380,42 @@ export default {
       deep: true,
       handler (n, o) {
         this.isEdit = true
+        const params = JSON.parse(JSON.stringify(n))
         if (!n.id) {
-          this.editDc = { ...JSON.parse(JSON.stringify(n)), lnglat: `${n.longitude},${n.latitude}` }
+          this.editDc = {
+            ...params,
+            lnglat: `${n.longitude},${n.latitude}`
+          }
           this.$nextTick(() => {
-            this.$refs.latlngPicker.setLnglat(this.editDc.latitude, this.editDc.longitude)
+            this.$refs.latlngPicker.setLnglat(
+              this.editDc.latitude,
+              this.editDc.longitude
+            )
           })
         } else {
-          this.editDc = { ...JSON.parse(JSON.stringify(n)), lnglat: `${n.longitude},${n.latitude}` }
+          this.editDc = {
+            ...params,
+            lnglat: `${n.longitude},${n.latitude}`
+          }
           if (!this.editDc.remark) {
             this.editDc.remark = ''
           }
           this.$nextTick(() => {
-            this.$refs.latlngPicker.setLnglat(this.editDc.latitude, this.editDc.longitude)
+            this.$refs.latlngPicker.setLnglat(
+              this.editDc.latitude,
+              this.editDc.longitude
+            )
           })
         }
+        if (!this.editDc.subnet) {
+          this.$set(this.editDc, 'subnet', [])
+        }
+        this.editDc.subnet.map(item => {
+          return {
+            ...item,
+            key: new Date()
+          }
+        })
       }
     }
   }