修改组件

gaoluyang

2 天以前 025e46e11cb2962fd7692adfa401333758cc779b

 src/pages/equipmentManagement/repair/maintain.vue

@@ -4,57 +4,56 @@
      <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="140rpx">
         <!-- 基本信息 -->
         <van-cell-group title="维修信息" inset>
            <van-field
               v-model="form.maintenanceName"
               label="维修人"
               placeholder="请输入维修人"
               :rules="formRules.maintenanceName"
               required
               clearable
            />
            <van-field
               v-model="form.maintenanceResult"
               label="维修结果"
               type="textarea"
               rows="3"
               placeholder="请输入维修结果"
               :rules="formRules.maintenanceResult"
               required
               clearable
               maxlength="200"
               show-word-limit
            />
            <van-field
               v-model="form.maintenanceTime"
               label="维修日期"
               placeholder="请选择维修日期"
               :rules="formRules.maintenanceTime"
               required
               readonly
               @click="showDatePicker"
               clearable
            />
         </van-cell-group>
         <u-cell-group title="维修信息" inset>
            <u-form-item prop="maintenanceName" label="维修人" required>
               <u-input
                  v-model="form.maintenanceName"
                  placeholder="请输入维修人"
                  clearable
               />
            </u-form-item>
            <u-form-item prop="maintenanceResult" label="维修结果" required>
               <u-input
                  v-model="form.maintenanceResult"
                  type="textarea"
                  rows="3"
                  placeholder="请输入维修结果"
                  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">
            <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="submitForm" :loading="loading">保存</u-button>
         </view>
      </van-form>
      </u-form>

      <!-- 日期选择器 -->
      <van-popup v-model:show="showDate" position="bottom">
         <van-date-picker
            v-model="currentDate"
            title="选择日期"
            @confirm="onDateConfirm"
            @cancel="showDate = false"
         />
      </van-popup>
      <up-datetime-picker
         :show="showDatePicker"
         v-model="pickerDateValue"
         mode="date"
         title="选择日期"
         @confirm="onDateConfirm"
      />
   </view>
</template>

@@ -65,7 +64,7 @@
import { addMaintain } from '@/api/equipmentManagement/repair';
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";
import { showToast } from 'vant';
import { formatDateToYMD } from '@/utils/ruoyi'

defineOptions({
   name: "设备维修表单",
@@ -76,8 +75,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 = {
@@ -93,10 +92,17 @@
   maintenanceTime: dayjs().format("YYYY-MM-DD"), // 维修日期（只显示日期）
});

// 自定义showToast函数
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
};

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

// 重置表单数据和校验状态
@@ -110,20 +116,16 @@

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('表单验证失败');
   }
@@ -178,17 +180,11 @@
   return options.id;
};

// 显示日期选择器
const showDatePicker = () => {
   showDate.value = true;
};

// 确认日期选择
const onDateConfirm = ({ selectedValues }) => {
   // 只保存年月日，不包含时分秒
   form.value.maintenanceTime = selectedValues.join('-');
   currentDate.value = selectedValues;
   showDate.value = false;
const onDateConfirm = (e) => {
   form.value.maintenanceTime = formatDateToYMD(e.value)
   pickerDateValue.value = formatDateToYMD(e.value)
   showDatePicker.value = false;
};

// 初始化表单数据
@@ -197,7 +193,6 @@
   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()];
};

onShow(() => {
@@ -212,6 +207,7 @@
</script>

<style scoped lang="scss">
@import '@/static/scss/form-common.scss';
.repair-maintain {
   min-height: 100vh;
   background: #f8f9fa;