feat(ui): rack - supported configuration device list display direction

Author: LHRUN

cmdb-ui/src/modules/cmdb/views/dcim/components/rackDetail/rackView/index.vue

@@ -5,7 +5,7 @@
         viewType="front"
         :countList="countList"
         :unitList="unitList"
-        :rackId="rackData._id"
+        :rackData="rackData"
         @migrateDevice="migrateDevice"
         @openDeviceForm="openDeviceForm"
         @draggable="handleDraggable"
@@ -19,7 +19,7 @@
         viewType="rear"
         :countList="countList"
         :unitList="unitList"
-        :rackId="rackData._id"
+        :rackData="rackData"
         @migrateDevice="migrateDevice"
         @openDeviceForm="openDeviceForm"
         @draggable="handleDraggable"
@@ -52,7 +52,7 @@
 import _ from 'lodash'
 import { v4 as uuidv4 } from 'uuid'
 import { putDevice } from '@/modules/cmdb/api/dcim.js'
-import { DEVICE_CITYPE_NAME } from '../../../constants.js'
+import { DEVICE_CITYPE_NAME, U_NUMBERING_DIRECTION } from '../../../constants.js'
 
 import RackUnitView from './rackUnitView.vue'
 import DeviceForm from './deviceForm/index.vue'
@@ -194,8 +194,20 @@ export default {
         }
       }
 
-      this.unitList = _.reverse(unitList)
-      this.countList = Array.from({ length: this.rackData.u_count }, (_, i) => this.rackData.u_count - i)
+      /**
+       * 根据U位编号方向，调整U位列表和U位数量列表
+       * bottom_to_top: 底部到顶部
+       * top_to_bottom: 顶部到底部
+       * 如果为空，则默认为 bottom_to_top
+       */
+      const u_numbering_direction = this?.rackData?.u_numbering_direction || U_NUMBERING_DIRECTION.BOTTOM_TO_TOP
+      if (u_numbering_direction === U_NUMBERING_DIRECTION.TOP_TO_BOTTOM) {
+        this.unitList = unitList
+        this.countList = Array.from({ length: this.rackData.u_count }, (_, i) => i + 1)
+      } else {
+        this.unitList = _.reverse(unitList)
+        this.countList = Array.from({ length: this.rackData.u_count }, (_, i) => this.rackData.u_count - i)
+      }
     },
 
     getDeviceViewImage(name) {

cmdb-ui/src/modules/cmdb/views/dcim/components/rackDetail/rackView/rackUnitView.vue

@@ -160,6 +160,7 @@
 <script>
 import _ from 'lodash'
 import { deleteDevice } from '@/modules/cmdb/api/dcim.js'
+import { U_NUMBERING_DIRECTION } from '../../../constants.js'
 
 import RackHeader from './rackHeader/index.vue'
 import draggable from 'vuedraggable'
@@ -187,9 +188,9 @@ export default {
       type: Array,
       default: () => []
     },
-    rackId: {
-      type: Number,
-      default: 0
+    rackData: {
+      type: Object,
+      default: () => {}
     }
   },
   data() {
@@ -213,8 +214,14 @@ export default {
       const sliceUnitList = this.unitList.slice(0, index)
       const unitCount = sliceUnitList.reduce((acc, cur) => acc + cur.unitCount, 0)
 
+      const u_numbering_direction = this?.rackData?.u_numbering_direction
+      let unitStart = this.countList.length - unitCount
+      if (u_numbering_direction === U_NUMBERING_DIRECTION.TOP_TO_BOTTOM) {
+        unitStart = unitCount + 1
+      }
+
       this.$emit('openDeviceForm', {
-        unitStart: this.countList.length - unitCount
+        unitStart
       })
     },
 
@@ -283,10 +290,11 @@ export default {
         title: this.$t('warning'),
         content,
         onOk: () => {
-          deleteDevice(
-            this.rackId,
-            data.id
-          ).then(() => {
+          if (!this.rackData._id) {
+            return
+          }
+
+          deleteDevice(this.rackData._id, data.id).then(() => {
             this.$message.success(this.$t('deleteSuccess'))
             this.$emit('refreshRackAllData')
           })
@@ -383,6 +391,7 @@ export default {
           background: linear-gradient(90deg, rgba(0, 0, 0, 0.80) 0%, rgba(102, 102, 102, 0.80) 100%);
           align-items: center;
           justify-content: center;
+          z-index: 1;
 
           &-btn {
             font-size: 14px;

cmdb-ui/src/modules/cmdb/views/dcim/constants.js

@@ -22,6 +22,16 @@ export const DEVICE_CITYPE_NAME = {
   RAID: 'raid'
 }
 
+/**
+ * U位编号方向
+ * bottom_to_top: 底部到顶部
+ * top_to_bottom: 顶部到底部
+ */
+export const U_NUMBERING_DIRECTION = {
+  BOTTOM_TO_TOP: 'bottom_to_top',
+  TOP_TO_BOTTOM: 'top_to_bottom'
+}
+
 const createTypeNameMap = (typeObj, typeNameObj) => {
   const map = {}