feat: 设备维修详情组件

gongchunyi

9 小时以前 3b0523e3ac0c855a5b37e2d5f0ccf28938f7a117

feat: 设备维修详情组件

 src/views/equipmentManagement/repair/Modal/RepairDetailModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,93 @@
<template>
  <el-dialog
    v-model="visible"
    title="设备报修详情"
    width="800px"
    destroy-on-close
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-descriptions border :column="2" class="repair-detail">
      <el-descriptions-item label="设备名称">{{ form.deviceName }}</el-descriptions-item>
      <el-descriptions-item label="规格型号">{{ form.deviceModel }}</el-descriptions-item>
      
      <el-descriptions-item label="报修日期">{{ form.repairTime }}</el-descriptions-item>
      <el-descriptions-item label="报修人">{{ form.repairName }}</el-descriptions-item>
      
      <el-descriptions-item label="报修项目">{{ form.machineryCategory }}</el-descriptions-item>
      <el-descriptions-item label="维修人">{{ form.maintenanceName }}</el-descriptions-item>
      
      <el-descriptions-item label="报修状态">
        <el-tag v-if="form.status === 2" type="danger">失败</el-tag>
        <el-tag v-else-if="form.status === 1" type="success">已验收</el-tag>
        <el-tag v-else-if="form.status === 3" type="info">待验收</el-tag>
        <el-tag v-else-if="form.status === 0" type="warning">待维修</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="故障现象">{{ form.remark }}</el-descriptions-item>

      <!-- éªŒæ”¶ä¿¡æ¯ -->
      <template v-if="form.status === 1 || form.status === 3">
        <el-descriptions-item label="验收人">{{ form.acceptanceName }}</el-descriptions-item>
        <el-descriptions-item label="验收时间">{{ form.acceptanceTime }}</el-descriptions-item>
        <el-descriptions-item label="验收备注" :span="2">{{ form.acceptanceRemark }}</el-descriptions-item>
      </template>

      <!-- é™„件 -->
      <el-descriptions-item label="附件" :span="2">
        <ImageUpload
          v-if="form.storageBlobDTOs && form.storageBlobDTOs.length > 0"
          v-model:file-list="form.storageBlobDTOs"
          :disabled="true"
        />
        <span v-else style="color: #999;">无附件</span>
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { getRepairById } from "@/api/equipmentManagement/repair";
import ImageUpload from "@/components/AttachmentUpload/image/index.vue";

const visible = ref(false);
const form = ref({});

const openView = async (id) => {
  visible.value = true;
  await nextTick();
  try {
    const { data } = await getRepairById(id);
    // ç¡®ä¿é™„件字段名称匹配组件需要
    data.storageBlobDTOs = data.storageBlobVOs || [];
    form.value = data || {};
  } catch (error) {
    console.error("Failed to load repair details:", error);
  }
};

const handleClose = () => {
  visible.value = false;
  form.value = {};
};

defineExpose({
  openView,
});
</script>

<style scoped>
.repair-detail :deep(.el-descriptions__label) {
  width: 120px;
  justify-content: flex-end;
}
.repair-detail :deep(.el-upload) {
  display: none !important;
}
</style>

 src/views/equipmentManagement/repair/index.vue

@@ -136,6 +136,7 @@
    </div>
    <RepairModal ref="repairModalRef"
                 @ok="getTableData" />
    <RepairDetailModal ref="repairDetailModalRef" />
    <MaintainModal ref="maintainModalRef"
                   @ok="getTableData" />
    <AcceptanceModal ref="acceptanceModalRef"
@@ -158,6 +159,7 @@
  import { usePaginationApi } from "@/hooks/usePaginationApi";
  import { getRepairPage, delRepair } from "@/api/equipmentManagement/repair";
  import RepairModal from "./Modal/RepairModal.vue";
  import RepairDetailModal from "./Modal/RepairDetailModal.vue";
  import { ElMessageBox, ElMessage } from "element-plus";
  import dayjs from "dayjs";
  import MaintainModal from "./Modal/MaintainModal.vue";
@@ -174,6 +176,7 @@

  // æ¨¡æ€æ¡†å®žä¾‹
  const repairModalRef = ref();
  const repairDetailModalRef = ref();
  const maintainModalRef = ref();
  const acceptanceModalRef = ref();

@@ -274,14 +277,14 @@
    return multipleList.value.some(item => item.status === 1);
  });

  // æ–°å¢žæŠ¥ä¿®
  // æ–°å¢žè®¾å¤‡æŠ¥ä¿®
  const addRepair = () => {
    repairModalRef.value.openAdd();
  };

  // è¯¦æƒ…查看
  // æŸ¥çœ‹è¯¦æƒ…
  const viewRepair = id => {
    repairModalRef.value.openView(id);
    repairDetailModalRef.value.openView(id);
  };

  // ç¼–辑报修