<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 @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-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>
|
