修改组件

gaoluyang

2 天以前 025e46e11cb2962fd7692adfa401333758cc779b

 src/pages/equipmentManagement/upkeep/maintain.vue

@@ -4,65 +4,70 @@
      <PageHeader title="新增保养" @back="goBack" />
      
      <!-- 表单内容 -->
      <van-form @submit="sendForm" ref="formRef" label-width="110px" input-align="right" error-message-align="right" scroll-to-error scroll-to-error-position="center">
      <u-form ref="formRef" :model="form" :rules="formRules" label-width="110px" :error-type="['message']">
         <!-- 基本信息 -->
         <van-cell-group title="保养信息" inset>
            <van-field
         <u-form-item label="实际保养人" prop="maintenanceActuallyName" required border-bottom>
            <u-input
               v-model="form.maintenanceActuallyName"
               label="实际保养人"
               placeholder="请输入实际保养人"
               :rules="formRules.maintenanceActuallyName"
               required
               clearable
            />
            <van-field
         </u-form-item>
			
         <u-form-item label="实际保养日期" prop="maintenanceActuallyTime" required border-bottom>
            <u-input
               v-model="form.maintenanceActuallyTime"
               label="实际保养日期"
               placeholder="请选择实际保养日期"
               :rules="formRules.maintenanceActuallyTime"
               required
               readonly
               @click="showDatePicker"
               clearable
            />
            <van-field
            <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"
               label="保养结果"
               placeholder="请选择保养结果"
               :rules="formRules.maintenanceResult"
               required
               readonly
               @click="showResultPicker"
               clearable
            />
         </van-cell-group>
            <template #right>
               <u-icon name="arrow-right" @click.stop="showResultPicker" />
            </template>
         </u-form-item>
         
         <!-- 提交按钮 -->
         <view class="footer-btns">
            <van-button class="cancel-btn" @click="goBack">取消</van-button>
            <van-button class="save-btn" native-type="submit" form-type="submit" :loading="loading">保存</van-button>
            <u-button class="cancel-btn" @click="goBack">取消</u-button>
            <u-button class="save-btn" @click="sendForm" :loading="loading">保存</u-button>
         </view>
      </van-form>
      </u-form>

      <!-- 日期选择器 -->
      <van-popup v-model:show="showDate" position="bottom">
         <van-date-picker
            v-model="currentDate"
      <u-popup v-model="showDate" mode="bottom" :closeable="true">
         <u-datetime-picker
            v-model="form.maintenanceActuallyTime"
            mode="date"
            title="选择日期"
            @confirm="onDateConfirm"
            @cancel="showDate = false"
         />
      </van-popup>
      </u-popup>

      <!-- 保养结果选择器 -->
      <van-popup v-model:show="showResult" position="bottom">
         <van-picker
            :model-value="resultPickerValue"
      <u-popup v-model="showResult" mode="bottom" :closeable="true">
         <view class="popup-title">选择保养结果</view>
         <u-picker
            v-model="resultPickerValue"
            :columns="resultColumns"
            @confirm="onResultConfirm"
            @cancel="showResult = false"
         />
      </van-popup>
      </u-popup>
   </view>
</template>

@@ -73,7 +78,15 @@
import { addMaintenance } from '@/api/equipmentManagement/upkeep';
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";
import { showToast } from 'vant';
import { formatDateToYMD } from '@/utils/ruoyi';

// 显示提示信息
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
};

defineOptions({
   name: "设备保养表单",
@@ -112,8 +125,7 @@

// 清除表单校验状态
const clearValidate = () => {
   // Vant4中不需要手动清除验证状态，重置表单时会自动清除
   // formRef.value?.clearValidate(); // 删除这行
   // uview-plus不需要手动清除验证状态，重置表单时会自动清除
};

// 重置表单数据和校验状态
@@ -134,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('表单验证失败');
   }
@@ -202,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;
};

@@ -215,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;
};