feat: 设备保养修改，新增保养人、详情

gongchunyi

10 天以前 b88332e0a2686e68023e26438af97f79247b1ddd

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

@@ -1,27 +1,27 @@
<template>
  <FormDialog
    v-model="visible"
    :title="'设备维修'"
    width="500px"
    title="设备维修"
    width="640px"
    :loading="loading"
    @confirm="sendForm"
    @cancel="handleCancel"
    @close="handleClose"
  >
    <el-form :model="form" label-width="80px">
      <el-form-item label="维修人">
        <el-input v-model="form.maintenanceName" placeholder="请输入维修人" />
    <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
      <el-form-item label="维修人" prop="maintenanceName">
        <el-input v-model="form.maintenanceName" disabled placeholder="报修时指定的维修人" />
      </el-form-item>
      <el-form-item label="维修结果">
      <el-form-item label="维修结果" prop="maintenanceResult">
        <el-input v-model="form.maintenanceResult" placeholder="请输入维修结果" />
      </el-form-item>
      <el-form-item label="维修状态">
        <el-select v-model="form.status">
          <el-option label="待报修" :value="0"></el-option>
          <el-option label="完结" :value="1"></el-option>
          <el-option label="失败" :value="2"></el-option>
      <el-form-item label="维修状态" prop="status">
        <el-select v-model="form.status" style="width: 100%">
          <el-option label="待验收" :value="3" />
          <el-option label="维修失败" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="维修日期">
      <el-form-item label="维修日期" prop="maintenanceTime">
        <el-date-picker
          v-model="form.maintenanceTime"
          placeholder="请选择维修日期"
@@ -32,17 +32,39 @@
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="附件">
        <el-upload
          class="repair-attachment-upload"
          v-model:file-list="attachmentFileList"
          drag
          multiple
          :auto-upload="false"
          :limit="9"
          accept="image/png,image/jpeg,image/jpg"
          :before-upload="beforeAttachmentUpload"
        >
          <el-icon class="repair-upload-icon"><UploadFilled /></el-icon>
          <div class="el-upload__text">将文件拖到此处，或 <em>点击选择文件</em></div>
          <template #tip>
            <div class="el-upload__tip">
              支持 png / jpg / jpeg，单个不超过 50MB，保存后与列表「附件」同步
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
  </FormDialog>
</template>

<script setup>
import FormDialog from "@/components/Dialog/FormDialog.vue";
import { addMaintain } from "@/api/equipmentManagement/repair";
import { addMaintain, uploadRepairFile } from "@/api/equipmentManagement/repair";
import { REPAIR_FILE_TYPE_MAINTAIN } from "@/api/equipmentManagement/repairFileType.js";
import useFormData from "@/hooks/useFormData";
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";

defineOptions({
  name: "维修模态框",
@@ -50,39 +72,95 @@

const emits = defineEmits(["ok"]);

// 保存报修记录的id
const repairId = ref();
const visible = ref(false);
const loading = ref(false);
const formRef = ref();
const attachmentFileList = ref([]);
const ATTACH_MAX_MB = 50;

const userStore = useUserStore();

const rules = {
  maintenanceName: [{ required: true, message: "请选择维修人", trigger: "change" }],
  maintenanceResult: [{ required: true, message: "请输入维修结果", trigger: "blur" }],
  maintenanceTime: [{ required: true, message: "请选择维修日期", trigger: "change" }],
};

const { form, resetForm } = useFormData({
  maintenanceName: undefined, // 维修名称
  maintenanceResult: undefined, // 维修结果
  maintenanceTime: undefined, // 维修日期
  status: 0,
  maintenanceName: undefined,
  maintenanceResult: undefined,
  maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  status: 3,
});

const syncMaintenanceNameFromRow = (row) => {
  form.maintenanceName = row?.maintenanceName || "";
};

const beforeAttachmentUpload = (rawFile) => {
  const okType = ["image/jpeg", "image/jpg", "image/png"].includes(rawFile.type);
  if (!okType) {
    ElMessage.error("只能上传 png / jpg / jpeg 图片");
    return false;
  }
  if (rawFile.size > ATTACH_MAX_MB * 1024 * 1024) {
    ElMessage.error(`单个文件不能超过 ${ATTACH_MAX_MB}MB`);
    return false;
  }
  return true;
};

const clearAttachmentQueue = () => {
  attachmentFileList.value = [];
};

const uploadQueuedImages = async (id) => {
  const files = (attachmentFileList.value || []).map((f) => f.raw).filter(Boolean);
  for (const file of files) {
    const fd = new FormData();
    fd.append("file", file);
    fd.append("deviceRepairId", String(id));
    fd.append("fileType", String(REPAIR_FILE_TYPE_MAINTAIN));
    const res = await uploadRepairFile(fd);
    if (res.code !== 200) {
      throw new Error(res.msg || "附件上传失败");
    }
  }
};

const setForm = (data) => {
  form.maintenanceName = data.maintenanceName ?? userStore.nickName;
  syncMaintenanceNameFromRow(data);
  form.maintenanceResult = data.maintenanceResult;
  form.maintenanceTime =
    data.maintenanceTime 
      ? dayjs(data.maintenanceTime).format("YYYY-MM-DD HH:mm:ss")
      : dayjs().format("YYYY-MM-DD HH:mm:ss");
  form.status = 1; // 默认状态为完结
  form.maintenanceTime = data.maintenanceTime
    ? dayjs(data.maintenanceTime).format("YYYY-MM-DD HH:mm:ss")
    : dayjs().format("YYYY-MM-DD HH:mm:ss");
  form.status = 3;
};

const sendForm = async () => {
  const valid = await formRef.value?.validate().catch(() => false);
  if (!valid) return;
  if (form.maintenanceName !== userStore.nickName) {
    ElMessage.warning("仅指定的维修人可进行维修");
    return;
  }
  loading.value = true;
  try {
    const { code } = await addMaintain({ id: repairId.value, ...form });
    if (code == 200) {
      ElMessage.success("维修成功");
      emits("ok");
      resetForm();
      visible.value = false;
    const { code, msg } = await addMaintain({ id: repairId.value, ...form });
    if (code !== 200) {
      if (msg) ElMessage.error(msg);
      return;
    }
    if (attachmentFileList.value.length) {
      await uploadQueuedImages(repairId.value);
    }
    ElMessage.success("维修成功");
    clearAttachmentQueue();
    visible.value = false;
    emits("ok");
  } catch (e) {
    ElMessage.error(e?.message || "保存或上传附件失败");
  } finally {
    loading.value = false;
  }
@@ -90,19 +168,26 @@

const handleCancel = () => {
  resetForm();
  clearAttachmentQueue();
  visible.value = false;
};

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

const open = async (id, row) => {
  repairId.value = id; // 保存报修记录的id
  repairId.value = id;
  clearAttachmentQueue();
  visible.value = true;
  await nextTick();
  setForm(row);
  if (row?.maintenanceName && row.maintenanceName !== userStore.nickName) {
    ElMessage.warning("仅指定的维修人可进行维修");
    visible.value = false;
  }
};

defineExpose({
@@ -110,4 +195,20 @@
});
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.repair-attachment-upload {
  width: 100%;
  :deep(.el-upload) {
    width: 100%;
  }
  :deep(.el-upload-dragger) {
    width: 100%;
    padding: 20px 16px;
  }
}
.repair-upload-icon {
  font-size: 42px;
  color: var(--el-color-primary);
  margin-bottom: 8px;
}
</style>