添加了故障名称筛选区域:

在对话框上方添加了一个筛选区域,包含标签和下拉选择框
使用 Element Plus 的 el-select 组件,支持清除和选择功能
添加了相关的响应式变量:

selectedBreakdownName :存储当前选择的故障名称
uniqueBreakdownNames :存储所有唯一的故障名称列表
filteredRepairRecords :存储筛选后的维修记录
master
huangjinysf 2 months ago
parent 82e777fcc6
commit df809650ff

@ -49,10 +49,27 @@
:title="`${selectedEquipmentCode} 维修记录`" :title="`${selectedEquipmentCode} 维修记录`"
width="80%" width="80%"
:before-close="handleRepairRecordsClose"> :before-close="handleRepairRecordsClose">
<!-- 故障名称筛选 -->
<div class="breakdown-filter-container">
<span class="filter-label">故障名称</span>
<el-select
v-model="selectedBreakdownName"
placeholder="全部故障"
clearable
@change="filterRecordsByBreakdownName"
>
<el-option
v-for="name in uniqueBreakdownNames"
:key="name"
:label="name"
:value="name"
/>
</el-select>
</div>
<div v-loading="repairRecordsLoading" class="repair-records-container"> <div v-loading="repairRecordsLoading" class="repair-records-container">
<div v-if="selectedRepairRecords.length > 0"> <div v-if="selectedRepairRecords.length > 0">
<el-table <el-table
:data="selectedRepairRecords" :data="filteredRepairRecords"
stripe stripe
border border
style="width: 100%" style="width: 100%"
@ -121,7 +138,10 @@ const repairSummaryList = ref([])
const repairRecordsDialogVisible = ref(false) const repairRecordsDialogVisible = ref(false)
const repairRecordsLoading = ref(false) const repairRecordsLoading = ref(false)
const selectedRepairRecords = ref([]) const selectedRepairRecords = ref([])
const filteredRepairRecords = ref([])
const selectedEquipmentCode = ref('') const selectedEquipmentCode = ref('')
const selectedBreakdownName = ref('')
const uniqueBreakdownNames = ref([])
// //
watch(() => props.selectedEquipmentType, (newVal, oldVal) => { watch(() => props.selectedEquipmentType, (newVal, oldVal) => {
@ -203,19 +223,41 @@ const fetchRepairRecords = (equipmentCode) => {
.then(data => { .then(data => {
if (data.code === 200 && data.data) { if (data.code === 200 && data.data) {
selectedRepairRecords.value = data.data selectedRepairRecords.value = data.data
filteredRepairRecords.value = data.data
//
const breakdownNames = [...new Set(data.data.map(record => record.breakdown_name).filter(Boolean))]
uniqueBreakdownNames.value = breakdownNames
} else { } else {
selectedRepairRecords.value = [] selectedRepairRecords.value = []
filteredRepairRecords.value = []
uniqueBreakdownNames.value = []
} }
}) })
.catch(error => { .catch(error => {
console.error('维修记录API调用失败:', error) console.error('维修记录API调用失败:', error)
selectedRepairRecords.value = [] selectedRepairRecords.value = []
filteredRepairRecords.value = []
uniqueBreakdownNames.value = []
}) })
.finally(() => { .finally(() => {
repairRecordsLoading.value = false repairRecordsLoading.value = false
}) })
} }
//
const filterRecordsByBreakdownName = () => {
if (!selectedBreakdownName.value) {
//
filteredRepairRecords.value = [...selectedRepairRecords.value]
} else {
//
filteredRepairRecords.value = selectedRepairRecords.value.filter(
record => record.breakdown_name === selectedBreakdownName.value
)
}
}
// //
const handleRepairRecordsClose = () => { const handleRepairRecordsClose = () => {
repairRecordsDialogVisible.value = false repairRecordsDialogVisible.value = false
@ -286,6 +328,19 @@ const calculateRepairDuration = (applyTime, repairTime) => {
color: #66b1ff; color: #66b1ff;
} }
/* 故障名称筛选区域样式 */
.breakdown-filter-container {
display: flex;
align-items: center;
margin-bottom: 15px;
padding: 0 10px;
}
.filter-label {
margin-right: 10px;
white-space: nowrap;
}
/* 维修记录对话框样式 */ /* 维修记录对话框样式 */
.repair-records-container { .repair-records-container {
padding: 10px 0; padding: 10px 0;

Loading…
Cancel
Save