Industrial-image-management-system---web/src/views/system-resource/device-management/approval/components/ApprovalSearch.vue

<template>
  <div class="approval-search-container">
    <a-form layout="inline" :model="searchForm" class="search-form">
      <a-form-item label="设备名称">
        <a-input 
          v-model="searchForm.equipmentName" 
          placeholder="请输入设备名称" 
          allow-clear
          style="width: 200px"
          @input="debouncedSearch"
        />
      </a-form-item>
      
      <a-form-item label="申请人">
        <a-input 
          v-model="searchForm.applicantName" 
          placeholder="请输入申请人" 
          allow-clear
          style="width: 150px"
          @input="debouncedSearch"
        />
      </a-form-item>
      
      <a-form-item label="业务类型">
        <a-select 
          v-model="searchForm.businessType" 
          placeholder="请选择业务类型" 
          allow-clear
          style="width: 150px"
          @change="debouncedSearch"
        >
          <a-option value="">全部</a-option>
          <a-option :value="BusinessType.PROCUREMENT">采购</a-option>
          <a-option :value="BusinessType.BORROW">借用</a-option>
          <a-option :value="BusinessType.RETURN">归还</a-option>
        </a-select>
      </a-form-item>
      
      <a-form-item label="审批状态">
        <a-select 
          v-model="searchForm.approvalStatus" 
          placeholder="请选择状态" 
          allow-clear
          style="width: 150px"
          @change="debouncedSearch"
        >
          <a-option value="">全部</a-option>
          <a-option :value="ApprovalStatus.PENDING">待审批</a-option>
          <a-option :value="ApprovalStatus.APPROVED">已通过</a-option>
          <a-option :value="ApprovalStatus.REJECTED">已拒绝</a-option>
        </a-select>
      </a-form-item>
      
      <a-form-item label="申请时间">
        <a-range-picker 
          v-model="dateRange"
          style="width: 240px"
          @change="handleDateChange"
        />
      </a-form-item>
      
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="search" :loading="loading">
            <template #icon><icon-search /></template>
            搜索
          </a-button>
          <a-button @click="reset" :loading="loading">
            <template #icon><icon-refresh /></template>
            重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon'
import type { EquipmentApprovalListReq } from '@/apis/equipment/type'
import { ApprovalStatus, BusinessType } from '@/apis/equipment/type'

// 防抖函数
const debounce = (func: Function, delay: number) => {
  let timeoutId: NodeJS.Timeout
  return (...args: any[]) => {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => func.apply(null, args), delay)
  }
}

defineOptions({ name: 'ApprovalSearch' })

// Props
interface Props {
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
})

// Emits
const emit = defineEmits<{
  search: [params: EquipmentApprovalListReq]
  reset: []
}>()

// 搜索表单
const searchForm = reactive<EquipmentApprovalListReq>({
  equipmentName: '',
  applicantName: '',
  businessType: undefined,
  approvalStatus: undefined,
  applyTimeStart: '',
  applyTimeEnd: ''
})

// 日期范围
const dateRange = ref<[string, string] | null>(null)

// 防抖搜索函数
const debouncedSearch = debounce(() => {
  search()
}, 300)

// 搜索
const search = () => {
  console.log('🔍 ApprovalSearch - 搜索按钮被点击')
  console.log('🔍 ApprovalSearch - 搜索表单数据:', searchForm)
  console.log('🔍 ApprovalSearch - 搜索表单数据类型:', typeof searchForm)
  console.log('🔍 ApprovalSearch - 搜索表单的键值对:')
  Object.entries(searchForm).forEach(([key, value]) => {
    console.log(`  ${key}: ${value} (${typeof value})`)
  })

  // 构建搜索参数
  const searchParams: EquipmentApprovalListReq = {
    equipmentName: searchForm.equipmentName || undefined,
    applicantName: searchForm.applicantName || undefined,
    businessType: searchForm.businessType,
    approvalStatus: searchForm.approvalStatus,
    applyTimeStart: searchForm.applyTimeStart,
    applyTimeEnd: searchForm.applyTimeEnd
  }

  console.log('🔍 ApprovalSearch - 发送的搜索参数:', searchParams)
  console.log('🔍 ApprovalSearch - 发送参数的类型:', typeof searchParams)
  console.log('🔍 ApprovalSearch - 发送参数的键值对:')
  Object.entries(searchParams).forEach(([key, value]) => {
    console.log(`  ${key}: ${value} (${typeof value})`)
  })

  emit('search', searchParams)
}

// 重置
const reset = () => {
  console.log('🔄 ApprovalSearch - 重置操作')
  
  // 重置表单
  Object.assign(searchForm, {
    equipmentName: '',
    applicantName: '',
    businessType: undefined,
    approvalStatus: undefined,
    applyTimeStart: '',
    applyTimeEnd: ''
  })
  
  // 重置日期范围
  dateRange.value = null
  
  emit('reset')
}

// 处理日期变化
const handleDateChange = (dates: [string, string] | null) => {
  if (dates && dates.length === 2) {
    searchForm.applyTimeStart = dates[0]
    searchForm.applyTimeEnd = dates[1]
  } else {
    searchForm.applyTimeStart = ''
    searchForm.applyTimeEnd = ''
  }
  debouncedSearch()
}

// 监听loading状态
watch(() => props.loading, (newVal) => {
  console.log('🔄 ApprovalSearch - loading状态变化:', newVal)
})
</script>

<style scoped lang="scss">
.approval-search-container {
  // 确保搜索区域有良好的背景对比度
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
  border: 1px solid #e8e8e8;
  
  .search-form {
    .arco-form-item {
      margin-bottom: 0;
      margin-right: 16px;
      
      .arco-form-item-label {
        font-weight: 500;
        color: var(--color-text-1);
        margin-right: 8px;
      }
    }
    
    .arco-input,
    .arco-select,
    .arco-picker {
      border-radius: 4px;
      
      // 确保输入框文字颜色清晰可见
      .arco-input-inner {
        color: #333 !important;
        font-weight: 500;
      }
      
      // 确保占位符文字颜色清晰
      .arco-input-inner::placeholder {
        color: #666 !important;
        font-weight: 400;
      }
      
      // 确保选择框文字颜色清晰
      .arco-select-view-input {
        color: #333 !important;
        font-weight: 500;
      }
      
      // 确保选择框占位符颜色清晰
      .arco-select-view-placeholder {
        color: #666 !important;
        font-weight: 400;
      }
      
      // 确保日期选择器文字颜色清晰
      .arco-picker-input {
        color: #333 !important;
        font-weight: 500;
      }
      
      // 确保日期选择器占位符颜色清晰
      .arco-picker-input::placeholder {
        color: #666 !important;
        font-weight: 400;
      }
      
      // 确保所有输入框在聚焦时有更好的对比度
      &:focus-within {
        .arco-input-inner,
        .arco-select-view-input,
        .arco-picker-input {
          color: #000 !important;
          font-weight: 600;
        }
      }
      
      // 确保输入框在悬停时有更好的对比度
      &:hover {
        .arco-input-inner,
        .arco-select-view-input,
        .arco-picker-input {
          color: #000 !important;
        }
      }
    }
    
    .arco-btn {
      border-radius: 4px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .approval-search-container {
    .search-form {
      .arco-form-item {
        margin-bottom: 12px;
        margin-right: 0;
        width: 100%;
        
        .arco-input,
        .arco-select,
        .arco-picker {
          width: 100% !important;
        }
      }
    }
  }
}
</style>