123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309 |
- import OSearch from '@/components/o-search'
- import OEmpty from '@/components/o-empty'
- import dayjs from 'dayjs'
- import OFullRefresh from '@/components/o-full-refresh'
- import {
- Icon,
- Popover,
- DatePicker,
- DatePickerColumnType,
- Popup,
- List,
- PullRefresh,
- ActionSheet,
- showToast,
- Sticky,
- Picker
- } from 'vant'
- import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
- import { useRouter } from 'vue-router'
- import styles from './attent-student.module.less'
- import request from '@/helpers/request'
- import { state as globalState } from '@/state'
- import StudentAttItem from '../modals/studentAtt-item'
- import { formatterDatePicker } from '@/helpers/utils'
- import { courseEmnu } from '@/constant'
- export default defineComponent({
- name: 'attend-student',
- props: {
- toHeight: {
- type: Number,
- default: 0
- },
- type: {
- type: String,
- default: ''
- }
- },
- setup(props, { emit }) {
- const router = useRouter()
- const state = reactive({
- showPopoverTime: false,
- showPopoverOrchestra: false,
- showPopoverSubject: false,
- isClick: false,
- actions: [] as any,
- subjects: [] as any,
- currentDate: [dayjs().format('YYYY'), dayjs().format('MM')]
- })
- const forms = reactive({
- time: state.currentDate[0] + '' + state.currentDate[1],
- timeName: state.currentDate[0] + '年' + state.currentDate[1] + '月',
- orchestraId: '',
- orchestraName: '全部乐团',
- courseType: '',
- courseTypeName: '全部课程类型',
- page: 1,
- rows: 20
- })
- const toTop = ref(props.toHeight)
- const minDate = ref(new Date(dayjs().subtract(10, 'year').format('YYYY-MM-DD')))
- const maxDate = ref(new Date(dayjs().add(10, 'year').format('YYYY-MM-DD')))
- const columnsType = ref<DatePickerColumnType[]>(['year', 'month'])
- const refreshing = ref(false)
- const loading = ref(false)
- const finished = ref(false)
- const showContact = ref(false)
- const list = ref([])
- const getList = async () => {
- if (state.isClick) {
- return
- }
- state.isClick = true
- loading.value = true
- try {
- if (refreshing.value) {
- // forms.page = 1
- list.value = []
- refreshing.value = false
- }
- const res = await request.post(
- `${globalState.platformApi}/courseScheduleStudentAttendance/studentAttendance`,
- {
- data: { ...forms }
- }
- )
- if (list.value.length > 0 && res.data.pages === 1) {
- return
- }
- // forms.page = res.data.current + 1
- list.value = res.data
- showContact.value = list.value.length > 0
- // console.log(showContact.value, ' showContact.value ')
- loading.value = false
- finished.value = true
- } catch (e: any) {
- // console.log(e, 'e')
- const message = e.message
- showToast(message)
- showContact.value = false
- finished.value = true
- }
- state.isClick = false
- }
- const checkTimer = (val: any) => {
- forms.time = val.selectedValues[0] + val.selectedValues[1]
- forms.timeName = val.selectedValues[0] + '年' + val.selectedValues[1] + '月'
- state.showPopoverTime = false
- getList()
- }
- const checkOrchestra = (val: any) => {
- const selectedOptions = val.selectedOptions[0] || {}
- forms.orchestraId = selectedOptions.value
- forms.orchestraName = selectedOptions.name
- state.showPopoverOrchestra = false
- refreshing.value = true
- getList()
- }
- const checkSubject = (val: any) => {
- const selectedOptions = val.selectedOptions[0] || {}
- forms.courseType = selectedOptions.value
- forms.courseTypeName = selectedOptions.name
- state.showPopoverSubject = false
- refreshing.value = true
- getList()
- }
- const getOrchestraList = async () => {
- try {
- const res = await request.post('/api-teacher/orchestra/page', {
- data: { page: 1, rows: 9999, status: 'DONE' }
- })
- state.actions = res.data.rows.map((item) => {
- return {
- name: item.name,
- value: item.id as string
- }
- })
- state.actions.unshift({
- name: '全部乐团',
- value: ''
- })
- } catch (e: any) {
- const message = e.message
- showToast(message)
- }
- }
- onMounted(() => {
- state.subjects.push({
- name: '全部课程类型',
- value: ''
- })
- Object.keys(courseEmnu).forEach((key: any) => {
- state.subjects.push({
- name: courseEmnu[key],
- value: key
- })
- })
- // getSubjects()
- getOrchestraList()
- getList()
- })
- watch(
- () => props.toHeight,
- (val: number) => {
- toTop.value = val
- }
- )
- const onRefresh = () => {
- finished.value = false
- // 重新加载数据
- // 将 loading 设置为 true,表示处于加载状态
- loading.value = true
- getList()
- }
- return () => (
- <div>
- <div class={'searchGroup'}>
- <div
- class={['searchItem', state.showPopoverTime && 'searchItem-active']}
- onClick={() => {
- state.showPopoverTime = true
- }}
- >
- {forms.timeName}
- <i class={'arrow'}></i>
- </div>
- <div
- class={['searchItem', state.showPopoverOrchestra && 'searchItem-active']}
- onClick={() => {
- state.showPopoverOrchestra = true
- }}
- >
- <span>{forms.orchestraName}</span>
- <i class={'arrow'}></i>
- </div>
- <div
- class={['searchItem', state.showPopoverSubject && 'searchItem-active']}
- onClick={() => {
- state.showPopoverSubject = true
- }}
- >
- {forms.courseTypeName}
- <i class={'arrow'}></i>
- </div>
- </div>
- {/* </Sticky> */}
- <div
- style={{
- overflowY: 'auto',
- height:
- props.type === 'teacher'
- ? 'calc(100vh - 1.17333rem)'
- : 'calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.17333rem)'
- }}
- >
- {showContact.value ? (
- <OFullRefresh
- v-model:modelValue={refreshing.value}
- onRefresh={onRefresh}
- style={{
- minHeight:
- props.type === 'teacher'
- ? 'calc(100vh - 1.17333rem)'
- : 'calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.17333rem)'
- }}
- >
- <List
- loading-text=" "
- // v-model:loading={loading.value}
- finished={finished.value}
- finished-text=" "
- style={{
- paddingTop: '12px'
- }}
- onLoad={getList}
- >
- {list.value.map((item: any) => (
- <StudentAttItem item={item}></StudentAttItem>
- ))}
- </List>
- </OFullRefresh>
- ) : (
- <OEmpty tips="暂无考勤"></OEmpty>
- )}
- </div>
- <Popup
- v-model:show={state.showPopoverTime}
- position="bottom"
- round
- teleport={'body'}
- class={'popupBottomSearch'}
- >
- <DatePicker
- onCancel={() => {
- state.showPopoverTime = false
- }}
- onConfirm={checkTimer}
- v-model={state.currentDate}
- formatter={formatterDatePicker}
- minDate={minDate.value}
- maxDate={maxDate.value}
- columnsType={columnsType.value}
- />
- </Popup>
- <Popup
- v-model:show={state.showPopoverOrchestra}
- position="bottom"
- round
- teleport={'body'}
- class={'popupBottomSearch'}
- >
- <Picker
- columns={state.actions}
- onCancel={() => (state.showPopoverOrchestra = false)}
- onConfirm={(val: any) => checkOrchestra(val)}
- columnsFieldNames={{ text: 'name', value: 'value' }}
- />
- </Popup>
- <Popup
- v-model:show={state.showPopoverSubject}
- position="bottom"
- round
- teleport={'body'}
- class={'popupBottomSearch'}
- >
- <Picker
- columns={state.subjects}
- onCancel={() => (state.showPopoverSubject = false)}
- onConfirm={(val: any) => checkSubject(val)}
- columnsFieldNames={{ text: 'name', value: 'value' }}
- />
- </Popup>
- </div>
- )
- }
- })
|