select-sned.tsx 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import OSticky from '@/components/o-sticky'
  2. import { useRect } from '@vant/use'
  3. import { Button, Sticky, Tab, Tabs } from 'vant'
  4. import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
  5. import ClassList from './component/class-list'
  6. import ManageList from './component/manage-list'
  7. import StudentList from './component/student-list'
  8. import TeacherList from './component/teacher-list/teacher-list'
  9. import styles from './index.module.less'
  10. export default defineComponent({
  11. name: 'select-send',
  12. props: {
  13. selectList: {
  14. type: Object,
  15. default: {}
  16. },
  17. selectStatus: {
  18. type: Boolean,
  19. default: false
  20. }
  21. },
  22. emits: ['close', 'confirm', 'update:selectList'],
  23. setup(props, { emit, expose }) {
  24. const state = reactive({
  25. height: 'auto' as any,
  26. tabValue: 'class',
  27. selectClass: [] as any,
  28. selectStudent: [] as any,
  29. selectTeacher: [] as any,
  30. selectManage: [] as any
  31. })
  32. const onSubmit = async () => {
  33. const params = {
  34. class: state.selectClass,
  35. student: state.selectStudent,
  36. teacher: state.selectTeacher,
  37. school: state.selectManage
  38. }
  39. emit('close')
  40. emit('update:selectList', params)
  41. emit('confirm', params)
  42. }
  43. watch(
  44. () => props.selectList,
  45. () => {
  46. console.log('watch', props.selectList)
  47. resetSelectItems()
  48. },
  49. { deep: true }
  50. )
  51. const resetSelectItems = () => {
  52. const list = props.selectList || {}
  53. state.selectClass = list.class || []
  54. state.selectTeacher = list.teacher || []
  55. state.selectManage = list.manage || []
  56. state.selectStudent = list.student || []
  57. }
  58. onMounted(() => {
  59. const { height } = useRect(document.querySelector('.van-tab') as HTMLElement)
  60. state.height = height
  61. resetSelectItems()
  62. console.log(state, 'select')
  63. })
  64. return () => (
  65. <div class={styles.orchestraDetail} style={{ background: '#f6f6f6', minHeight: '100vh' }}>
  66. <Tabs sticky lineWidth={20} lineHeight={4} v-model:active={state.tabValue}>
  67. <Tab title="班级" name="class">
  68. <ClassList height={state.height} v-model:selectItem={state.selectClass} />
  69. </Tab>
  70. <Tab title="学员" name="student">
  71. <StudentList height={state.height} v-model:selectItem={state.selectStudent} />
  72. </Tab>
  73. <Tab title="伴学老师" name="teacher">
  74. <TeacherList height={state.height} v-model:selectItem={state.selectTeacher} />
  75. </Tab>
  76. <Tab title="管理老师" name="manage">
  77. <ManageList height={state.height} v-model:selectItem={state.selectManage} />
  78. </Tab>
  79. </Tabs>
  80. <OSticky position="bottom">
  81. <div class={'btnGroup'}>
  82. <Button round block type="primary" onClick={onSubmit}>
  83. 确认
  84. </Button>
  85. </div>
  86. </OSticky>
  87. </div>
  88. )
  89. }
  90. })