123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258 |
- import OHeader from '@/components/o-header'
- import item from '@/student/coupons/item'
- import dayjs from 'dayjs'
- // import isBetween from 'dayjs/plugin/isBetween'
- // dayjs.extend(isBetween)
- import { Button, Cell, CellGroup, Popup, showToast, Sticky, TimePicker } from 'vant'
- import { defineComponent, onMounted, reactive, watch } from 'vue'
- import styles from './index.module.less'
- export default defineComponent({
- name: 'timer',
- props: {
- timerList: {
- type: Object,
- default: () => {}
- },
- times: {
- // 默认时长
- type: Number,
- default: 120
- }
- },
- emits: ['close', 'confirm'],
- setup(props, { slots, attrs, emit }) {
- const defaultTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
- const state = reactive({
- calendarDate: null,
- selectTimeStatus: false,
- selectTime: null as any,
- useTimer: [] as any, // 可排课时间段
- useTimerFormat: [] as any,
- usedTimer: [] as any, // 不可排课时间段
- minMinute: 0,
- maxMinute: 59
- })
- const onFormatter = (type: any, option: any) => {
- if (type === 'hour') {
- option.text += '时'
- }
- if (type === 'minute') {
- option.text += '分'
- }
- return option
- }
- const onFilter = (type: any, option: any) => {
- // console.log(type, option)
- // 时间
- if (type === 'hour') {
- const hour: any = []
- option.forEach((o: any) => {
- state.useTimerFormat.forEach((time: any) => {
- if (o.value >= time.startHour && o.value <= time.endHour) {
- hour.push(o)
- }
- })
- })
- // console.log(hour, 'hour')
- return hour
- }
- return option
- }
- // 时间切换时
- // [6:30, 12:00] [15:00, 18:00]
- const onChange = (val: any) => {
- // 判断是否选择小时
- if (val.columnIndex === 1) return
- // 选择时间
- const selectHour = Number(val.selectedValues[0])
- let minute = 0 // 获取开始的分钟数
- state.useTimerFormat.forEach((item: any) => {
- if (selectHour === item.startHour) {
- minute = item.startMinute
- } else if (selectHour === item.endHour) {
- minute = item.endMinute
- }
- })
- state.minMinute = minute
- state.maxMinute = 59
- }
- //
- const onFormatTimer = (val: Array<any>) => {
- const format: any = []
- val.forEach((item: any) => {
- format.push({
- startHour: Number(dayjs(item.startTime).format('HH')),
- startMinute: Number(dayjs(item.startTime).format('mm')),
- endHour: Number(dayjs(item.endTime).format('HH')),
- endMinute: Number(dayjs(item.endTime).format('mm'))
- })
- })
- return format
- }
- // 确认时间
- const onConfirm = (val: any) => {
- // console.log(val, 'val')
- const selectedValues = val.selectedValues
- const tempDate = dayjs(state.calendarDate)
- .hour(selectedValues[0])
- .minute(selectedValues[1])
- .second(0)
- // console.log(dayjs(tempDate).format('YYYY-MM-DD HH:mm:ss'), 'first', dayjs(tempDate).minute())
- // 时间加上每节课的时间,
- const lastDate = dayjs(tempDate).minute(props.times + dayjs(tempDate).minute())
- console.log(dayjs(lastDate).format('YYYY-MM-DD HH:mm:ss'), 'second')
- console.log(
- dayjs(tempDate).format('YYYY-MM-DD HH:mm:ss'),
- tempDate.toDate(),
- 'second tempDate',
- state.useTimer
- )
- let isActive = false
- state.useTimer.forEach((item: any) => {
- // if (dayjs(lastDate).isBetween(item.startTime, item.endTime, null, '[]')) {
- // isActive = true
- // }
- // 判断课程的时间范围在不在可排课时间范围内
- if (
- dayjs(tempDate).valueOf() >= dayjs(item.startTime).valueOf() &&
- dayjs(lastDate).valueOf() <= dayjs(item.endTime).valueOf()
- ) {
- isActive = true
- }
- })
- // console.log(isActive, 'isActive')
- if (!isActive) {
- showToast('您选择的时间超过可排课时间范围')
- return
- }
- state.selectTime = tempDate.toDate()
- state.selectTimeStatus = false
- }
- watch(
- () => props.timerList,
- () => {
- init()
- }
- )
- const init = () => {
- console.log(props.timerList, 'timerList')
- state.calendarDate = props.timerList?.calendarDate
- const timeDetailList = props.timerList?.timeDetailList || []
- const useTimer: any = [] // 可排课时间段
- const usedTimer: any = [] // 不可排课时间段
- timeDetailList.forEach((time: any) => {
- if (time.enable) {
- useTimer.push(time)
- } else {
- usedTimer.push(time)
- }
- })
- // 初始化时间
- state.useTimer = [...useTimer]
- const useFormat = onFormatTimer(useTimer)
- state.useTimerFormat = useFormat
- state.usedTimer = [...usedTimer]
- // console.log(onFormatTimer(useTimer), 'onFormatTimer')
- // console.log(state.useTimer, state.usedTimer, 'onUseTimer')
- // 判断有可排课数据
- if (useFormat.length > 0) {
- const temp = useFormat[0]
- state.minMinute = temp.startMinute
- state.maxMinute = 59
- }
- }
- onMounted(() => {
- init()
- })
- return () => (
- <div class={styles.timer}>
- <OHeader title="训练时间" desotry={false} />
- {/* <div class={styles.selectTimer}>{dayjs(state.calendarDate).format('YYYY年MM月DD日')}</div> */}
- <CellGroup inset class={styles.cellGroup} style={{ marginTop: '12px' }}>
- {state.useTimer.map((item: any) => (
- <Cell
- center
- title={`${dayjs(item.startTime).format('HH:mm')}~${dayjs(item.endTime).format(
- 'HH:mm'
- )}`}
- value="可选时间"
- ></Cell>
- ))}
- {state.usedTimer.map((item: any) => (
- <Cell
- center
- title={`${dayjs(item.startTime).format('HH:mm')}~${dayjs(item.endTime).format(
- 'HH:mm'
- )}`}
- value="冲突时间"
- class={styles.noTime}
- ></Cell>
- ))}
- </CellGroup>
- <CellGroup inset class={styles.cellGroup}>
- <Cell
- center
- title={'训练开始时间'}
- value={state.selectTime ? dayjs(state.selectTime).format('HH:mm') : ''}
- isLink
- onClick={() => (state.selectTimeStatus = true)}
- ></Cell>
- </CellGroup>
- <Sticky position="bottom">
- <div class={'btnGroup'}>
- <Button
- round
- block
- type="primary"
- size="large"
- onClick={() => {
- if (!state.selectTime) {
- showToast('请选择训练开始时间')
- return
- }
- emit('confirm', state.selectTime)
- emit('close')
- }}
- >
- 确认
- </Button>
- </div>
- </Sticky>
- <Popup v-model:show={state.selectTimeStatus} position="bottom" round>
- <TimePicker
- minMinute={state.minMinute}
- maxMinute={state.maxMinute}
- formatter={onFormatter}
- filter={onFilter}
- onChange={onChange}
- onConfirm={onConfirm}
- onCancel={() => (state.selectTimeStatus = false)}
- />
- </Popup>
- </div>
- )
- }
- })
|