Merge remote-tracking branch 'origin/dev_KTHG' into dev_KTHG

ZN

昨天 aaf2e90e8f2967dde6f3bd5351523234881e2c98

 src/views/equipmentManagement/upkeep/Form/DetailDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,219 @@
<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="设备备件">
        <span>{{formData.sparePartsNames}}</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>
    <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: "",
    sparePartsNames: "",
  });
  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,
      sparePartsNames: row.sparePartsNames || "",
    };

    // å¤„理图片列表
    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>