| | |
| | | <div class="defect-management"> |
| | | <!-- 操作按钮 --> |
| | | <div class="actions"> |
| | | <el-button type="primary" @click="showRegisterDialog = true">登记缺陷</el-button> |
| | | <el-button type="primary" |
| | | @click="showRegisterDialog = true">登记缺陷</el-button> |
| | | </div> |
| | | |
| | | <!-- 缺陷列表 --> |
| | | <el-table :data="defectList" style="width: 100%; margin-top: 10px;" border> |
| | | <el-table-column prop="deviceName" label="设备名称" width="180"></el-table-column> |
| | | <el-table-column prop="defectDescription" label="缺陷描述" win-width="300"></el-table-column> |
| | | <el-table-column prop="status" label="状态" width="220"> |
| | | <el-table :data="defectList" |
| | | style="width: 100%; margin-top: 10px;" |
| | | border> |
| | | <el-table-column prop="deviceName" |
| | | label="设备名称" |
| | | width="180"></el-table-column> |
| | | <el-table-column prop="defectDescription" |
| | | label="缺陷描述" |
| | | win-width="300"></el-table-column> |
| | | <el-table-column prop="status" |
| | | label="状态" |
| | | width="220"> |
| | | <template #default="{ row }"> |
| | | <el-tag :type="row.status === '严重缺陷' ? 'danger' : 'success'"> |
| | | {{ row.status }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" width="220"> |
| | | <el-table-column label="操作" |
| | | width="220"> |
| | | <template #default="{ row }"> |
| | | <el-button |
| | | v-if="row.status === '严重缺陷' || row.status === '一般缺陷'" |
| | | type="text" |
| | | @click="eliminateDefect(row)" |
| | | > |
| | | <el-button v-if="row.status === '严重缺陷' || row.status === '一般缺陷'" |
| | | type="text" |
| | | @click="eliminateDefect(row)"> |
| | | 消除缺陷 |
| | | </el-button> |
| | | <!-- <el-button |
| | |
| | | > |
| | | 转维修单 |
| | | </el-button> --> |
| | | <el-button type="text" @click="getLedger(row.deviceLedgerId)"> |
| | | <el-button type="text" |
| | | @click="getLedger(row.deviceLedgerId)"> |
| | | 查看台账 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <!-- 缺陷登记对话框 --> |
| | | <el-dialog title="登记设备缺陷" v-model="showRegisterDialog" width="50%"> |
| | | <el-form :model="defectForm" :rules="defectRules" ref="defectFormRef" label-width="100px"> |
| | | <el-form-item label="设备名称" prop="deviceName"> |
| | | <el-select v-model="defectForm.deviceLedgerId" @change="setDeviceModel"> |
| | | <el-option |
| | | v-for="(item, index) in deviceOptions" |
| | | :key="index" |
| | | :label="item.deviceName" |
| | | :value="item.id" |
| | | ></el-option> |
| | | <el-dialog title="登记设备缺陷" |
| | | v-model="showRegisterDialog" |
| | | width="50%"> |
| | | <el-form :model="defectForm" |
| | | :rules="defectRules" |
| | | ref="defectFormRef" |
| | | label-width="100px"> |
| | | <el-form-item label="设备名称" |
| | | prop="deviceName"> |
| | | <el-select v-model="defectForm.deviceLedgerId" |
| | | @change="setDeviceModel"> |
| | | <el-option v-for="(item, index) in deviceOptions" |
| | | :key="index" |
| | | :label="item.deviceName" |
| | | :value="item.id"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="缺陷描述" prop="defectDescription"> |
| | | <el-input type="textarea" v-model="defectForm.defectDescription"></el-input> |
| | | <el-form-item label="缺陷描述" |
| | | prop="defectDescription"> |
| | | <el-input type="textarea" |
| | | v-model="defectForm.defectDescription"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="设备状态" prop="status"> |
| | | <el-form-item label="设备状态" |
| | | prop="status"> |
| | | <el-radio-group v-model="defectForm.status"> |
| | | <el-radio label="正常">正常</el-radio> |
| | | <el-radio label="一般缺陷">一般缺陷</el-radio> |
| | |
| | | </el-form> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button type="primary" |
| | | @click="submitDefectForm">确定</el-button> |
| | | <el-button @click="showRegisterDialog = false">取消</el-button> |
| | | <el-button type="primary" @click="submitDefectForm">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <!-- 缺陷设备台账对话框 --> |
| | | <el-dialog title="缺陷设备台账" v-model="showLedgerDialog" width="80%"> |
| | | <el-table :data="ledgerList" style="width: 100%; margin-top: 10px;" border> |
| | | <el-table-column prop="deviceName" label="设备名称"></el-table-column> |
| | | <el-table-column prop="defectDescription" label="缺陷描述"></el-table-column> |
| | | <el-table-column prop="status" label="状态"></el-table-column> |
| | | <el-table-column prop="eliminateTime" label="消缺时间"></el-table-column> |
| | | <el-dialog title="缺陷设备台账" |
| | | v-model="showLedgerDialog" |
| | | width="80%"> |
| | | <el-table :data="ledgerList" |
| | | style="width: 100%; margin-top: 10px;" |
| | | border> |
| | | <el-table-column prop="deviceName" |
| | | label="设备名称"></el-table-column> |
| | | <el-table-column prop="defectDescription" |
| | | label="缺陷描述"></el-table-column> |
| | | <el-table-column prop="status" |
| | | label="状态"></el-table-column> |
| | | <el-table-column prop="eliminateTime" |
| | | label="消缺时间"></el-table-column> |
| | | </el-table> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, reactive } from 'vue'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import { getDeviceLedger } from "@/api/equipmentManagement/ledger"; |
| | | // 假设以下是后端接口 |
| | | import { |
| | | registerDefect, |
| | | getDefectList, |
| | | eliminateDefect as apiEliminateDefect, |
| | | getDefectLedger, |
| | | deleteDefect |
| | | } from '@/api/equipmentManagement/defectManagement'; |
| | | import { ref, reactive } from "vue"; |
| | | import { ElMessage } from "element-plus"; |
| | | import { getDeviceLedger } from "@/api/equipmentManagement/ledger"; |
| | | // 假设以下是后端接口 |
| | | import { |
| | | registerDefect, |
| | | getDefectList, |
| | | eliminateDefect as apiEliminateDefect, |
| | | getDefectLedger, |
| | | deleteDefect, |
| | | } from "@/api/equipmentManagement/defectManagement"; |
| | | |
| | | // 缺陷列表 |
| | | const defectList = ref([]); |
| | | // 登记对话框显示状态 |
| | | const showRegisterDialog = ref(false); |
| | | // 台账对话框显示状态 |
| | | const showLedgerDialog = ref(false); |
| | | // 缺陷表单 |
| | | const defectForm = reactive({ |
| | | deviceLedgerId: '', |
| | | defectDescription: '', |
| | | status: '', |
| | | }); |
| | | const deviceOptions = ref([]); |
| | | // 表单验证规则 |
| | | const defectRules = reactive({ |
| | | deviceLedgerId: [{ required: true, message: '请输入设备名称', trigger: 'blur' }], |
| | | defectDescription: [{ required: true, message: '请输入缺陷描述', trigger: 'blur' }] |
| | | }); |
| | | // 表单引用 |
| | | const defectFormRef = ref(null); |
| | | // 台账列表 |
| | | const ledgerList = ref([]); |
| | | // 缺陷列表 |
| | | const defectList = ref([]); |
| | | // 登记对话框显示状态 |
| | | const showRegisterDialog = ref(false); |
| | | // 台账对话框显示状态 |
| | | const showLedgerDialog = ref(false); |
| | | // 缺陷表单 |
| | | const defectForm = reactive({ |
| | | deviceLedgerId: "", |
| | | defectDescription: "", |
| | | status: "", |
| | | }); |
| | | const deviceOptions = ref([]); |
| | | // 表单验证规则 |
| | | const defectRules = reactive({ |
| | | deviceLedgerId: [ |
| | | { required: true, message: "请输入设备名称", trigger: "blur" }, |
| | | ], |
| | | defectDescription: [ |
| | | { required: true, message: "请输入缺陷描述", trigger: "blur" }, |
| | | ], |
| | | }); |
| | | // 表单引用 |
| | | const defectFormRef = ref(null); |
| | | // 台账列表 |
| | | const ledgerList = ref([]); |
| | | |
| | | const loadDeviceName = async () => { |
| | | const { data } = await getDeviceLedger(); |
| | | // console.log(data); |
| | | deviceOptions.value = data; |
| | | }; |
| | | const loadDeviceName = async () => { |
| | | const { data } = await getDeviceLedger(); |
| | | // console.log(data); |
| | | deviceOptions.value = data; |
| | | }; |
| | | |
| | | // 获取缺陷列表 |
| | | const fetchDefectList = async () => { |
| | | try { |
| | | const res = await getDefectList(); |
| | | if (res.code === 200) { |
| | | defectList.value = res.data.records; |
| | | } else { |
| | | ElMessage.error(res.message || '获取缺陷列表失败'); |
| | | // 获取缺陷列表 |
| | | const fetchDefectList = async () => { |
| | | try { |
| | | const res = await getDefectList(); |
| | | if (res.code === 200) { |
| | | defectList.value = res.data.records; |
| | | } else { |
| | | ElMessage.error(res.message || "获取缺陷列表失败"); |
| | | } |
| | | } catch (error) { |
| | | ElMessage.error("获取缺陷列表失败"); |
| | | } |
| | | } catch (error) { |
| | | ElMessage.error('获取缺陷列表失败'); |
| | | } |
| | | }; |
| | | }; |
| | | |
| | | // 提交缺陷登记表单 |
| | | const submitDefectForm = async () => { |
| | | if (!defectFormRef.value) return; |
| | | try { |
| | | await defectFormRef.value.validate(); |
| | | const res = await registerDefect(defectForm); |
| | | if (res.code === 200) { |
| | | ElMessage.success('缺陷登记成功'); |
| | | showRegisterDialog.value = false; |
| | | fetchDefectList(); |
| | | } else { |
| | | ElMessage.error(res.message || '缺陷登记失败'); |
| | | // 提交缺陷登记表单 |
| | | const submitDefectForm = async () => { |
| | | if (!defectFormRef.value) return; |
| | | try { |
| | | await defectFormRef.value.validate(); |
| | | const res = await registerDefect(defectForm); |
| | | if (res.code === 200) { |
| | | ElMessage.success("缺陷登记成功"); |
| | | showRegisterDialog.value = false; |
| | | fetchDefectList(); |
| | | } else { |
| | | ElMessage.error(res.message || "缺陷登记失败"); |
| | | } |
| | | } catch (error) { |
| | | ElMessage.error("请填写完整表单信息"); |
| | | } |
| | | } catch (error) { |
| | | ElMessage.error('请填写完整表单信息'); |
| | | } |
| | | }; |
| | | }; |
| | | |
| | | // 消除缺陷 |
| | | const eliminateDefect = async (row) => { |
| | | |
| | | try { |
| | | const res = await apiEliminateDefect(row); |
| | | if (res.code === 200) { |
| | | ElMessage.success('缺陷消除成功'); |
| | | fetchDefectList(); |
| | | } else { |
| | | ElMessage.error(res.message || '缺陷消除失败'); |
| | | // 消除缺陷 |
| | | const eliminateDefect = async row => { |
| | | try { |
| | | const res = await apiEliminateDefect(row); |
| | | if (res.code === 200) { |
| | | ElMessage.success("缺陷消除成功"); |
| | | fetchDefectList(); |
| | | } else { |
| | | ElMessage.error(res.message || "缺陷消除失败"); |
| | | } |
| | | } catch (error) { |
| | | ElMessage.error("缺陷消除失败"); |
| | | } |
| | | } catch (error) { |
| | | ElMessage.error('缺陷消除失败'); |
| | | } |
| | | }; |
| | | }; |
| | | |
| | | // // 转维修工单 |
| | | // const transferToRepairOrder = async (id) => { |
| | | // try { |
| | | // const res = await transferToRepair(id); |
| | | // if (res.code === 200) { |
| | | // ElMessage.success('转维修工单成功'); |
| | | // } else { |
| | | // ElMessage.error(res.message || '转维修工单失败'); |
| | | // } |
| | | // } catch (error) { |
| | | // ElMessage.error('转维修工单失败'); |
| | | // } |
| | | // }; |
| | | // // 转维修工单 |
| | | // const transferToRepairOrder = async (id) => { |
| | | // try { |
| | | // const res = await transferToRepair(id); |
| | | // if (res.code === 200) { |
| | | // ElMessage.success('转维修工单成功'); |
| | | // } else { |
| | | // ElMessage.error(res.message || '转维修工单失败'); |
| | | // } |
| | | // } catch (error) { |
| | | // ElMessage.error('转维修工单失败'); |
| | | // } |
| | | // }; |
| | | |
| | | // 获取缺陷设备台账 |
| | | const getLedger = async (deviceLedgerId) => { |
| | | try { |
| | | const res = await getDefectLedger(deviceLedgerId); |
| | | if (res.code === 200) { |
| | | ledgerList.value = res.data.records; |
| | | showLedgerDialog.value = true; |
| | | } else { |
| | | ElMessage.error(res.message || '获取缺陷设备台账失败'); |
| | | // 获取缺陷设备台账 |
| | | const getLedger = async deviceLedgerId => { |
| | | try { |
| | | const res = await getDefectLedger(deviceLedgerId); |
| | | if (res.code === 200) { |
| | | ledgerList.value = res.data.records; |
| | | showLedgerDialog.value = true; |
| | | } else { |
| | | ElMessage.error(res.message || "获取缺陷设备台账失败"); |
| | | } |
| | | } catch (error) { |
| | | ElMessage.error("获取缺陷设备台账失败"); |
| | | } |
| | | } catch (error) { |
| | | ElMessage.error('获取缺陷设备台账失败'); |
| | | } |
| | | }; |
| | | }; |
| | | |
| | | // 组件挂载时获取缺陷列表 |
| | | const onMounted = () => { |
| | | fetchDefectList(); |
| | | loadDeviceName(); |
| | | }; |
| | | onMounted(); |
| | | // 组件挂载时获取缺陷列表 |
| | | const onMounted = () => { |
| | | fetchDefectList(); |
| | | loadDeviceName(); |
| | | }; |
| | | onMounted(); |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .defect-management { |
| | | padding: 20px; |
| | | } |
| | | .defect-management { |
| | | padding: 20px; |
| | | } |
| | | |
| | | .actions { |
| | | margin-bottom: 10px; |
| | | } |
| | | .actions { |
| | | margin-bottom: 10px; |
| | | } |
| | | </style> |