menduner/src/views/recruit/personal/components/studentDeliveryForm.vue

<template>
	<div>
    <p class="color-warning font-size-15 mb-5">请填写您的实习到岗信息</p>
    <CtForm ref="CtFormRef" :items="formItems" />
  </div>
</template>

<script setup>
// 学生-实习到岗信息表单
defineOptions({ name: 'studentDeliveryForm'})
import { ref, nextTick } from 'vue'
import Snackbar from '@/plugins/snackbar'

const CtFormRef = ref()

const startTimeChange = (v) => {
  const startTime = formItems.value.options.find(e => e.key === 'practiceStartTime')
  const endTime = formItems.value.options.find(e => e.key === 'practiceEndTime')
  if (startTime?.value && endTime?.value && startTime.value > endTime.value) {
    Snackbar.warning('开始时间不能大于结束时间！')
    nextTick(() => {
      startTime.value = endTime.value
    })
  }
}
const endTimeChange = (v) => {
  const startTime = formItems.value.options.find(e => e.key === 'practiceStartTime')
  const endTime = formItems.value.options.find(e => e.key === 'practiceEndTime')
  if (startTime?.value && endTime?.value && startTime.value > endTime.value) {
    Snackbar.warning('结束时间不能小于开始时间')
    nextTick(() => {
      endTime.value = startTime.value
    })
  }
}
const formItems = ref({
  options: [
    {
      type: 'datePicker',
      key: 'practiceStartTime',
      mode: 'date',
      value: null,
      labelWidth: 120,
      label: '到岗日期 *',
      disabledDate: true,
      teleported: true,
      rules: [v => !!v || '请选择到岗日期'],
      change: startTimeChange
    },
    {
      type: 'datePicker',
      key: 'practiceEndTime',
      mode: 'date',
      value: null,
      disabledDate: true,
      labelWidth: 120,
      label: '结束日期 *',
      flexStyle: 'mt-5',
      teleported: true,
      rules: [v => !!v || '请选择结束日期'],
      change: endTimeChange
    },
    // {
    //   type: 'autocomplete',
    //   key: 'dateType',
    //   value: null,
    //   default: null,
    //   label: '每周到岗天数 *',
    //   outlined: true,
    //   itemText: 'label',
    //   itemValue: 'value',
    //   flexStyle: 'mt-5',
    //   rules: [v => !!v || '请选择每周到岗天数'],
    //   items: [
    //     { label: '1天', value: 1 },
    //     { label: '2天', value: 2 },
    //     { label: '3天', value: 3 },
    //     { label: '4天', value: 4 },
    //     { label: '5天', value: 5 },
    //     { label: '6天', value: 6 },
    //     { label: '7天', value: 7 }
    //   ]
    // }
  ]
})

const getQueryParams = () => {
	let obj = {}
	formItems.value.options.forEach(item => obj[item.key] = item.value)
	return obj
}

defineExpose({
	CtFormRef,
	getQueryParams
})
</script>

<style scoped lang="scss">

</style>