优化分页查询无法绑定数据模型问题

2025-08-01 16:24:33 +08:00 · 2025-08-01 16:24:33 +08:00 · eaec8547aa
parent 543ab3d027
commit eaec8547aa
2 changed files with 175 additions and 21 deletions
--- a/src/views/system-resource/device-management/components/EquipmentSearch.vue
+++ b/src/views/system-resource/device-management/components/EquipmentSearch.vue
@ -8,44 +8,48 @@
        </div>
      </template>

-      <a-form layout="inline" :model="searchForm" @submit="handleSearch">
+      <a-form layout="inline" :model="searchForm">
        <div class="search-row">
          <a-form-item label="设备名称">
            <a-input
-              v-model:value="searchForm.equipmentName"
+              v-model="searchForm.equipmentName"
              placeholder="请输入设备名称"
              allow-clear
              style="width: 200px"
+              @input="debouncedSearch"
            />
          </a-form-item>

          <a-form-item label="设备类型">
            <a-select
-              v-model:value="searchForm.equipmentType"
+              v-model="searchForm.equipmentType"
              :options="equipmentTypeOptions"
              placeholder="请选择设备类型"
              allow-clear
              style="width: 150px"
+              @change="debouncedSearch"
            />
          </a-form-item>

          <a-form-item label="设备状态">
            <a-select
-              v-model:value="searchForm.equipmentStatus"
+              v-model="searchForm.equipmentStatus"
              :options="equipmentStatusOptions"
              placeholder="请选择设备状态"
              allow-clear
              style="width: 150px"
+              @change="debouncedSearch"
            />
          </a-form-item>

          <a-form-item label="位置状态">
            <a-select
-              v-model:value="searchForm.locationStatus"
+              v-model="searchForm.locationStatus"
              :options="locationStatusOptions"
              placeholder="请选择位置状态"
              allow-clear
              style="width: 150px"
+              @change="debouncedSearch"
            />
          </a-form-item>
        </div>
@ -53,44 +57,133 @@
        <div class="search-row">
          <a-form-item label="健康状态">
            <a-select
-              v-model:value="searchForm.healthStatus"
+              v-model="searchForm.healthStatus"
              :options="healthStatusOptions"
              placeholder="请选择健康状态"
              allow-clear
              style="width: 150px"
+              @change="debouncedSearch"
            />
          </a-form-item>

          <a-form-item label="使用部门/人">
            <a-input
-              v-model:value="searchForm.usingDepartment"
+              v-model="searchForm.usingDepartment"
              placeholder="请输入使用部门/人"
              allow-clear
              style="width: 200px"
+              @input="debouncedSearch"
            />
          </a-form-item>

          <a-form-item label="发票">
            <a-input
-              v-model:value="searchForm.invoice"
+              v-model="searchForm.invoice"
              placeholder="请输入发票"
              allow-clear
              style="width: 150px"
+              @input="debouncedSearch"
            />
          </a-form-item>

          <a-form-item label="条码">
            <a-input
-              v-model:value="searchForm.barcode"
+              v-model="searchForm.barcode"
              placeholder="请输入条码"
              allow-clear
              style="width: 150px"
+              @input="debouncedSearch"
+            />
+          </a-form-item>
+        </div>
+
+        <div class="search-row">
+          <a-form-item label="序列号">
+            <a-input
+              v-model="searchForm.equipmentSn"
+              placeholder="请输入序列号"
+              allow-clear
+              style="width: 200px"
+              @input="debouncedSearch"
+            />
+          </a-form-item>
+
+          <a-form-item label="资产编号">
+            <a-input
+              v-model="searchForm.assetCode"
+              placeholder="请输入资产编号"
+              allow-clear
+              style="width: 150px"
+              @input="debouncedSearch"
+            />
+          </a-form-item>
+
+          <a-form-item label="品牌">
+            <a-input
+              v-model="searchForm.brand"
+              placeholder="请输入品牌"
+              allow-clear
+              style="width: 150px"
+              @input="debouncedSearch"
+            />
+          </a-form-item>
+
+          <a-form-item label="负责人">
+            <a-input
+              v-model="searchForm.responsiblePerson"
+              placeholder="请输入负责人"
+              allow-clear
+              style="width: 150px"
+              @input="debouncedSearch"
+            />
+          </a-form-item>
+        </div>
+
+        <div class="search-row">
+          <a-form-item label="使用状态">
+            <a-select
+              v-model="searchForm.useStatus"
+              :options="useStatusOptions"
+              placeholder="请选择使用状态"
+              allow-clear
+              style="width: 150px"
+              @change="debouncedSearch"
+            />
+          </a-form-item>
+
+          <a-form-item label="设备型号">
+            <a-input
+              v-model="searchForm.equipmentModel"
+              placeholder="请输入设备型号"
+              allow-clear
+              style="width: 200px"
+              @input="debouncedSearch"
+            />
+          </a-form-item>
+
+          <a-form-item label="物理位置">
+            <a-input
+              v-model="searchForm.physicalLocation"
+              placeholder="请输入物理位置"
+              allow-clear
+              style="width: 200px"
+              @input="debouncedSearch"
+            />
+          </a-form-item>
+
+          <a-form-item label="供应商">
+            <a-input
+              v-model="searchForm.supplierName"
+              placeholder="请输入供应商"
+              allow-clear
+              style="width: 150px"
+              @input="debouncedSearch"
            />
          </a-form-item>
        </div>

        <div class="search-actions">
-          <a-button type="primary" html-type="submit" :loading="loading">
+          <a-button type="primary" :loading="loading" @click="handleSearch">
            <template #icon>
              <IconSearch />
            </template>
@ -113,7 +206,6 @@ import { reactive } from 'vue'
 import { IconRefresh, IconSearch } from '@arco-design/web-vue/es/icon'
 import type { EquipmentPageQuery } from '@/types/equipment.d'

-// 定义组件属性
 interface Props {
  loading?: boolean
 }
@ -123,13 +215,22 @@ const props = withDefaults(defineProps<Props>(), {
  loading: false,
 })

-// 定义事件
 const emit = defineEmits<{
  search: [params: EquipmentPageQuery]
  reset: []
 }>()

-// 搜索表单数据
+// 防抖函数
+// eslint-disable-next-line ts/no-unsafe-function-type
+const debounce = (func: Function, delay: number) => {
+  let timeoutId: NodeJS.Timeout
+  return (...args: any[]) => {
+    clearTimeout(timeoutId)
+    // eslint-disable-next-line prefer-spread
+    timeoutId = setTimeout(() => func.apply(null, args), delay)
+  }
+}
+
 const searchForm = reactive<EquipmentPageQuery>({
  equipmentName: '',
  equipmentType: '',
@ -140,9 +241,20 @@ const searchForm = reactive<EquipmentPageQuery>({
  invoice: '',
  barcode: '',
  importer: '',
+  equipmentSn: '',
+  assetCode: '',
+  brand: '',
+  responsiblePerson: '',
+  useStatus: '',
+  equipmentModel: '',
+  specification: '',
+  physicalLocation: '',
+  supplierName: '',
+  maintenancePerson: '',
+  inventoryBarcode: '',
+  assetRemark: '',
 })

-// 选项数据
 const equipmentTypeOptions = [
  { label: '计算机设备', value: 'computer' },
  { label: '网络设备', value: 'network' },
@ -174,20 +286,35 @@ const healthStatusOptions = [
  { label: '故障', value: 'fault' },
 ]

-// 搜索处理
+const useStatusOptions = [
+  { label: '空闲中', value: '0' },
+  { label: '使用中', value: '1' },
+]
+
+// 防抖搜索函数
+const debouncedSearch = debounce(() => {
+  console.log('🔍 EquipmentSearch - 防抖搜索触发')
+  console.log('🔍 EquipmentSearch - 搜索表单数据:', searchForm)
+  emit('search', { ...searchForm })
+}, 300)
+
 const handleSearch = () => {
+  console.log('🔍 EquipmentSearch - 搜索按钮被点击')
+  console.log('🔍 EquipmentSearch - 搜索表单数据:', searchForm)
+  console.log('🔍 EquipmentSearch - 发送的搜索参数:', { ...searchForm })
  emit('search', { ...searchForm })
 }

-// 重置处理
 const handleReset = () => {
+  console.log('🔄 EquipmentSearch - 重置按钮被点击')
+  console.log('🔄 EquipmentSearch - 重置前的表单数据:', { ...searchForm })
  Object.keys(searchForm).forEach((key) => {
    searchForm[key as keyof EquipmentPageQuery] = '' as any
  })
+  console.log('🔄 EquipmentSearch - 重置后的表单数据:', { ...searchForm })
  emit('reset')
 }

-// 暴露方法给父组件
 defineExpose({
  reset: handleReset,
  getSearchForm: () => ({ ...searchForm }),
--- a/src/views/system-resource/device-management/index.vue
+++ b/src/views/system-resource/device-management/index.vue
@ -144,7 +144,8 @@ import type { EquipmentPageQuery, EquipmentResp } from '@/types/equipment.d'

 defineOptions({ name: 'EquipmentCenter' })

-// 搜索表单引用
+// 当前搜索参数
+const currentSearchParams = ref<EquipmentPageQuery>({})

 // 表格数据
 const tableData = ref<EquipmentResp[]>([])
@ -473,6 +474,11 @@ const transformBackendData = (data: any[]) => {

 // 加载数据
 const loadData = async (searchParams?: EquipmentPageQuery) => {
+  console.log('📊 loadData - 开始加载数据')
+  console.log('📊 loadData - 接收到的搜索参数:', searchParams)
+  console.log('📊 loadData - 搜索参数类型:', typeof searchParams)
+  console.log('📊 loadData - 当前分页配置:', pagination)
+
  loading.value = true
  try {
    const params = {
@ -481,8 +487,17 @@ const loadData = async (searchParams?: EquipmentPageQuery) => {
      ...(searchParams || {}), // 添加搜索条件
    }

-    console.log('发送的请求参数:', params)
-    console.log('当前分页配置:', pagination)
+    console.log('📊 loadData - 构建的完整请求参数:', params)
+    console.log('📊 loadData - 请求参数类型:', typeof params)
+    console.log('📊 loadData - 请求参数是否为对象:', params && typeof params === 'object')
+
+    // 详细打印每个搜索字段
+    if (searchParams) {
+      console.log('📊 loadData - 搜索字段详情:')
+      Object.entries(searchParams).forEach(([key, value]) => {
+        console.log(`  ${key}: ${value} (类型: ${typeof value})`)
+      })
+    }

    const res = await pageEquipment(params)

@ -530,13 +545,25 @@ const loadData = async (searchParams?: EquipmentPageQuery) => {

 // 搜索
 const handleSearch = (searchParams: EquipmentPageQuery) => {
+  console.log('🔍 主组件 - 接收到的搜索参数:', searchParams)
+  console.log('🔍 主组件 - 搜索参数类型:', typeof searchParams)
+  console.log('🔍 主组件 - 搜索参数是否为对象:', searchParams && typeof searchParams === 'object')
+
  pagination.current = 1
+  currentSearchParams.value = { ...searchParams }
+
+  console.log('🔍 主组件 - 保存的当前搜索参数:', currentSearchParams.value)
+  console.log('🔍 主组件 - 准备调用 loadData，传递参数:', searchParams)
+
  loadData(searchParams)
 }

 // 重置
 const handleReset = () => {
+  console.log('🔄 主组件 - 重置操作')
  pagination.current = 1
+  currentSearchParams.value = {}
+  console.log('🔄 主组件 - 清空后的当前搜索参数:', currentSearchParams.value)
  loadData()
 }

@ -544,7 +571,7 @@ const handleReset = () => {
 const handleTableChange = (pag: any) => {
  pagination.current = pag.current || 1
  pagination.pageSize = pag.pageSize || 10
-  loadData()
+  loadData(currentSearchParams.value)
 }

 // 新增