1.设备台帐二维码上加上设备名称 2.设备保养和保修加上每次的保养保修金额 3.加一个汇总页面，可以看到每个设备的每个月的金额，也可以选择看每年的金额

gaoluyang

2025-11-18 e3179b9da9ed718bb8240ee8a45b3f8c2ad479cb

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

@@ -1,6 +1,27 @@
<template>
  <el-dialog v-model="visible" :title="modalOptions.title" direction="ltr">
    <MaintainForm ref="maintainFormRef" />
    <el-form :model="form" :rules="rules" label-width="110px" ref="formRef">
      <el-form-item label="维修人" prop="maintenanceName">
        <el-input v-model="form.maintenanceName" placeholder="请输入维修人" />
      </el-form-item>
      <el-form-item label="维修结果" prop="maintenanceResult">
        <el-input v-model="form.maintenanceResult" placeholder="请输入维修结果" />
      </el-form-item>
      <el-form-item label="本次维修金额" prop="money">
        <el-input-number v-model="form.money" :min="0" :precision="2" style="width: 100%" />
      </el-form-item>
      <el-form-item label="维修日期" prop="maintenanceTime">
        <el-date-picker
          v-model="form.maintenanceTime"
          placeholder="请选择维修日期"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetime"
          clearable
          style="width: 100%"
        />
      </el-form-item>
    </el-form>
    <template #footer>
         <el-button type="primary" @click="sendForm" :loading="loading">
            {{ modalOptions.confirmText }}
@@ -11,15 +32,17 @@
</template>

<script setup>
import { ref, nextTick } from "vue";
import { useModal } from "@/hooks/useModal";
import MaintainForm from "../Form/MaintainForm.vue";
import useFormData from "@/hooks/useFormData";
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";
import { addMaintain } from "@/api/equipmentManagement/repair";

defineOptions({
  name: "维修模态框",
});

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

const {
@@ -32,22 +55,49 @@
  closeModal,
} = useModal({ title: "设备维修" });

const userStore = useUserStore();
const formRef = ref();
const { form, resetForm } = useFormData({
  maintenanceName: undefined, // 维修名称
  maintenanceResult: undefined, // 维修结果
  maintenanceTime: undefined, // 维修日期
  money: undefined, // 本次维修金额
});

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

const setForm = (data) => {
  form.maintenanceName = data.maintenanceName ?? userStore.nickName;
  form.maintenanceResult = data.maintenanceResult;
  form.money = data.money;
  form.maintenanceTime =
    dayjs(data.maintenanceTime).format("YYYY-MM-DD HH:mm:ss") ??
    dayjs().format("YYYY-MM-DD HH:mm:ss");
};

const sendForm = async () => {
  await formRef.value.validate(async (valid) => {
    if (!valid) return;
  loading.value = true;
  const form = await maintainFormRef.value.getForm();
  const { code } = await addMaintain({ id: id.value, ...form });
  if (code == 200) {
    emits("ok");
    maintainFormRef.value.resetForm();
      resetForm();
    closeModal();
  }
  loading.value = false;
  });
};

const open = async (id, row) => {
  openModal(id);
  await nextTick();
  maintainFormRef.value.setForm(row);
  setForm(row);
};

defineExpose({