Merge pull request #639 from veops/dev_ui_ipam

feat(ui): ipam - add batch assign
veops · Nov 13, 2024 · f28ad4d · f28ad4d
2 parents 6f13321 + d2698b0
commit f28ad4d
Show file tree

Hide file tree

Showing 5 changed files with 237 additions and 73 deletions.
diff --git a/cmdb-ui/src/modules/cmdb/lang/en.js b/cmdb-ui/src/modules/cmdb/lang/en.js
@@ -837,7 +837,13 @@ if __name__ == "__main__":
         onlineRatio: 'Online Ratio',
         scanEnable: 'Scan Enable',
         lastScanTime: 'Last Scan Time',
-        isSuccess: 'Is Success'
+        isSuccess: 'Is Success',
+        batchAssign: 'Batch Assign',
+        batchAssignInProgress: 'Assign in batches, {total} in total, {successNum} successful, {errorNum} failed',
+        batchAssignCompleted: 'Batch Assign Completed',
+        batchRecycle: 'Batch Recycle',
+        batchRecycleInProgress: 'Recycle in batches, {total} in total, {successNum} successful, {errorNum} failed',
+        batchRecycleCompleted: 'Batch Recycle Completed',
     }
 }
 export default cmdb_en
diff --git a/cmdb-ui/src/modules/cmdb/lang/zh.js b/cmdb-ui/src/modules/cmdb/lang/zh.js
@@ -836,7 +836,13 @@ if __name__ == "__main__":
         onlineRatio: '在线率',
         scanEnable: '是否扫描',
         lastScanTime: '最后扫描时间',
-        isSuccess: '是否成功'
+        isSuccess: '是否成功',
+        batchAssign: '批量分配',
+        batchAssignInProgress: '正在批量分配，共{total}个，成功{successNum}个，失败{errorNum}个',
+        batchAssignCompleted: '批量分配已完成',
+        batchRecycle: '批量回收',
+        batchRecycleInProgress: '正在批量回收，共{total}个，成功{successNum}个，失败{errorNum}个',
+        batchRecycleCompleted: '批量回收已完成',
     }
 }
 export default cmdb_zh
diff --git a/cmdb-ui/src/modules/cmdb/views/ipam/modules/address/assignForm.vue b/cmdb-ui/src/modules/cmdb/views/ipam/modules/address/assignForm.vue
@@ -3,6 +3,7 @@
     :visible="visible"
     :width="700"
     :title="$t('cmdb.ipam.addressAssign')"
+    :confirmLoading="confirmLoading"
     @ok="handleOk"
     @cancel="handleCancel"
   >
@@ -17,7 +18,7 @@
       <a-form-model-item
         label="IP"
       >
-        {{ ipData.ip }}
+        <span class="assign-form-ip" >{{ ipList.join(', ') }}</span>
       </a-form-model-item>
       <a-form-model-item
         v-for="(item) in formList"
@@ -80,37 +81,29 @@ export default {
     attrList: {
       type: Array,
       default: () => []
-    },
-    subnetData: {
-      type: Object,
-      default: () => {}
     }
   },
   data() {
     return {
       visible: false,
       ipData: {},
+      ipList: [],
       nodeId: -1,
       formList: [],
       form: {},
       formRules: {},
-      statusSelectOption: [
-        {
-          value: 0,
-          label: 'cmdb.ipam.assigned'
-        },
-        {
-          value: 2,
-          label: 'cmdb.ipam.reserved'
-        }
-      ]
+      confirmLoading: false,
+      isBatch: false
     }
   },
   methods: {
     async open({
-      ipData,
+      ipList = [],
+      ipData = null,
       nodeId,
     }) {
+      this.isBatch = ipList.length !== 0
+      this.ipList = ipList.length ? _.cloneDeep(ipList) : [ipData?.ip ?? '']
       this.ipData = ipData || {}
       this.nodeId = nodeId || -1
       this.visible = true
@@ -237,7 +230,8 @@ export default {
       this.form = {}
       this.formRules = {}
       this.formList = []
-      this.visible = false
+      this.confirmLoading = false
+      this.isBatch = false
 
       this.$refs.assignFormRef.clearValidate()
     },
@@ -248,16 +242,35 @@ export default {
           return
         }
 
-        await postIPAMAddress({
-          ips: [this.ipData.ip],
-          parent_id: this.nodeId,
-          ...this.form,
-          subnet_mask: this?.ipData?.subnet_mask ?? undefined,
-          gateway: this?.ipData?.gateway ?? undefined
-        })
+        this.confirmLoading = true
+
+        if (!this.isBatch) {
+          await postIPAMAddress({
+            ips: this.ipList,
+            parent_id: this.nodeId,
+            ...this.form,
+            subnet_mask: this?.ipData?.subnet_mask ?? undefined,
+            gateway: this?.ipData?.gateway ?? undefined
+          })
+
+          this.$emit('ok')
+        } else {
+          const ipChunk = _.chunk(this.ipList, 5)
+          const paramsList = ipChunk.map((ips) => ({
+            ips,
+            parent_id: this.nodeId,
+            ...this.form,
+            subnet_mask: this?.ipData?.subnet_mask ?? undefined,
+            gateway: this?.ipData?.gateway ?? undefined
+          }))
+          this.$emit('batchAssign', {
+            paramsList,
+            ipList: this.ipList
+          })
+        }
 
-        this.$emit('ok')
         this.handleCancel()
+        this.confirmLoading = false
       })
     },
 
@@ -280,5 +293,12 @@ export default {
   max-height: 400px;
   overflow-y: auto;
   overflow-x: hidden;
+
+  &-ip {
+    max-height: 100px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: block;
+  }
 }
 </style>