menduner-uniapp/components/studentDeliveryForm/index.vue

<template>
	<view class="f-straight">
    <uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind" :label-width="formLabelWidth">
      <uni-forms-item :label="`${props.prefix}到岗日期`" name="startTime" required>
				<picker mode="date" :value="formData.startTime" fields="month" @change="e => formData.startTime = e.detail.value">
					<view v-if="formData.startTime" class="pickerText">{{ formData.startTime }}</view>
					<view v-else class="pickerText">请选择</view>
				</picker>
			</uni-forms-item>
      <uni-forms-item :label="`${props.prefix}结束日期`" name="endTime" required>
				<picker mode="date" :value="formData.endTime" fields="month" @change="e => formData.endTime = e.detail.value">
					<view v-if="formData.endTime" class="pickerText">{{ formData.endTime }}</view>
					<view v-else class="pickerText">请选择</view>
				</picker>
			</uni-forms-item>
    </uni-forms>
	</view>
</template>

<script setup>
import { ref, unref } from 'vue'
import { convertYearMonthToTimestamp } from '@/utils/date.js'

const props = defineProps({
  formLabelWidth: { type: [String, Number], default: '84px' },
  prefix: { type: String, default: '' },
})

const form = ref()
let formData = ref({
  startTime: '',
  endTime: ''
})

const rules = {
	startTime:{
		rules: [{required: true, errorMessage: '请选择到岗日期' }]
	},
	endTime:{
		rules: [{required: true, errorMessage: '请选择结束日期' }]
	}
}

// 保存
const getQueryParams = async () => {
  const valid = await unref(form).validate()
  if (!valid) return
  const startTime = convertYearMonthToTimestamp(formData.value.startTime)
  const endTime = convertYearMonthToTimestamp(formData.value.endTime)
  if (rules?.startTime && !startTime) {
    uni.showToast({ icon: 'none', title: '请选择到岗日期' })
    return
  }
  if (rules?.endTime && !endTime) {
    uni.showToast({ icon: 'none', title: '请选择结束日期' })
    return
  }
  if (startTime > endTime) {
    uni.showToast({ icon: 'none', title: '开始时间不能大于结束时间' })
    return
  }
  return { practiceStartTime: startTime, practiceEndTime: endTime }
}

defineExpose({
	getQueryParams
})
</script>

<style scoped lang="scss">
.f-straight{
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.pickerText {
  height: 36px;
  line-height: 36px;
}
</style>