|
@@ -0,0 +1,234 @@
|
|
|
+import OHeader from '@/components/o-header'
|
|
|
+import OSticky from '@/components/o-sticky'
|
|
|
+import {
|
|
|
+ CellGroup,
|
|
|
+ Cell,
|
|
|
+ Button,
|
|
|
+ Popup,
|
|
|
+ DatePicker,
|
|
|
+ DatePickerColumnType,
|
|
|
+ TimePicker,
|
|
|
+ TimePickerColumnType,
|
|
|
+ ActionSheet,
|
|
|
+ showToast
|
|
|
+} from 'vant'
|
|
|
+import { defineComponent, reactive, ref, onMounted } from 'vue'
|
|
|
+import { postMessage } from '@/helpers/native-message'
|
|
|
+import styles from './course-adjust.module.less'
|
|
|
+import { useRouter, useRoute } from 'vue-router'
|
|
|
+import request from '@/helpers/request'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import { courseEmnu } from '@/constant'
|
|
|
+import { state as globalState } from '@/state'
|
|
|
+import { browser } from '@/helpers/utils'
|
|
|
+const columnsType = ref<DatePickerColumnType[]>(['year', 'month', 'day'])
|
|
|
+const columnsTypeTime = ref<TimePickerColumnType[]>(['hour', 'minute'])
|
|
|
+const schoolId = (globalState.user.data.schoolInfos || [])
|
|
|
+ .map((item: any) => {
|
|
|
+ return item.id
|
|
|
+ })
|
|
|
+ .join(',')
|
|
|
+export default defineComponent({
|
|
|
+ name: 'course-adjust',
|
|
|
+ setup() {
|
|
|
+ const router = useRouter()
|
|
|
+ const route = useRoute()
|
|
|
+ const state = reactive({
|
|
|
+ id: route.query.id,
|
|
|
+ showPopoverTime: false,
|
|
|
+ showPopoverCourseTime: false,
|
|
|
+ showPopoverTeacher: false,
|
|
|
+ currentDate: [] as any,
|
|
|
+ currentCourseDate: [] as any,
|
|
|
+ teachers: [] as any
|
|
|
+ })
|
|
|
+ const forms = reactive({
|
|
|
+ classDate: '',
|
|
|
+ teacherId: '',
|
|
|
+ courseScheduleId: '',
|
|
|
+ startTime: '',
|
|
|
+ endTime: ''
|
|
|
+ })
|
|
|
+ const courseDetail = ref({} as any)
|
|
|
+ const getDetail = async () => {
|
|
|
+ const { data } = await request.get(`/api-school/courseSchedule/detail/${route.query.id}`, {})
|
|
|
+ courseDetail.value = { ...data }
|
|
|
+ state.currentDate = [
|
|
|
+ dayjs(courseDetail.value.classDate).format('YYYY'),
|
|
|
+ dayjs(courseDetail.value.classDate).format('MM'),
|
|
|
+ dayjs(courseDetail.value.classDate).format('DD')
|
|
|
+ ]
|
|
|
+
|
|
|
+ state.currentCourseDate = [
|
|
|
+ dayjs(courseDetail.value.startTime).format('hh'),
|
|
|
+ dayjs(courseDetail.value.startTime).format('mm')
|
|
|
+ ]
|
|
|
+ forms.classDate = courseDetail.value.classDate
|
|
|
+ forms.teacherId = courseDetail.value.teacherId
|
|
|
+ forms.courseScheduleId = courseDetail.value.id
|
|
|
+ forms.startTime = courseDetail.value.startTime
|
|
|
+ forms.endTime = courseDetail.value.endTime
|
|
|
+ /**
|
|
|
+ * classDate: '',
|
|
|
+ teacherId: '',
|
|
|
+ courseScheduleId: '',
|
|
|
+ startTime: '',
|
|
|
+ endTime: ''
|
|
|
+ */
|
|
|
+ }
|
|
|
+
|
|
|
+ const getTeacherList = async () => {
|
|
|
+ try {
|
|
|
+ const { data } = await request.post(`/api-school/teacher/page`, {
|
|
|
+ data: {
|
|
|
+ schoolId,
|
|
|
+ page: 1,
|
|
|
+ rows: 99999
|
|
|
+ }
|
|
|
+ })
|
|
|
+ state.teachers = data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ name: item.nickname,
|
|
|
+ value: item.id as string
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } catch (e: any) {
|
|
|
+ showToast(e.message)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const checkTeacher = (val: any) => {
|
|
|
+ console.log(val)
|
|
|
+ courseDetail.value.teacherName = val.name
|
|
|
+ forms.teacherId = val.id
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ getDetail()
|
|
|
+ getTeacherList()
|
|
|
+ })
|
|
|
+ const reset = () => {
|
|
|
+ getDetail()
|
|
|
+ }
|
|
|
+
|
|
|
+ const submit = async () => {
|
|
|
+ console.log(forms)
|
|
|
+ try {
|
|
|
+ const { data } = await request.post(`/api-school/courseSchedule/adjust`, {
|
|
|
+ data: {
|
|
|
+ ...forms
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (browser().iPhone) {
|
|
|
+ postMessage({ api: 'back' })
|
|
|
+ } else {
|
|
|
+ this.$router.back()
|
|
|
+ }
|
|
|
+ showToast('调整成功')
|
|
|
+ } catch (e: any) {
|
|
|
+ showToast(e.message)
|
|
|
+ }
|
|
|
+ console.log('课程调整')
|
|
|
+ }
|
|
|
+ const checkTimer = (val: any) => {
|
|
|
+ // forms.practiceMonth = val.selectedValues[0] + val.selectedValues[1]
|
|
|
+ // forms.practiceMonthName = val.selectedValues[0] + '年' + val.selectedValues[1] + '月'
|
|
|
+ forms.classDate =
|
|
|
+ val.selectedValues[0] + '-' + val.selectedValues[1] + '-' + val.selectedValues[2]
|
|
|
+ courseDetail.value.classDate =
|
|
|
+ val.selectedValues[0] + '-' + val.selectedValues[1] + '-' + val.selectedValues[2]
|
|
|
+ state.showPopoverTime = false
|
|
|
+ }
|
|
|
+
|
|
|
+ const checkCourseTimer = (val: any) => {
|
|
|
+ forms.startTime =
|
|
|
+ forms.classDate + ' ' + val.selectedValues[0] + ':' + val.selectedValues[1] + ':00'
|
|
|
+ forms.endTime = dayjs(forms.startTime)
|
|
|
+ .add(courseDetail.value.singleCourseTime, 'minute')
|
|
|
+ .format('YYYY-MM-DD hh:mm:ss')
|
|
|
+
|
|
|
+ courseDetail.value.startTime = forms.startTime
|
|
|
+ state.showPopoverCourseTime = false
|
|
|
+ }
|
|
|
+
|
|
|
+ return () => (
|
|
|
+ <>
|
|
|
+ <div class={styles.courseWrap}>
|
|
|
+ <OHeader isBack={true} border={false}></OHeader>
|
|
|
+ <div class={styles.courseInfo}>
|
|
|
+ <CellGroup inset border={false}>
|
|
|
+ <Cell title="乐团名称" value={courseDetail.value.orchestraName} />
|
|
|
+ <Cell title="课程类型" value={courseEmnu[courseDetail.value.type]} />
|
|
|
+ <Cell
|
|
|
+ title="课程开始日期"
|
|
|
+ value={dayjs(courseDetail.value.classDate).format('YYYY-MM-DD')}
|
|
|
+ is-link
|
|
|
+ onClick={() => (state.showPopoverTime = true)}
|
|
|
+ />
|
|
|
+ <Cell
|
|
|
+ title="课程开始时间"
|
|
|
+ value={dayjs(courseDetail.value.startTime).format('hh:mm')}
|
|
|
+ is-link
|
|
|
+ onClick={() => {
|
|
|
+ state.showPopoverCourseTime = true
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Cell title="课程时长" value={courseDetail.value.singleCourseTime + '分钟'} />
|
|
|
+ <Cell
|
|
|
+ title="授课老师"
|
|
|
+ value={courseDetail.value.teacherName}
|
|
|
+ onClick={() => {
|
|
|
+ state.showPopoverTeacher = true
|
|
|
+ }}
|
|
|
+ is-link
|
|
|
+ />
|
|
|
+ </CellGroup>
|
|
|
+ </div>
|
|
|
+ <div class={styles.wall}></div>
|
|
|
+ <div class={['btnGroup btnMore', styles.btnWrap]}>
|
|
|
+ <Button color="#ccc" class={styles.unpassBtn} onClick={() => reset()}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button color="#FF8057" class={styles.unpassBtn} onClick={() => submit()}>
|
|
|
+ 确认调整
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ <Popup v-model:show={state.showPopoverTime} position="bottom" style="{ height: '30%' }">
|
|
|
+ <DatePicker
|
|
|
+ onCancel={() => {
|
|
|
+ state.showPopoverTime = false
|
|
|
+ }}
|
|
|
+ onConfirm={checkTimer}
|
|
|
+ v-model={state.currentDate}
|
|
|
+ title="选择年月日"
|
|
|
+ columnsType={columnsType.value}
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
+
|
|
|
+ <Popup
|
|
|
+ v-model:show={state.showPopoverCourseTime}
|
|
|
+ position="bottom"
|
|
|
+ style="{ height: '30%' }"
|
|
|
+ >
|
|
|
+ <TimePicker
|
|
|
+ onCancel={() => {
|
|
|
+ state.showPopoverCourseTime = false
|
|
|
+ }}
|
|
|
+ onConfirm={checkCourseTimer}
|
|
|
+ v-model={state.currentCourseDate}
|
|
|
+ title="选择开课时间"
|
|
|
+ columnsType={columnsTypeTime.value}
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
+ <ActionSheet
|
|
|
+ style={{ height: '40%' }}
|
|
|
+ close-on-click-action
|
|
|
+ v-model:show={state.showPopoverTeacher}
|
|
|
+ title="选择老师"
|
|
|
+ actions={state.teachers}
|
|
|
+ onSelect={checkTeacher}
|
|
|
+ ></ActionSheet>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|