设备保养功能修改\加详情功能

zhangwencui

5 小时以前 1f3d605e1517bbf25e563f62fc7fbeaaa09fbc7f

设备保养功能修改\加详情功能

 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>

 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);