attend-student.tsx 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. import OSearch from '@/components/o-search'
  2. import OEmpty from '@/components/o-empty'
  3. import dayjs from 'dayjs'
  4. import OFullRefresh from '@/components/o-full-refresh'
  5. import {
  6. Icon,
  7. Popover,
  8. DatePicker,
  9. DatePickerColumnType,
  10. Popup,
  11. List,
  12. PullRefresh,
  13. ActionSheet,
  14. showToast,
  15. Sticky,
  16. Picker
  17. } from 'vant'
  18. import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
  19. import { useRouter } from 'vue-router'
  20. import styles from './attent-student.module.less'
  21. import request from '@/helpers/request'
  22. import { state as globalState } from '@/state'
  23. import StudentAttItem from '../modals/studentAtt-item'
  24. import { formatterDatePicker } from '@/helpers/utils'
  25. import { courseEmnu } from '@/constant'
  26. export default defineComponent({
  27. name: 'attend-student',
  28. props: {
  29. toHeight: {
  30. type: Number,
  31. default: 0
  32. },
  33. type: {
  34. type: String,
  35. default: ''
  36. }
  37. },
  38. setup(props, { emit }) {
  39. const router = useRouter()
  40. const state = reactive({
  41. showPopoverTime: false,
  42. showPopoverOrchestra: false,
  43. showPopoverSubject: false,
  44. isClick: false,
  45. actions: [] as any,
  46. subjects: [] as any,
  47. currentDate: [dayjs().format('YYYY'), dayjs().format('MM')]
  48. })
  49. const forms = reactive({
  50. time: state.currentDate[0] + '' + state.currentDate[1],
  51. timeName: state.currentDate[0] + '年' + state.currentDate[1] + '月',
  52. orchestraId: '',
  53. orchestraName: '全部乐团',
  54. courseType: '',
  55. courseTypeName: '全部课程类型',
  56. page: 1,
  57. rows: 20
  58. })
  59. const toTop = ref(props.toHeight)
  60. const minDate = ref(new Date(dayjs().subtract(10, 'year').format('YYYY-MM-DD')))
  61. const maxDate = ref(new Date(dayjs().add(10, 'year').format('YYYY-MM-DD')))
  62. const columnsType = ref<DatePickerColumnType[]>(['year', 'month'])
  63. const refreshing = ref(false)
  64. const loading = ref(false)
  65. const finished = ref(false)
  66. const showContact = ref(false)
  67. const list = ref([])
  68. const getList = async () => {
  69. if (state.isClick) {
  70. return
  71. }
  72. state.isClick = true
  73. loading.value = true
  74. try {
  75. if (refreshing.value) {
  76. // forms.page = 1
  77. list.value = []
  78. refreshing.value = false
  79. }
  80. const res = await request.post(
  81. `${globalState.platformApi}/courseScheduleStudentAttendance/studentAttendance`,
  82. {
  83. data: { ...forms }
  84. }
  85. )
  86. if (list.value.length > 0 && res.data.pages === 1) {
  87. return
  88. }
  89. // forms.page = res.data.current + 1
  90. list.value = res.data
  91. showContact.value = list.value.length > 0
  92. // console.log(showContact.value, ' showContact.value ')
  93. loading.value = false
  94. finished.value = true
  95. } catch (e: any) {
  96. // console.log(e, 'e')
  97. const message = e.message
  98. showToast(message)
  99. showContact.value = false
  100. finished.value = true
  101. }
  102. state.isClick = false
  103. }
  104. const checkTimer = (val: any) => {
  105. forms.time = val.selectedValues[0] + val.selectedValues[1]
  106. forms.timeName = val.selectedValues[0] + '年' + val.selectedValues[1] + '月'
  107. state.showPopoverTime = false
  108. getList()
  109. }
  110. const checkOrchestra = (val: any) => {
  111. const selectedOptions = val.selectedOptions[0] || {}
  112. forms.orchestraId = selectedOptions.value
  113. forms.orchestraName = selectedOptions.name
  114. state.showPopoverOrchestra = false
  115. refreshing.value = true
  116. getList()
  117. }
  118. const checkSubject = (val: any) => {
  119. const selectedOptions = val.selectedOptions[0] || {}
  120. forms.courseType = selectedOptions.value
  121. forms.courseTypeName = selectedOptions.name
  122. state.showPopoverSubject = false
  123. refreshing.value = true
  124. getList()
  125. }
  126. const getOrchestraList = async () => {
  127. try {
  128. const res = await request.post('/api-teacher/orchestra/page', {
  129. data: { page: 1, rows: 9999, status: 'DONE' }
  130. })
  131. state.actions = res.data.rows.map((item) => {
  132. return {
  133. name: item.name,
  134. value: item.id as string
  135. }
  136. })
  137. state.actions.unshift({
  138. name: '全部乐团',
  139. value: ''
  140. })
  141. } catch (e: any) {
  142. const message = e.message
  143. showToast(message)
  144. }
  145. }
  146. onMounted(() => {
  147. state.subjects.push({
  148. name: '全部课程类型',
  149. value: ''
  150. })
  151. Object.keys(courseEmnu).forEach((key: any) => {
  152. state.subjects.push({
  153. name: courseEmnu[key],
  154. value: key
  155. })
  156. })
  157. // getSubjects()
  158. getOrchestraList()
  159. getList()
  160. })
  161. watch(
  162. () => props.toHeight,
  163. (val: number) => {
  164. toTop.value = val
  165. }
  166. )
  167. const onRefresh = () => {
  168. finished.value = false
  169. // 重新加载数据
  170. // 将 loading 设置为 true,表示处于加载状态
  171. loading.value = true
  172. getList()
  173. }
  174. return () => (
  175. <div>
  176. <div class={'searchGroup'}>
  177. <div
  178. class={['searchItem', state.showPopoverTime && 'searchItem-active']}
  179. onClick={() => {
  180. state.showPopoverTime = true
  181. }}
  182. >
  183. {forms.timeName}
  184. <i class={'arrow'}></i>
  185. </div>
  186. <div
  187. class={['searchItem', state.showPopoverOrchestra && 'searchItem-active']}
  188. onClick={() => {
  189. state.showPopoverOrchestra = true
  190. }}
  191. >
  192. <span>{forms.orchestraName}</span>
  193. <i class={'arrow'}></i>
  194. </div>
  195. <div
  196. class={['searchItem', state.showPopoverSubject && 'searchItem-active']}
  197. onClick={() => {
  198. state.showPopoverSubject = true
  199. }}
  200. >
  201. {forms.courseTypeName}
  202. <i class={'arrow'}></i>
  203. </div>
  204. </div>
  205. {/* </Sticky> */}
  206. <div
  207. style={{
  208. overflowY: 'auto',
  209. height:
  210. props.type === 'teacher'
  211. ? 'calc(100vh - 1.17333rem)'
  212. : 'calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.17333rem)'
  213. }}
  214. >
  215. {showContact.value ? (
  216. <OFullRefresh
  217. v-model:modelValue={refreshing.value}
  218. onRefresh={onRefresh}
  219. style={{
  220. minHeight:
  221. props.type === 'teacher'
  222. ? 'calc(100vh - 1.17333rem)'
  223. : 'calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.17333rem)'
  224. }}
  225. >
  226. <List
  227. loading-text=" "
  228. // v-model:loading={loading.value}
  229. finished={finished.value}
  230. finished-text=" "
  231. style={{
  232. paddingTop: '12px'
  233. }}
  234. onLoad={getList}
  235. >
  236. {list.value.map((item: any) => (
  237. <StudentAttItem item={item}></StudentAttItem>
  238. ))}
  239. </List>
  240. </OFullRefresh>
  241. ) : (
  242. <OEmpty tips="暂无考勤"></OEmpty>
  243. )}
  244. </div>
  245. <Popup
  246. v-model:show={state.showPopoverTime}
  247. position="bottom"
  248. round
  249. teleport={'body'}
  250. class={'popupBottomSearch'}
  251. >
  252. <DatePicker
  253. onCancel={() => {
  254. state.showPopoverTime = false
  255. }}
  256. onConfirm={checkTimer}
  257. v-model={state.currentDate}
  258. formatter={formatterDatePicker}
  259. minDate={minDate.value}
  260. maxDate={maxDate.value}
  261. columnsType={columnsType.value}
  262. />
  263. </Popup>
  264. <Popup
  265. v-model:show={state.showPopoverOrchestra}
  266. position="bottom"
  267. round
  268. teleport={'body'}
  269. class={'popupBottomSearch'}
  270. >
  271. <Picker
  272. columns={state.actions}
  273. onCancel={() => (state.showPopoverOrchestra = false)}
  274. onConfirm={(val: any) => checkOrchestra(val)}
  275. columnsFieldNames={{ text: 'name', value: 'value' }}
  276. />
  277. </Popup>
  278. <Popup
  279. v-model:show={state.showPopoverSubject}
  280. position="bottom"
  281. round
  282. teleport={'body'}
  283. class={'popupBottomSearch'}
  284. >
  285. <Picker
  286. columns={state.subjects}
  287. onCancel={() => (state.showPopoverSubject = false)}
  288. onConfirm={(val: any) => checkSubject(val)}
  289. columnsFieldNames={{ text: 'name', value: 'value' }}
  290. />
  291. </Popup>
  292. </div>
  293. )
  294. }
  295. })