|
|
@@ -1,721 +1,721 @@
|
|
|
-import { defineComponent, reactive, onMounted, ref } from 'vue';
|
|
|
-import styles from './index.module.less';
|
|
|
-import {
|
|
|
- NButton,
|
|
|
- NCascader,
|
|
|
- NDataTable,
|
|
|
- NForm,
|
|
|
- NFormItem,
|
|
|
- NImage,
|
|
|
- NModal,
|
|
|
- NSpace,
|
|
|
- useMessage
|
|
|
-} from 'naive-ui';
|
|
|
-import SearchInput from '@/components/searchInput';
|
|
|
-import CSelect from '@/components/CSelect';
|
|
|
-import Pagination from '@/components/pagination';
|
|
|
-import { classGroupList, deleteClass, getSubject, addGroup } from './api';
|
|
|
-import CreateClass from './modals/createClass';
|
|
|
-import RestStudentBox from './modals/restStudentBox';
|
|
|
-import { getgradeNumList, classArray } from './contants';
|
|
|
-import add from '@/views/studentList/images/add.png';
|
|
|
-import ClassGuide from '@/custom-plugins/guide-page/class-guide';
|
|
|
-import { useRoute, useRouter } from 'vue-router';
|
|
|
-import TheEmpty from '/src/components/TheEmpty';
|
|
|
-import TheTooltip from '/src/components/TheTooltip';
|
|
|
-import PreviewWindow from '../preview-window';
|
|
|
-import ResetSubject from './modals/resetSubject';
|
|
|
-import UpdateSubject from './modals/updateSubject';
|
|
|
-import { getGradeLevelList, getGradeYearList } from '../home/api';
|
|
|
-import { initCache, setCache } from '/src/hooks/use-async';
|
|
|
-import AddStudentModel from '../studentList/modals/addStudentModel';
|
|
|
-import { useUserStore } from '/src/store/modules/users';
|
|
|
-import { useCatchStore } from '/src/store/modules/catchData';
|
|
|
-export default defineComponent({
|
|
|
- name: 'class-classList',
|
|
|
- setup() {
|
|
|
- const catchData = useCatchStore();
|
|
|
- const users = useUserStore();
|
|
|
- const state = reactive({
|
|
|
- searchForm: {
|
|
|
- keyword: null as any,
|
|
|
- currentClass: '',
|
|
|
- currentGradeNum: '',
|
|
|
- instrumentId: '',
|
|
|
- gradeYear: '',
|
|
|
- gradeLevel: ''
|
|
|
- },
|
|
|
- orchestraType: null,
|
|
|
- courseTypeCode: null,
|
|
|
- loading: false,
|
|
|
- pagination: {
|
|
|
- page: 1,
|
|
|
- rows: 10,
|
|
|
- pageTotal: 6
|
|
|
- },
|
|
|
- gradeNumList: [] as any,
|
|
|
- tableList: [] as any,
|
|
|
- studentVisible: false,
|
|
|
- activeRow: null as any,
|
|
|
- showaddClass: false,
|
|
|
- goCourseVisiable: false,
|
|
|
- removeVisiable: false,
|
|
|
- removeRow: {} as any,
|
|
|
- previewModal: false,
|
|
|
- previewParams: {} as any,
|
|
|
- lastCourse: null as any,
|
|
|
- groupBtnLoading: false, // 按钮是否在请求中
|
|
|
- // subjectList: [] as any,
|
|
|
- showResetClass: false,
|
|
|
- showSubjectClass: false,
|
|
|
- groupVisiable: false,
|
|
|
- popSelectYearList: [] as any,
|
|
|
- popSelectLevelList: [] as any,
|
|
|
- addStudentVisible: false
|
|
|
- });
|
|
|
- const formRef = ref();
|
|
|
- const message = useMessage();
|
|
|
- const router = useRouter();
|
|
|
- const route = useRoute();
|
|
|
- const search = () => {
|
|
|
- state.pagination.page = 1;
|
|
|
- getList();
|
|
|
- setCache({ current: state.searchForm, saveKey: route.path });
|
|
|
- };
|
|
|
- const showGuide = ref(false);
|
|
|
- state.gradeNumList = getgradeNumList();
|
|
|
- const onReset = () => {
|
|
|
- state.searchForm = {
|
|
|
- keyword: null as any,
|
|
|
- currentClass: '' as any,
|
|
|
- currentGradeNum: '' as any,
|
|
|
- instrumentId: '' as any,
|
|
|
- gradeYear: '' as any,
|
|
|
- gradeLevel: ''
|
|
|
- };
|
|
|
- if (state.popSelectYearList.length > 1) {
|
|
|
- state.searchForm.gradeYear = state.popSelectYearList[1].id;
|
|
|
- }
|
|
|
- getList();
|
|
|
- setCache({ current: state.searchForm, saveKey: route.path });
|
|
|
- };
|
|
|
-
|
|
|
- const removeClass = async () => {
|
|
|
- try {
|
|
|
- await deleteClass({ ids: state.removeRow.id });
|
|
|
- getList();
|
|
|
- message.success(`删除成功`);
|
|
|
- state.removeVisiable = false;
|
|
|
- } catch (e) {
|
|
|
- console.log(e);
|
|
|
- }
|
|
|
- };
|
|
|
- const getList = async () => {
|
|
|
- // classGroupList
|
|
|
- state.loading = true;
|
|
|
- try {
|
|
|
- const res = await classGroupList({
|
|
|
- ...state.searchForm,
|
|
|
- ...state.pagination
|
|
|
- });
|
|
|
- state.tableList = res.data.rows;
|
|
|
- state.pagination.pageTotal = res.data.total;
|
|
|
- state.loading = false;
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- if (state.tableList.length > 0) {
|
|
|
- showGuide.value = true;
|
|
|
- }
|
|
|
- }, 500);
|
|
|
- } catch (e) {
|
|
|
- state.loading = false;
|
|
|
- console.log(e);
|
|
|
- }
|
|
|
- };
|
|
|
- // const getSubjectList = async () => {
|
|
|
- // const res = await getSubject({ page: 1, rows: 9999 });
|
|
|
- // state.subjectList = res.data.rows.map((item: any) => {
|
|
|
- // return {
|
|
|
- // value: item.id,
|
|
|
- // label: item.name
|
|
|
- // };
|
|
|
- // });
|
|
|
- // state.subjectList.unshift({ value: '', label: '全部声部' });
|
|
|
- // };
|
|
|
- const columns = () => {
|
|
|
- return [
|
|
|
- {
|
|
|
- title: '班级名称',
|
|
|
- key: 'name'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '学年',
|
|
|
- key: 'gradeYear'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '学级',
|
|
|
- key: 'gradeLevel',
|
|
|
- render(row: any) {
|
|
|
- return row.gradeLevel ? `${row.gradeLevel}级` : '';
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '班级乐器',
|
|
|
- key: 'instrumentName'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '学生人数',
|
|
|
- key: 'preStudentNum'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '上次学习',
|
|
|
- key: 'lastStudy',
|
|
|
- width: '20%',
|
|
|
- render(row: any) {
|
|
|
- return row.lastStudy ? (
|
|
|
- <TheTooltip
|
|
|
- maxWidth={300}
|
|
|
- showContentWidth={300}
|
|
|
- content={row.lastStudy}
|
|
|
- />
|
|
|
- ) : (
|
|
|
- '--'
|
|
|
- );
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- key: 'id',
|
|
|
-
|
|
|
- render(row: any, index: number) {
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <NSpace>
|
|
|
- {index == 0 ? (
|
|
|
- <div id="class-0">
|
|
|
- <NButton
|
|
|
- type="primary"
|
|
|
- text
|
|
|
- onClick={() => {
|
|
|
- router.push({
|
|
|
- path: '/classDetail',
|
|
|
- query: {
|
|
|
- name: row.name,
|
|
|
- id: row.id,
|
|
|
- gradeYear: row.gradeYear,
|
|
|
- upgradeFlag: row.upgradeFlag ? 1 : 0 // 是否为历史班
|
|
|
- }
|
|
|
- });
|
|
|
- }}>
|
|
|
- 详情
|
|
|
- </NButton>
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- <NButton
|
|
|
- type="primary"
|
|
|
- text
|
|
|
- onClick={() => {
|
|
|
- router.push({
|
|
|
- path: '/classDetail',
|
|
|
- query: {
|
|
|
- name: row.name,
|
|
|
- id: row.id,
|
|
|
- gradeYear: row.gradeYear,
|
|
|
- upgradeFlag: row.upgradeFlag ? 1 : 0 // 是否为历史班
|
|
|
- }
|
|
|
- });
|
|
|
- }}>
|
|
|
- 详情
|
|
|
- </NButton>
|
|
|
- )}
|
|
|
- <NButton
|
|
|
- type="primary"
|
|
|
- disabled={!row.upgradeFlag || row.instrumentId}
|
|
|
- text
|
|
|
- onClick={() => resetClassSubject(row)}>
|
|
|
- 修改乐器
|
|
|
- </NButton>
|
|
|
- {index == 0 ? (
|
|
|
- <NButton
|
|
|
- type="primary"
|
|
|
- disabled={!row.upgradeFlag}
|
|
|
- {...{ id: 'class-1' }}
|
|
|
- text
|
|
|
- onClick={() => {
|
|
|
- startResetStudent(row);
|
|
|
- }}>
|
|
|
- 学生调整
|
|
|
- </NButton>
|
|
|
- ) : (
|
|
|
- <NButton
|
|
|
- type="primary"
|
|
|
- disabled={!row.upgradeFlag}
|
|
|
- text
|
|
|
- onClick={() => {
|
|
|
- startResetStudent(row);
|
|
|
- }}>
|
|
|
- 学生调整
|
|
|
- </NButton>
|
|
|
- )}
|
|
|
- {index == 0 ? (
|
|
|
- <NButton
|
|
|
- {...{ id: 'class-2' }}
|
|
|
- disabled={!row.upgradeFlag}
|
|
|
- type="primary"
|
|
|
- text
|
|
|
- onClick={() => classesBegin(row)}>
|
|
|
- 开始上课
|
|
|
- </NButton>
|
|
|
- ) : (
|
|
|
- <NButton
|
|
|
- disabled={!row.upgradeFlag}
|
|
|
- type="primary"
|
|
|
- text
|
|
|
- onClick={() => classesBegin(row)}>
|
|
|
- 开始上课
|
|
|
- </NButton>
|
|
|
- )}
|
|
|
-
|
|
|
- {/* <p
|
|
|
- style={{ color: '#EA4132', cursor: 'pointer' }}
|
|
|
- onClick={() => {
|
|
|
- state.removeVisiable = true;
|
|
|
- state.removeRow = row;
|
|
|
- }}>
|
|
|
- 删除
|
|
|
- </p> */}
|
|
|
- {!(row.preStudentNum > 0) ? (
|
|
|
- <NButton
|
|
|
- type="error"
|
|
|
- color="#EA4132"
|
|
|
- textColor="#EA4132"
|
|
|
- text
|
|
|
- onClick={() => {
|
|
|
- state.removeVisiable = true;
|
|
|
- state.removeRow = row;
|
|
|
- }}>
|
|
|
- 删除
|
|
|
- </NButton>
|
|
|
- ) : null}
|
|
|
- {row.imGroupId ? null : (
|
|
|
- <NButton
|
|
|
- type="primary"
|
|
|
- disabled={!row.upgradeFlag}
|
|
|
- text
|
|
|
- onClick={() => {
|
|
|
- createImgroup(row);
|
|
|
- }}>
|
|
|
- 创建群聊
|
|
|
- </NButton>
|
|
|
- )}
|
|
|
- <NButton
|
|
|
- type="primary"
|
|
|
- disabled={!row.upgradeFlag}
|
|
|
- text
|
|
|
- onClick={() => {
|
|
|
- const { schoolInfos } = users.getUserInfo;
|
|
|
- const schoolId =
|
|
|
- schoolInfos.length > 0 ? schoolInfos[0].id : null;
|
|
|
- if (schoolId) {
|
|
|
- state.addStudentVisible = true;
|
|
|
- state.activeRow = {
|
|
|
- id: schoolId,
|
|
|
- classId: row.id,
|
|
|
- currentGradeNum: row.currentGradeNum,
|
|
|
- currentClass: row.currentClass,
|
|
|
- gradeYear: row.gradeYear
|
|
|
- };
|
|
|
- }
|
|
|
- }}>
|
|
|
- 邀请学生
|
|
|
- </NButton>
|
|
|
- </NSpace>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- ];
|
|
|
- };
|
|
|
-
|
|
|
- const startResetStudent = (row: any) => {
|
|
|
- state.activeRow = row;
|
|
|
- state.studentVisible = true;
|
|
|
- };
|
|
|
-
|
|
|
- const classesBegin = async (row: any) => {
|
|
|
- try {
|
|
|
- // 判断是否有声部
|
|
|
- if (row.instrumentId) {
|
|
|
- //
|
|
|
- // 声部先取上次上课的声部，如果没有则取班级上面的声部
|
|
|
- router.push({
|
|
|
- path: '/prepare-lessons',
|
|
|
- query: {
|
|
|
- lastUseCoursewareId: row.lessonCoursewareId,
|
|
|
- unit: row.lessonCoursewareKnowledgeDetailId,
|
|
|
- instrumentId: row.instrumentId,
|
|
|
- courseScheduleSubjectId: row.courseScheduleSubjectId,
|
|
|
- preStudentNum: row.preStudentNum,
|
|
|
- name: row.name, // 班级名称
|
|
|
- classGroupId: row.id // 班级编号
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- state.showSubjectClass = true;
|
|
|
- state.activeRow = row;
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- console.log(e);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const resetClassSubject = (row: any) => {
|
|
|
- state.activeRow = row;
|
|
|
- state.showResetClass = true;
|
|
|
- };
|
|
|
- const createImgroup = async (row: any) => {
|
|
|
- state.activeRow = row;
|
|
|
- state.groupVisiable = true;
|
|
|
- };
|
|
|
-
|
|
|
- const submitGroup = async () => {
|
|
|
- console.log(state.activeRow, 'row');
|
|
|
- state.groupBtnLoading = true;
|
|
|
- try {
|
|
|
- await addGroup({ classGroupId: state.activeRow.id });
|
|
|
- message.success('创建成功');
|
|
|
- state.groupVisiable = false;
|
|
|
- await getList();
|
|
|
- } catch (e) {
|
|
|
- console.log(e);
|
|
|
- }
|
|
|
- state.groupBtnLoading = false;
|
|
|
- };
|
|
|
-
|
|
|
- // 获取学年
|
|
|
- const getYearList = async () => {
|
|
|
- try {
|
|
|
- const { data } = await getGradeYearList();
|
|
|
- const temp = data || [];
|
|
|
- temp.forEach((i: any) => {
|
|
|
- i.name = i.name + '学年';
|
|
|
- });
|
|
|
- // temp.unshift({
|
|
|
- // id: '',
|
|
|
- // name: '全部学年'
|
|
|
- // });
|
|
|
- state.popSelectYearList = temp || [];
|
|
|
- if (temp.length > 1 && !state.searchForm.gradeYear) {
|
|
|
- state.searchForm.gradeYear = temp[1].id;
|
|
|
- }
|
|
|
- } catch {
|
|
|
- //
|
|
|
- }
|
|
|
- };
|
|
|
- // 获取学级
|
|
|
- const getLevelList = async () => {
|
|
|
- try {
|
|
|
- const { data } = await getGradeLevelList();
|
|
|
- const temp = data || [];
|
|
|
- temp.forEach((i: any) => {
|
|
|
- i.name = i.name + '级';
|
|
|
- });
|
|
|
- temp.unshift({
|
|
|
- id: '',
|
|
|
- name: '全部学级'
|
|
|
- });
|
|
|
- state.popSelectLevelList = temp || [];
|
|
|
- if (temp.length > 0 && !state.searchForm.gradeLevel) {
|
|
|
- state.searchForm.gradeLevel = temp[0].id;
|
|
|
- }
|
|
|
- } catch {
|
|
|
- //
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- initCache({
|
|
|
- current: state.searchForm,
|
|
|
- callBack: (active: any) => {
|
|
|
- state.searchForm = active;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- onMounted(async () => {
|
|
|
- state.loading = true;
|
|
|
- await catchData.getSubjects();
|
|
|
-
|
|
|
- // getSubjectList();
|
|
|
- await getYearList();
|
|
|
- await getLevelList();
|
|
|
- await getList();
|
|
|
-
|
|
|
- state.loading = false;
|
|
|
- });
|
|
|
- return () => (
|
|
|
- <div class={styles.listWrap}>
|
|
|
- <div class={styles.searchList}>
|
|
|
- <NForm label-placement="left" inline ref={formRef}>
|
|
|
- <NFormItem>
|
|
|
- <SearchInput
|
|
|
- {...{ placeholder: '请输入班级名称' }}
|
|
|
- class={styles.searchInput}
|
|
|
- searchWord={state.searchForm.keyword}
|
|
|
- onChangeValue={(val: string) =>
|
|
|
- (state.searchForm.keyword = val)
|
|
|
- }></SearchInput>
|
|
|
- </NFormItem>
|
|
|
- <NFormItem>
|
|
|
- <CSelect
|
|
|
- {...({
|
|
|
- options: state.popSelectYearList,
|
|
|
- placeholder: '选择学年',
|
|
|
- clearable: false,
|
|
|
- inline: true,
|
|
|
- labelField: 'name',
|
|
|
- valueField: 'id'
|
|
|
- } as any)}
|
|
|
- v-model:value={state.searchForm.gradeYear}></CSelect>
|
|
|
- </NFormItem>
|
|
|
- <NFormItem>
|
|
|
- <CSelect
|
|
|
- {...({
|
|
|
- options: state.popSelectLevelList,
|
|
|
- placeholder: '选择学级',
|
|
|
- clearable: true,
|
|
|
- inline: true,
|
|
|
- labelField: 'name',
|
|
|
- valueField: 'id'
|
|
|
- } as any)}
|
|
|
- v-model:value={state.searchForm.gradeLevel}></CSelect>
|
|
|
- </NFormItem>
|
|
|
-
|
|
|
- <NFormItem>
|
|
|
- <CSelect
|
|
|
- {...({
|
|
|
- options: state.gradeNumList,
|
|
|
- placeholder: '选择年级',
|
|
|
- clearable: true,
|
|
|
- inline: true
|
|
|
- } as any)}
|
|
|
- v-model:value={state.searchForm.currentGradeNum}></CSelect>
|
|
|
- </NFormItem>
|
|
|
- <NFormItem>
|
|
|
- <CSelect
|
|
|
- {...({
|
|
|
- options: classArray,
|
|
|
- placeholder: '选择班级',
|
|
|
- clearable: true,
|
|
|
- inline: true
|
|
|
- } as any)}
|
|
|
- v-model:value={state.searchForm.currentClass}></CSelect>
|
|
|
- </NFormItem>
|
|
|
- <NFormItem>
|
|
|
- {/* <CSelect
|
|
|
- {...({
|
|
|
- options: [
|
|
|
- { value: '', label: '全部声部' },
|
|
|
- ...catchData.getSubjectList
|
|
|
- ],
|
|
|
- placeholder: '选择乐器',
|
|
|
- clearable: true,
|
|
|
- inline: true
|
|
|
- } as any)}
|
|
|
- v-model:value={state.searchForm.instrumentId}></CSelect> */}
|
|
|
- <NCascader
|
|
|
- to="body"
|
|
|
- placeholder="选择乐器"
|
|
|
- options={[
|
|
|
- { value: '', label: '全部乐器' },
|
|
|
- ...catchData.getSubjectList
|
|
|
- ]}
|
|
|
- childrenField="instruments"
|
|
|
- checkStrategy="child"
|
|
|
- expandTrigger="hover"
|
|
|
- showPath={true}
|
|
|
- v-model:value={state.searchForm.instrumentId}
|
|
|
- onUpdate:value={(val: any, option: any, pathValues: any) => {
|
|
|
- console.log(val, option, pathValues);
|
|
|
- }}
|
|
|
- />
|
|
|
- </NFormItem>
|
|
|
- <NFormItem>
|
|
|
- <NSpace justify="end">
|
|
|
- <NButton type="primary" class="searchBtn" onClick={search}>
|
|
|
- 搜索
|
|
|
- </NButton>
|
|
|
- <NButton
|
|
|
- type="primary"
|
|
|
- ghost
|
|
|
- class="resetBtn"
|
|
|
- onClick={onReset}>
|
|
|
- 重置
|
|
|
- </NButton>
|
|
|
- </NSpace>
|
|
|
- </NFormItem>
|
|
|
- </NForm>
|
|
|
- </div>
|
|
|
- <NButton
|
|
|
- class={styles.addBtn}
|
|
|
- type="primary"
|
|
|
- onClick={() => (state.showaddClass = true)}
|
|
|
- v-slots={{
|
|
|
- icon: () => (
|
|
|
- <>
|
|
|
- <NImage
|
|
|
- class={styles.addBtnIcon}
|
|
|
- previewDisabled
|
|
|
- src={add}></NImage>
|
|
|
- </>
|
|
|
- )
|
|
|
- }}>
|
|
|
- 创建班级
|
|
|
- </NButton>
|
|
|
- <div class={styles.tableWrap}>
|
|
|
- <NDataTable
|
|
|
- v-slots={{
|
|
|
- empty: () => <TheEmpty></TheEmpty>
|
|
|
- }}
|
|
|
- class={styles.classTable}
|
|
|
- loading={state.loading}
|
|
|
- columns={columns()}
|
|
|
- data={state.tableList}></NDataTable>
|
|
|
- <Pagination
|
|
|
- v-model:page={state.pagination.page}
|
|
|
- v-model:pageSize={state.pagination.rows}
|
|
|
- v-model:pageTotal={state.pagination.pageTotal}
|
|
|
- onList={getList}
|
|
|
- sync
|
|
|
- />
|
|
|
- </div>
|
|
|
- <NModal
|
|
|
- v-model:show={state.studentVisible}
|
|
|
- preset="card"
|
|
|
- class={['modalTitle background', styles.studentVisible]}
|
|
|
- title={'学生调整'}>
|
|
|
- <RestStudentBox
|
|
|
- activeRow={state.activeRow}
|
|
|
- onClose={() => (state.studentVisible = false)}
|
|
|
- onGetList={() => getList()}></RestStudentBox>
|
|
|
- </NModal>
|
|
|
- <NModal
|
|
|
- v-model:show={state.showaddClass}
|
|
|
- style={{ width: '500px' }}
|
|
|
- display-directive="if"
|
|
|
- preset="card"
|
|
|
- class={['modalTitle background']}
|
|
|
- title={'创建班级'}>
|
|
|
- <CreateClass
|
|
|
- gradeYearList={state.popSelectYearList}
|
|
|
- gradeNumList={state.gradeNumList}
|
|
|
- classArray={classArray}
|
|
|
- onGetList={() => getList()}
|
|
|
- onClose={() => (state.showaddClass = false)}
|
|
|
- />
|
|
|
- </NModal>
|
|
|
- <NModal
|
|
|
- v-model:show={state.showResetClass}
|
|
|
- style={{ width: '500px' }}
|
|
|
- display-directive="if"
|
|
|
- preset="card"
|
|
|
- class={['modalTitle background']}
|
|
|
- title={'修改乐器'}>
|
|
|
- <ResetSubject
|
|
|
- activeRow={state.activeRow}
|
|
|
- onGetList={() => getList()}
|
|
|
- onClose={() => (state.showResetClass = false)}
|
|
|
- />
|
|
|
- </NModal>
|
|
|
-
|
|
|
- <NModal
|
|
|
- v-model:show={state.showSubjectClass}
|
|
|
- style={{ width: '500px' }}
|
|
|
- preset="card"
|
|
|
- class={['modalTitle background']}
|
|
|
- title={'修改乐器'}>
|
|
|
- {state.showSubjectClass ? (
|
|
|
- <UpdateSubject
|
|
|
- activeRow={state.activeRow}
|
|
|
- onGetList={() => getList()}
|
|
|
- onConfirm={(item: any) => {
|
|
|
- //
|
|
|
- router.push({
|
|
|
- path: '/prepare-lessons',
|
|
|
- query: {
|
|
|
- ...item
|
|
|
- }
|
|
|
- });
|
|
|
- }}
|
|
|
- onClose={() => (state.showSubjectClass = false)}
|
|
|
- />
|
|
|
- ) : null}
|
|
|
- </NModal>
|
|
|
-
|
|
|
- {/* 上课弹窗 */}
|
|
|
- <PreviewWindow
|
|
|
- v-model:show={state.previewModal}
|
|
|
- type="attend"
|
|
|
- params={state.previewParams}
|
|
|
- />
|
|
|
-
|
|
|
- <NModal
|
|
|
- v-model:show={state.removeVisiable}
|
|
|
- preset="card"
|
|
|
- class={['modalTitle', styles.removeVisiable]}
|
|
|
- title={'删除班级'}>
|
|
|
- <div class={styles.studentRemove}>
|
|
|
- <p>
|
|
|
- 确定要删除班级么？
|
|
|
- <span>删除班级信息将会清空</span>。
|
|
|
- </p>
|
|
|
-
|
|
|
- <NSpace class={styles.btnGroup} justify="center">
|
|
|
- <NButton round type="primary" onClick={removeClass}>
|
|
|
- 确定
|
|
|
- </NButton>
|
|
|
- <NButton round onClick={() => (state.removeVisiable = false)}>
|
|
|
- 取消
|
|
|
- </NButton>
|
|
|
- </NSpace>
|
|
|
- </div>
|
|
|
- </NModal>
|
|
|
-
|
|
|
- <NModal
|
|
|
- v-model:show={state.groupVisiable}
|
|
|
- preset="card"
|
|
|
- class={['modalTitle', styles.removeVisiable]}
|
|
|
- title={'创建群聊'}>
|
|
|
- <div class={styles.studentRemove}>
|
|
|
- <p style={{ textAlign: 'center' }}>是否创建班级群聊</p>
|
|
|
-
|
|
|
- <NSpace class={styles.btnGroup} justify="center">
|
|
|
- <NButton
|
|
|
- round
|
|
|
- type="primary"
|
|
|
- onClick={submitGroup}
|
|
|
- loading={state.groupBtnLoading}
|
|
|
- disabled={state.groupBtnLoading}>
|
|
|
- 确定
|
|
|
- </NButton>
|
|
|
- <NButton round onClick={() => (state.groupVisiable = false)}>
|
|
|
- 取消
|
|
|
- </NButton>
|
|
|
- </NSpace>
|
|
|
- </div>
|
|
|
- </NModal>
|
|
|
- {showGuide.value ? <ClassGuide></ClassGuide> : null}
|
|
|
-
|
|
|
- {state.addStudentVisible ? (
|
|
|
- <div
|
|
|
- v-model:show={state.addStudentVisible}
|
|
|
- class={['n-modal-mask', styles.popBox]}>
|
|
|
- <AddStudentModel
|
|
|
- activeRow={state.activeRow}
|
|
|
- onClose={() => {
|
|
|
- state.addStudentVisible = false;
|
|
|
- }}></AddStudentModel>
|
|
|
- </div>
|
|
|
- ) : null}
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
-});
|
|
|
+import { defineComponent, reactive, onMounted, ref } from 'vue';
|
|
|
+import styles from './index.module.less';
|
|
|
+import {
|
|
|
+ NButton,
|
|
|
+ NCascader,
|
|
|
+ NDataTable,
|
|
|
+ NForm,
|
|
|
+ NFormItem,
|
|
|
+ NImage,
|
|
|
+ NModal,
|
|
|
+ NSpace,
|
|
|
+ useMessage
|
|
|
+} from 'naive-ui';
|
|
|
+import SearchInput from '@/components/searchInput';
|
|
|
+import CSelect from '@/components/CSelect';
|
|
|
+import Pagination from '@/components/pagination';
|
|
|
+import { classGroupList, deleteClass, getSubject, addGroup } from './api';
|
|
|
+import CreateClass from './modals/createClass';
|
|
|
+import RestStudentBox from './modals/restStudentBox';
|
|
|
+import { getgradeNumList, classArray } from './contants';
|
|
|
+import add from '@/views/studentList/images/add.png';
|
|
|
+import ClassGuide from '@/custom-plugins/guide-page/class-guide';
|
|
|
+import { useRoute, useRouter } from 'vue-router';
|
|
|
+import TheEmpty from '/src/components/TheEmpty';
|
|
|
+import TheTooltip from '/src/components/TheTooltip';
|
|
|
+import PreviewWindow from '../preview-window';
|
|
|
+import ResetSubject from './modals/resetSubject';
|
|
|
+import UpdateSubject from './modals/updateSubject';
|
|
|
+import { getGradeLevelList, getGradeYearList } from '../home/api';
|
|
|
+import { initCache, setCache } from '/src/hooks/use-async';
|
|
|
+import AddStudentModel from '../studentList/modals/addStudentModel';
|
|
|
+import { useUserStore } from '/src/store/modules/users';
|
|
|
+import { useCatchStore } from '/src/store/modules/catchData';
|
|
|
+export default defineComponent({
|
|
|
+ name: 'class-classList',
|
|
|
+ setup() {
|
|
|
+ const catchData = useCatchStore();
|
|
|
+ const users = useUserStore();
|
|
|
+ const state = reactive({
|
|
|
+ searchForm: {
|
|
|
+ keyword: null as any,
|
|
|
+ currentClass: '',
|
|
|
+ currentGradeNum: '',
|
|
|
+ instrumentId: '',
|
|
|
+ gradeYear: '',
|
|
|
+ gradeLevel: ''
|
|
|
+ },
|
|
|
+ orchestraType: null,
|
|
|
+ courseTypeCode: null,
|
|
|
+ loading: false,
|
|
|
+ pagination: {
|
|
|
+ page: 1,
|
|
|
+ rows: 10,
|
|
|
+ pageTotal: 6
|
|
|
+ },
|
|
|
+ gradeNumList: [] as any,
|
|
|
+ tableList: [] as any,
|
|
|
+ studentVisible: false,
|
|
|
+ activeRow: null as any,
|
|
|
+ showaddClass: false,
|
|
|
+ goCourseVisiable: false,
|
|
|
+ removeVisiable: false,
|
|
|
+ removeRow: {} as any,
|
|
|
+ previewModal: false,
|
|
|
+ previewParams: {} as any,
|
|
|
+ lastCourse: null as any,
|
|
|
+ groupBtnLoading: false, // 按钮是否在请求中
|
|
|
+ // subjectList: [] as any,
|
|
|
+ showResetClass: false,
|
|
|
+ showSubjectClass: false,
|
|
|
+ groupVisiable: false,
|
|
|
+ popSelectYearList: [] as any,
|
|
|
+ popSelectLevelList: [] as any,
|
|
|
+ addStudentVisible: false
|
|
|
+ });
|
|
|
+ const formRef = ref();
|
|
|
+ const message = useMessage();
|
|
|
+ const router = useRouter();
|
|
|
+ const route = useRoute();
|
|
|
+ const search = () => {
|
|
|
+ state.pagination.page = 1;
|
|
|
+ getList();
|
|
|
+ setCache({ current: state.searchForm, saveKey: route.path });
|
|
|
+ };
|
|
|
+ const showGuide = ref(false);
|
|
|
+ state.gradeNumList = getgradeNumList();
|
|
|
+ const onReset = () => {
|
|
|
+ state.searchForm = {
|
|
|
+ keyword: null as any,
|
|
|
+ currentClass: '' as any,
|
|
|
+ currentGradeNum: '' as any,
|
|
|
+ instrumentId: '' as any,
|
|
|
+ gradeYear: '' as any,
|
|
|
+ gradeLevel: ''
|
|
|
+ };
|
|
|
+ if (state.popSelectYearList.length > 1) {
|
|
|
+ state.searchForm.gradeYear = state.popSelectYearList[1].id;
|
|
|
+ }
|
|
|
+ getList();
|
|
|
+ setCache({ current: state.searchForm, saveKey: route.path });
|
|
|
+ };
|
|
|
+
|
|
|
+ const removeClass = async () => {
|
|
|
+ try {
|
|
|
+ await deleteClass({ ids: state.removeRow.id });
|
|
|
+ getList();
|
|
|
+ message.success(`删除成功`);
|
|
|
+ state.removeVisiable = false;
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const getList = async () => {
|
|
|
+ // classGroupList
|
|
|
+ state.loading = true;
|
|
|
+ try {
|
|
|
+ const res = await classGroupList({
|
|
|
+ ...state.searchForm,
|
|
|
+ ...state.pagination
|
|
|
+ });
|
|
|
+ state.tableList = res.data.rows;
|
|
|
+ state.pagination.pageTotal = res.data.total;
|
|
|
+ state.loading = false;
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ if (state.tableList.length > 0) {
|
|
|
+ showGuide.value = true;
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
+ } catch (e) {
|
|
|
+ state.loading = false;
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // const getSubjectList = async () => {
|
|
|
+ // const res = await getSubject({ page: 1, rows: 9999 });
|
|
|
+ // state.subjectList = res.data.rows.map((item: any) => {
|
|
|
+ // return {
|
|
|
+ // value: item.id,
|
|
|
+ // label: item.name
|
|
|
+ // };
|
|
|
+ // });
|
|
|
+ // state.subjectList.unshift({ value: '', label: '全部声部' });
|
|
|
+ // };
|
|
|
+ const columns = () => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ title: '班级名称',
|
|
|
+ key: 'name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '学年',
|
|
|
+ key: 'gradeYear'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '学级',
|
|
|
+ key: 'gradeLevel',
|
|
|
+ render(row: any) {
|
|
|
+ return row.gradeLevel ? `${row.gradeLevel}级` : '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '班级乐器',
|
|
|
+ key: 'instrumentName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '学生人数',
|
|
|
+ key: 'preStudentNum'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '上次学习',
|
|
|
+ key: 'lastStudy',
|
|
|
+ width: '20%',
|
|
|
+ render(row: any) {
|
|
|
+ return row.lastStudy ? (
|
|
|
+ <TheTooltip
|
|
|
+ maxWidth={300}
|
|
|
+ showContentWidth={300}
|
|
|
+ content={row.lastStudy}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ '--'
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'id',
|
|
|
+
|
|
|
+ render(row: any, index: number) {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <NSpace>
|
|
|
+ {index == 0 ? (
|
|
|
+ <div id="class-0">
|
|
|
+ <NButton
|
|
|
+ type="primary"
|
|
|
+ text
|
|
|
+ onClick={() => {
|
|
|
+ router.push({
|
|
|
+ path: '/classDetail',
|
|
|
+ query: {
|
|
|
+ name: row.name,
|
|
|
+ id: row.id,
|
|
|
+ gradeYear: row.gradeYear,
|
|
|
+ upgradeFlag: row.upgradeFlag ? 1 : 0 // 是否为历史班
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }}>
|
|
|
+ 详情
|
|
|
+ </NButton>
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <NButton
|
|
|
+ type="primary"
|
|
|
+ text
|
|
|
+ onClick={() => {
|
|
|
+ router.push({
|
|
|
+ path: '/classDetail',
|
|
|
+ query: {
|
|
|
+ name: row.name,
|
|
|
+ id: row.id,
|
|
|
+ gradeYear: row.gradeYear,
|
|
|
+ upgradeFlag: row.upgradeFlag ? 1 : 0 // 是否为历史班
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }}>
|
|
|
+ 详情
|
|
|
+ </NButton>
|
|
|
+ )}
|
|
|
+ <NButton
|
|
|
+ type="primary"
|
|
|
+ disabled={!row.upgradeFlag || row.instrumentId}
|
|
|
+ text
|
|
|
+ onClick={() => resetClassSubject(row)}>
|
|
|
+ 修改乐器
|
|
|
+ </NButton>
|
|
|
+ {index == 0 ? (
|
|
|
+ <NButton
|
|
|
+ type="primary"
|
|
|
+ disabled={!row.upgradeFlag}
|
|
|
+ {...{ id: 'class-1' }}
|
|
|
+ text
|
|
|
+ onClick={() => {
|
|
|
+ startResetStudent(row);
|
|
|
+ }}>
|
|
|
+ 学生调整
|
|
|
+ </NButton>
|
|
|
+ ) : (
|
|
|
+ <NButton
|
|
|
+ type="primary"
|
|
|
+ disabled={!row.upgradeFlag}
|
|
|
+ text
|
|
|
+ onClick={() => {
|
|
|
+ startResetStudent(row);
|
|
|
+ }}>
|
|
|
+ 学生调整
|
|
|
+ </NButton>
|
|
|
+ )}
|
|
|
+ {index == 0 ? (
|
|
|
+ <NButton
|
|
|
+ {...{ id: 'class-2' }}
|
|
|
+ disabled={!row.upgradeFlag}
|
|
|
+ type="primary"
|
|
|
+ text
|
|
|
+ onClick={() => classesBegin(row)}>
|
|
|
+ 开始上课
|
|
|
+ </NButton>
|
|
|
+ ) : (
|
|
|
+ <NButton
|
|
|
+ disabled={!row.upgradeFlag}
|
|
|
+ type="primary"
|
|
|
+ text
|
|
|
+ onClick={() => classesBegin(row)}>
|
|
|
+ 开始上课
|
|
|
+ </NButton>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* <p
|
|
|
+ style={{ color: '#EA4132', cursor: 'pointer' }}
|
|
|
+ onClick={() => {
|
|
|
+ state.removeVisiable = true;
|
|
|
+ state.removeRow = row;
|
|
|
+ }}>
|
|
|
+ 删除
|
|
|
+ </p> */}
|
|
|
+ {!(row.preStudentNum > 0) ? (
|
|
|
+ <NButton
|
|
|
+ type="error"
|
|
|
+ color="#EA4132"
|
|
|
+ textColor="#EA4132"
|
|
|
+ text
|
|
|
+ onClick={() => {
|
|
|
+ state.removeVisiable = true;
|
|
|
+ state.removeRow = row;
|
|
|
+ }}>
|
|
|
+ 删除
|
|
|
+ </NButton>
|
|
|
+ ) : null}
|
|
|
+ {row.imGroupId ? null : (
|
|
|
+ <NButton
|
|
|
+ type="primary"
|
|
|
+ disabled={!row.upgradeFlag}
|
|
|
+ text
|
|
|
+ onClick={() => {
|
|
|
+ createImgroup(row);
|
|
|
+ }}>
|
|
|
+ 创建群聊
|
|
|
+ </NButton>
|
|
|
+ )}
|
|
|
+ <NButton
|
|
|
+ type="primary"
|
|
|
+ disabled={!row.upgradeFlag}
|
|
|
+ text
|
|
|
+ onClick={() => {
|
|
|
+ const { schoolInfos } = users.getUserInfo;
|
|
|
+ const schoolId =
|
|
|
+ schoolInfos.length > 0 ? schoolInfos[0].id : null;
|
|
|
+ if (schoolId) {
|
|
|
+ state.addStudentVisible = true;
|
|
|
+ state.activeRow = {
|
|
|
+ id: schoolId,
|
|
|
+ classId: row.id,
|
|
|
+ currentGradeNum: row.currentGradeNum,
|
|
|
+ currentClass: row.currentClass,
|
|
|
+ gradeYear: row.gradeYear
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }}>
|
|
|
+ 邀请学生
|
|
|
+ </NButton>
|
|
|
+ </NSpace>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ };
|
|
|
+
|
|
|
+ const startResetStudent = (row: any) => {
|
|
|
+ state.activeRow = row;
|
|
|
+ state.studentVisible = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ const classesBegin = async (row: any) => {
|
|
|
+ try {
|
|
|
+ // 判断是否有声部
|
|
|
+ if (row.instrumentId) {
|
|
|
+ //
|
|
|
+ // 声部先取上次上课的声部，如果没有则取班级上面的声部
|
|
|
+ router.push({
|
|
|
+ path: '/prepare-lessons',
|
|
|
+ query: {
|
|
|
+ lastUseCoursewareId: row.lessonCoursewareId,
|
|
|
+ unit: row.lessonCoursewareKnowledgeDetailId,
|
|
|
+ instrumentId: row.instrumentId,
|
|
|
+ courseScheduleSubjectId: row.courseScheduleSubjectId,
|
|
|
+ preStudentNum: row.preStudentNum,
|
|
|
+ name: row.name, // 班级名称
|
|
|
+ classGroupId: row.id // 班级编号
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ state.showSubjectClass = true;
|
|
|
+ state.activeRow = row;
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const resetClassSubject = (row: any) => {
|
|
|
+ state.activeRow = row;
|
|
|
+ state.showResetClass = true;
|
|
|
+ };
|
|
|
+ const createImgroup = async (row: any) => {
|
|
|
+ state.activeRow = row;
|
|
|
+ state.groupVisiable = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ const submitGroup = async () => {
|
|
|
+ console.log(state.activeRow, 'row');
|
|
|
+ state.groupBtnLoading = true;
|
|
|
+ try {
|
|
|
+ await addGroup({ classGroupId: state.activeRow.id });
|
|
|
+ message.success('创建成功');
|
|
|
+ state.groupVisiable = false;
|
|
|
+ await getList();
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ state.groupBtnLoading = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 获取学年
|
|
|
+ const getYearList = async () => {
|
|
|
+ try {
|
|
|
+ const { data } = await getGradeYearList();
|
|
|
+ const temp = data || [];
|
|
|
+ temp.forEach((i: any) => {
|
|
|
+ i.name = i.name + '学年';
|
|
|
+ });
|
|
|
+ // temp.unshift({
|
|
|
+ // id: '',
|
|
|
+ // name: '全部学年'
|
|
|
+ // });
|
|
|
+ state.popSelectYearList = temp || [];
|
|
|
+ if (temp.length > 1 && !state.searchForm.gradeYear) {
|
|
|
+ state.searchForm.gradeYear = temp[1].id;
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // 获取学级
|
|
|
+ const getLevelList = async () => {
|
|
|
+ try {
|
|
|
+ const { data } = await getGradeLevelList();
|
|
|
+ const temp = data || [];
|
|
|
+ temp.forEach((i: any) => {
|
|
|
+ i.name = i.name + '级';
|
|
|
+ });
|
|
|
+ temp.unshift({
|
|
|
+ id: '',
|
|
|
+ name: '全部学级'
|
|
|
+ });
|
|
|
+ state.popSelectLevelList = temp || [];
|
|
|
+ if (temp.length > 0 && !state.searchForm.gradeLevel) {
|
|
|
+ state.searchForm.gradeLevel = temp[0].id;
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ initCache({
|
|
|
+ current: state.searchForm,
|
|
|
+ callBack: (active: any) => {
|
|
|
+ state.searchForm = active;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ state.loading = true;
|
|
|
+ await catchData.getSubjects();
|
|
|
+
|
|
|
+ // getSubjectList();
|
|
|
+ await getYearList();
|
|
|
+ await getLevelList();
|
|
|
+ await getList();
|
|
|
+
|
|
|
+ state.loading = false;
|
|
|
+ });
|
|
|
+ return () => (
|
|
|
+ <div class={styles.listWrap}>
|
|
|
+ <div class={styles.searchList}>
|
|
|
+ <NForm label-placement="left" inline ref={formRef}>
|
|
|
+ <NFormItem>
|
|
|
+ <SearchInput
|
|
|
+ {...{ placeholder: '请输入班级名称' }}
|
|
|
+ class={styles.searchInput}
|
|
|
+ searchWord={state.searchForm.keyword}
|
|
|
+ onChangeValue={(val: string) =>
|
|
|
+ (state.searchForm.keyword = val)
|
|
|
+ }></SearchInput>
|
|
|
+ </NFormItem>
|
|
|
+ <NFormItem>
|
|
|
+ <CSelect
|
|
|
+ {...({
|
|
|
+ options: state.popSelectYearList,
|
|
|
+ placeholder: '选择学年',
|
|
|
+ clearable: false,
|
|
|
+ inline: true,
|
|
|
+ labelField: 'name',
|
|
|
+ valueField: 'id'
|
|
|
+ } as any)}
|
|
|
+ v-model:value={state.searchForm.gradeYear}></CSelect>
|
|
|
+ </NFormItem>
|
|
|
+ <NFormItem>
|
|
|
+ <CSelect
|
|
|
+ {...({
|
|
|
+ options: state.popSelectLevelList,
|
|
|
+ placeholder: '选择学级',
|
|
|
+ clearable: true,
|
|
|
+ inline: true,
|
|
|
+ labelField: 'name',
|
|
|
+ valueField: 'id'
|
|
|
+ } as any)}
|
|
|
+ v-model:value={state.searchForm.gradeLevel}></CSelect>
|
|
|
+ </NFormItem>
|
|
|
+
|
|
|
+ <NFormItem>
|
|
|
+ <CSelect
|
|
|
+ {...({
|
|
|
+ options: state.gradeNumList,
|
|
|
+ placeholder: '选择年级',
|
|
|
+ clearable: true,
|
|
|
+ inline: true
|
|
|
+ } as any)}
|
|
|
+ v-model:value={state.searchForm.currentGradeNum}></CSelect>
|
|
|
+ </NFormItem>
|
|
|
+ <NFormItem>
|
|
|
+ <CSelect
|
|
|
+ {...({
|
|
|
+ options: classArray,
|
|
|
+ placeholder: '选择班级',
|
|
|
+ clearable: true,
|
|
|
+ inline: true
|
|
|
+ } as any)}
|
|
|
+ v-model:value={state.searchForm.currentClass}></CSelect>
|
|
|
+ </NFormItem>
|
|
|
+ <NFormItem>
|
|
|
+ {/* <CSelect
|
|
|
+ {...({
|
|
|
+ options: [
|
|
|
+ { value: '', label: '全部声部' },
|
|
|
+ ...catchData.getSubjectList
|
|
|
+ ],
|
|
|
+ placeholder: '选择乐器',
|
|
|
+ clearable: true,
|
|
|
+ inline: true
|
|
|
+ } as any)}
|
|
|
+ v-model:value={state.searchForm.instrumentId}></CSelect> */}
|
|
|
+ <NCascader
|
|
|
+ to="body"
|
|
|
+ placeholder="选择乐器"
|
|
|
+ options={[
|
|
|
+ { value: '', label: '全部乐器' },
|
|
|
+ ...catchData.getSubjectList
|
|
|
+ ]}
|
|
|
+ childrenField="instruments"
|
|
|
+ checkStrategy="child"
|
|
|
+ expandTrigger="hover"
|
|
|
+ showPath={false}
|
|
|
+ v-model:value={state.searchForm.instrumentId}
|
|
|
+ onUpdate:value={(val: any, option: any, pathValues: any) => {
|
|
|
+ console.log(val, option, pathValues);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </NFormItem>
|
|
|
+ <NFormItem>
|
|
|
+ <NSpace justify="end">
|
|
|
+ <NButton type="primary" class="searchBtn" onClick={search}>
|
|
|
+ 搜索
|
|
|
+ </NButton>
|
|
|
+ <NButton
|
|
|
+ type="primary"
|
|
|
+ ghost
|
|
|
+ class="resetBtn"
|
|
|
+ onClick={onReset}>
|
|
|
+ 重置
|
|
|
+ </NButton>
|
|
|
+ </NSpace>
|
|
|
+ </NFormItem>
|
|
|
+ </NForm>
|
|
|
+ </div>
|
|
|
+ <NButton
|
|
|
+ class={styles.addBtn}
|
|
|
+ type="primary"
|
|
|
+ onClick={() => (state.showaddClass = true)}
|
|
|
+ v-slots={{
|
|
|
+ icon: () => (
|
|
|
+ <>
|
|
|
+ <NImage
|
|
|
+ class={styles.addBtnIcon}
|
|
|
+ previewDisabled
|
|
|
+ src={add}></NImage>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }}>
|
|
|
+ 创建班级
|
|
|
+ </NButton>
|
|
|
+ <div class={styles.tableWrap}>
|
|
|
+ <NDataTable
|
|
|
+ v-slots={{
|
|
|
+ empty: () => <TheEmpty></TheEmpty>
|
|
|
+ }}
|
|
|
+ class={styles.classTable}
|
|
|
+ loading={state.loading}
|
|
|
+ columns={columns()}
|
|
|
+ data={state.tableList}></NDataTable>
|
|
|
+ <Pagination
|
|
|
+ v-model:page={state.pagination.page}
|
|
|
+ v-model:pageSize={state.pagination.rows}
|
|
|
+ v-model:pageTotal={state.pagination.pageTotal}
|
|
|
+ onList={getList}
|
|
|
+ sync
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <NModal
|
|
|
+ v-model:show={state.studentVisible}
|
|
|
+ preset="card"
|
|
|
+ class={['modalTitle background', styles.studentVisible]}
|
|
|
+ title={'学生调整'}>
|
|
|
+ <RestStudentBox
|
|
|
+ activeRow={state.activeRow}
|
|
|
+ onClose={() => (state.studentVisible = false)}
|
|
|
+ onGetList={() => getList()}></RestStudentBox>
|
|
|
+ </NModal>
|
|
|
+ <NModal
|
|
|
+ v-model:show={state.showaddClass}
|
|
|
+ style={{ width: '500px' }}
|
|
|
+ display-directive="if"
|
|
|
+ preset="card"
|
|
|
+ class={['modalTitle background']}
|
|
|
+ title={'创建班级'}>
|
|
|
+ <CreateClass
|
|
|
+ gradeYearList={state.popSelectYearList}
|
|
|
+ gradeNumList={state.gradeNumList}
|
|
|
+ classArray={classArray}
|
|
|
+ onGetList={() => getList()}
|
|
|
+ onClose={() => (state.showaddClass = false)}
|
|
|
+ />
|
|
|
+ </NModal>
|
|
|
+ <NModal
|
|
|
+ v-model:show={state.showResetClass}
|
|
|
+ style={{ width: '500px' }}
|
|
|
+ display-directive="if"
|
|
|
+ preset="card"
|
|
|
+ class={['modalTitle background']}
|
|
|
+ title={'修改乐器'}>
|
|
|
+ <ResetSubject
|
|
|
+ activeRow={state.activeRow}
|
|
|
+ onGetList={() => getList()}
|
|
|
+ onClose={() => (state.showResetClass = false)}
|
|
|
+ />
|
|
|
+ </NModal>
|
|
|
+
|
|
|
+ <NModal
|
|
|
+ v-model:show={state.showSubjectClass}
|
|
|
+ style={{ width: '500px' }}
|
|
|
+ preset="card"
|
|
|
+ class={['modalTitle background']}
|
|
|
+ title={'修改乐器'}>
|
|
|
+ {state.showSubjectClass ? (
|
|
|
+ <UpdateSubject
|
|
|
+ activeRow={state.activeRow}
|
|
|
+ onGetList={() => getList()}
|
|
|
+ onConfirm={(item: any) => {
|
|
|
+ //
|
|
|
+ router.push({
|
|
|
+ path: '/prepare-lessons',
|
|
|
+ query: {
|
|
|
+ ...item
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ onClose={() => (state.showSubjectClass = false)}
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
+ </NModal>
|
|
|
+
|
|
|
+ {/* 上课弹窗 */}
|
|
|
+ <PreviewWindow
|
|
|
+ v-model:show={state.previewModal}
|
|
|
+ type="attend"
|
|
|
+ params={state.previewParams}
|
|
|
+ />
|
|
|
+
|
|
|
+ <NModal
|
|
|
+ v-model:show={state.removeVisiable}
|
|
|
+ preset="card"
|
|
|
+ class={['modalTitle', styles.removeVisiable]}
|
|
|
+ title={'删除班级'}>
|
|
|
+ <div class={styles.studentRemove}>
|
|
|
+ <p>
|
|
|
+ 确定要删除班级么？
|
|
|
+ <span>删除班级信息将会清空</span>。
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <NSpace class={styles.btnGroup} justify="center">
|
|
|
+ <NButton round type="primary" onClick={removeClass}>
|
|
|
+ 确定
|
|
|
+ </NButton>
|
|
|
+ <NButton round onClick={() => (state.removeVisiable = false)}>
|
|
|
+ 取消
|
|
|
+ </NButton>
|
|
|
+ </NSpace>
|
|
|
+ </div>
|
|
|
+ </NModal>
|
|
|
+
|
|
|
+ <NModal
|
|
|
+ v-model:show={state.groupVisiable}
|
|
|
+ preset="card"
|
|
|
+ class={['modalTitle', styles.removeVisiable]}
|
|
|
+ title={'创建群聊'}>
|
|
|
+ <div class={styles.studentRemove}>
|
|
|
+ <p style={{ textAlign: 'center' }}>是否创建班级群聊</p>
|
|
|
+
|
|
|
+ <NSpace class={styles.btnGroup} justify="center">
|
|
|
+ <NButton
|
|
|
+ round
|
|
|
+ type="primary"
|
|
|
+ onClick={submitGroup}
|
|
|
+ loading={state.groupBtnLoading}
|
|
|
+ disabled={state.groupBtnLoading}>
|
|
|
+ 确定
|
|
|
+ </NButton>
|
|
|
+ <NButton round onClick={() => (state.groupVisiable = false)}>
|
|
|
+ 取消
|
|
|
+ </NButton>
|
|
|
+ </NSpace>
|
|
|
+ </div>
|
|
|
+ </NModal>
|
|
|
+ {showGuide.value ? <ClassGuide></ClassGuide> : null}
|
|
|
+
|
|
|
+ {state.addStudentVisible ? (
|
|
|
+ <div
|
|
|
+ v-model:show={state.addStudentVisible}
|
|
|
+ class={['n-modal-mask', styles.popBox]}>
|
|
|
+ <AddStudentModel
|
|
|
+ activeRow={state.activeRow}
|
|
|
+ onClose={() => {
|
|
|
+ state.addStudentVisible = false;
|
|
|
+ }}></AddStudentModel>
|
|
|
+ </div>
|
|
|
+ ) : null}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
