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

gaoluyang

2025-11-18 e3179b9da9ed718bb8240ee8a45b3f8c2ad479cb

 src/views/equipmentManagement/upkeep/Modal/MaintenanceModal.vue

@@ -1,25 +1,54 @@
<template>
  <el-drawer v-model="visible" :title="modalOptions.title" direction="ltr">
    <MaintenanceForm ref="maintenanceFormRef" />
  <el-dialog v-model="visible" :title="modalOptions.title" direction="ltr">
    <el-form :model="form" :rules="rules" label-width="110px" ref="formRef">
      <el-form-item label="实际保养人" prop="maintenanceActuallyName">
        <el-input
          v-model="form.maintenanceActuallyName"
          placeholder="请输入实际保养人"
        ></el-input>
      </el-form-item>
      <el-form-item label="实际保养日期" prop="maintenanceActuallyTime">
        <el-date-picker
          v-model="form.maintenanceActuallyTime"
          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-item label="保养结果" prop="maintenanceResult">
        <el-select v-model="form.maintenanceResult" placeholder="请选择保养结果">
          <el-option label="完好" :value="1"></el-option>
          <el-option label="维修" :value="0"></el-option>
        </el-select>
      </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>
    <template #footer>
         <el-button type="primary" @click="sendForm" :loading="loading">
            {{ modalOptions.confirmText }}
         </el-button>
      <el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button>
    </template>
  </el-drawer>
  </el-dialog>
</template>

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

defineOptions({
  name: "保养模态框",
});

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

const {
@@ -30,27 +59,63 @@
  modalOptions,
  handleConfirm,
  closeModal,
} = useModal({ title: "设备维修" });
} = useModal({ title: "设备保养" });

/**
 * @desc 保存保养
 */
const userStore = useUserStore();
const formRef = ref();
const { form, resetForm } = useFormData({
  maintenanceActuallyName: undefined, // 实际保养人
  maintenanceActuallyTime: undefined, // 实际保养日期
  maintenanceResult: undefined, // 保养结果
   money: undefined, // 保养金额
});

const rules = {
  maintenanceActuallyName: [
    { required: true, message: "请输入实际保养人", trigger: "blur" },
  ],
  maintenanceActuallyTime: [
    { required: true, message: "请选择实际保养日期", trigger: "change" },
  ],
  maintenanceResult: [
    { required: true, message: "请选择保养结果", trigger: "change" },
  ],
   money: [
    { required: true, message: "请输入本次保养金额", trigger: "change" },
  ],
};

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

const open = async (id, row) => {
  openModal(id);
  await nextTick();
  maintenanceFormRef.value.setForm(row);
  if (!row) {
    resetForm();
    form.maintenanceActuallyName = userStore.nickName;
    return;
  }
  form.maintenanceActuallyName = row.maintenanceActuallyName ?? userStore.nickName;
  form.maintenanceActuallyTime = row.maintenanceActuallyTime
    ? dayjs(row.maintenanceActuallyTime).format("YYYY-MM-DD HH:mm:ss")
    : undefined;
  form.maintenanceResult = row.maintenanceResult;
  form.money = row.money;
};
defineExpose({
  open,