gaoluyang
9 小时以前 ab264123941cd3d345687af92aab2a9e04968960
src/views/equipmentManagement/repair/Modal/RepairModal.vue
@@ -1,111 +1,126 @@
<template>
  <FormDialog
    v-model="visible"
    :title="id ? '编辑设备报修' : '新增设备报修'"
    width="800px"
    @confirm="sendForm"
    @cancel="handleCancel"
    @close="handleClose"
  >
    <el-form :model="form" label-width="100px">
  <FormDialog v-model="visible"
              :title="computedTitle"
              :operation-type="operationType"
              width="800px"
              @confirm="sendForm"
              @cancel="handleCancel"
              @close="handleClose">
    <el-form :model="form"
             label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备名称">
            <el-select v-model="form.deviceLedgerId" @change="setDeviceModel" filterable>
              <el-option
                v-for="(item, index) in deviceOptions"
                :key="index"
                :label="item.deviceName"
                :value="item.id"
              ></el-option>
            <el-select v-model="form.deviceLedgerId"
                       @change="setDeviceModel"
                       filterable
                       :disabled="operationType === 'view'">
              <el-option v-for="(item, index) in deviceOptions"
                         :key="index"
                         :label="item.deviceName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格型号">
            <el-input
              v-model="form.deviceModel"
              placeholder="请输入规格型号"
              disabled
            />
            <el-input v-model="form.deviceModel"
                      placeholder="请输入规格型号"
                      disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报修日期">
            <el-date-picker
              v-model="form.repairTime"
              placeholder="请选择报修日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="date"
              clearable
              style="width: 100%"
            />
            <el-date-picker v-model="form.repairTime"
                            placeholder="请选择报修日期"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            type="date"
                            clearable
                            style="width: 100%"
                            :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报修人">
            <el-input v-model="form.repairName" placeholder="请输入报修人" />
            <el-input v-model="form.repairName"
                      placeholder="请输入报修人"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报修报修项目">
            <el-input v-model="form.machineryCategory" placeholder="请输入报修报修项目" />
            <el-input v-model="form.machineryCategory"
                      placeholder="请输入报修报修项目"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="维修人">
            <el-input v-model="form.maintenanceName" placeholder="请输入维修人姓名" />
            <el-input v-model="form.maintenanceName"
                      placeholder="请输入维修人姓名"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="id">
        <el-col :span="12">
          <el-form-item label="报修状态">
            <el-select v-model="form.status" disabled>
              <el-option label="待维修" :value="0"></el-option>
              <el-option label="已验收" :value="1"></el-option>
              <el-option label="失败" :value="2"></el-option>
            <el-select v-model="form.status"
                       disabled>
              <el-option label="待维修"
                         :value="0"></el-option>
              <el-option label="已验收"
                         :value="1"></el-option>
              <el-option label="失败"
                         :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 验收信息展示 -->
      <el-row v-if="id && form.status === 1">
      <el-row v-if="id && (form.status === 1 || form.status === 3)">
        <el-col :span="12">
          <el-form-item label="验收人">
            <el-input v-model="form.acceptanceName" disabled />
            <el-input v-model="form.acceptanceName"
                      disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="验收时间">
            <el-input v-model="form.acceptanceTime" disabled />
            <el-input v-model="form.acceptanceTime"
                      disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="验收备注">
            <el-input v-model="form.acceptanceRemark" type="textarea" :rows="2" disabled />
            <el-input v-model="form.acceptanceRemark"
                      type="textarea"
                      :rows="2"
                      disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="故障现象">
            <el-input
              v-model="form.remark"
              :rows="2"
              type="textarea"
              placeholder="请输入故障现象"
            />
            <el-input v-model="form.remark"
                      :rows="2"
                      type="textarea"
                      placeholder="请输入故障现象"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
      <el-row v-if="operationType !== 'view'"
              :gutter="30">
        <el-col :span="24">
          <el-form-item label="附件" prop="attachmentIds">
            <FileUpload v-model:file-list="form.storageBlobDTOs" />
          <el-form-item label="附件"
                        prop="attachmentIds">
            <FileUpload v-model:file-list="form.storageBlobDTOs"
                        :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
@@ -114,119 +129,140 @@
</template>
<script setup>
import FormDialog from "@/components/Dialog/FormDialog.vue";
import FileUpload from "@/components/AttachmentUpload/file/index.vue";
import {
  addRepair,
  editRepair,
  getRepairById,
} from "@/api/equipmentManagement/repair";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import useFormData from "@/hooks/useFormData";
import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
import useUserStore from "@/store/modules/user";
  import FormDialog from "@/components/Dialog/FormDialog.vue";
  import FileUpload from "@/components/AttachmentUpload/file/index.vue";
  import {
    addRepair,
    editRepair,
    getRepairById,
  } from "@/api/equipmentManagement/repair";
  import { ElMessage } from "element-plus";
  import dayjs from "dayjs";
  import useFormData from "@/hooks/useFormData";
  import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
  import useUserStore from "@/store/modules/user";
defineOptions({
  name: "设备报修弹窗",
});
  defineOptions({
    name: "设备报修弹窗",
  });
const emits = defineEmits(["ok"]);
  const emits = defineEmits(["ok"]);
const id = ref();
const visible = ref(false);
const loading = ref(false);
  const id = ref();
  const visible = ref(false);
  const loading = ref(false);
  const operationType = ref(""); // add, edit, view
const userStore = useUserStore();
const deviceOptions = ref([]);
const fileList = ref([]);
  const computedTitle = computed(() => {
    if (operationType.value === "add") return "新增设备报修";
    if (operationType.value === "edit") return "编辑设备报修";
    if (operationType.value === "view") return "设备报修详情";
    return "";
  });
const loadDeviceName = async () => {
  const { data } = await getDeviceLedger();
  deviceOptions.value = data;
};
  const userStore = useUserStore();
  const deviceOptions = ref([]);
  const fileList = ref([]);
const { form, resetForm } = useFormData({
  deviceLedgerId: undefined, // 设备Id
  deviceName: undefined, // 设备名称
  deviceModel: undefined, // 规格型号
  repairTime: dayjs().format("YYYY-MM-DD"), // 报修日期,默认当天
  repairName: userStore.nickName, // 报修人
  remark: undefined, // 故障现象
  status: 0, // 报修状态
  machineryCategory: undefined,
  storageBlobDTOs: [],
  maintenanceName: undefined, // 维修人
});
  const loadDeviceName = async () => {
    const { data } = await getDeviceLedger();
    deviceOptions.value = data;
  };
const setDeviceModel = (deviceId) => {
  const option = deviceOptions.value.find((item) => item.id === deviceId);
  form.deviceModel = option.deviceModel;
};
  const { form, resetForm } = useFormData({
    deviceLedgerId: undefined, // 设备Id
    deviceName: undefined, // 设备名称
    deviceModel: undefined, // 规格型号
    repairTime: dayjs().format("YYYY-MM-DD"), // 报修日期,默认当天
    repairName: userStore.nickName, // 报修人
    remark: undefined, // 故障现象
    status: 0, // 报修状态
    machineryCategory: undefined,
    storageBlobDTOs: [],
    maintenanceName: undefined, // 维修人
  });
const setForm = (data) => {
  form.deviceLedgerId = data.deviceLedgerId;
  form.deviceName = data.deviceName;
  form.deviceModel = data.deviceModel;
  form.repairTime = data.repairTime;
  form.repairName = data.repairName;
  form.remark = data.remark;
  form.status = data.status;
  form.machineryCategory = data.machineryCategory;
  form.storageBlobDTOs = data.storageBlobVOs || [];
  form.maintenanceName = data.maintenanceName;
  form.acceptanceName = data.acceptanceName;
  form.acceptanceTime = data.acceptanceTime;
  form.acceptanceRemark = data.acceptanceRemark;
};
  const setDeviceModel = deviceId => {
    const option = deviceOptions.value.find(item => item.id === deviceId);
    form.deviceModel = option.deviceModel;
  };
const sendForm = async () => {
  loading.value = true;
  try {
    const { code } = id.value
      ? await editRepair({ id: unref(id), ...form })
      : await addRepair(form);
    if (code == 200) {
      ElMessage.success(`${id.value ? "编辑" : "新增"}报修成功`);
      visible.value = false;
      emits("ok");
  const setForm = data => {
    form.deviceLedgerId = data.deviceLedgerId;
    form.deviceName = data.deviceName;
    form.deviceModel = data.deviceModel;
    form.repairTime = data.repairTime;
    form.repairName = data.repairName;
    form.remark = data.remark;
    form.status = data.status;
    form.machineryCategory = data.machineryCategory;
    form.storageBlobDTOs = data.storageBlobVOs || [];
    form.maintenanceName = data.maintenanceName;
    form.acceptanceName = data.acceptanceName;
    form.acceptanceTime = data.acceptanceTime;
    form.acceptanceRemark = data.acceptanceRemark;
  };
  const sendForm = async () => {
    loading.value = true;
    try {
      const { code } = id.value
        ? await editRepair({ id: unref(id), ...form })
        : await addRepair(form);
      if (code == 200) {
        ElMessage.success(`${id.value ? "编辑" : "新增"}报修成功`);
        visible.value = false;
        emits("ok");
      }
    } finally {
      loading.value = false;
    }
  } finally {
    loading.value = false;
  }
};
  };
const handleCancel = () => {
  resetForm();
  visible.value = false;
};
  const handleCancel = () => {
    resetForm();
    visible.value = false;
  };
const handleClose = () => {
  resetForm();
  visible.value = false;
};
  const handleClose = () => {
    resetForm();
    visible.value = false;
  };
const openAdd = async () => {
  id.value = undefined;
  visible.value = true;
  fileList.value = [];
  await nextTick();
  await loadDeviceName();
};
  const openAdd = async () => {
    id.value = undefined;
    operationType.value = "add";
    visible.value = true;
    fileList.value = [];
    await nextTick();
    await loadDeviceName();
  };
const openEdit = async (editId) => {
  const { data } = await getRepairById(editId);
  id.value = editId;
  visible.value = true;
  await nextTick();
  await loadDeviceName();
  setForm(data);
};
  const openEdit = async editId => {
    const { data } = await getRepairById(editId);
    id.value = editId;
    operationType.value = "edit";
    visible.value = true;
    await nextTick();
    await loadDeviceName();
    setForm(data);
  };
defineExpose({
  openAdd,
  openEdit,
});
  const openView = async viewId => {
    const { data } = await getRepairById(viewId);
    id.value = viewId;
    operationType.value = "view";
    visible.value = true;
    await nextTick();
    await loadDeviceName();
    setForm(data);
  };
  defineExpose({
    openAdd,
    openEdit,
    openView,
  });
</script>
<style lang="scss" scoped></style>