| | |
| | | </u-popup> |
| | | |
| | | <!-- 保养结果选择器 --> |
| | | <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" |
| | | /> |
| | | </u-popup> |
| | | <up-action-sheet |
| | | :show="showResult" |
| | | :actions="resultColumns" |
| | | title="选择保养结果" |
| | | @select="onResultConfirm" |
| | | @close="showResult = false" |
| | | /> |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | |
| | | // 保养结果选项 |
| | | const resultColumns = [ |
| | | { text: '完好', value: 1 }, |
| | | { text: '维修', value: 0 } |
| | | { name: '完好', value: 1 }, |
| | | { name: '维修', value: 0 } |
| | | ]; |
| | | |
| | | // 表单验证规则 |
| | |
| | | // 提交表单 |
| | | const sendForm = async () => { |
| | | try { |
| | | // 使用uview-plus的表单验证方式 |
| | | const valid = await formRef.value.validate(); |
| | | if (!valid) return; |
| | | // 手动验证表单 |
| | | 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) { |
| | |
| | | }; |
| | | |
| | | // 确认保养结果选择 |
| | | const onResultConfirm = ({ selectedIndex, selectedValue, selectedLabel }) => { |
| | | form.value.maintenanceResult = selectedValue; |
| | | maintenanceResultText.value = selectedLabel; |
| | | resultPickerValue.value = selectedValue; |
| | | const onResultConfirm = (selected) => { |
| | | form.value.maintenanceResult = selected.value; |
| | | maintenanceResultText.value = selected.name; |
| | | showResult.value = false; |
| | | }; |
| | | |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | @import '@/static/scss/form-common.scss'; |
| | | .upkeep-maintain { |
| | | min-height: 100vh; |
| | | background: #f8f9fa; |