<template>
|
<div class="defect-management">
|
<!-- 操作按钮 -->
|
<div class="actions">
|
<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">
|
<template #default="{ row }">
|
<el-tag :type="row.status === '严重缺陷' ? 'danger' : 'success'">
|
{{ row.status }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作"
|
width="220">
|
<template #default="{ row }">
|
<el-button v-if="row.status === '严重缺陷' || row.status === '一般缺陷'"
|
type="text"
|
@click="eliminateDefect(row)">
|
消除缺陷
|
</el-button>
|
<!-- <el-button
|
v-if="row.status === '严重缺陷'"
|
type="text"
|
@click="transferToRepairOrder(row.id)"
|
>
|
转维修单
|
</el-button> -->
|
<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-select>
|
</el-form-item>
|
<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-radio-group v-model="defectForm.status">
|
<el-radio label="正常">正常</el-radio>
|
<el-radio label="一般缺陷">一般缺陷</el-radio>
|
<el-radio label="严重缺陷">严重缺陷</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button type="primary"
|
@click="submitDefectForm">确定</el-button>
|
<el-button @click="showRegisterDialog = false">取消</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-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";
|
|
// 缺陷列表
|
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 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("获取缺陷列表失败");
|
}
|
};
|
|
// 提交缺陷登记表单
|
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("请填写完整表单信息");
|
}
|
};
|
|
// 消除缺陷
|
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("缺陷消除失败");
|
}
|
};
|
|
// // 转维修工单
|
// 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 || "获取缺陷设备台账失败");
|
}
|
} catch (error) {
|
ElMessage.error("获取缺陷设备台账失败");
|
}
|
};
|
|
// 组件挂载时获取缺陷列表
|
const onMounted = () => {
|
fetchDefectList();
|
loadDeviceName();
|
};
|
onMounted();
|
</script>
|
|
<style scoped>
|
.defect-management {
|
padding: 20px;
|
}
|
|
.actions {
|
margin-bottom: 10px;
|
}
|
</style>
|
