1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- import OSticky from '@/components/o-sticky'
- import { useRect } from '@vant/use'
- import { Button, Sticky, Tab, Tabs } from 'vant'
- import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
- import ClassList from './component/class-list'
- import ManageList from './component/manage-list'
- import StudentList from './component/student-list'
- import TeacherList from './component/teacher-list/teacher-list'
- import styles from './index.module.less'
- export default defineComponent({
- name: 'select-send',
- props: {
- selectList: {
- type: Object,
- default: {}
- },
- selectStatus: {
- type: Boolean,
- default: false
- }
- },
- emits: ['close', 'confirm', 'update:selectList'],
- setup(props, { emit, expose }) {
- const state = reactive({
- height: 'auto' as any,
- tabValue: 'class',
- selectClass: [] as any,
- selectStudent: [] as any,
- selectTeacher: [] as any,
- selectManage: [] as any
- })
- const onSubmit = async () => {
- const params = {
- class: state.selectClass,
- student: state.selectStudent,
- teacher: state.selectTeacher,
- school: state.selectManage
- }
- emit('close')
- emit('update:selectList', params)
- emit('confirm', params)
- }
- watch(
- () => props.selectList,
- () => {
- console.log('watch', props.selectList)
- resetSelectItems()
- },
- { deep: true }
- )
- const resetSelectItems = () => {
- const list = props.selectList || {}
- state.selectClass = list.class || []
- state.selectTeacher = list.teacher || []
- state.selectManage = list.manage || []
- state.selectStudent = list.student || []
- }
- onMounted(() => {
- const { height } = useRect(document.querySelector('.van-tab') as HTMLElement)
- state.height = height
- resetSelectItems()
- console.log(state, 'select')
- })
- return () => (
- <div class={styles.orchestraDetail} style={{ background: '#f6f6f6', minHeight: '100vh' }}>
- <Tabs sticky lineWidth={20} lineHeight={4} v-model:active={state.tabValue}>
- <Tab title="班级" name="class">
- <ClassList height={state.height} v-model:selectItem={state.selectClass} />
- </Tab>
- <Tab title="学员" name="student">
- <StudentList height={state.height} v-model:selectItem={state.selectStudent} />
- </Tab>
- <Tab title="伴学老师" name="teacher">
- <TeacherList height={state.height} v-model:selectItem={state.selectTeacher} />
- </Tab>
- <Tab title="管理老师" name="manage">
- <ManageList height={state.height} v-model:selectItem={state.selectManage} />
- </Tab>
- </Tabs>
- <OSticky position="bottom">
- <div class={'btnGroup'}>
- <Button round block type="primary" onClick={onSubmit}>
- 确认
- </Button>
- </div>
- </OSticky>
- </div>
- )
- }
- })
|