fix

src/views/ops/pages/dc/server/index.vue

@@ -179,7 +179,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { Message, Modal } from '@arco-design/web-vue'
 import { 
@@ -202,6 +202,8 @@ import {
   fetchServerList,
   deleteServer,
 } from '@/api/ops/server'
+import { fetchDatacenterAll } from '@/api/ops/datacenter'
+import { fetchRackListByDatacenter } from '@/api/ops/rack'
 
 const router = useRouter()
 
@@ -428,8 +430,74 @@ const pagination = reactive({
   total: 0,
 })
 
-// 表单项配置
-const formItems = computed<FormItem[]>(() => searchFormConfig)
+const datacenterSelectOptions = ref<{ label: string; value: number }[]>([])
+const rackSelectOptions = ref<{ label: string; value: number }[]>([])
+
+const loadDatacenterOptions = async () => {
+  try {
+    const res: any = await fetchDatacenterAll()
+    if (res.code === 0) {
+      const list = res.details?.data ?? res.data ?? res.details ?? []
+      const rows = Array.isArray(list) ? list : []
+      datacenterSelectOptions.value = rows.map((d: any) => ({
+        label: d.name || d.code || String(d.id),
+        value: d.id,
+      }))
+    }
+  } catch (error) {
+    console.error('加载数据中心列表失败:', error)
+    Message.error('加载数据中心列表失败')
+  }
+}
+
+const loadRackOptions = async (datacenterId: number) => {
+  try {
+    const res: any = await fetchRackListByDatacenter(datacenterId)
+    if (res.code === 0) {
+      const list = res.details?.data ?? res.data ?? res.details ?? []
+      const rows = Array.isArray(list) ? list : []
+      rackSelectOptions.value = rows.map((r: any) => ({
+        label: r.floor?.name ? `${r.name}（${r.floor.name}）` : r.name || r.code || String(r.id),
+        value: r.id,
+      }))
+    }
+  } catch (error) {
+    console.error('加载机柜列表失败:', error)
+    Message.error('加载机柜列表失败')
+    rackSelectOptions.value = []
+  }
+}
+
+watch(
+  () => formModel.value.datacenter_id,
+  (newId, oldId) => {
+    if (newId !== oldId) {
+      formModel.value.rack_id = undefined
+    }
+    if (newId) {
+      loadRackOptions(newId)
+    } else {
+      rackSelectOptions.value = []
+    }
+  }
+)
+
+// 表单项配置（数据中心：GET /Assets/v1/datacenter/all；机柜：GET /Assets/v1/rack/datacenter/:id）
+const formItems = computed<FormItem[]>(() =>
+  searchFormConfig.map((item) => {
+    if (item.field === 'datacenter_id') {
+      return { ...item, options: datacenterSelectOptions.value }
+    }
+    if (item.field === 'rack_id') {
+      return {
+        ...item,
+        options: rackSelectOptions.value,
+        disabled: !formModel.value.datacenter_id,
+      }
+    }
+    return item
+  })
+)
 
 // 表格列配置
 const columns = computed(() => columnsConfig)
@@ -525,6 +593,7 @@ const handleReset = () => {
     rack_id: undefined,
     status: undefined,
   }
+  rackSelectOptions.value = []
   pagination.current = 1
   fetchServers()
 }
@@ -625,8 +694,10 @@ const handleDelete = async (record: any) => {
   }
 }
 
-// 初始化加载数据
-fetchServers()
+onMounted(() => {
+  loadDatacenterOptions()
+  fetchServers()
+})
 </script>
 
 <script lang="ts">