From 51dda0e95a555358e69312bef6b1b0296b43f6a7 Mon Sep 17 00:00:00 2001
From: zxr <271055687@qq.com>
Date: Mon, 23 Mar 2026 14:35:49 +0800
Subject: [PATCH] fix

---
 src/api/ops/datacenter.ts               |  5 ++
 src/api/ops/rack.ts                     |  8 +++
 src/components/search-form/index.vue    |  1 +
 src/components/search-form/types.ts     |  2 +
 src/views/ops/pages/dc/server/index.vue | 81 +++++++++++++++++++++++--
 5 files changed, 92 insertions(+), 5 deletions(-)

diff --git a/src/api/ops/datacenter.ts b/src/api/ops/datacenter.ts
index caba645..dab87dd 100644
--- a/src/api/ops/datacenter.ts
+++ b/src/api/ops/datacenter.ts
@@ -1,5 +1,10 @@
 import { request } from "@/api/request";
 
+/** 获取所有已启用数据中心（下拉，不分页） */
+export const fetchDatacenterAll = (params?: { keyword?: string }) => {
+  return request.get("/Assets/v1/datacenter/all", { params });
+};
+
 /** 获取数据中心列表（分页） */
 export const fetchDatacenterList = (data?: {
   page?: number;
diff --git a/src/api/ops/rack.ts b/src/api/ops/rack.ts
index 757131c..ce4cb7d 100644
--- a/src/api/ops/rack.ts
+++ b/src/api/ops/rack.ts
@@ -15,6 +15,14 @@ export const fetchRackList = (data?: {
   return request.post("/Assets/v1/rack/list", data || {});
 };
 
+/** 根据数据中心获取机柜列表（下拉，不分页） */
+export const fetchRackListByDatacenter = (
+  datacenterId: number,
+  params?: { name?: string }
+) => {
+  return request.get(`/Assets/v1/rack/datacenter/${datacenterId}`, { params });
+};
+
 /** 获取机柜详情 */
 export const fetchRackDetail = (id: number) => {
   return request.get(`/Assets/v1/rack/detail/${id}`);
diff --git a/src/components/search-form/index.vue b/src/components/search-form/index.vue
index 0066960..d2ec127 100644
--- a/src/components/search-form/index.vue
+++ b/src/components/search-form/index.vue
@@ -23,6 +23,7 @@
                 v-model="localModel[item.field]"
                 :options="item.options"
                 :placeholder="item.placeholder || '请选择'"
+                :disabled="item.disabled"
                 allow-clear
               />
               <!-- 日期范围选择器 -->
diff --git a/src/components/search-form/types.ts b/src/components/search-form/types.ts
index eb01163..e426247 100644
--- a/src/components/search-form/types.ts
+++ b/src/components/search-form/types.ts
@@ -7,4 +7,6 @@ export interface FormItem {
   span?: number
   placeholder?: string
   options?: SelectOptionData[]
+  /** 仅对 select 生效 */
+  disabled?: boolean
 }
diff --git a/src/views/ops/pages/dc/server/index.vue b/src/views/ops/pages/dc/server/index.vue
index 869d064..5afdd03 100644
--- a/src/views/ops/pages/dc/server/index.vue
+++ b/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">