gaoluyang
2 天以前 952240909a036a341300ec25a2259e6faed33362
src/pages/equipmentManagement/upkeep/maintain.vue
@@ -4,47 +4,54 @@
      <PageHeader title="新增保养" @back="goBack" />
      
      <!-- 表单内容 -->
      <u-form @submit="sendForm" ref="formRef" label-width="110" input-align="right" error-message-align="right">
      <u-form ref="formRef" :model="form" :rules="formRules" label-width="110px" :error-type="['message']">
         <!-- 基本信息 -->
         <u-cell-group title="保养信息">
            <u-form-item label="实际保养人" prop="maintenanceActuallyName" required>
               <u-input
                  v-model="form.maintenanceActuallyName"
                  placeholder="请输入实际保养人"
                  clearable
               />
            </u-form-item>
            <u-form-item label="实际保养日期" prop="maintenanceActuallyTime" required>
               <u-input
                  v-model="form.maintenanceActuallyTime"
                  placeholder="请选择实际保养日期"
                  readonly
                  @click="showDatePicker"
                  clearable
               />
            </u-form-item>
            <u-form-item label="保养结果" prop="maintenanceResult" required>
               <u-input
                  v-model="maintenanceResultText"
                  placeholder="请选择保养结果"
                  readonly
                  @click="showResultPicker"
                  clearable
               />
            </u-form-item>
         </u-cell-group>
         <u-form-item label="实际保养人" prop="maintenanceActuallyName" required border-bottom>
            <u-input
               v-model="form.maintenanceActuallyName"
               placeholder="请输入实际保养人"
               clearable
            />
         </u-form-item>
         <u-form-item label="实际保养日期" prop="maintenanceActuallyTime" required border-bottom>
            <u-input
               v-model="form.maintenanceActuallyTime"
               placeholder="请选择实际保养日期"
               readonly
               @click="showDatePicker"
               clearable
            />
            <template #right>
               <u-icon name="arrow-right" @click.stop="showDatePicker" />
            </template>
         </u-form-item>
         <u-form-item label="保养结果" prop="maintenanceResult" required border-bottom>
            <u-input
               v-model="maintenanceResultText"
               placeholder="请选择保养结果"
               readonly
               @click="showResultPicker"
               clearable
            />
            <template #right>
               <u-icon name="arrow-right" @click.stop="showResultPicker" />
            </template>
         </u-form-item>
         
         <!-- 提交按钮 -->
         <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="sendForm" :loading="loading">保存</u-button>
         </view>
      </u-form>
      <!-- 日期选择器 -->
      <u-popup v-model="showDate" mode="bottom">
      <u-popup v-model="showDate" mode="bottom" :closeable="true">
         <u-datetime-picker
            v-model="currentDate"
            v-model="form.maintenanceActuallyTime"
            mode="date"
            title="选择日期"
            @confirm="onDateConfirm"
            @cancel="showDate = false"
@@ -52,7 +59,8 @@
      </u-popup>
      <!-- 保养结果选择器 -->
      <u-popup v-model="showResult" mode="bottom">
      <u-popup v-model="showResult" mode="bottom" :closeable="true">
         <view class="popup-title">选择保养结果</view>
         <u-picker
            v-model="resultPickerValue"
            :columns="resultColumns"
@@ -70,16 +78,15 @@
import { addMaintenance } from '@/api/equipmentManagement/upkeep';
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";
// 替换 Vant 的 toast
// import { showToast } from 'vant';
import { formatDateToYMD } from '@/utils/ruoyi';
// 替换 toast 方法
// 显示提示信息
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
}
};
defineOptions({
   name: "设备保养表单",
@@ -118,8 +125,7 @@
// 清除表单校验状态
const clearValidate = () => {
   // Vant4中不需要手动清除验证状态,重置表单时会自动清除
   // formRef.value?.clearValidate(); // 删除这行
   // uview-plus不需要手动清除验证状态,重置表单时会自动清除
};
// 重置表单数据和校验状态
@@ -140,14 +146,11 @@
// 提交表单
const sendForm = async () => {
   try {
      // 使用Vant4的正确验证方式
      formRef.value?.validate().then(() => {
         // 验证通过
         submitFormData();
      }).catch((errors) => {
         // 验证失败
         showToast('请填写完整信息');
      });
      // 使用uview-plus的表单验证方式
      const valid = await formRef.value.validate();
      if (!valid) return;
      // 验证通过
      submitFormData();
   } catch (e) {
      showToast('表单验证失败');
   }
@@ -208,10 +211,9 @@
};
// 确认日期选择
const onDateConfirm = ({ selectedValues }) => {
const onDateConfirm = (e) => {
   // 只保存年月日,不包含时分秒
   form.value.maintenanceActuallyTime = selectedValues.join('-');
   currentDate.value = selectedValues;
   form.value.maintenanceActuallyTime = formatDateToYMD(e.value);
   showDate.value = false;
};
@@ -221,10 +223,10 @@
};
// 确认保养结果选择
const onResultConfirm = ({ selectedValues, selectedOptions }) => {
   form.value.maintenanceResult = selectedOptions[0].value;
   maintenanceResultText.value = selectedOptions[0].text;
   resultPickerValue.value = selectedValues;
const onResultConfirm = ({ selectedIndex, selectedValue, selectedLabel }) => {
   form.value.maintenanceResult = selectedValue;
   maintenanceResultText.value = selectedLabel;
   resultPickerValue.value = selectedValue;
   showResult.value = false;
};