|
|
@@ -0,0 +1,254 @@
|
|
|
+import OSearch from '@/components/o-search'
|
|
|
+import OEmpty from '@/components/o-empty'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import {
|
|
|
+ Icon,
|
|
|
+ Popover,
|
|
|
+ DatePicker,
|
|
|
+ DatePickerColumnType,
|
|
|
+ Popup,
|
|
|
+ List,
|
|
|
+ PullRefresh,
|
|
|
+ ActionSheet,
|
|
|
+ showToast
|
|
|
+} from 'vant'
|
|
|
+import { defineComponent, reactive, ref, onMounted } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import styles from './timer-bang.module.less'
|
|
|
+import request from '@/helpers/request'
|
|
|
+import { state as globalState } from '@/state'
|
|
|
+import RankItem from '../modals/rank-item'
|
|
|
+export default defineComponent({
|
|
|
+ name: 'day-bang',
|
|
|
+ setup(props, { slots, attrs, emit }) {
|
|
|
+ const router = useRouter()
|
|
|
+ const state = reactive({
|
|
|
+ showPopoverTime: false,
|
|
|
+ showPopoverOrchestra: false,
|
|
|
+ showPopoverSubject: false,
|
|
|
+ actions: [],
|
|
|
+ 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: '全部乐团',
|
|
|
+ subjectId: '',
|
|
|
+ subjectName: '全部声部',
|
|
|
+ page: 1,
|
|
|
+ rows: 50,
|
|
|
+ sortType: 'PRACTICE_DAY'
|
|
|
+ })
|
|
|
+ const minDate = ref(new Date(dayjs().subtract(5, 'year').format('YYYY-MM-DD')))
|
|
|
+ const maxDate = ref(new Date(dayjs().add(5, '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 () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ if (refreshing.value) {
|
|
|
+ forms.page = 1
|
|
|
+ list.value = []
|
|
|
+ refreshing.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ const res = await request.post('/api-school/student/page', {
|
|
|
+ data: { ...forms }
|
|
|
+ })
|
|
|
+
|
|
|
+ if (list.value.length > 0 && res.data.pages === 1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ forms.page = res.data.current + 1
|
|
|
+ // list.value = list.value.concat(res.data.rows || [])
|
|
|
+ list.value = res.data.rows
|
|
|
+ showContact.value = list.value.length > 0
|
|
|
+ console.log(showContact.value, ' showContact.value ')
|
|
|
+ loading.value = false
|
|
|
+ finished.value = true
|
|
|
+ // 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const checkTimer = (val: any) => {
|
|
|
+ forms.time = val.selectedValues[0] + val.selectedValues[1]
|
|
|
+ forms.timeName = val.selectedValues[0] + '年' + val.selectedValues[1] + '月'
|
|
|
+ state.showPopoverTime = false
|
|
|
+ emit('setTime', forms.timeName)
|
|
|
+ refreshing.value = true
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+ const checkOrchestra = (val: any) => {
|
|
|
+ forms.orchestraId = val.value
|
|
|
+ forms.orchestraName = val.name
|
|
|
+ state.showPopoverOrchestra = false
|
|
|
+ refreshing.value = true
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+
|
|
|
+ const checkSubject = (val: any) => {
|
|
|
+ forms.subjectId = val.value
|
|
|
+ forms.subjectName = val.name
|
|
|
+ console.log(val, forms)
|
|
|
+ refreshing.value = true
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+ const getOrchestraList = async () => {
|
|
|
+ const schoolId = globalState.user.data.schoolInfos
|
|
|
+ .map((item) => {
|
|
|
+ return item.id
|
|
|
+ })
|
|
|
+ .join(',')
|
|
|
+ try {
|
|
|
+ const res = await request.post('/api-school/orchestra/page', {
|
|
|
+ data: { page: 1, rows: 9999, schoolId }
|
|
|
+ })
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const getSubjects = async () => {
|
|
|
+ try {
|
|
|
+ const res = await request.post('/api-school/subject/page', {
|
|
|
+ data: { page: 1, rows: 9999 }
|
|
|
+ })
|
|
|
+ state.subjects = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ name: item.name,
|
|
|
+ value: item.id as string
|
|
|
+ }
|
|
|
+ })
|
|
|
+ state.subjects.unshift({ name: '全部声部', value: '' })
|
|
|
+ } catch (e: any) {
|
|
|
+ const message = e.message
|
|
|
+ showToast(message)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ getSubjects()
|
|
|
+ getOrchestraList()
|
|
|
+ getList()
|
|
|
+ emit('setTime', forms.timeName)
|
|
|
+ })
|
|
|
+ const onRefresh = () => {
|
|
|
+ finished.value = false
|
|
|
+ // 重新加载数据
|
|
|
+ // 将 loading 设置为 true，表示处于加载状态
|
|
|
+ loading.value = true
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+ return () => (
|
|
|
+ <>
|
|
|
+ {/* <OSticky position="top" background="#FFF"> */}
|
|
|
+
|
|
|
+ <div class={styles.chioseWrap}>
|
|
|
+ <div style={{ padding: '0 13px', background: '#FFF' }}>
|
|
|
+ <div
|
|
|
+ class={styles.searchBand}
|
|
|
+ onClick={() => {
|
|
|
+ state.showPopoverTime = true
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {forms.timeName}
|
|
|
+ <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style={{ padding: '0 13px', background: '#FFF' }}>
|
|
|
+ <div
|
|
|
+ class={styles.searchBand}
|
|
|
+ onClick={() => {
|
|
|
+ state.showPopoverOrchestra = true
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {forms.orchestraName}
|
|
|
+ <Icon name={state.showPopoverOrchestra ? 'arrow-up' : 'arrow-down'} />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style={{ padding: '0 13px', background: '#FFF' }}>
|
|
|
+ <div
|
|
|
+ class={styles.searchBand}
|
|
|
+ onClick={() => {
|
|
|
+ state.showPopoverSubject = true
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {forms.subjectName}
|
|
|
+ <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/* </OSticky> */}
|
|
|
+
|
|
|
+ {showContact.value ? (
|
|
|
+ <PullRefresh v-model={refreshing.value} onRefresh={onRefresh}>
|
|
|
+ <List
|
|
|
+ v-model:loading={loading.value}
|
|
|
+ finished={finished.value}
|
|
|
+ finished-text="没有更多了"
|
|
|
+ onLoad={getList}
|
|
|
+ >
|
|
|
+ {list.value.map((item: any, index: number) => (
|
|
|
+ <RankItem item={item} type="time" index={index + 1}></RankItem>
|
|
|
+ ))}
|
|
|
+ </List>
|
|
|
+ </PullRefresh>
|
|
|
+ ) : (
|
|
|
+ <OEmpty />
|
|
|
+ )}
|
|
|
+
|
|
|
+ <Popup v-model:show={state.showPopoverTime} position="bottom" style="{ height: '30%' }">
|
|
|
+ <DatePicker
|
|
|
+ onCancel={() => {
|
|
|
+ state.showPopoverTime = false
|
|
|
+ }}
|
|
|
+ onConfirm={checkTimer}
|
|
|
+ v-model={state.currentDate}
|
|
|
+ title="选择年月"
|
|
|
+ minDate={minDate.value}
|
|
|
+ maxDate={maxDate.value}
|
|
|
+ columnsType={columnsType.value}
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
+
|
|
|
+ <ActionSheet
|
|
|
+ v-model:show={state.showPopoverOrchestra}
|
|
|
+ title="选择乐团"
|
|
|
+ actions={state.actions}
|
|
|
+ onSelect={checkOrchestra}
|
|
|
+ ></ActionSheet>
|
|
|
+
|
|
|
+ <ActionSheet
|
|
|
+ style={{ height: '40%' }}
|
|
|
+ close-on-click-action
|
|
|
+ v-model:show={state.showPopoverSubject}
|
|
|
+ title="选择声部"
|
|
|
+ actions={state.subjects}
|
|
|
+ onSelect={checkSubject}
|
|
|
+ ></ActionSheet>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|
mo
