From 1f3d605e1517bbf25e563f62fc7fbeaaa09fbc7f Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期一, 02 三月 2026 16:08:21 +0800
Subject: [PATCH] 设备保养功能修改\加详情功能
---
src/views/equipmentManagement/upkeep/index.vue | 23 ++++
src/views/equipmentManagement/upkeep/Form/DetailDialog.vue | 231 ++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 252 insertions(+), 2 deletions(-)
diff --git a/src/views/equipmentManagement/upkeep/Form/DetailDialog.vue b/src/views/equipmentManagement/upkeep/Form/DetailDialog.vue
new file mode 100644
index 0000000..fdd8ca5
--- /dev/null
+++ b/src/views/equipmentManagement/upkeep/Form/DetailDialog.vue
@@ -0,0 +1,231 @@
+<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>
\ No newline at end of file
diff --git a/src/views/equipmentManagement/upkeep/index.vue b/src/views/equipmentManagement/upkeep/index.vue
index 327f83c..65ffbec 100644
--- a/src/views/equipmentManagement/upkeep/index.vue
+++ b/src/views/equipmentManagement/upkeep/index.vue
@@ -200,8 +200,13 @@
<el-button type="primary"
link
@click="openFileDialog(row)">
- 闄勪欢
+ 璇︽儏
</el-button>
+ <!-- <el-button type="primary"
+ link
+ @click="openAttachmentDialog(row)">
+ 闄勪欢
+ </el-button> -->
</template>
</PIMTable>
</div>
@@ -213,6 +218,9 @@
@ok="getTableData" />
<FormDia ref="formDiaRef"
@closeDia="getScheduledTableData" />
+ <DetailDialog ref="detailDialogRef"
+ v-model:visible="detailDialogVisible"
+ :row="currentDetailRow" />
<FileListDialog ref="fileListDialogRef"
v-model="fileDialogVisible"
:show-upload-button="true"
@@ -238,6 +246,7 @@
import PlanModal from "./Form/PlanModal.vue";
import MaintenanceModal from "./Form/MaintenanceModal.vue";
import FormDia from "./Form/formDia.vue";
+ import DetailDialog from "./Form/DetailDialog.vue";
import FileListDialog from "@/components/Dialog/FileListDialog.vue";
import {
getUpkeepPage,
@@ -263,6 +272,10 @@
const maintainModalRef = ref();
// 瀹氭椂浠诲姟寮圭獥鎺у埗鍣�
const formDiaRef = ref();
+ // 璇︽儏寮圭獥
+ const detailDialogRef = ref();
+ const detailDialogVisible = ref(false);
+ const currentDetailRow = ref(null);
// 闄勪欢寮圭獥
const fileListDialogRef = ref(null);
const fileDialogVisible = ref(false);
@@ -631,8 +644,14 @@
}
};
+ // 鎵撳紑璇︽儏寮圭獥
+ const openFileDialog = row => {
+ currentDetailRow.value = row;
+ detailDialogVisible.value = true;
+ };
+
// 鎵撳紑闄勪欢寮圭獥
- const openFileDialog = async row => {
+ const openAttachmentDialog = async row => {
currentMaintenanceTaskId.value = row.id;
fileDialogVisible.value = true;
await fetchMaintenanceTaskFiles(row.id);
--
Gitblit v1.9.3