497 lines
14 KiB
Vue
497 lines
14 KiB
Vue
<template>
|
|
<div class="equipment-search-container">
|
|
<!-- 搜索按钮 -->
|
|
<div class="search-trigger">
|
|
<a-button type="primary" @click="showSearchModal = true">
|
|
<template #icon>
|
|
<IconSearch />
|
|
</template>
|
|
搜索设备
|
|
</a-button>
|
|
</div>
|
|
|
|
<!-- 搜索弹窗 -->
|
|
<a-modal
|
|
v-model:visible="showSearchModal"
|
|
title="设备搜索"
|
|
width="1000px"
|
|
:footer="false"
|
|
@cancel="handleCancel"
|
|
class="search-modal"
|
|
>
|
|
<div class="search-content">
|
|
<a-form layout="vertical" :model="searchForm" class="search-form">
|
|
<a-row :gutter="24">
|
|
<a-col :span="8">
|
|
<a-form-item label="设备名称">
|
|
<a-input
|
|
v-model="searchForm.equipmentName"
|
|
placeholder="请输入设备名称"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="设备类型">
|
|
<a-select
|
|
v-model="searchForm.equipmentType"
|
|
:options="equipmentTypeOptions"
|
|
placeholder="请选择设备类型"
|
|
allow-clear
|
|
@change="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="设备状态">
|
|
<a-select
|
|
v-model="searchForm.equipmentStatus"
|
|
:options="equipmentStatusOptions"
|
|
placeholder="请选择设备状态"
|
|
allow-clear
|
|
@change="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="24">
|
|
<a-col :span="8">
|
|
<a-form-item label="位置状态">
|
|
<a-select
|
|
v-model="searchForm.locationStatus"
|
|
:options="locationStatusOptions"
|
|
placeholder="请选择位置状态"
|
|
allow-clear
|
|
@change="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="健康状态">
|
|
<a-select
|
|
v-model="searchForm.healthStatus"
|
|
:options="healthStatusOptions"
|
|
placeholder="请选择健康状态"
|
|
allow-clear
|
|
@change="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="使用状态">
|
|
<a-select
|
|
v-model="searchForm.useStatus"
|
|
:options="useStatusOptions"
|
|
placeholder="请选择使用状态"
|
|
allow-clear
|
|
@change="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="24">
|
|
<a-col :span="8">
|
|
<a-form-item label="使用部门/人">
|
|
<a-input
|
|
v-model="searchForm.usingDepartment"
|
|
placeholder="请输入使用部门/人"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="负责人">
|
|
<a-input
|
|
v-model="searchForm.responsiblePerson"
|
|
placeholder="请输入负责人"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="维护人员">
|
|
<a-input
|
|
v-model="searchForm.maintenancePerson"
|
|
placeholder="请输入维护人员"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="24">
|
|
<a-col :span="8">
|
|
<a-form-item label="序列号">
|
|
<a-input
|
|
v-model="searchForm.equipmentSn"
|
|
placeholder="请输入序列号"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="资产编号">
|
|
<a-input
|
|
v-model="searchForm.assetCode"
|
|
placeholder="请输入资产编号"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="品牌">
|
|
<a-input
|
|
v-model="searchForm.brand"
|
|
placeholder="请输入品牌"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="24">
|
|
<a-col :span="8">
|
|
<a-form-item label="设备型号">
|
|
<a-input
|
|
v-model="searchForm.equipmentModel"
|
|
placeholder="请输入设备型号"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="物理位置">
|
|
<a-input
|
|
v-model="searchForm.physicalLocation"
|
|
placeholder="请输入物理位置"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="供应商">
|
|
<a-input
|
|
v-model="searchForm.supplierName"
|
|
placeholder="请输入供应商"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="24">
|
|
<a-col :span="8">
|
|
<a-form-item label="发票">
|
|
<a-input
|
|
v-model="searchForm.invoice"
|
|
placeholder="请输入发票"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="条码">
|
|
<a-input
|
|
v-model="searchForm.barcode"
|
|
placeholder="请输入条码"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="库存条码">
|
|
<a-input
|
|
v-model="searchForm.inventoryBarcode"
|
|
placeholder="请输入库存条码"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="24">
|
|
<a-col :span="12">
|
|
<a-form-item label="规格型号">
|
|
<a-input
|
|
v-model="searchForm.specification"
|
|
placeholder="请输入规格型号"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="资产备注">
|
|
<a-input
|
|
v-model="searchForm.assetRemark"
|
|
placeholder="请输入资产备注"
|
|
allow-clear
|
|
@input="debouncedSearch"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<!-- 搜索操作按钮 -->
|
|
<div class="search-actions">
|
|
<a-space>
|
|
<a-button type="primary" @click="handleSearch" :loading="loading">
|
|
<template #icon>
|
|
<IconSearch />
|
|
</template>
|
|
搜索
|
|
</a-button>
|
|
<a-button @click="handleReset">
|
|
<template #icon>
|
|
<IconRefresh />
|
|
</template>
|
|
重置
|
|
</a-button>
|
|
<a-button @click="handleCancel">
|
|
取消
|
|
</a-button>
|
|
</a-space>
|
|
</div>
|
|
</a-form>
|
|
</div>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } 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 showSearchModal = ref(false)
|
|
|
|
// 防抖函数
|
|
// 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: '',
|
|
equipmentStatus: '',
|
|
locationStatus: '',
|
|
healthStatus: '',
|
|
usingDepartment: '',
|
|
invoice: '',
|
|
barcode: '',
|
|
importer: '',
|
|
equipmentSn: '',
|
|
assetCode: '',
|
|
brand: '',
|
|
responsiblePerson: '',
|
|
useStatus: '',
|
|
equipmentModel: '',
|
|
specification: '',
|
|
physicalLocation: '',
|
|
supplierName: '',
|
|
maintenancePerson: '',
|
|
inventoryBarcode: '',
|
|
assetRemark: '',
|
|
})
|
|
|
|
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 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 })
|
|
showSearchModal.value = false
|
|
}
|
|
|
|
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')
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
showSearchModal.value = false
|
|
}
|
|
|
|
defineExpose({
|
|
reset: handleReset,
|
|
getSearchForm: () => ({ ...searchForm }),
|
|
showModal: () => { showSearchModal.value = true },
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.equipment-search-container {
|
|
.search-trigger {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
|
|
.search-modal {
|
|
.arco-modal-header {
|
|
padding: 20px 24px 16px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
.arco-modal-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--color-text-1);
|
|
}
|
|
}
|
|
|
|
.arco-modal-body {
|
|
padding: 24px;
|
|
}
|
|
}
|
|
|
|
.search-content {
|
|
.search-form {
|
|
.arco-form-item {
|
|
margin-bottom: 20px;
|
|
|
|
.arco-form-item-label {
|
|
font-weight: 500;
|
|
color: var(--color-text-1);
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.arco-input,
|
|
.arco-select {
|
|
border-radius: 6px;
|
|
border: 1px solid var(--color-border);
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
border-color: var(--color-primary-light-3);
|
|
}
|
|
|
|
&:focus,
|
|
&.arco-input-focus,
|
|
&.arco-select-focus {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.1);
|
|
}
|
|
}
|
|
|
|
.arco-input-inner {
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.arco-select-view {
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.arco-select-arrow {
|
|
color: var(--color-text-3);
|
|
}
|
|
|
|
.arco-input-inner::placeholder {
|
|
color: var(--color-text-3);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.arco-input-clear-btn {
|
|
color: var(--color-text-3);
|
|
|
|
&:hover {
|
|
color: var(--color-text-2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 32px;
|
|
padding-top: 24px;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
}
|
|
</style>
|