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

<template>
  <div class="equipment-search-container">
    <a-card class="search-card" :bordered="false">
      <template #title>
        <div class="search-title">
          <IconSearch />
          <span>设备搜索</span>
        </div>
      </template>

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

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

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

          <a-form-item label="位置状态">
            <a-select
              v-model:value="searchForm.locationStatus"
              :options="locationStatusOptions"
              placeholder="请选择位置状态"
              allow-clear
              style="width: 150px"
            />
          </a-form-item>
        </div>

        <div class="search-row">
          <a-form-item label="健康状态">
            <a-select
              v-model:value="searchForm.healthStatus"
              :options="healthStatusOptions"
              placeholder="请选择健康状态"
              allow-clear
              style="width: 150px"
            />
          </a-form-item>

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

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

          <a-form-item label="条码">
            <a-input
              v-model:value="searchForm.barcode"
              placeholder="请输入条码"
              allow-clear
              style="width: 150px"
            />
          </a-form-item>
        </div>

        <div class="search-actions">
          <a-button type="primary" html-type="submit" :loading="loading">
            <template #icon>
              <IconSearch />
            </template>
            搜索
          </a-button>
          <a-button style="margin-left: 8px" @click="handleReset">
            <template #icon>
              <IconRefresh />
            </template>
            重置
          </a-button>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
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
}

// eslint-disable-next-line unused-imports/no-unused-vars
const props = withDefaults(defineProps<Props>(), {
  loading: false,
})

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

// 搜索表单数据
const searchForm = reactive<EquipmentPageQuery>({
  equipmentName: '',
  equipmentType: '',
  equipmentStatus: '',
  locationStatus: '',
  healthStatus: '',
  usingDepartment: '',
  invoice: '',
  barcode: '',
  importer: '',
})

// 选项数据
const equipmentTypeOptions = [
  { label: '计算机设备', value: 'computer' },
  { label: '网络设备', value: 'network' },
  { label: '存储设备', value: 'storage' },
  { label: '安全设备', value: 'security' },
  { label: '办公设备', value: 'office' },
  { label: '其他设备', value: 'other' },
]

const equipmentStatusOptions = [
  { label: '正常', value: 'normal' },
  { label: '维修中', value: 'repair' },
  { label: '报废', value: 'scrap' },
  { label: '闲置', value: 'idle' },
]

const locationStatusOptions = [
  { label: '在库', value: 'in_stock' },
  { label: '已分配', value: 'allocated' },
  { label: '外借中', value: 'borrowed' },
  { label: '维修中', value: 'repair' },
  { label: '已报废', value: 'scrapped' },
]

const healthStatusOptions = [
  { label: '良好', value: 'good' },
  { label: '一般', value: 'normal' },
  { label: '较差', value: 'poor' },
  { label: '故障', value: 'fault' },
]

// 搜索处理
const handleSearch = () => {
  emit('search', { ...searchForm })
}

// 重置处理
const handleReset = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key as keyof EquipmentPageQuery] = '' as any
  })
  emit('reset')
}

// 暴露方法给父组件
defineExpose({
  reset: handleReset,
  getSearchForm: () => ({ ...searchForm }),
})
</script>

<style lang="scss" scoped>
.equipment-search-container {
  .search-card {
    margin-bottom: 16px;

    .search-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
    }
  }

  .search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;

    .arco-form-item {
      margin-bottom: 0;
      flex: 0 0 auto;
    }
  }

  .search-actions {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
  }
}
</style>