index.tsx 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. import OHeader from '@/components/o-header'
  2. import item from '@/student/coupons/item'
  3. import dayjs from 'dayjs'
  4. // import isBetween from 'dayjs/plugin/isBetween'
  5. // dayjs.extend(isBetween)
  6. import { Button, Cell, CellGroup, Popup, showToast, Sticky, TimePicker } from 'vant'
  7. import { defineComponent, onMounted, reactive, watch } from 'vue'
  8. import styles from './index.module.less'
  9. export default defineComponent({
  10. name: 'timer',
  11. props: {
  12. timerList: {
  13. type: Object,
  14. default: () => {}
  15. },
  16. times: {
  17. // 默认时长
  18. type: Number,
  19. default: 120
  20. }
  21. },
  22. emits: ['close', 'confirm'],
  23. setup(props, { slots, attrs, emit }) {
  24. const defaultTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  25. const state = reactive({
  26. calendarDate: null,
  27. selectTimeStatus: false,
  28. selectTime: null as any,
  29. useTimer: [] as any, // 可排课时间段
  30. useTimerFormat: [] as any,
  31. usedTimer: [] as any, // 不可排课时间段
  32. minMinute: 0,
  33. maxMinute: 59
  34. })
  35. const onFormatter = (type: any, option: any) => {
  36. if (type === 'hour') {
  37. option.text += '时'
  38. }
  39. if (type === 'minute') {
  40. option.text += '分'
  41. }
  42. return option
  43. }
  44. const onFilter = (type: any, option: any) => {
  45. // console.log(type, option)
  46. // 时间
  47. if (type === 'hour') {
  48. const hour: any = []
  49. option.forEach((o: any) => {
  50. state.useTimerFormat.forEach((time: any) => {
  51. if (o.value >= time.startHour && o.value <= time.endHour) {
  52. hour.push(o)
  53. }
  54. })
  55. })
  56. // console.log(hour, 'hour')
  57. return hour
  58. }
  59. return option
  60. }
  61. // 时间切换时
  62. // [6:30, 12:00] [15:00, 18:00]
  63. const onChange = (val: any) => {
  64. // 判断是否选择小时
  65. if (val.columnIndex === 1) return
  66. // 选择时间
  67. const selectHour = Number(val.selectedValues[0])
  68. let minute = 0 // 获取开始的分钟数
  69. state.useTimerFormat.forEach((item: any) => {
  70. if (selectHour === item.startHour) {
  71. minute = item.startMinute
  72. } else if (selectHour === item.endHour) {
  73. minute = item.endMinute
  74. }
  75. })
  76. state.minMinute = minute
  77. state.maxMinute = 59
  78. }
  79. //
  80. const onFormatTimer = (val: Array<any>) => {
  81. const format: any = []
  82. val.forEach((item: any) => {
  83. format.push({
  84. startHour: Number(dayjs(item.startTime).format('HH')),
  85. startMinute: Number(dayjs(item.startTime).format('mm')),
  86. endHour: Number(dayjs(item.endTime).format('HH')),
  87. endMinute: Number(dayjs(item.endTime).format('mm'))
  88. })
  89. })
  90. return format
  91. }
  92. // 确认时间
  93. const onConfirm = (val: any) => {
  94. // console.log(val, 'val')
  95. const selectedValues = val.selectedValues
  96. const tempDate = dayjs(state.calendarDate)
  97. .hour(selectedValues[0])
  98. .minute(selectedValues[1])
  99. .second(0)
  100. // console.log(dayjs(tempDate).format('YYYY-MM-DD HH:mm:ss'), 'first', dayjs(tempDate).minute())
  101. // 时间加上每节课的时间,
  102. const lastDate = dayjs(tempDate).minute(props.times + dayjs(tempDate).minute())
  103. console.log(dayjs(lastDate).format('YYYY-MM-DD HH:mm:ss'), 'second')
  104. console.log(
  105. dayjs(tempDate).format('YYYY-MM-DD HH:mm:ss'),
  106. tempDate.toDate(),
  107. 'second tempDate',
  108. state.useTimer
  109. )
  110. let isActive = false
  111. state.useTimer.forEach((item: any) => {
  112. // if (dayjs(lastDate).isBetween(item.startTime, item.endTime, null, '[]')) {
  113. // isActive = true
  114. // }
  115. // 判断课程的时间范围在不在可排课时间范围内
  116. if (
  117. dayjs(tempDate).valueOf() >= dayjs(item.startTime).valueOf() &&
  118. dayjs(lastDate).valueOf() <= dayjs(item.endTime).valueOf()
  119. ) {
  120. isActive = true
  121. }
  122. })
  123. // console.log(isActive, 'isActive')
  124. if (!isActive) {
  125. showToast('您选择的时间超过可排课时间范围')
  126. return
  127. }
  128. state.selectTime = tempDate.toDate()
  129. state.selectTimeStatus = false
  130. }
  131. watch(
  132. () => props.timerList,
  133. () => {
  134. init()
  135. }
  136. )
  137. const init = () => {
  138. console.log(props.timerList, 'timerList')
  139. state.calendarDate = props.timerList?.calendarDate
  140. const timeDetailList = props.timerList?.timeDetailList || []
  141. const useTimer: any = [] // 可排课时间段
  142. const usedTimer: any = [] // 不可排课时间段
  143. timeDetailList.forEach((time: any) => {
  144. if (time.enable) {
  145. useTimer.push(time)
  146. } else {
  147. usedTimer.push(time)
  148. }
  149. })
  150. // 初始化时间
  151. state.useTimer = [...useTimer]
  152. const useFormat = onFormatTimer(useTimer)
  153. state.useTimerFormat = useFormat
  154. state.usedTimer = [...usedTimer]
  155. // console.log(onFormatTimer(useTimer), 'onFormatTimer')
  156. // console.log(state.useTimer, state.usedTimer, 'onUseTimer')
  157. // 判断有可排课数据
  158. if (useFormat.length > 0) {
  159. const temp = useFormat[0]
  160. state.minMinute = temp.startMinute
  161. state.maxMinute = 59
  162. }
  163. }
  164. onMounted(() => {
  165. init()
  166. })
  167. return () => (
  168. <div class={styles.timer}>
  169. <OHeader title="训练时间" desotry={false} />
  170. {/* <div class={styles.selectTimer}>{dayjs(state.calendarDate).format('YYYY年MM月DD日')}</div> */}
  171. <CellGroup inset class={styles.cellGroup} style={{ marginTop: '12px' }}>
  172. {state.useTimer.map((item: any) => (
  173. <Cell
  174. center
  175. title={`${dayjs(item.startTime).format('HH:mm')}~${dayjs(item.endTime).format(
  176. 'HH:mm'
  177. )}`}
  178. value="可选时间"
  179. ></Cell>
  180. ))}
  181. {state.usedTimer.map((item: any) => (
  182. <Cell
  183. center
  184. title={`${dayjs(item.startTime).format('HH:mm')}~${dayjs(item.endTime).format(
  185. 'HH:mm'
  186. )}`}
  187. value="冲突时间"
  188. class={styles.noTime}
  189. ></Cell>
  190. ))}
  191. </CellGroup>
  192. <CellGroup inset class={styles.cellGroup}>
  193. <Cell
  194. center
  195. title={'训练开始时间'}
  196. value={state.selectTime ? dayjs(state.selectTime).format('HH:mm') : ''}
  197. isLink
  198. onClick={() => (state.selectTimeStatus = true)}
  199. ></Cell>
  200. </CellGroup>
  201. <Sticky position="bottom">
  202. <div class={'btnGroup'}>
  203. <Button
  204. round
  205. block
  206. type="primary"
  207. size="large"
  208. onClick={() => {
  209. if (!state.selectTime) {
  210. showToast('请选择训练开始时间')
  211. return
  212. }
  213. emit('confirm', state.selectTime)
  214. emit('close')
  215. }}
  216. >
  217. 确认
  218. </Button>
  219. </div>
  220. </Sticky>
  221. <Popup v-model:show={state.selectTimeStatus} position="bottom" round>
  222. <TimePicker
  223. minMinute={state.minMinute}
  224. maxMinute={state.maxMinute}
  225. formatter={onFormatter}
  226. filter={onFilter}
  227. onChange={onChange}
  228. onConfirm={onConfirm}
  229. onCancel={() => (state.selectTimeStatus = false)}
  230. />
  231. </Popup>
  232. </div>
  233. )
  234. }
  235. })