|
@@ -1,412 +1,412 @@
|
|
|
-import { computed, defineComponent, onMounted, reactive } from 'vue';
|
|
|
-import styles from './index.module.less';
|
|
|
-import {
|
|
|
- NAvatar,
|
|
|
- NButton,
|
|
|
- NCascader,
|
|
|
- NCheckbox,
|
|
|
- NCheckboxGroup,
|
|
|
- NInput,
|
|
|
- NScrollbar,
|
|
|
- NSelect,
|
|
|
- NSpace,
|
|
|
- NSpin
|
|
|
-} from 'naive-ui';
|
|
|
-import defultHeade from '@/components/layout/images/teacherIcon.png';
|
|
|
-import SearchInput from '/src/components/searchInput';
|
|
|
-import { useCatchStore } from '/src/store/modules/catchData';
|
|
|
-import { getStudentList } from '/src/views/classList/api';
|
|
|
-import { useThrottleFn } from '@vueuse/core';
|
|
|
-import TheEmpty from '/src/components/TheEmpty';
|
|
|
-import { getGradeYearList } from '/src/views/home/api';
|
|
|
-import { api_getCurrentGradeYear } from '/src/views/studentList/api';
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- name: 'assign-student',
|
|
|
- props: {
|
|
|
- /** 班级列表 */
|
|
|
- classList: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
- /** 所选学生列表 */
|
|
|
- studentList: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
- /** 学年 */
|
|
|
- currentGradeNum: {
|
|
|
- type: [String || Number],
|
|
|
- default: ''
|
|
|
- },
|
|
|
- selectIds: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
- classGroupId: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- }
|
|
|
- },
|
|
|
- emits: ['close', 'confirm'],
|
|
|
- setup(props, { emit }) {
|
|
|
- const catchStore = useCatchStore();
|
|
|
- const state = reactive({
|
|
|
- studentName: '',
|
|
|
- loading: false,
|
|
|
- finshed: false, // 是否加载完
|
|
|
- checkAllStatus: false,
|
|
|
- indeterminate: false,
|
|
|
- searchFrom: {
|
|
|
- upgradeFlag: true,
|
|
|
- currentGradeNums: null as any,
|
|
|
- gradeYear: null,
|
|
|
- classGroupId: props.classGroupId || '',
|
|
|
- classInstrumentId: '',
|
|
|
- keyword: ''
|
|
|
- },
|
|
|
- pagination: {
|
|
|
- page: 1,
|
|
|
- rows: 20,
|
|
|
- pageTotal: 0
|
|
|
- },
|
|
|
- tableList: [] as any,
|
|
|
- checkboxIds: [] as any,
|
|
|
- selectStudents: [] as any,
|
|
|
- selectKeyword: '',
|
|
|
- popSelectYearList: [] as any
|
|
|
- });
|
|
|
-
|
|
|
- // 获取学年
|
|
|
- const getYearList = async () => {
|
|
|
- try {
|
|
|
- const { data } = await api_getCurrentGradeYear({});
|
|
|
- state.searchFrom.gradeYear = data;
|
|
|
- } catch {
|
|
|
- //
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const getStudentLists = async () => {
|
|
|
- try {
|
|
|
- if (state.pagination.page === 1) {
|
|
|
- state.loading = true;
|
|
|
- state.tableList = [];
|
|
|
- }
|
|
|
- const { data } = await getStudentList({
|
|
|
- ...state.searchFrom,
|
|
|
- ...state.pagination
|
|
|
- });
|
|
|
- state.loading = false;
|
|
|
- const rows = data.rows || [];
|
|
|
- state.tableList.push(...rows);
|
|
|
- state.finshed = data.pages <= data.current ? true : false;
|
|
|
-
|
|
|
- onCheckStudents();
|
|
|
- } catch {
|
|
|
- //
|
|
|
- state.loading = false;
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const onSearch = () => {
|
|
|
- state.pagination.page = 1;
|
|
|
- getStudentLists();
|
|
|
- };
|
|
|
-
|
|
|
- const selectStudentEmpty = computed(() => {
|
|
|
- let status = true;
|
|
|
- state.selectStudents.forEach((item: any) => {
|
|
|
- if (!item.hide) {
|
|
|
- status = false;
|
|
|
- }
|
|
|
- });
|
|
|
- return status;
|
|
|
- });
|
|
|
-
|
|
|
- const throttledFn = useThrottleFn(() => {
|
|
|
- state.pagination.page = state.pagination.page + 1;
|
|
|
- getStudentLists();
|
|
|
- }, 500);
|
|
|
-
|
|
|
- // 切换学生状态
|
|
|
- const onCheckStudents = () => {
|
|
|
- if (state.tableList.length <= 0) {
|
|
|
- state.indeterminate = false;
|
|
|
- state.checkAllStatus = false;
|
|
|
- return;
|
|
|
- }
|
|
|
- // 右边数据
|
|
|
- state.tableList.forEach((item: any) => {
|
|
|
- if (state.checkboxIds.includes(item.id)) {
|
|
|
- const index = state.selectStudents.findIndex(
|
|
|
- (select: any) => select.id == item.id
|
|
|
- );
|
|
|
- if (index === -1) state.selectStudents.push(item);
|
|
|
- } else {
|
|
|
- const index = state.selectStudents.findIndex(
|
|
|
- (select: any) => select.id == item.id
|
|
|
- );
|
|
|
- if(index >= 0) state.selectStudents.splice(index, 1)
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- let count = 0;
|
|
|
- state.tableList.forEach((item: any) => {
|
|
|
- const index = state.selectStudents.findIndex(
|
|
|
- (select: any) => select.id === item.id
|
|
|
- );
|
|
|
- if(index >= 0) count++
|
|
|
- })
|
|
|
-
|
|
|
- if (count >= state.tableList.length) {
|
|
|
- state.checkAllStatus = true;
|
|
|
- state.indeterminate = false;
|
|
|
- } else {
|
|
|
- state.checkAllStatus = false;
|
|
|
- state.indeterminate = count === 0 ? false : true;
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 删除用户
|
|
|
- const onRemove = (item: any) => {
|
|
|
- const index = state.checkboxIds.findIndex((id: any) => id == item.id);
|
|
|
- if (index !== -1) {
|
|
|
- state.checkboxIds.splice(index, 1);
|
|
|
- const sIndex = state.selectStudents.findIndex(
|
|
|
- (select: any) => select.id === item.id
|
|
|
- );
|
|
|
- if (sIndex !== -1) {
|
|
|
- state.selectStudents.splice(sIndex, 1);
|
|
|
- }
|
|
|
- onCheckStudents();
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const onSave = () => {
|
|
|
- const studentInfo: any[] = [];
|
|
|
- state.selectStudents.forEach((item: any) => {
|
|
|
- studentInfo.push({
|
|
|
- id: item.id,
|
|
|
- name: item.nickname,
|
|
|
- avatar: item.avatar
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- emit('confirm', studentInfo);
|
|
|
- };
|
|
|
-
|
|
|
- onMounted(async () => {
|
|
|
- console.log(props.currentGradeNum, 'props.currentGradeNum-----')
|
|
|
- if(Array.isArray(props.currentGradeNum)) {
|
|
|
- state.searchFrom.currentGradeNums = props.currentGradeNum.join(',')
|
|
|
- } else {
|
|
|
- state.searchFrom.currentGradeNums = props.currentGradeNum
|
|
|
- }
|
|
|
-
|
|
|
- state.checkboxIds = props.selectIds || [];
|
|
|
- state.loading = true;
|
|
|
- await catchStore.getSubjects();
|
|
|
- await getYearList();
|
|
|
- await getStudentLists();
|
|
|
- // onCheckStudents();
|
|
|
- // 重置选择的学生
|
|
|
- state.selectStudents = props.studentList?.map((item: any) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- nickname: item.name
|
|
|
- };
|
|
|
- });
|
|
|
- });
|
|
|
- return () => (
|
|
|
- <div class={[styles.assignStudent, 'assignStudent']}>
|
|
|
- <div class={styles.studentListGroup}>
|
|
|
- <div class={styles.searchSection}>
|
|
|
- <div class={styles.searchSpace}>
|
|
|
- <NSelect
|
|
|
- placeholder="全部班级"
|
|
|
- disabled={props.classGroupId ? true : false}
|
|
|
- labelField="defaultLabel"
|
|
|
- filterable
|
|
|
- clearable
|
|
|
- v-model:value={state.searchFrom.classGroupId}
|
|
|
- onUpdate:value={() => onSearch()}
|
|
|
- options={
|
|
|
- [{ defaultLabel: '全部班级', value: '' }, ...props.classList] as any
|
|
|
- }
|
|
|
- />
|
|
|
- <NCascader
|
|
|
- options={[
|
|
|
- { name: '全部乐器', id: '' },
|
|
|
- ...catchStore.getSubjectList
|
|
|
- ]}
|
|
|
- placeholder="全部乐器"
|
|
|
- v-model:value={state.searchFrom.classInstrumentId}
|
|
|
- onUpdate:value={() => onSearch()}
|
|
|
- checkStrategy="child"
|
|
|
- showPath={false}
|
|
|
- childrenField="instruments"
|
|
|
- expandTrigger="hover"
|
|
|
- labelField="name"
|
|
|
- valueField="id"
|
|
|
- clearable
|
|
|
- filterable
|
|
|
- />
|
|
|
- </div>
|
|
|
- <SearchInput
|
|
|
- {...{ placeholder: '请输入学生姓名/手机号' }}
|
|
|
- class={styles.searchInput}
|
|
|
- searchWord={state.searchFrom.keyword}
|
|
|
- onChangeValue={(val: string) => {
|
|
|
- state.searchFrom.keyword = val;
|
|
|
- }}
|
|
|
- onClear={() => {
|
|
|
- state.searchFrom.keyword = '';
|
|
|
- onSearch();
|
|
|
- }}
|
|
|
- onKeyup={(e: KeyboardEvent) => {
|
|
|
- if (e.code === 'Enter') {
|
|
|
- onSearch();
|
|
|
- }
|
|
|
- }}></SearchInput>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class={styles.studentSection}>
|
|
|
- <div class={styles.checkboxAll}>
|
|
|
- <NCheckbox
|
|
|
- v-model:checked={state.checkAllStatus}
|
|
|
- indeterminate={state.indeterminate}
|
|
|
- onUpdate:checked={(val: any) => {
|
|
|
- if (val) {
|
|
|
- const ids: any = [];
|
|
|
- state.tableList.forEach((item: any) => {
|
|
|
- ids.push(item.id);
|
|
|
- });
|
|
|
- ids.forEach((id: any) => {
|
|
|
- if(!state.checkboxIds.includes(id)) {
|
|
|
- state.checkboxIds.push(id)
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- const removeIds = state.tableList.map((item: any) => item.id)
|
|
|
- console.log(removeIds, 'removeIds', state.checkboxIds)
|
|
|
- removeIds.forEach((rid: any) => {
|
|
|
- const index = state.checkboxIds.findIndex((id: any) => id == rid);
|
|
|
- if(index !== -1) state.checkboxIds.splice(index, 1);
|
|
|
- const sindex = state.selectStudents.findIndex(
|
|
|
- (select: any) => select.id == rid
|
|
|
- );
|
|
|
- if(sindex !== -1) state.selectStudents.splice(sindex, 1)
|
|
|
- })
|
|
|
- state.indeterminate = false;
|
|
|
- }
|
|
|
- onCheckStudents();
|
|
|
- }}></NCheckbox>
|
|
|
- <p>
|
|
|
- 全选 <span class={styles.nums}>({state.tableList.length})</span>{' '}
|
|
|
- :
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <NScrollbar
|
|
|
- class={styles.student}
|
|
|
- onScroll={(e: any) => {
|
|
|
- const clientHeight = e.target?.clientHeight;
|
|
|
- const scrollTop = e.target?.scrollTop;
|
|
|
- const scrollHeight = e.target?.scrollHeight;
|
|
|
- // 是否到底,是否加载完
|
|
|
- if (
|
|
|
- clientHeight + scrollTop + 20 >= scrollHeight &&
|
|
|
- !state.finshed &&
|
|
|
- !state.loading
|
|
|
- ) {
|
|
|
- throttledFn();
|
|
|
- }
|
|
|
- }}>
|
|
|
- <NSpin show={state.loading} class={styles.loadingSection}>
|
|
|
- <NCheckboxGroup
|
|
|
- v-model:value={state.checkboxIds}
|
|
|
- onUpdate:value={() => {
|
|
|
- // state.selectStudents = [];
|
|
|
- onCheckStudents();
|
|
|
- }}>
|
|
|
- {state.tableList.map((item: any) => (
|
|
|
- <NCheckbox value={item.id} class={[styles.studentItem]}>
|
|
|
- <div class={styles.studentInfo}>
|
|
|
- <NAvatar
|
|
|
- src={item.avatar || defultHeade}
|
|
|
- class={styles.studentImg}
|
|
|
- />
|
|
|
- <div class={styles.studentValue}>
|
|
|
- <div class={styles.userInfo}>
|
|
|
- <span class={styles.name}>{item.nickname}</span>
|
|
|
- {item.membership && <i class={styles.iconMember}></i>}
|
|
|
- {item.classGroupName && (
|
|
|
- <span class={styles.className}>
|
|
|
- {item.classGroupName}
|
|
|
- </span>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- <div class={styles.phone}>{item.phone}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </NCheckbox>
|
|
|
- ))}
|
|
|
- </NCheckboxGroup>
|
|
|
- {state.tableList.length <= 0 && !state.loading && <TheEmpty />}
|
|
|
- </NSpin>
|
|
|
- </NScrollbar>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class={styles.selectStudentGroup}>
|
|
|
- <div class={styles.selectCount}>
|
|
|
- 当前选中 <span>({state.selectStudents.length}) </span>:
|
|
|
- </div>
|
|
|
- <div class={styles.searchSection}>
|
|
|
- <SearchInput
|
|
|
- {...{ placeholder: '请输入学生姓名' }}
|
|
|
- class={styles.searchInput}
|
|
|
- searchWord={state.selectKeyword}
|
|
|
- onChangeValue={(val: string) => {
|
|
|
- state.selectKeyword = val;
|
|
|
-
|
|
|
- state.selectStudents.forEach((item: any) => {
|
|
|
- if (item.nickname?.indexOf(val) === -1) {
|
|
|
- item.hide = true;
|
|
|
- } else {
|
|
|
- item.hide = false;
|
|
|
- }
|
|
|
- });
|
|
|
- }}></SearchInput>
|
|
|
- </div>
|
|
|
- <NScrollbar class={styles.student}>
|
|
|
- {state.selectStudents.map((student: any) => (
|
|
|
- <div class={[styles.studentItem, student.hide && styles.hide]}>
|
|
|
- <div class={styles.studentInfo}>
|
|
|
- <NAvatar
|
|
|
- src={student.avatar || defultHeade}
|
|
|
- class={styles.studentImg}
|
|
|
- />
|
|
|
- <span class={styles.name}>{student.nickname}</span>
|
|
|
- </div>
|
|
|
- <i
|
|
|
- class={styles.iconClose}
|
|
|
- onClick={() => onRemove(student)}></i>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- {selectStudentEmpty.value && <TheEmpty />}
|
|
|
- </NScrollbar>
|
|
|
-
|
|
|
- <NSpace justify="end" class={styles.btnGroup}>
|
|
|
- <NButton type="default" onClick={() => emit('close')}>
|
|
|
- 取消
|
|
|
- </NButton>
|
|
|
- <NButton type="primary" onClick={onSave}>
|
|
|
- 保存
|
|
|
- </NButton>
|
|
|
- </NSpace>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
-});
|
|
|
+import { computed, defineComponent, onMounted, reactive } from 'vue';
|
|
|
+import styles from './index.module.less';
|
|
|
+import {
|
|
|
+ NAvatar,
|
|
|
+ NButton,
|
|
|
+ NCascader,
|
|
|
+ NCheckbox,
|
|
|
+ NCheckboxGroup,
|
|
|
+ NInput,
|
|
|
+ NScrollbar,
|
|
|
+ NSelect,
|
|
|
+ NSpace,
|
|
|
+ NSpin
|
|
|
+} from 'naive-ui';
|
|
|
+import defultHeade from '@/components/layout/images/teacherIcon.png';
|
|
|
+import SearchInput from '/src/components/searchInput';
|
|
|
+import { useCatchStore } from '/src/store/modules/catchData';
|
|
|
+import { getStudentList } from '/src/views/classList/api';
|
|
|
+import { useThrottleFn } from '@vueuse/core';
|
|
|
+import TheEmpty from '/src/components/TheEmpty';
|
|
|
+import { getGradeYearList } from '/src/views/home/api';
|
|
|
+import { api_getCurrentGradeYear } from '/src/views/studentList/api';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'assign-student',
|
|
|
+ props: {
|
|
|
+ /** 班级列表 */
|
|
|
+ classList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ /** 所选学生列表 */
|
|
|
+ studentList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ /** 学年 */
|
|
|
+ currentGradeNum: {
|
|
|
+ type: [String || Number],
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ selectIds: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ classGroupId: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emits: ['close', 'confirm'],
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const catchStore = useCatchStore();
|
|
|
+ const state = reactive({
|
|
|
+ studentName: '',
|
|
|
+ loading: false,
|
|
|
+ finshed: false, // 是否加载完
|
|
|
+ checkAllStatus: false,
|
|
|
+ indeterminate: false,
|
|
|
+ searchFrom: {
|
|
|
+ upgradeFlag: true,
|
|
|
+ currentGradeNums: null as any,
|
|
|
+ gradeYear: null,
|
|
|
+ classGroupId: props.classGroupId || '',
|
|
|
+ classInstrumentId: '',
|
|
|
+ keyword: ''
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ page: 1,
|
|
|
+ rows: 20,
|
|
|
+ pageTotal: 0
|
|
|
+ },
|
|
|
+ tableList: [] as any,
|
|
|
+ checkboxIds: [] as any,
|
|
|
+ selectStudents: [] as any,
|
|
|
+ selectKeyword: '',
|
|
|
+ popSelectYearList: [] as any
|
|
|
+ });
|
|
|
+
|
|
|
+ // 获取学年
|
|
|
+ const getYearList = async () => {
|
|
|
+ try {
|
|
|
+ const { data } = await api_getCurrentGradeYear({});
|
|
|
+ state.searchFrom.gradeYear = data;
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const getStudentLists = async () => {
|
|
|
+ try {
|
|
|
+ if (state.pagination.page === 1) {
|
|
|
+ state.loading = true;
|
|
|
+ state.tableList = [];
|
|
|
+ }
|
|
|
+ const { data } = await getStudentList({
|
|
|
+ ...state.searchFrom,
|
|
|
+ ...state.pagination
|
|
|
+ });
|
|
|
+ state.loading = false;
|
|
|
+ const rows = data.rows || [];
|
|
|
+ state.tableList.push(...rows);
|
|
|
+ state.finshed = data.pages <= data.current ? true : false;
|
|
|
+
|
|
|
+ onCheckStudents();
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ state.loading = false;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const onSearch = () => {
|
|
|
+ state.pagination.page = 1;
|
|
|
+ getStudentLists();
|
|
|
+ };
|
|
|
+
|
|
|
+ const selectStudentEmpty = computed(() => {
|
|
|
+ let status = true;
|
|
|
+ state.selectStudents.forEach((item: any) => {
|
|
|
+ if (!item.hide) {
|
|
|
+ status = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return status;
|
|
|
+ });
|
|
|
+
|
|
|
+ const throttledFn = useThrottleFn(() => {
|
|
|
+ state.pagination.page = state.pagination.page + 1;
|
|
|
+ getStudentLists();
|
|
|
+ }, 500);
|
|
|
+
|
|
|
+ // 切换学生状态
|
|
|
+ const onCheckStudents = () => {
|
|
|
+ if (state.tableList.length <= 0) {
|
|
|
+ state.indeterminate = false;
|
|
|
+ state.checkAllStatus = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 右边数据
|
|
|
+ state.tableList.forEach((item: any) => {
|
|
|
+ if (state.checkboxIds.includes(item.id)) {
|
|
|
+ const index = state.selectStudents.findIndex(
|
|
|
+ (select: any) => select.id == item.id
|
|
|
+ );
|
|
|
+ if (index === -1) state.selectStudents.push(item);
|
|
|
+ } else {
|
|
|
+ const index = state.selectStudents.findIndex(
|
|
|
+ (select: any) => select.id == item.id
|
|
|
+ );
|
|
|
+ if(index >= 0) state.selectStudents.splice(index, 1)
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ let count = 0;
|
|
|
+ state.tableList.forEach((item: any) => {
|
|
|
+ const index = state.selectStudents.findIndex(
|
|
|
+ (select: any) => select.id === item.id
|
|
|
+ );
|
|
|
+ if(index >= 0) count++
|
|
|
+ })
|
|
|
+
|
|
|
+ if (count >= state.tableList.length) {
|
|
|
+ state.checkAllStatus = true;
|
|
|
+ state.indeterminate = false;
|
|
|
+ } else {
|
|
|
+ state.checkAllStatus = false;
|
|
|
+ state.indeterminate = count === 0 ? false : true;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 删除用户
|
|
|
+ const onRemove = (item: any) => {
|
|
|
+ const index = state.checkboxIds.findIndex((id: any) => id == item.id);
|
|
|
+ if (index !== -1) {
|
|
|
+ state.checkboxIds.splice(index, 1);
|
|
|
+ const sIndex = state.selectStudents.findIndex(
|
|
|
+ (select: any) => select.id === item.id
|
|
|
+ );
|
|
|
+ if (sIndex !== -1) {
|
|
|
+ state.selectStudents.splice(sIndex, 1);
|
|
|
+ }
|
|
|
+ onCheckStudents();
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const onSave = () => {
|
|
|
+ const studentInfo: any[] = [];
|
|
|
+ state.selectStudents.forEach((item: any) => {
|
|
|
+ studentInfo.push({
|
|
|
+ id: item.id,
|
|
|
+ name: item.nickname,
|
|
|
+ avatar: item.avatar
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ emit('confirm', studentInfo);
|
|
|
+ };
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ console.log(props.currentGradeNum, 'props.currentGradeNum-----')
|
|
|
+ if(Array.isArray(props.currentGradeNum)) {
|
|
|
+ state.searchFrom.currentGradeNums = props.currentGradeNum.join(',')
|
|
|
+ } else {
|
|
|
+ state.searchFrom.currentGradeNums = props.currentGradeNum
|
|
|
+ }
|
|
|
+
|
|
|
+ state.checkboxIds = props.selectIds || [];
|
|
|
+ state.loading = true;
|
|
|
+ await catchStore.getSubjects();
|
|
|
+ await getYearList();
|
|
|
+ await getStudentLists();
|
|
|
+ // onCheckStudents();
|
|
|
+ // 重置选择的学生
|
|
|
+ state.selectStudents = props.studentList?.map((item: any) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ nickname: item.name
|
|
|
+ };
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return () => (
|
|
|
+ <div class={[styles.assignStudent, 'assignStudent']}>
|
|
|
+ <div class={styles.studentListGroup}>
|
|
|
+ <div class={styles.searchSection}>
|
|
|
+ <div class={styles.searchSpace}>
|
|
|
+ <NSelect
|
|
|
+ placeholder="全部年级班级"
|
|
|
+ disabled={props.classGroupId ? true : false}
|
|
|
+ labelField="defaultLabel"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ v-model:value={state.searchFrom.classGroupId}
|
|
|
+ onUpdate:value={() => onSearch()}
|
|
|
+ options={
|
|
|
+ [{ defaultLabel: '全部年级班级', value: '' }, ...props.classList] as any
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <NCascader
|
|
|
+ options={[
|
|
|
+ { name: '全部乐器', id: '' },
|
|
|
+ ...catchStore.getSubjectList
|
|
|
+ ]}
|
|
|
+ placeholder="全部乐器"
|
|
|
+ v-model:value={state.searchFrom.classInstrumentId}
|
|
|
+ onUpdate:value={() => onSearch()}
|
|
|
+ checkStrategy="child"
|
|
|
+ showPath={false}
|
|
|
+ childrenField="instruments"
|
|
|
+ expandTrigger="hover"
|
|
|
+ labelField="name"
|
|
|
+ valueField="id"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <SearchInput
|
|
|
+ {...{ placeholder: '请输入学生姓名/手机号' }}
|
|
|
+ class={styles.searchInput}
|
|
|
+ searchWord={state.searchFrom.keyword}
|
|
|
+ onChangeValue={(val: string) => {
|
|
|
+ state.searchFrom.keyword = val;
|
|
|
+ }}
|
|
|
+ onClear={() => {
|
|
|
+ state.searchFrom.keyword = '';
|
|
|
+ onSearch();
|
|
|
+ }}
|
|
|
+ onKeyup={(e: KeyboardEvent) => {
|
|
|
+ if (e.code === 'Enter') {
|
|
|
+ onSearch();
|
|
|
+ }
|
|
|
+ }}></SearchInput>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.studentSection}>
|
|
|
+ <div class={styles.checkboxAll}>
|
|
|
+ <NCheckbox
|
|
|
+ v-model:checked={state.checkAllStatus}
|
|
|
+ indeterminate={state.indeterminate}
|
|
|
+ onUpdate:checked={(val: any) => {
|
|
|
+ if (val) {
|
|
|
+ const ids: any = [];
|
|
|
+ state.tableList.forEach((item: any) => {
|
|
|
+ ids.push(item.id);
|
|
|
+ });
|
|
|
+ ids.forEach((id: any) => {
|
|
|
+ if(!state.checkboxIds.includes(id)) {
|
|
|
+ state.checkboxIds.push(id)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ const removeIds = state.tableList.map((item: any) => item.id)
|
|
|
+ console.log(removeIds, 'removeIds', state.checkboxIds)
|
|
|
+ removeIds.forEach((rid: any) => {
|
|
|
+ const index = state.checkboxIds.findIndex((id: any) => id == rid);
|
|
|
+ if(index !== -1) state.checkboxIds.splice(index, 1);
|
|
|
+ const sindex = state.selectStudents.findIndex(
|
|
|
+ (select: any) => select.id == rid
|
|
|
+ );
|
|
|
+ if(sindex !== -1) state.selectStudents.splice(sindex, 1)
|
|
|
+ })
|
|
|
+ state.indeterminate = false;
|
|
|
+ }
|
|
|
+ onCheckStudents();
|
|
|
+ }}></NCheckbox>
|
|
|
+ <p>
|
|
|
+ 全选 <span class={styles.nums}>({state.tableList.length})</span>{' '}
|
|
|
+ :
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <NScrollbar
|
|
|
+ class={styles.student}
|
|
|
+ onScroll={(e: any) => {
|
|
|
+ const clientHeight = e.target?.clientHeight;
|
|
|
+ const scrollTop = e.target?.scrollTop;
|
|
|
+ const scrollHeight = e.target?.scrollHeight;
|
|
|
+ // 是否到底,是否加载完
|
|
|
+ if (
|
|
|
+ clientHeight + scrollTop + 20 >= scrollHeight &&
|
|
|
+ !state.finshed &&
|
|
|
+ !state.loading
|
|
|
+ ) {
|
|
|
+ throttledFn();
|
|
|
+ }
|
|
|
+ }}>
|
|
|
+ <NSpin show={state.loading} class={styles.loadingSection}>
|
|
|
+ <NCheckboxGroup
|
|
|
+ v-model:value={state.checkboxIds}
|
|
|
+ onUpdate:value={() => {
|
|
|
+ // state.selectStudents = [];
|
|
|
+ onCheckStudents();
|
|
|
+ }}>
|
|
|
+ {state.tableList.map((item: any) => (
|
|
|
+ <NCheckbox value={item.id} class={[styles.studentItem]}>
|
|
|
+ <div class={styles.studentInfo}>
|
|
|
+ <NAvatar
|
|
|
+ src={item.avatar || defultHeade}
|
|
|
+ class={styles.studentImg}
|
|
|
+ />
|
|
|
+ <div class={styles.studentValue}>
|
|
|
+ <div class={styles.userInfo}>
|
|
|
+ <span class={styles.name}>{item.nickname}</span>
|
|
|
+ {item.membership && <i class={styles.iconMember}></i>}
|
|
|
+ {item.classGroupName && (
|
|
|
+ <span class={styles.className}>
|
|
|
+ {item.classGroupName}
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ <div class={styles.phone}>{item.phone}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </NCheckbox>
|
|
|
+ ))}
|
|
|
+ </NCheckboxGroup>
|
|
|
+ {state.tableList.length <= 0 && !state.loading && <TheEmpty />}
|
|
|
+ </NSpin>
|
|
|
+ </NScrollbar>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.selectStudentGroup}>
|
|
|
+ <div class={styles.selectCount}>
|
|
|
+ 当前选中 <span>({state.selectStudents.length}) </span>:
|
|
|
+ </div>
|
|
|
+ <div class={styles.searchSection}>
|
|
|
+ <SearchInput
|
|
|
+ {...{ placeholder: '请输入学生姓名' }}
|
|
|
+ class={styles.searchInput}
|
|
|
+ searchWord={state.selectKeyword}
|
|
|
+ onChangeValue={(val: string) => {
|
|
|
+ state.selectKeyword = val;
|
|
|
+
|
|
|
+ state.selectStudents.forEach((item: any) => {
|
|
|
+ if (item.nickname?.indexOf(val) === -1) {
|
|
|
+ item.hide = true;
|
|
|
+ } else {
|
|
|
+ item.hide = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }}></SearchInput>
|
|
|
+ </div>
|
|
|
+ <NScrollbar class={styles.student}>
|
|
|
+ {state.selectStudents.map((student: any) => (
|
|
|
+ <div class={[styles.studentItem, student.hide && styles.hide]}>
|
|
|
+ <div class={styles.studentInfo}>
|
|
|
+ <NAvatar
|
|
|
+ src={student.avatar || defultHeade}
|
|
|
+ class={styles.studentImg}
|
|
|
+ />
|
|
|
+ <span class={styles.name}>{student.nickname}</span>
|
|
|
+ </div>
|
|
|
+ <i
|
|
|
+ class={styles.iconClose}
|
|
|
+ onClick={() => onRemove(student)}></i>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ {selectStudentEmpty.value && <TheEmpty />}
|
|
|
+ </NScrollbar>
|
|
|
+
|
|
|
+ <NSpace justify="end" class={styles.btnGroup}>
|
|
|
+ <NButton type="default" onClick={() => emit('close')}>
|
|
|
+ 取消
|
|
|
+ </NButton>
|
|
|
+ <NButton type="primary" onClick={onSave}>
|
|
|
+ 保存
|
|
|
+ </NButton>
|
|
|
+ </NSpace>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|