import OHeader from '@/components/o-header' import OSearch from '@/components/o-search' import OSticky from '@/components/o-sticky' import OEmpty from '@/components/o-empty' import dayjs from 'dayjs' import isBetween from 'dayjs/plugin/isBetween' dayjs.extend(isBetween) import { Icon, List, showToast, DropdownMenu, DropdownItem, Button, Calendar } from 'vant' import OFullRefresh from '@/components/o-full-refresh' import StudentItem from './modals/student-item' import { defineComponent, reactive, ref, onMounted } from 'vue' import { state as globalState } from '@/state' import { useRoute, useRouter } from 'vue-router' import styles from './index.module.less' import request from '@/helpers/request' export default defineComponent({ name: 'exercise-record', setup() { const platformApi = ref(globalState.platformApi) const router = useRouter() const route = useRoute() const state = reactive({ showSearchStatus: true, showPopoverTime: false, actions: [] as any, subjects: [] as any }) const forms = reactive({ startTime: dayjs().day(1).format('YYYY-MM-DD'), endTime: dayjs().day(7).format('YYYY-MM-DD'), orchestraId: '', orchestraName: '', subjectId: '', subjectName: '', sortType: '', sortTypeName: '', keyword: '', page: 1, rows: 20 }) const refreshing = ref(false) const loading = ref(false) const finished = ref(false) const showContact = ref(true) const list = ref([]) const getList = async () => { loading.value = true try { if (refreshing.value) { forms.page = 1 list.value = [] refreshing.value = false } const { endTime, startTime, ...re } = forms // , endTime: endTime + ' 23:59:59', startTime: endTime + ' 00:00:00' const res = await request.post( `${platformApi.value}/musicPracticeRecord/school/studentPracticeThisWeek`, { data: { ...re } } ) if (list.value.length > 0 && res.data.pages === 1) { return } forms.page = res.data.current + 1 list.value = list.value.concat(res.data.rows || []) showContact.value = list.value.length > 0 console.log(showContact.value, ' showContact.value ') loading.value = false finished.value = res.data.current >= res.data.pages } catch (e: any) { // console.log(e, 'e') const message = e.message showToast(message) showContact.value = false finished.value = true } } onMounted(async () => { await getSubjects() await getOrchestraList() await getList() }) const onBack = () => { router.go(-1) } const checkSort = (val: any) => { forms.sortType = val.value forms.sortTypeName = val.name } const checkOrchestra = (val: any) => { forms.orchestraId = val.value forms.orchestraName = val.name } const checkSubject = (val: any) => { forms.subjectId = val.value forms.subjectName = val.name } const getOrchestraList = async () => { try { const res = await request.post(`${platformApi.value}/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 } }) } catch (e: any) { const message = e.message showToast(message) } } const getSubjects = async () => { try { const res = await request.post(`${platformApi.value}/subjectBasicConfig/page`, { data: { page: 1, rows: 9999 } }) state.subjects = res.data.rows.map((item) => { if (route.query.subjectId == item.subjectId) { forms.subjectId = item.subjectId forms.subjectName = item.subjectName } return { name: item.subjectName, value: item.subjectId as string } }) } catch (e: any) { const message = e.message showToast(message) } } const onRefresh = () => { finished.value = false // 重新加载数据 // 将 loading 设置为 true,表示处于加载状态 loading.value = true getList() } // 名称 const formatLength = (name: string) => { if (name.length > 11) { const fristName = name.substring(0, 6) const lastName = name.substring(name.length - 5, name.length) return fristName + '...' + lastName } else { return name } } const dropdownMenuRef = ref() const dropdownItemRef = ref() // 重置 const onSearchReset = () => { forms.startTime = dayjs().day(1).format('YYYY-MM-DD') forms.endTime = dayjs().day(7).format('YYYY-MM-DD') forms.orchestraId = '' forms.orchestraName = '' forms.subjectId = '' forms.subjectName = '' forms.sortType = '' forms.sortTypeName = '' dropdownItemRef.value?.toggle() refreshing.value = true getList() } // 搜索 const onSearchConfirm = () => { dropdownItemRef.value?.toggle() refreshing.value = true getList() } return () => (
{ document.documentElement.style.setProperty('--header-height', height + 'px') }} > {{ right: () => (
{state.actions.length > 0 && ( <>
乐团
{state.actions.map((item: any) => (
checkOrchestra(item)} > {formatLength(item.name)}
))}
)}
时间段
(state.showPopoverTime = true)} > {forms.startTime}
(state.showPopoverTime = true)} >
(state.showPopoverTime = true)} > {forms.endTime}
声部
{state.subjects.map((subject: any) => (
checkSubject(subject)} > {subject.name}
))}
排序方式
{[ { name: '按时长', value: 'PRACTICE_TIMES' }, { name: '按天数', value: 'PRACTICE_DAY' } ].map((item: any) => (
checkSort(item)} > {item.name}
))}
) }}
{ forms.keyword = val refreshing.value = true getList() }} >
{ // console.log(dropdownItemRef.value, dropdownMenuRef.value) // dropdownItemRef.value?.toggle() // dropdownMenuRef.value?.click() }} > {forms.startTime}~{forms.endTime}
{forms.orchestraId && (
{formatLength(forms.orchestraName)} { forms.orchestraId = '' forms.orchestraName = '' e.stopPropagation() refreshing.value = true getList() }} />
)} {forms.subjectId && (
{forms.subjectName} { forms.subjectId = '' forms.subjectName = '' e.stopPropagation() refreshing.value = true getList() }} />
)} {forms.sortType && (
{forms.sortTypeName} { forms.sortType = '' forms.sortTypeName = '' e.stopPropagation() refreshing.value = true getList() }} />
)}
{showContact.value ? ( {list.value.map((item: any) => ( ))} ) : ( )} { forms.startTime = '' forms.endTime = '' if (!dayjs(item[0]).isBetween(dayjs(forms.startTime), dayjs(forms.endTime))) { forms.startTime = dayjs(item[0]).day(1).format('YYYY-MM-DD') forms.endTime = dayjs(item[0]).day(7).format('YYYY-MM-DD') } state.showPopoverTime = false }} />
) } })