gaoluyang
2 天以前 952240909a036a341300ec25a2259e6faed33362
src/pages/equipmentManagement/repair/maintain.vue
@@ -1,55 +1,61 @@
<template>
   <view class="repair-maintain">
      <!-- 使用通用页面头部组件 -->
      <PageHeader title="设备维修" @back="goBack" />
      <PageHeader title="新增维修" @back="goBack" />
      
      <!-- 表单内容 -->
      <u-form @submit="sendForm" ref="formRef" label-width="110" input-align="right" error-message-align="right">
         <!-- 维修信息 -->
         <u-cell-group title="维修信息">
            <u-form-item label="实际维修人" prop="repairPerson" required border-bottom>
      <u-form ref="formRef" :model="form" :rules="formRules" label-width="140rpx">
         <!-- 基本信息 -->
         <u-cell-group title="维修信息" inset>
            <u-form-item prop="maintenanceName" label="维修人" required>
               <u-input
                  v-model="form.repairPerson"
                  placeholder="请输入实际维修人"
                  v-model="form.maintenanceName"
                  placeholder="请输入维修人"
                  clearable
               />
            </u-form-item>
            <u-form-item label="实际维修日期" prop="repairDate" required border-bottom>
            <u-form-item prop="maintenanceResult" label="维修结果" required>
               <u-input
                  v-model="form.repairDate"
                  placeholder="请选择实际维修日期"
                  readonly
                  @click="showDatePicker"
                  clearable
               />
            </u-form-item>
            <u-form-item label="维修结果" prop="repairResult" required border-bottom>
               <u-textarea
                  v-model="form.repairResult"
                  v-model="form.maintenanceResult"
                  type="textarea"
                  rows="3"
                  placeholder="请输入维修结果"
                  :maxlength="200"
                  count
                  :autoHeight="true"
                  clearable
                  maxlength="200"
                  show-word-limit
               />
            </u-form-item>
            <u-form-item label="维修日期" prop="maintenanceTime" required border-bottom>
               <u-input
                  v-model="form.maintenanceTime"
                  placeholder="请选择维修日期"
                  readonly
                  @click="showDatePicker = true"
                  clearable
               />
               <template #right>
                  <u-icon name="arrow-right" @click="showDatePicker = true"></u-icon>
               </template>
            </u-form-item>
         </u-cell-group>
         
         <!-- 提交按钮 -->
         <view class="footer-btns">
            <u-button class="cancel-btn" @click="goBack">取消</u-button>
            <u-button class="save-btn" type="primary" @click="sendForm" :loading="loading">保存</u-button>
            <u-button class="save-btn" @click="submitForm" :loading="loading">保存</u-button>
         </view>
      </u-form>
      <!-- 日期选择器 -->
      <u-popup v-model="showDate" mode="bottom">
         <u-datetime-picker
            v-model="currentDate"
            title="选择日期"
            @confirm="onDateConfirm"
            @cancel="showDate = false"
         />
      </u-popup>
      <up-datetime-picker
         :show="showDatePicker"
         v-model="pickerDateValue"
         mode="datetime"
         title="选择日期"
         format="YYYY-MM-DD HH:mm:ss"
         @confirm="onDateConfirm"
         @cancel="showDatePicker = false"
      />
   </view>
</template>
@@ -60,16 +66,6 @@
import { addMaintain } from '@/api/equipmentManagement/repair';
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";
// 替换 Vant 的 toast
// import { showToast } from 'vant';
// 替换 toast 方法
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
}
defineOptions({
   name: "设备维修表单",
@@ -80,8 +76,8 @@
// 表单引用
const formRef = ref(null);
const loading = ref(false);
const showDate = ref(false);
const currentDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]);
const showDatePicker = ref(false);
const pickerDateValue = ref(Date.now());; // 使用时间戳
// 表单验证规则
const formRules = {
@@ -94,13 +90,15 @@
const form = ref({
   maintenanceName: userStore.nickName || '', // 默认使用当前用户昵称
   maintenanceResult: undefined, // 维修结果
   maintenanceTime: dayjs().format("YYYY-MM-DD"), // 维修日期(只显示日期)
   maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 维修日期(只显示日期)
});
// 清除表单校验状态
const clearValidate = () => {
   // Vant4中不需要手动清除验证状态,重置表单时会自动清除
   // formRef.value?.clearValidate(); // 删除这行
// 自定义showToast函数
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
};
// 重置表单数据和校验状态
@@ -108,26 +106,22 @@
   form.value = {
      maintenanceName: userStore.nickName || '',
      maintenanceResult: undefined,
      maintenanceTime: dayjs().format("YYYY-MM-DD"),
      maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
   };
};
const resetFormAndValidate = () => {
   resetForm();
   // clearValidate(); // 删除这行,Vant4会自动处理
};
// 提交表单
const sendForm = async () => {
const submitForm = async () => {
   try {
      // 使用Vant4的正确验证方式
      formRef.value?.validate().then(() => {
         // 验证通过
      // 使用uview-plus的表单验证方式
      const valid = await formRef.value.validate();
      if (valid) {
         submitFormData();
      }).catch((errors) => {
         // 验证失败
         showToast('请填写完整信息');
      });
      }
   } catch (e) {
      showToast('表单验证失败');
   }
@@ -147,10 +141,6 @@
      
      // 准备提交数据,maintenanceTime 加上当前时分秒
      const submitData = { ...form.value };
      if (submitData.maintenanceTime && !submitData.maintenanceTime.includes(':')) {
         // 如果 maintenanceTime 只包含日期,添加当前时分秒
         submitData.maintenanceTime = submitData.maintenanceTime + ' ' + dayjs().format('HH:mm:ss');
      }
      
      const { code } = await addMaintain({ id: id, ...submitData });
      
@@ -158,12 +148,14 @@
         showToast('新增维修成功');
         resetFormAndValidate();
         setTimeout(() => {
            uni.navigateBack();
         }, 1500);
            goBack();
         }, 500);
      } else {
         loading.value = false;
      }
   } catch (e) {
      console.log(e);
      loading.value = false;
      showToast('操作失败');
   }
@@ -171,28 +163,21 @@
// 返回上一页
const goBack = () => {
   uni.removeStorageSync('repairId');
   uni.navigateBack();
};
// 获取页面ID
const getPageId = () => {
   const pages = getCurrentPages();
   const currentPage = pages[pages.length - 1];
   const options = currentPage.options;
   return options.id;
};
// 显示日期选择器
const showDatePicker = () => {
   showDate.value = true;
   const id = uni.getStorageSync('repairId');
   return id;
};
// 确认日期选择
const onDateConfirm = ({ selectedValues }) => {
   // 只保存年月日,不包含时分秒
   form.value.maintenanceTime = selectedValues.join('-');
   currentDate.value = selectedValues;
   showDate.value = false;
const onDateConfirm = (e) => {
   form.value.maintenanceTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
   pickerDateValue.value = e.value
   showDatePicker.value = false;
};
// 初始化表单数据
@@ -200,8 +185,7 @@
   // 设置维修人为当前用户昵称
   form.value.maintenanceName = userStore.nickName || '';
   // 设置当前日期(只包含年月日)
   form.value.maintenanceTime = dayjs().format('YYYY-MM-DD');
   currentDate.value = [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()];
   form.value.maintenanceTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
};
onShow(() => {
@@ -216,6 +200,7 @@
</script>
<style scoped lang="scss">
@import '@/static/scss/form-common.scss';
.repair-maintain {
   min-height: 100vh;
   background: #f8f9fa;