<template>
|
<view class="upkeep-maintain">
|
<!-- 使用通用页面头部组件 -->
|
<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">
|
<!-- 基本信息 -->
|
<van-cell-group title="保养信息" inset>
|
<van-field
|
v-model="form.maintenanceActuallyName"
|
label="实际保养人"
|
placeholder="请输入实际保养人"
|
:rules="formRules.maintenanceActuallyName"
|
required
|
clearable
|
/>
|
<van-field
|
v-model="form.maintenanceActuallyTime"
|
label="实际保养日期"
|
placeholder="请选择实际保养日期"
|
:rules="formRules.maintenanceActuallyTime"
|
required
|
readonly
|
@click="showDatePicker"
|
clearable
|
/>
|
<van-field
|
v-model="maintenanceResultText"
|
label="保养结果"
|
placeholder="请选择保养结果"
|
:rules="formRules.maintenanceResult"
|
required
|
readonly
|
@click="showResultPicker"
|
clearable
|
/>
|
</van-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>
|
</view>
|
</van-form>
|
|
<!-- 日期选择器 -->
|
<van-popup v-model:show="showDate" position="bottom">
|
<van-date-picker
|
v-model="currentDate"
|
title="选择日期"
|
@confirm="onDateConfirm"
|
@cancel="showDate = false"
|
/>
|
</van-popup>
|
|
<!-- 保养结果选择器 -->
|
<van-popup v-model:show="showResult" position="bottom">
|
<van-picker
|
:model-value="resultPickerValue"
|
:columns="resultColumns"
|
@confirm="onResultConfirm"
|
@cancel="showResult = false"
|
/>
|
</van-popup>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue';
|
import { onShow } from '@dcloudio/uni-app';
|
import PageHeader from '@/components/PageHeader.vue';
|
import { addMaintenance } from '@/api/equipmentManagement/upkeep';
|
import useUserStore from "@/store/modules/user";
|
import dayjs from "dayjs";
|
import { showToast } from 'vant';
|
|
defineOptions({
|
name: "设备保养表单",
|
});
|
|
const userStore = useUserStore();
|
|
// 表单引用
|
const formRef = ref(null);
|
const loading = ref(false);
|
const showDate = ref(false);
|
const showResult = ref(false);
|
const currentDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]);
|
const resultPickerValue = ref([]);
|
const maintenanceResultText = ref('');
|
|
// 保养结果选项
|
const resultColumns = [
|
{ text: '完好', value: 1 },
|
{ text: '维修', value: 0 }
|
];
|
|
// 表单验证规则
|
const formRules = {
|
maintenanceActuallyName: [{ required: true, trigger: "blur", message: "请输入实际保养人" }],
|
maintenanceActuallyTime: [{ required: true, trigger: "change", message: "请选择实际保养日期" }],
|
maintenanceResult: [{ required: true, trigger: "change", message: "请选择保养结果" }],
|
};
|
|
// 使用 ref 声明表单数据
|
const form = ref({
|
maintenanceActuallyName: userStore.nickName || '', // 默认使用当前用户昵称
|
maintenanceResult: undefined, // 保养结果
|
maintenanceActuallyTime: dayjs().format("YYYY-MM-DD"), // 实际保养日期（只显示日期）
|
});
|
|
// 清除表单校验状态
|
const clearValidate = () => {
|
// Vant4中不需要手动清除验证状态，重置表单时会自动清除
|
// formRef.value?.clearValidate(); // 删除这行
|
};
|
|
// 重置表单数据和校验状态
|
const resetForm = () => {
|
form.value = {
|
maintenanceActuallyName: userStore.nickName || '',
|
maintenanceResult: undefined,
|
maintenanceActuallyTime: dayjs().format("YYYY-MM-DD"),
|
};
|
maintenanceResultText.value = '';
|
};
|
|
const resetFormAndValidate = () => {
|
resetForm();
|
// clearValidate(); // 删除这行，Vant4会自动处理
|
};
|
|
// 提交表单
|
const sendForm = async () => {
|
try {
|
// 使用Vant4的正确验证方式
|
formRef.value?.validate().then(() => {
|
// 验证通过
|
submitFormData();
|
}).catch((errors) => {
|
// 验证失败
|
showToast('请填写完整信息');
|
});
|
} catch (e) {
|
showToast('表单验证失败');
|
}
|
};
|
|
// 提交表单数据
|
const submitFormData = async () => {
|
try {
|
loading.value = true;
|
const id = getPageId();
|
|
if (!id) {
|
showToast('参数错误');
|
loading.value = false;
|
return;
|
}
|
|
// 准备提交数据，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) {
|
showToast('新增保养成功');
|
resetFormAndValidate();
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 1500);
|
} else {
|
loading.value = false;
|
}
|
} catch (e) {
|
loading.value = false;
|
showToast('操作失败');
|
}
|
};
|
|
// 返回上一页
|
const goBack = () => {
|
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 onDateConfirm = ({ selectedValues }) => {
|
// 只保存年月日，不包含时分秒
|
form.value.maintenanceActuallyTime = selectedValues.join('-');
|
currentDate.value = selectedValues;
|
showDate.value = false;
|
};
|
|
// 显示保养结果选择器
|
const showResultPicker = () => {
|
showResult.value = true;
|
};
|
|
// 确认保养结果选择
|
const onResultConfirm = ({ selectedValues, selectedOptions }) => {
|
form.value.maintenanceResult = selectedOptions[0].value;
|
maintenanceResultText.value = selectedOptions[0].text;
|
resultPickerValue.value = selectedValues;
|
showResult.value = false;
|
};
|
|
// 初始化表单数据
|
const initForm = () => {
|
// 设置保养人为当前用户昵称
|
form.value.maintenanceActuallyName = userStore.nickName || '';
|
// 设置当前日期（只包含年月日）
|
form.value.maintenanceActuallyTime = dayjs().format('YYYY-MM-DD');
|
currentDate.value = [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()];
|
};
|
|
onShow(() => {
|
// 页面显示时初始化表单
|
initForm();
|
});
|
|
onMounted(() => {
|
// 页面加载时初始化表单
|
initForm();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.upkeep-maintain {
|
min-height: 100vh;
|
background: #f8f9fa;
|
padding-bottom: 5rem;
|
}
|
|
.footer-btns {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
padding: 0.75rem 0;
|
box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05);
|
z-index: 1000;
|
}
|
|
.cancel-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #FFFFFF;
|
width: 6.375rem;
|
background: #C7C9CC;
|
box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
|
border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
|
}
|
|
.save-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #FFFFFF;
|
width: 14rem;
|
background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
|
box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
|
border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
|
}
|
|
// 响应式调整
|
@media (max-width: 768px) {
|
.submit-section {
|
padding: 12px;
|
}
|
}
|
|
.tip-text {
|
padding: 4px 16px 0 16px;
|
font-size: 12px;
|
color: #888;
|
}
|
</style>
|
