feat: 保养任务与记录详情查看

gongchunyi

19 小时以前 3d2a1e5bc593cd137a7923407d593fdeadacea17

feat: 保养任务与记录详情查看

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,99 @@
<template>
    <FormDialog
        v-model="dialogVisitable"
        title="保养记录详情"
        width="800px"
        operation-type="detail"
        @close="cancel"
    >
        <el-descriptions border :column="2">
            <el-descriptions-item label="设备名称">
                {{ detailData.deviceName || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="规格型号">
                {{ detailData.deviceModel || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="计划保养日期">
                {{ formatDate(detailData.maintenancePlanTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="录入人">
                {{ detailData.createUserName || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="保养项目" :span="2">
                {{ detailData.machineryCategory || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="实际保养人">
                {{ detailData.maintenanceActuallyName || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="实际保养日期">
                {{ formatDate(detailData.maintenanceActuallyTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="保养结果" :span="2">
                {{ detailData.maintenanceResult || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="状态" :span="2">
                <el-tag v-if="detailData.status === 2" type="danger">失败</el-tag>
                <el-tag v-else-if="detailData.status === 1" type="success">完结</el-tag>
                <el-tag v-else type="warning">待保养</el-tag>
            </el-descriptions-item>
        </el-descriptions>

        <div v-if="fileList && fileList.length > 0" class="image-section">
            <div class="image-title">保养附件(图片)：</div>
            <AttachmentUploadImage
                v-model:fileList="fileList"
                :disabled="true"
            />
        </div>
    </FormDialog>
</template>

<script setup>
import FormDialog from "@/components/Dialog/FormDialog.vue";
import { ref } from "vue";
import dayjs from "dayjs";
import { attachmentList } from "@/api/basicData/storageAttachment.js";
import AttachmentUploadImage from '@/components/AttachmentUpload/image/index.vue';

const dialogVisitable = ref(false);
const detailData = ref({});
const fileList = ref([]);

const formatDate = (date) => {
    return date ? dayjs(date).format("YYYY-MM-DD") : "--";
};

const openDialog = (row) => {
    dialogVisitable.value = true;
    detailData.value = { ...row };
    fileList.value = [];

    if (row.id) {
        attachmentList({
            recordType: 'device_maintenance',
            recordId: row.id,
        }).then(res => {
            if (res && res.data) {
                fileList.value = res.data || [];
            }
        });
    }
};

const cancel = () => {
    dialogVisitable.value = false;
};

defineExpose({ openDialog });
</script>

<style scoped>
.image-section {
    margin-top: 20px;
}
.image-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: #606266;
}
</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,118 @@
<template>
    <FormDialog
        v-model="dialogVisitable"
        title="保养任务详情"
        width="800px"
        operation-type="detail"
        @close="cancel"
    >
        <el-descriptions border :column="2">
            <el-descriptions-item label="设备名称">
                {{ detailData.taskName || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="规格型号">
                {{ detailData.deviceModel || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="录入人">
                {{ detailData.registrant || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="登记时间">
                {{ detailData.registrationDate || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="保养项目" :span="2">
                {{ detailData.machineryCategory || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="保养人">
                {{ detailData.maintenancePerson || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="任务频率">
                {{ formatFrequencyType(detailData.frequencyType) }}
            </el-descriptions-item>
            <el-descriptions-item label="执行时间">
                {{ formatFrequencyDetail(detailData.frequencyDetail) }}
            </el-descriptions-item>
            <el-descriptions-item label="定时任务">
                <el-tag :type="detailData.isActive === 1 ? 'success' : 'info'">
                    {{ detailData.isActive === 1 ? '开启' : '关闭' }}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">
                {{ detailData.remarks || '--' }}
            </el-descriptions-item>
        </el-descriptions>

        <div v-if="fileList && fileList.length > 0" class="image-section">
            <div class="image-title">设备图片：</div>
            <AttachmentUploadImage
                v-model:fileList="fileList"
                :disabled="true"
            />
        </div>
    </FormDialog>
</template>

<script setup>
import FormDialog from "@/components/Dialog/FormDialog.vue";
import { ref } from "vue";
import { getLedgerById } from "@/api/equipmentManagement/ledger";
import AttachmentUploadImage from '@/components/AttachmentUpload/image/index.vue';

const dialogVisitable = ref(false);
const detailData = ref({});
const fileList = ref([]);

const formatFrequencyType = (type) => {
    const map = {
        DAILY: "每日",
        WEEKLY: "每周",
        MONTHLY: "每月",
        QUARTERLY: "季度",
    };
    return map[type] || "--";
};

const formatFrequencyDetail = (detail) => {
    if (!detail) return "--";
    const replacements = {
        MON: "周一",
        TUE: "周二",
        WED: "周三",
        THU: "周四",
        FRI: "周五",
        SAT: "周六",
        SUN: "周日",
    };
    return detail.replace(/MON|TUE|WED|THU|FRI|SAT|SUN/g, match => replacements[match]);
};

const openDialog = (row) => {
    dialogVisitable.value = true;
    detailData.value = { ...row };
    fileList.value = [];

    if (row.taskId) {
        getLedgerById(row.taskId).then(res => {
            if (res.code === 200 && res.data) {
                fileList.value = res.data.storageBlobVOs || [];
            }
        });
    }
};

const cancel = () => {
    dialogVisitable.value = false;
};

defineExpose({ openDialog });
</script>

<style scoped>
.image-section {
    margin-top: 20px;
}
.image-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: #606266;
}
</style>

 src/views/equipmentManagement/upkeep/index.vue

@@ -78,6 +78,11 @@
            <template #operation="{ row }">
              <el-button type="primary"
                         link
                         @click="handleDetail(row)">
                è¯¦æƒ…
              </el-button>
              <el-button type="primary"
                         link
                         @click="editScheduledTask(row)">
                ç¼–辑
              </el-button>
@@ -177,6 +182,11 @@
                      type="warning">待保养</el-tag>
            </template>
            <template #operation="{ row }">
              <el-button type="primary"
                         link
                         @click="handleRecordDetail(row)">
                è¯¦æƒ…
              </el-button>
              <!-- è¿™ä¸ªåŠŸèƒ½è·Ÿæ–°å¢žä¿å…»åŠŸèƒ½ä¸€æ¨¡ä¸€æ ·ï¼Œæœ‰å•¥æ„ä¹‰ï¼Ÿ -->
              <!-- <el-button
              type="primary"
@@ -219,6 +229,8 @@
                      @ok="getTableData" />
    <FormDia ref="formDiaRef"
             @closeDia="getScheduledTableData" />
    <DetailDia ref="detailDiaRef" />
    <RecordDetailDia ref="recordDetailDiaRef" />
    <FileList v-if="fileDialogVisible"
              v-model:visible="fileDialogVisible"
              :record-type="'device_maintenance'"
@@ -241,6 +253,8 @@
  import PlanModal from "./Form/PlanModal.vue";
  import MaintenanceModal from "./Form/MaintenanceModal.vue";
  import FormDia from "./Form/formDia.vue";
  import DetailDia from "./Form/detailDia.vue";
  import RecordDetailDia from "./Form/RecordDetailDia.vue";
  import {
    getUpkeepPage,
    delUpkeep,
@@ -263,6 +277,10 @@
  const maintainModalRef = ref();
  // å®šæ—¶ä»»åŠ¡å¼¹çª—控制器
  const formDiaRef = ref();
  // å®šæ—¶ä»»åŠ¡è¯¦æƒ…弹窗控制器
  const detailDiaRef = ref();
  // ä¿å…»è®°å½•è¯¦æƒ…弹窗控制器
  const recordDetailDiaRef = ref();
  // é™„件弹窗
  const fileListDialogRef = ref(null);
  const fileDialogVisible = ref(false);
@@ -314,7 +332,7 @@
    {
      prop: "frequencyType",
      label: "频次",
      minWidth: 50,
      minWidth: 80,
      // PIMTable ä½¿ç”¨çš„是 formatData，而不是 Element-Plus çš„ formatter
      formatData: cell =>
        ({
@@ -371,7 +389,7 @@
      dataType: "slot",
      slot: "operation",
      align: "center",
      width: "150px",
      width: "160px",
    },
  ]);

@@ -445,7 +463,7 @@
      dataType: "slot",
      slot: "operation",
      align: "center",
      width: "350px",
      width: "250px",
    },
  ]);

@@ -503,6 +521,14 @@
    if (row) {
      nextTick(() => {
        formDiaRef.value?.openDialog("edit", row);
      });
    }
  };

  const handleDetail = row => {
    if (row) {
      nextTick(() => {
        detailDiaRef.value?.openDialog(row);
      });
    }
  };
@@ -578,6 +604,14 @@
    maintainModalRef.value.open(row.id, row);
  };

  const handleRecordDetail = row => {
    if (row) {
      nextTick(() => {
        recordDetailDiaRef.value?.openDialog(row);
      });
    }
  };

  const addPlan = () => {
    planModalRef.value.openModal();
  };