<template>
|
<el-dialog v-model="dialogVisible"
|
title="保养任务详情"
|
width="600px"
|
:close-on-click-modal="false"
|
@close="handleClose">
|
<el-form :model="formData"
|
label-width="120px"
|
class="detail-form">
|
<el-form-item label="设备名称">
|
<el-input v-model="formData.deviceName"
|
disabled />
|
</el-form-item>
|
<el-form-item label="规格型号">
|
<el-input v-model="formData.deviceModel"
|
disabled />
|
</el-form-item>
|
<el-form-item label="计划保养日期">
|
<el-input v-model="formData.maintenancePlanTime"
|
disabled />
|
</el-form-item>
|
<el-form-item label="录入人">
|
<el-input v-model="formData.createUserName"
|
disabled />
|
</el-form-item>
|
<el-form-item label="实际保养人">
|
<el-input v-model="formData.maintenanceActuallyName"
|
disabled />
|
</el-form-item>
|
<el-form-item label="实际保养日期">
|
<el-input v-model="formData.maintenanceActuallyTime"
|
disabled />
|
</el-form-item>
|
<el-form-item label="保养结果">
|
<el-input v-model="formData.maintenanceResult"
|
type="textarea"
|
:rows="3"
|
disabled />
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-tag v-if="formData.status === 2"
|
type="danger">失败</el-tag>
|
<el-tag v-else-if="formData.status === 1"
|
type="success">完结</el-tag>
|
<el-tag v-else-if="formData.status === 0"
|
type="warning">待保养</el-tag>
|
<span v-else>-</span>
|
</el-form-item>
|
<el-form-item label="图片列表">
|
<div v-if="imageList.length > 0"
|
class="image-list">
|
<el-image v-for="(image, index) in imagesFile"
|
:key="index"
|
:src="image.url"
|
fit="cover"
|
class="image-item" />
|
</div>
|
<span v-else>-</span>
|
</el-form-item>
|
<el-form-item label="设备备件">
|
<el-table v-if="sparePartsList.length > 0"
|
:data="sparePartsList"
|
border
|
style="width: 100%">
|
<el-table-column prop="sparePartName"
|
label="备件名称"
|
width="120" />
|
<el-table-column prop="quantity"
|
label="数量"
|
width="80" />
|
<el-table-column prop="unit"
|
label="单位"
|
width="80" />
|
</el-table>
|
<span v-else>-</span>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="handleClose">关闭</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, watch, computed } from "vue";
|
import dayjs from "dayjs";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
row: {
|
type: Object,
|
default: () => ({}),
|
},
|
});
|
|
const emit = defineEmits(["update:visible", "close"]);
|
|
const dialogVisible = ref(false);
|
const formData = ref({
|
deviceName: "",
|
deviceModel: "",
|
maintenancePlanTime: "",
|
createUserName: "",
|
maintenanceActuallyName: "",
|
maintenanceActuallyTime: "",
|
maintenanceResult: "",
|
status: "",
|
});
|
const imageList = ref([]);
|
const sparePartsList = ref([]);
|
|
// 预览图片列表
|
const previewImageList = computed(() => {
|
return imageList.value.map(image => image.url || image.fileUrl);
|
});
|
|
watch(
|
() => props.visible,
|
newVal => {
|
dialogVisible.value = newVal;
|
}
|
);
|
|
// 监听 dialogVisible 变化，通知父组件
|
watch(
|
() => dialogVisible.value,
|
newVal => {
|
emit("update:visible", newVal);
|
}
|
);
|
|
watch(
|
() => props.row,
|
newRow => {
|
if (newRow) {
|
fillFormData(newRow);
|
}
|
},
|
{ deep: true }
|
);
|
|
const fillFormData = row => {
|
formData.value = {
|
deviceName: row.deviceName || "",
|
deviceModel: row.deviceModel || "",
|
maintenancePlanTime: row.maintenancePlanTime
|
? dayjs(row.maintenancePlanTime).format("YYYY-MM-DD")
|
: "",
|
createUserName: row.createUserName || "",
|
maintenanceActuallyName: row.maintenanceActuallyName || "",
|
maintenanceActuallyTime: row.maintenanceActuallyTime
|
? dayjs(row.maintenanceActuallyTime).format("YYYY-MM-DD HH:mm:ss")
|
: "",
|
maintenanceResult: row.maintenanceResult || "",
|
status: row.status || 0,
|
};
|
|
// 处理图片列表
|
if (row.imagesFile) {
|
if (Array.isArray(row.imagesFile)) {
|
imageList.value = row.imagesFile;
|
} else if (typeof row.imagesFile === "string") {
|
try {
|
imageList.value = JSON.parse(row.imagesFile);
|
} catch (error) {
|
imageList.value = [];
|
}
|
} else {
|
imageList.value = [];
|
}
|
} else {
|
imageList.value = [];
|
}
|
console.log(imageList.value, "imageList");
|
|
// 处理设备备件列表
|
if (row.spareParts) {
|
if (Array.isArray(row.spareParts)) {
|
sparePartsList.value = row.spareParts;
|
} else if (typeof row.spareParts === "string") {
|
try {
|
sparePartsList.value = JSON.parse(row.spareParts);
|
} catch (error) {
|
sparePartsList.value = [];
|
}
|
} else {
|
sparePartsList.value = [];
|
}
|
} else {
|
sparePartsList.value = [];
|
}
|
};
|
|
const handleClose = () => {
|
dialogVisible.value = false;
|
emit("update:visible", false);
|
emit("close");
|
};
|
</script>
|
|
<style scoped>
|
.detail-form {
|
margin-top: 20px;
|
}
|
|
.dialog-footer {
|
text-align: center;
|
}
|
|
.image-list {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
margin-top: 5px;
|
}
|
|
.image-item {
|
width: 100px;
|
height: 100px;
|
cursor: pointer;
|
}
|
|
.el-table {
|
margin-top: 5px;
|
}
|
</style>
|
