gaoluyang
18 小时以前 91af6caf5a797bcc912e9a22656c97775bd4a198
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,14 +59,13 @@
      </u-popup>
      <!-- 保养结果选择器 -->
      <u-popup v-model="showResult" mode="bottom">
         <u-picker
            v-model="resultPickerValue"
            :columns="resultColumns"
            @confirm="onResultConfirm"
            @cancel="showResult = false"
         />
      </u-popup>
      <up-action-sheet
         :show="showResult"
         :actions="resultColumns"
         title="选择保养结果"
         @select="onResultConfirm"
         @close="showResult = false"
      />
   </view>
</template>
@@ -70,16 +76,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: "设备保养表单",
@@ -98,8 +103,8 @@
// 保养结果选项
const resultColumns = [
   { text: '完好', value: 1 },
   { text: '维修', value: 0 }
   { name: '完好', value: 1 },
   { name: '维修', value: 0 }
];
// 表单验证规则
@@ -113,13 +118,12 @@
const form = ref({
   maintenanceActuallyName: userStore.nickName || '', // 默认使用当前用户昵称
   maintenanceResult: undefined, // 保养结果
   maintenanceActuallyTime: dayjs().format("YYYY-MM-DD"), // 实际保养日期(只显示日期)
   maintenanceActuallyTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 实际保养日期(只显示日期)
});
// 清除表单校验状态
const clearValidate = () => {
   // Vant4中不需要手动清除验证状态,重置表单时会自动清除
   // formRef.value?.clearValidate(); // 删除这行
   // uview-plus不需要手动清除验证状态,重置表单时会自动清除
};
// 重置表单数据和校验状态
@@ -127,7 +131,7 @@
   form.value = {
      maintenanceActuallyName: userStore.nickName || '',
      maintenanceResult: undefined,
      maintenanceActuallyTime: dayjs().format("YYYY-MM-DD"),
      maintenanceActuallyTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
   };
   maintenanceResultText.value = '';
};
@@ -140,14 +144,27 @@
// 提交表单
const sendForm = async () => {
   try {
      // 使用Vant4的正确验证方式
      formRef.value?.validate().then(() => {
         // 验证通过
         submitFormData();
      }).catch((errors) => {
         // 验证失败
         showToast('请填写完整信息');
      });
      // 手动验证表单
      let isValid = true;
      let errorMessage = '';
      if (!form.value.maintenanceActuallyName) {
         isValid = false;
         errorMessage = '请输入实际保养人';
      } else if (!form.value.maintenanceActuallyTime) {
         isValid = false;
         errorMessage = '请选择实际保养日期';
      } else if (form.value.maintenanceResult === undefined) {
         isValid = false;
         errorMessage = '请选择保养结果';
      }
      if (!isValid) {
         showToast(errorMessage);
         return;
      }
      // 验证通过
      submitFormData();
   } catch (e) {
      showToast('表单验证失败');
   }
@@ -167,11 +184,6 @@
      
      // 准备提交数据,maintenanceActuallyTime 加上当前时分秒
      const submitData = { ...form.value };
      if (submitData.maintenanceActuallyTime && !submitData.maintenanceActuallyTime.includes(':')) {
         // 如果 maintenanceActuallyTime 只包含日期,添加当前时分秒
         submitData.maintenanceActuallyTime = submitData.maintenanceActuallyTime + ' ' + dayjs().format('HH:mm:ss');
      }
      const { code } = await addMaintenance({ id: id, ...submitData });
      
      if (code == 200) {
@@ -191,15 +203,15 @@
// 返回上一页
const goBack = () => {
   // 清除存储的id
   uni.removeStorageSync('repairId');
   uni.navigateBack();
};
// 获取页面ID
const getPageId = () => {
   const pages = getCurrentPages();
   const currentPage = pages[pages.length - 1];
   const options = currentPage.options;
   return options.id;
   // 从本地存储获取id
   return uni.getStorageSync('repairId');
};
// 显示日期选择器
@@ -208,10 +220,9 @@
};
// 确认日期选择
const onDateConfirm = ({ selectedValues }) => {
const onDateConfirm = (e) => {
   // 只保存年月日,不包含时分秒
   form.value.maintenanceActuallyTime = selectedValues.join('-');
   currentDate.value = selectedValues;
   form.value.maintenanceActuallyTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss');
   showDate.value = false;
};
@@ -221,10 +232,9 @@
};
// 确认保养结果选择
const onResultConfirm = ({ selectedValues, selectedOptions }) => {
   form.value.maintenanceResult = selectedOptions[0].value;
   maintenanceResultText.value = selectedOptions[0].text;
   resultPickerValue.value = selectedValues;
const onResultConfirm = (selected) => {
   form.value.maintenanceResult = selected.value;
   maintenanceResultText.value = selected.name;
   showResult.value = false;
};
@@ -233,7 +243,7 @@
   // 设置保养人为当前用户昵称
   form.value.maintenanceActuallyName = userStore.nickName || '';
   // 设置当前日期(只包含年月日)
   form.value.maintenanceActuallyTime = dayjs().format('YYYY-MM-DD');
   form.value.maintenanceActuallyTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
   currentDate.value = [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()];
};
@@ -249,6 +259,7 @@
</script>
<style scoped lang="scss">
@import '@/static/scss/form-common.scss';
.upkeep-maintain {
   min-height: 100vh;
   background: #f8f9fa;