三拍：工单页高级检索
由于一开始使用的是查询四个表的所有结果后进行过滤，因此在着使用过滤的方法不使用sql的模糊查询
<template>
<div class="all-orders-container">
<el-card class="orders-card">
<template #header>
<div class="card-header">
<span>工单管理</span>
<div class="header-right">
<!-- 添加过滤输入框 -->
<el-input
v-model="filters.orderId"
placeholder="工单号"
clearable
style="width: 120px; margin-right: 15px;"
@clear="handleFilter"
@change="handleFilter"
/>
<el-input
v-model="filters.deviceId"
placeholder="设备ID"
clearable
style="width: 120px; margin-right: 15px;"
@clear="handleFilter"
@change="handleFilter"
/>
<el-select v-model="currentType" @change="handleTypeChange" style="margin-right: 15px;width: 120px">
<el-option label="全部" value="all" />
<el-option label="巡检工单" value="inspection" />
<el-option label="保养工单" value="maintenance" />
<el-option label="检测工单" value="testing" />
<el-option label="维修工单" value="repair" />
</el-select>
<el-button type="primary" @click="refreshOrders">刷新</el-button>
</div>
</div>
</template>
<el-table :data="orderList" style="width: 100%" v-loading="loading">
<el-table-column prop="orderId" label="工单号" width="120" />
<el-table-column prop="deviceId" label="设备ID" width="120" />
<el-table-column prop="engineerId" label="工程师ID" width="120" />
<el-table-column prop="description" label="描述" />
<el-table-column prop="orderType" label="工单类型" width="100">
<template #default="scope">
<el-tag>{{ getOrderTypeText(scope.row.orderType) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template #default="scope">
<el-tag :type="getStatusType(scope.row.status)">
{{ getStatusText(scope.row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<template #default="scope">
<el-button
size="small"
type="primary"
@click="handleViewDetail(scope.row)"
>
查看详情
</el-button>
</template>
</el-table-column>
<el-table-column prop="deviceType" label="设备类型" width="120" />
<el-table-column prop="deviceLocation" label="设备位置" width="120" />
</el-table>
</el-card>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getAllOrders as getInspectionOrders } from '@/api/inspectionOrder'
import { getAllOrders as getMaintenanceOrders } from '@/api/maintenanceOrder'
import { getAllOrders as getTestingOrders } from '@/api/testingOrder'
import { getRepairOrderList } from '@/api/repairOrder'
import { getFault } from '@/api/deviceFault'
import { getDevice } from '@/api/device'
import { getPlanById as getInspectionPlan } from '@/api/inspection'
import { getPlanById as getMaintenancePlan } from '@/api/maintenance'
import { getPlanById as getTestingPlan } from '@/api/testing'
const router = useRouter()
const loading = ref(false)
const orderList = ref([])
const currentType = ref('all')
// 获取工单列表
// 在 script setup 中添加获取用户信息的逻辑
const getCurrentUserId = () => {
const userInfo = localStorage.getItem('userInfo')
if (userInfo) {
try {
const user = JSON.parse(userInfo)
return user.id
} catch (error) {
console.error('解析用户信息失败:', error)
return null
}
}
return null
}
// 修改 fetchOrders 函数中的工单处理逻辑
// const fetchOrders = async () => {
// loading.value = true
// try {
// let orders = []
// const currentUserId = getCurrentUserId()
// if (!currentUserId) {
// ElMessage.warning('未获取到用户信息')
// return
// }
// if (currentType.value === 'all' || currentType.value === 'inspection') {
// const inspectionRes = await getInspectionOrders()
// if (inspectionRes.code === 200) {
// const inspectionOrders = await Promise.all(inspectionRes.data
// .filter(order => order.engineerId === currentUserId) // 筛选当前用户的工单
// .map(async (order) => {
// try {
// // 获取巡检计划
// const planRes = await getInspectionPlan(order.planId)
// if (planRes.code === 200 && planRes.data) {
// // 获取设备信息
// const deviceRes = await getDevice(planRes.data.deviceId)
// return {
// ...order,
// orderType: 'inspection',
// description: order.inspectionDesc,
// deviceId: planRes.data.deviceId,
// deviceType: deviceRes.data?.deviceType || '未知',
// deviceLocation: deviceRes.data?.location || '未知'
// }
// }
// return {
// ...order,
// orderType: 'inspection',
// description: order.inspectionDesc
// }
// } catch (error) {
// console.error('获取巡检设备信息失败:', error)
// return {
// ...order,
// orderType: 'inspection',
// description: order.inspectionDesc
// }
// }
// }))
// orders = orders.concat(inspectionOrders)
// }
// }
// if (currentType.value === 'all' || currentType.value === 'maintenance') {
// const maintenanceRes = await getMaintenanceOrders()
// if (maintenanceRes.code === 200) {
// const maintenanceOrders = await Promise.all(maintenanceRes.data
// .filter(order => order.engineerId === currentUserId) // 筛选当前用户的工单
// .map(async (order) => {
// try {
// const planRes = await getMaintenancePlan(order.planId)
// if (planRes.code === 200 && planRes.data) {
// const deviceRes = await getDevice(planRes.data.deviceId)
// return {
// ...order,
// orderType: 'maintenance',
// description: order.maintenanceDesc,
// deviceId: planRes.data.deviceId,
// deviceType: deviceRes.data?.deviceType || '未知',
// deviceLocation: deviceRes.data?.location || '未知'
// }
// }
// return {
// ...order,
// orderType: 'maintenance',
// description: order.maintenanceDesc
// }
// } catch (error) {
// console.error('获取保养设备信息失败:', error)
// return {
// ...order,
// orderType: 'maintenance',
// description: order.maintenanceDesc
// }
// }
// }))
// orders = orders.concat(maintenanceOrders)
// }
// }
// if (currentType.value === 'all' || currentType.value === 'testing') {
// const testingRes = await getTestingOrders()
// if (testingRes.code === 200) {
// const testingOrders = await Promise.all(testingRes.data
// .filter(order => order.engineerId === currentUserId) // 筛选当前用户的工单
// .map(async (order) => {
// try {
// const planRes = await getTestingPlan(order.planId)
// if (planRes.code === 200 && planRes.data) {
// const deviceRes = await getDevice(planRes.data.deviceId)
// return {
// ...order,
// orderType: 'testing',
// description: order.testingDesc,
// deviceId: planRes.data.deviceId,
// deviceType: deviceRes.data?.deviceType || '未知',
// deviceLocation: deviceRes.data?.location || '未知'
// }
// }
// return {
// ...order,
// orderType: 'testing',
// description: order.testingDesc
// }
// } catch (error) {
// console.error('获取检测设备信息失败:', error)
// return {
// ...order,
// orderType: 'testing',
// description: order.testingDesc
// }
// }
// }))
// orders = orders.concat(testingOrders)
// }
// }
// if (currentType.value === 'all' || currentType.value === 'repair') {
// const repairRes = await getRepairOrderList()
// if (repairRes.code === 200) {
// const repairOrders = await Promise.all(repairRes.data
// .filter(order => order.engineerId === currentUserId) // 筛选当前用户的工单
// .map(async (order) => {
// try {
// const faultRes = await getFault(order.faultId)
// if (faultRes.data?.deviceId) {
// const deviceRes = await getDevice(faultRes.data.deviceId)
// return {
// ...order,
// orderType: 'repair',
// deviceId: faultRes.data.deviceId,
// description: faultRes.data?.faultDesc || order.repairDesc,
// deviceType: deviceRes.data?.deviceType || '未知',
// deviceLocation: deviceRes.data?.location || '未知'
// }
// }
// return {
// ...order,
// orderType: 'repair',
// description: order.repairDesc
// }
// } catch (error) {
// return {
// ...order,
// orderType: 'repair',
// description: order.repairDesc
// }
// }
// }))
// orders = orders.concat(repairOrders)
// }
// }
// orderList.value = orders
// if (orders.length === 0) {
// ElMessage.info('暂无工单数据')
// }
// } catch (error) {
// console.error('获取工单列表失败:', error)
// ElMessage.error('获取工单列表失败')
// } finally {
// loading.value = false
// }
// }
// 处理工单类型切换
const handleTypeChange = () => {
// 清空过滤条件
filters.value = {
orderId: '',
deviceId: ''
}
// 重新获取数据
fetchOrders()
}
// 修改刷新函数
const refreshOrders = () => {
// 清空过滤条件
filters.value = {
orderId: '',
deviceId: ''
}
// 重置工单类型为全部
currentType.value = 'all'
// 重新获取数据
fetchOrders()
}
// 获取工单类型显示文本
const getOrderTypeText = (type) => {
const typeMap = {
'inspection': '巡检工单',
'maintenance': '保养工单',
'testing': '检测工单',
'repair': '维修工单'
}
return typeMap[type] || type
}
// 获取状态标签类型
const getStatusType = (status) => {
const statusMap = {
'待处理': 'warning',
'处理中': 'primary',
'已完成': 'success',
'pending': 'warning',
'processing': 'primary',
'completed': 'success'
}
return statusMap[status] || 'info'
}
// 获取状态显示文本
const getStatusText = (status) => {
const statusMap = {
'pending': '待处理',
'processing': '处理中',
'completed': '已完成'
}
return statusMap[status] || status
}
// 查看详情
const handleViewDetail = (row) => {
const routeMap = {
'inspection': '/inspection-detail',
'maintenance': '/maintenance-detail',
'testing': '/testing-detail',
'repair': '/work-detail' // 已经正确设置为 work-detail
}
const route = routeMap[row.orderType]
if (route) {
router.push(`${route}/${row.orderId}`)
}
}
onMounted(() => {
fetchOrders()
})
// 添加 filters ref
const filters = ref({
orderId: '',
deviceId: ''
})
// 添加过滤方法
const filterOrders = (orders) => {
if (!orders) return []
return orders.filter(order => {
const orderIdMatch = !filters.value.orderId ||
(order.orderId && order.orderId.toString().toLowerCase().includes(filters.value.orderId.toLowerCase()))
const deviceIdMatch = !filters.value.deviceId ||
(order.deviceId && order.deviceId.toString().toLowerCase().includes(filters.value.deviceId.toLowerCase()))
return orderIdMatch && deviceIdMatch
})
}
// 添加过滤处理函数
// const handleFilter = () => {
// fetchOrders()
// }
// 修改 fetchOrders 函数末尾的数据处理部分
const fetchOrders = async () => {
loading.value = true
try {
let orders = []
const currentUserId = getCurrentUserId()
if (!currentUserId) {
ElMessage.warning('未获取到用户信息')
return
}
if (currentType.value === 'all' || currentType.value === 'inspection') {
const inspectionRes = await getInspectionOrders()
if (inspectionRes.code === 200) {
const inspectionOrders = await Promise.all(inspectionRes.data
.filter(order => order.engineerId === currentUserId) // 筛选当前用户的工单
.map(async (order) => {
try {
// 获取巡检计划
const planRes = await getInspectionPlan(order.planId)
if (planRes.code === 200 && planRes.data) {
// 获取设备信息
const deviceRes = await getDevice(planRes.data.deviceId)
return {
...order,
orderType: 'inspection',
description: order.inspectionDesc,
deviceId: planRes.data.deviceId,
deviceType: deviceRes.data?.deviceType || '未知',
deviceLocation: deviceRes.data?.location || '未知'
}
}
return {
...order,
orderType: 'inspection',
description: order.inspectionDesc
}
} catch (error) {
console.error('获取巡检设备信息失败:', error)
return {
...order,
orderType: 'inspection',
description: order.inspectionDesc
}
}
}))
orders = orders.concat(inspectionOrders)
}
}
if (currentType.value === 'all' || currentType.value === 'maintenance') {
const maintenanceRes = await getMaintenanceOrders()
if (maintenanceRes.code === 200) {
const maintenanceOrders = await Promise.all(maintenanceRes.data
.filter(order => order.engineerId === currentUserId) // 筛选当前用户的工单
.map(async (order) => {
try {
const planRes = await getMaintenancePlan(order.planId)
if (planRes.code === 200 && planRes.data) {
const deviceRes = await getDevice(planRes.data.deviceId)
return {
...order,
orderType: 'maintenance',
description: order.maintenanceDesc,
deviceId: planRes.data.deviceId,
deviceType: deviceRes.data?.deviceType || '未知',
deviceLocation: deviceRes.data?.location || '未知'
}
}
return {
...order,
orderType: 'maintenance',
description: order.maintenanceDesc
}
} catch (error) {
console.error('获取保养设备信息失败:', error)
return {
...order,
orderType: 'maintenance',
description: order.maintenanceDesc
}
}
}))
orders = orders.concat(maintenanceOrders)
}
}
if (currentType.value === 'all' || currentType.value === 'testing') {
const testingRes = await getTestingOrders()
if (testingRes.code === 200) {
const testingOrders = await Promise.all(testingRes.data
.filter(order => order.engineerId === currentUserId) // 筛选当前用户的工单
.map(async (order) => {
try {
const planRes = await getTestingPlan(order.planId)
if (planRes.code === 200 && planRes.data) {
const deviceRes = await getDevice(planRes.data.deviceId)
return {
...order,
orderType: 'testing',
description: order.testingDesc,
deviceId: planRes.data.deviceId,
deviceType: deviceRes.data?.deviceType || '未知',
deviceLocation: deviceRes.data?.location || '未知'
}
}
return {
...order,
orderType: 'testing',
description: order.testingDesc
}
} catch (error) {
console.error('获取检测设备信息失败:', error)
return {
...order,
orderType: 'testing',
description: order.testingDesc
}
}
}))
orders = orders.concat(testingOrders)
}
}
if (currentType.value === 'all' || currentType.value === 'repair') {
const repairRes = await getRepairOrderList()
if (repairRes.code === 200) {
const repairOrders = await Promise.all(repairRes.data
.filter(order => order.engineerId === currentUserId) // 筛选当前用户的工单
.map(async (order) => {
try {
const faultRes = await getFault(order.faultId)
if (faultRes.data?.deviceId) {
const deviceRes = await getDevice(faultRes.data.deviceId)
return {
...order,
orderType: 'repair',
deviceId: faultRes.data.deviceId,
description: faultRes.data?.faultDesc || order.repairDesc,
deviceType: deviceRes.data?.deviceType || '未知',
deviceLocation: deviceRes.data?.location || '未知'
}
}
return {
...order,
orderType: 'repair',
description: order.repairDesc
}
} catch (error) {
return {
...order,
orderType: 'repair',
description: order.repairDesc
}
}
}))
orders = orders.concat(repairOrders)
}
}
// 存储原始数据
const allOrders = orders
// 应用过滤器
orderList.value = allOrders.filter(order => {
const orderIdMatch = !filters.value.orderId ||
(order.orderId && order.orderId.toString().toLowerCase().includes(filters.value.orderId.toLowerCase()))
const deviceIdMatch = !filters.value.deviceId ||
(order.deviceId && order.deviceId.toString().toLowerCase().includes(filters.value.deviceId.toLowerCase()))
return orderIdMatch && deviceIdMatch
})
if (orderList.value.length === 0) {
ElMessage.info('暂无匹配的工单数据')
}
} catch (error) {
console.error('获取工单列表失败:', error)
ElMessage.error('获取工单列表失败')
} finally {
loading.value = false
}
}
// 修改过滤处理函数
const handleFilter = () => {
// 直接对当前数据进行过滤，不重新获取数据
if (orderList.value) {
orderList.value = orderList.value.filter(order => {
const orderIdMatch = !filters.value.orderId ||
(order.orderId && order.orderId.toString().toLowerCase().includes(filters.value.orderId.toLowerCase()))
const deviceIdMatch = !filters.value.deviceId ||
(order.deviceId && order.deviceId.toString().toLowerCase().includes(filters.value.deviceId.toLowerCase()))
return orderIdMatch && deviceIdMatch
})
}
}
// 修改刷新函数
// const refreshOrders = () => {
// // 清空过滤条件
// filters.value = {
// orderId: '',
// deviceId: ''
// }
// // 重新获取数据
// fetchOrders()
// }
</script>
<style scoped>
.all-orders-container {
padding: 20px;
}
.orders-card {
margin-bottom: 20px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-right {
display: flex;
align-items: center;
}
</style>
浙公网安备 33010602011771号