|
@@ -1,903 +0,0 @@
|
|
-<template>
|
|
|
|
- <div class="course-classroom-box">
|
|
|
|
- <!--课程教室列表-->
|
|
|
|
- <div class="course-classroom-list">
|
|
|
|
- <div class="course-classroom-list-header">
|
|
|
|
- <span class="course-classroom-label">{{$t('courseManage.classroom.classroomList')}}</span>
|
|
|
|
- <Poptip trigger="hover" placement="left-start" class="add-classroom-icon" v-if="type == teacher">
|
|
|
|
- <Icon type="md-add" color="white" size="18" />
|
|
|
|
- <div slot="content">
|
|
|
|
- <p @click="addClassroom(1)"><Icon type="ios-barcode-outline" color="white" size="18" style="margin-right:8px;" />{{$t('courseManage.classroom.addClassroomProp1')}}</p>
|
|
|
|
- <p @click="addClassroom(0)" style="margin-top:10px;"><Icon type="md-person" color="white" size="18" style="margin-right:8px;" />{{$t('courseManage.classroom.addClassroomProp2')}}</p>
|
|
|
|
- </div>
|
|
|
|
- </Poptip>
|
|
|
|
- <Icon v-else type="md-add" color="white" size="18" style="float:right;margin-right:15px;margin-top:10px;cursor:pointer;" @click="addClassroom(1)"/>
|
|
|
|
- </div>
|
|
|
|
- <div class="course-classroom-list-content">
|
|
|
|
- <div v-if="courseInfo.classroom.length > 0" v-for="(item,index) in courseClassroomList" :key="index" @click="changeClassroom(index)" :class="currentClassroomIndex === index ? 'course-classroom-item block-bg block-bg-active':'course-classroom-item block-bg'">
|
|
|
|
- <p class="classroom-code"><Icon :type="item.scope === 'school' ? 'ios-barcode-outline' : 'md-person'" color="white" size="18" style="margin-right:8px;" />{{item.classroomCode}}</p>
|
|
|
|
- <p class="classroom-name">{{item.classroomName}}</p>
|
|
|
|
- <p class="classroom-info ">
|
|
|
|
- <span class="classroom-info-label">{{$t('courseManage.classroom.studentCount')}}</span>
|
|
|
|
- <span class="classroom-info-value">{{item.studentCount}}</span>
|
|
|
|
- <span class="classroom-info-label">{{$t('courseManage.classroom.headmaster')}}</span>
|
|
|
|
- <span class="classroom-info-value">{{item.headMaster}}</span>
|
|
|
|
- </p>
|
|
|
|
- </div>
|
|
|
|
- <EmptyData v-if="courseInfo.classroom.length == 0" style="padding-top:100px;"></EmptyData>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="course-classroom-info">
|
|
|
|
- <div class="course-classroom-info-header">
|
|
|
|
- <span class="course-classroom-label">{{$t('courseManage.classroom.classroomManage')}}</span>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="course-classroom-info-content">
|
|
|
|
- <EmptyData v-if="selectSystemStatus == 0 && courseInfo.classroom.length == 0" style="padding-top:100px;"></EmptyData>
|
|
|
|
- <!--选择系统教室block-->
|
|
|
|
- <div :class="selectSystemStatus == 1 ? 'system-classroom-box animated fadeIn': ''" v-if="selectSystemStatus == 1">
|
|
|
|
- <p class="system-classroom-label">
|
|
|
|
- <span>{{$t('courseManage.classroom.chooseClassroom')}}</span>
|
|
|
|
- <Icon type="md-close" color="white" size="24" :title="$t('courseManage.classroom.closeChoose')" class="close-btn" @click="closeSelectClassroom" />
|
|
|
|
- </p>
|
|
|
|
- <div class="system-classroom-filter">
|
|
|
|
- <Input v-model="searchText" clearable :placeholder="$t('courseManage.classroom.searchHolder1')" style="width: 200px;margin-left:10px;">
|
|
|
|
- <Icon type="ios-search" slot="prefix" />
|
|
|
|
- </Input>
|
|
|
|
- <Select v-model="searchPeriod" style="width:20%;margin-left:5%;" :placeholder="$t('stuAccount.periodHolder')" clearable>
|
|
|
|
- <Option v-for="(item,index) in periodList" :value="item.periodCode" :key="index" @click.native="getGradeList(index)">{{ item.periodName }}</Option>
|
|
|
|
- </Select>
|
|
|
|
- <Select v-model="searchGrade" style="width:20%;margin-left:1%;" :placeholder="$t('stuAccount.gradeHolder')" clearable>
|
|
|
|
- <Option v-for="(item,index) in gradeList" :value="item.gradeCode" :key="index">{{ item.gradeName }}</Option>
|
|
|
|
- </Select>
|
|
|
|
- </div>
|
|
|
|
- <Table :columns="systemColumns" height="600" :data="systemClassroomList" class="system-classroom-table">
|
|
|
|
- <template slot-scope="{ row ,index}" slot="action">
|
|
|
|
- <Button class="item-tools" type="success" size="small" @click="selectClassroom(index)">{{$t('courseManage.classroom.btnChoose')}}</Button>
|
|
|
|
- </template>
|
|
|
|
- </Table>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <!--教室基础信息和学生名单管理-->
|
|
|
|
- <div class="classroom-box" v-if="selectSystemStatus == 0 && courseInfo.classroom.length > 0">
|
|
|
|
- <!--header选项卡-->
|
|
|
|
- <div class="classroom-box-header">
|
|
|
|
- <span :class="currentSetIndex === 0 ? 'setting-label setting-label-active':'setting-label'" @click="selectSetIndex(0)">{{$t('courseManage.classroom.baseSetting')}}</span>
|
|
|
|
- <span :class="currentSetIndex === 1 ? 'setting-label setting-label-active':'setting-label'" @click="selectSetIndex(1)">{{$t('courseManage.classroom.studentList')}}</span>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="classroom-box-content" v-if="courseClassroomList.length > 0">
|
|
|
|
- <!--教室基础信息-->
|
|
|
|
- <div v-show="currentSetIndex === 0" :class="currentSetIndex === 0 ? 'classroom-base-set animated fadeIn':'classroom-base-set animated fadeOut'">
|
|
|
|
- <div :class="courseClassroomList[currentClassroomIndex].scope == 'personal' ? 'class-qrcode-box animated fadeIn':'class-qrcode-box'" style="border-right: 1px solid #424242;" v-if="courseClassroomList[currentClassroomIndex].code == $store.state.userInfo.TEAMModelId">
|
|
|
|
- <p class="qrcode-label">{{$t('courseManage.classroom.joinCode')}}</p>
|
|
|
|
- <div id="qrcode" ref="qrcode" style="padding:30px;background-color:white;width:260px;margin:auto;"></div>
|
|
|
|
- </div>
|
|
|
|
- <div class="classroom-base-info">
|
|
|
|
- <div class="classroom-info-item">
|
|
|
|
- <p class="classroom-attr-label">{{$t('courseManage.classroom.classroomCode')}}</p>
|
|
|
|
- <p class="classroom-attr-value">{{courseClassroomList[currentClassroomIndex].classroomCode}}</p>
|
|
|
|
- </div>
|
|
|
|
- <div class="classroom-info-item">
|
|
|
|
- <p class="classroom-attr-label">{{$t('courseManage.classroom.classroomName')}}</p>
|
|
|
|
- <p class="classroom-attr-value">{{courseClassroomList[currentClassroomIndex].classroomName}}</p>
|
|
|
|
- </div>
|
|
|
|
- <div class="classroom-info-item" v-show="courseClassroomList[currentClassroomIndex].scope == 'school'">
|
|
|
|
- <p class="classroom-attr-label">{{$t('courseManage.classroom.classroomAttr')}}</p>
|
|
|
|
- <p class="classroom-attr-value">
|
|
|
|
- {{fn.getPeriod($store.state.schoolBaseInfo.schoolBaseInfo,courseClassroomList[currentClassroomIndex].periodCode).periodName }} / {{fn.getGradeName($store.state.schoolBaseInfo.schoolBaseInfo,courseClassroomList[currentClassroomIndex].gradeCode)}}
|
|
|
|
- </p>
|
|
|
|
- </div>
|
|
|
|
- <!--班主任-->
|
|
|
|
- <!--<div class="classroom-info-item">
|
|
|
|
- <p class="classroom-attr-label">{{$t('courseManage.classroom.classroomTeacher')}}</p>
|
|
|
|
- <p class="classroom-attr-value">{{courseClassroomList[currentClassroomIndex].headMaster}}</p>
|
|
|
|
- </div>-->
|
|
|
|
- <!--授课老师-->
|
|
|
|
- <div class="classroom-info-item dark-iview-select">
|
|
|
|
- <p class="classroom-attr-label">{{$t('courseManage.classroom.classroomTeacher1')}}</p>
|
|
|
|
- <Select v-model="model1" style="width:240px">
|
|
|
|
- <Option v-for="item in teacherList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
|
|
- </Select>
|
|
|
|
-
|
|
|
|
- </div>
|
|
|
|
- <div class="classroom-info-item">
|
|
|
|
- <p class="classroom-attr-label">{{$t('courseManage.classroom.classroomNotice')}}</p>
|
|
|
|
- <div ref="classroomNotice" style="width:90%;margin-top:10px;"></div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div :class="courseClassroomList[currentClassroomIndex].scope == 'personal' ? 'class-qrcode-box animated fadeIn':'class-qrcode-box'" style="border-left: 1px solid #424242;" v-show="courseClassroomList[currentClassroomIndex].scope == 'school'">
|
|
|
|
- <EmptyData style="margin-top:220px;" :textContent="$t('courseManage.classroom.schoolPlan')"></EmptyData>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <!--学生名单-->
|
|
|
|
- <div v-show="currentSetIndex === 1" class="classroom-student">
|
|
|
|
- <vuescroll>
|
|
|
|
- <div class="classroom-student-menu">
|
|
|
|
- <Button type="primary" size="small" style="float:right;margin-right:60px;margin-top:10px;" @click="customGroup">{{$t('courseManage.classroom.autoGroupBtn')}}</Button>
|
|
|
|
- <div style="float:right;margin-right:30px;" v-show="courseClassroomList[currentClassroomIndex].code == $store.state.userInfo.TEAMModelId">
|
|
|
|
- <Button type="info" size="small" style="">{{$t('courseManage.classroom.deleteStuBtn')}}</Button>
|
|
|
|
- </div>
|
|
|
|
- <div style="float:right;margin-right:30px;" v-show="courseClassroomList[currentClassroomIndex].code == $store.state.userInfo.TEAMModelId" @click="showStudentList">
|
|
|
|
- <Button type="info" size="small" style="">{{$t('courseManage.classroom.addStuBtn')}}</Button>
|
|
|
|
- </div>
|
|
|
|
- <div style="float:right;margin-right:40px;">
|
|
|
|
- <span style="margin-right:5px;">{{$t('courseManage.classroom.removeStudent1')}}</span>
|
|
|
|
- <Select v-model="currentGroup" style="width:80px" size="small">
|
|
|
|
- <Option v-for="(item,index) in groupList" :value="index" :key="index" @click.native="setGroup">{{ item.group+ '('+item.groupName+')' }}</Option>
|
|
|
|
- </Select>
|
|
|
|
- <span style="margin-right:10px;margin-left:5px;">{{$t('courseManage.classroom.removeStudent2')}}</span>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- </div>
|
|
|
|
- <Table :columns="studentColumn" :data="courseClassroomList[currentClassroomIndex].students" class="system-classroom-table" :loading="studentTabelLoading" height="600" @on-selection-change="getSelections" no-data-text="暂无学生">
|
|
|
|
- <Loading slot="loading"></Loading>
|
|
|
|
- <template slot-scope="{ row ,index}" slot="action">
|
|
|
|
- <strong></strong>
|
|
|
|
- </template>
|
|
|
|
- </Table>
|
|
|
|
-
|
|
|
|
- </vuescroll>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <Modal v-model="customGroupStatus"
|
|
|
|
- :title="$t('courseManage.classroom.autoGroupBtn')"
|
|
|
|
- @on-ok="comfirmCustomRules" class="custom-group">
|
|
|
|
- <Form :label-width="80" :label-colon="true">
|
|
|
|
- <FormItem :label="$t('courseManage.classroom.studentCountLabel')">
|
|
|
|
- <span>{{classroomStudent.length}}人</span>
|
|
|
|
- </FormItem>
|
|
|
|
- <FormItem :label="$t('courseManage.classroom.groupCountLabel')">
|
|
|
|
- <InputNumber :max="10" :min="1" v-model="groupNum"></InputNumber>
|
|
|
|
- </FormItem>
|
|
|
|
- <FormItem :label="$t('courseManage.classroom.groupTypeLabel')">
|
|
|
|
- <RadioGroup v-model="groupType">
|
|
|
|
- <Radio label="1">
|
|
|
|
- <span>{{$t('courseManage.classroom.groupType1')}}</span>
|
|
|
|
- </Radio>
|
|
|
|
- <Radio label="2">
|
|
|
|
- <span>{{$t('courseManage.classroom.groupType2')}}</span>
|
|
|
|
- </Radio>
|
|
|
|
- <Radio label="3">
|
|
|
|
- <span>{{$t('courseManage.classroom.groupType3')}}</span>
|
|
|
|
- </Radio>
|
|
|
|
- </RadioGroup>
|
|
|
|
- </FormItem>
|
|
|
|
- </Form>
|
|
|
|
- </Modal>
|
|
|
|
- <Modal v-model="newPersonalStatus"
|
|
|
|
- :title="$t('courseManage.classroom.personalClassroomTitle')"
|
|
|
|
- @on-ok="confirmNewClassroom" class="custom-group">
|
|
|
|
- <Form ref="personalClassroom" :model="personalClassroom" label-position="top" label-colon>
|
|
|
|
- <FormItem :label="$t('courseManage.classroom.invitationCode')" prop="classroomCode">
|
|
|
|
- <span style="font-size:18px;">{{personalClassroom.classroomCode}}</span>
|
|
|
|
- </FormItem>
|
|
|
|
- <FormItem :label="$t('courseManage.classroom.classroomName')" prop="classroomName">
|
|
|
|
- <Input v-model="personalClassroom.classroomName" :placeholder="$t('courseManage.classroom.classroomName')">
|
|
|
|
- </Input>
|
|
|
|
- </FormItem>
|
|
|
|
- </Form>
|
|
|
|
- </Modal>
|
|
|
|
- <Modal v-model="addStudentStatus"
|
|
|
|
- title="添加学生"
|
|
|
|
- width="1000"
|
|
|
|
- class-name="dark-iview-modal"
|
|
|
|
- @on-ok="confirmAddStudent">
|
|
|
|
- <StudentList @selectedStudent="handleSelectStudent"></StudentList>
|
|
|
|
- </Modal>
|
|
|
|
- </div>
|
|
|
|
-</template>
|
|
|
|
-<script>
|
|
|
|
- import QRCode from 'qrcodejs2'
|
|
|
|
- import E from 'wangeditor'
|
|
|
|
- import fn from '@/utils/js-fn.js'
|
|
|
|
-
|
|
|
|
- import StudentList from '@/components/coursemgmt/StudentList.vue'
|
|
|
|
- import '@/utils/Math.uuid'
|
|
|
|
- import Loading from '@/common/Loading.vue'
|
|
|
|
- export default {
|
|
|
|
- components: {
|
|
|
|
- Loading, StudentList
|
|
|
|
- },
|
|
|
|
- props: {
|
|
|
|
- type: {
|
|
|
|
- type: String,
|
|
|
|
- default: 'admin'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- fn,
|
|
|
|
- model1:'',
|
|
|
|
- selectedStudent:[],
|
|
|
|
- addStudentStatus: false,
|
|
|
|
- studentTabelLoading: false,
|
|
|
|
- joinQRcode: undefined,
|
|
|
|
- personalClassroom: {
|
|
|
|
- classroomCode: '',
|
|
|
|
- classroomName: '',
|
|
|
|
- notice: ''
|
|
|
|
- },
|
|
|
|
- teacherList:[],
|
|
|
|
- newPersonalStatus: false,
|
|
|
|
- groupNum: 2,
|
|
|
|
- groupType: '1',
|
|
|
|
- selections: [],
|
|
|
|
- customGroupStatus: false,
|
|
|
|
- currentGroup: '',
|
|
|
|
- groupList: [
|
|
|
|
- {
|
|
|
|
- group: 'A',
|
|
|
|
- groupName: '组别别名A'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- group: 'B',
|
|
|
|
- groupName: '组别别名B'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- group: 'C',
|
|
|
|
- groupName: '组别别名C'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- group: 'D',
|
|
|
|
- groupName: '组别别名D'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- group: 'E',
|
|
|
|
- groupName: '组别别名E'
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
- selectSystemStatus: 0,
|
|
|
|
- classroomEditor: undefined,
|
|
|
|
- test: '',
|
|
|
|
- searchText: '',
|
|
|
|
- searchPeriod: '',
|
|
|
|
- searchGrade: '',
|
|
|
|
- gradeList: [],
|
|
|
|
- periodList: [],
|
|
|
|
- currentSetIndex: 0,
|
|
|
|
- systemClassroomList: [],//系统教室列表
|
|
|
|
- classroomList:[],//系统教室和个人教室列表
|
|
|
|
- systemColumns: [
|
|
|
|
- {
|
|
|
|
- title: '教室编码',
|
|
|
|
- key: 'classroomCode'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '教室名称',
|
|
|
|
- key: 'classroomName'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '学制',
|
|
|
|
- key: 'periodName'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '年级',
|
|
|
|
- key: 'gradeName'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '学生数',
|
|
|
|
- key: 'studentCount',
|
|
|
|
- align: 'center',
|
|
|
|
- width: 100
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: ' ',
|
|
|
|
- slot: 'action',
|
|
|
|
- width: 120
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
- currentClassroomIndex: 0,
|
|
|
|
- classroomStudent: [
|
|
|
|
- {
|
|
|
|
- seatNo: 1,
|
|
|
|
- name: '学生姓名',
|
|
|
|
- period: '高中',
|
|
|
|
- grade: '三年级',
|
|
|
|
- group: 'A',
|
|
|
|
- groupName: '组别A'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- seatNo: 2,
|
|
|
|
- name: '学生姓名',
|
|
|
|
- period: '高中',
|
|
|
|
- grade: '三年级',
|
|
|
|
- group: 'A',
|
|
|
|
- groupName: '组别A'
|
|
|
|
- }, {
|
|
|
|
- seatNo: 3,
|
|
|
|
- name: '学生姓名',
|
|
|
|
- period: '高中',
|
|
|
|
- grade: '三年级',
|
|
|
|
- group: 'A',
|
|
|
|
- groupName: '组别A'
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
- studentColumn: []
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- //确认添加学生
|
|
|
|
- confirmAddStudent() {
|
|
|
|
- let requestData = {
|
|
|
|
- id: this.courseClassroomList[this.currentClassroomIndex].classroomCode,
|
|
|
|
- code: this.$store.state.userInfo.schoolCode,
|
|
|
|
- studentId: this.selectedStudent.map((item) => {
|
|
|
|
- return item.studentId
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- this.$api.courseMgmt.addClassroom([requestData]).then(
|
|
|
|
- (res) => {
|
|
|
|
- this.$Message.success('添加成功!')
|
|
|
|
- },
|
|
|
|
- (err) => {
|
|
|
|
- this.$Message.error('添加失败!')
|
|
|
|
- }
|
|
|
|
- )
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- //处理选择学生事件
|
|
|
|
- handleSelectStudent(students) {
|
|
|
|
- console.log(students)
|
|
|
|
- this.selectedStudent = students
|
|
|
|
- },
|
|
|
|
- showStudentList() {
|
|
|
|
- this.addStudentStatus = true
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- //获取教室关联的学生
|
|
|
|
- getClassroomStudent() {
|
|
|
|
- this.studentTabelLoading = true
|
|
|
|
- this.$api.courseMgmt.getClassroomStudent(
|
|
|
|
- {
|
|
|
|
- classroomCode: this.courseClassroomList[this.currentClassroomIndex].classroomCode,
|
|
|
|
- code: this.courseClassroomList[this.currentClassroomIndex].code
|
|
|
|
- }
|
|
|
|
- ).then(
|
|
|
|
- (res) => {
|
|
|
|
- this.courseClassroomList[this.currentClassroomIndex].getStatus = true
|
|
|
|
- let students = res.result.extend.students
|
|
|
|
- for (let index in students) {
|
|
|
|
- let currentClassroomlInfo = this.$JSONPath.query(this.$store.state.schoolBaseInfo.classroomList, "$..[?(@.classroomCode=='" + students[index].classroomCode + "')]")
|
|
|
|
- if (currentClassroomlInfo.length > 0) {
|
|
|
|
- let currentSchoolInfo = this.$JSONPath.query(this.$store.state.schoolBaseInfo.schoolBaseInfo, "$..period[?(@.periodCode=='" + currentClassroomlInfo[0].periodCode + "')]")
|
|
|
|
- students[index].periodName = currentSchoolInfo[0].periodName
|
|
|
|
- students[index].periodCode = currentSchoolInfo[0].periodCode
|
|
|
|
- students[index].gradeName = this.$JSONPath.query(currentSchoolInfo, "$..grades[?(@.gradeCode=='" + currentClassroomlInfo[0].gradeCode + "')]")[0].gradeName
|
|
|
|
- students[index].gradeCode = currentClassroomlInfo[0].gradeCode
|
|
|
|
- students[index].classroomName = currentClassroomlInfo[0].classroomName
|
|
|
|
- students[index].groupName = '组别A'
|
|
|
|
- students[index].group = 'A'
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- this.$set(this.courseClassroomList[this.currentClassroomIndex], 'students', students)
|
|
|
|
- this.studentTabelLoading = false
|
|
|
|
- },
|
|
|
|
- (err) => {
|
|
|
|
- this.studentTabelLoading = false
|
|
|
|
- }
|
|
|
|
- )
|
|
|
|
- },
|
|
|
|
- initData() {
|
|
|
|
- this.studentColumn = [
|
|
|
|
- {
|
|
|
|
- title: ' ',
|
|
|
|
- type: 'selection',
|
|
|
|
- width: 80
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: this.$t('courseManage.classroom.studentTableC1'),
|
|
|
|
- key: 'seatNo',
|
|
|
|
- width: 140,
|
|
|
|
- align: 'center',
|
|
|
|
- sortable: true
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: this.$t('courseManage.classroom.studentTableC2'),
|
|
|
|
- key: 'name',
|
|
|
|
- align: 'left '
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: this.$t('courseManage.classroom.studentTableC3'),
|
|
|
|
- key: 'periodName',
|
|
|
|
- width: 150,
|
|
|
|
- align: 'center'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: this.$t('courseManage.classroom.studentTableC4'),
|
|
|
|
- key: 'gradeName',
|
|
|
|
- width: 150,
|
|
|
|
- align: 'center',
|
|
|
|
- sortable: true
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: this.$t('courseManage.classroom.studentTableC5'),
|
|
|
|
- key: 'group',
|
|
|
|
- width: 150,
|
|
|
|
- align: 'center',
|
|
|
|
- sortable: true
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: this.$t('courseManage.classroom.studentTableC6'),
|
|
|
|
- key: 'groupName',
|
|
|
|
- width: 150,
|
|
|
|
- align: 'center'
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
- },
|
|
|
|
- changeClassroom(index) {
|
|
|
|
- this.currentClassroomIndex = index
|
|
|
|
- this.selectSystemStatus = 0
|
|
|
|
- if (this.courseClassroomList[this.currentClassroomIndex].code == this.$store.state.userInfo.TEAMModelId) {
|
|
|
|
- if (this.joinQRcode == undefined) {
|
|
|
|
- this.createQRCode('https://account.habookaclass.biz/')
|
|
|
|
- } else {
|
|
|
|
- this.joinQRcode.clear()
|
|
|
|
- this.joinQRcode.makeCode('http://www.baidu.com')
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- this.joinQRcode = undefined
|
|
|
|
- }
|
|
|
|
- this.initEditor()
|
|
|
|
- if (!this.courseClassroomList[this.currentClassroomIndex].getStatus && this.currentSetIndex == 1) {
|
|
|
|
- this.getClassroomStudent()
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- selectClassroom(index) {
|
|
|
|
- this.selectSystemStatus = 0
|
|
|
|
- this.courseInfo.classroom.push(this.systemClassroomList[index].classroomCode)
|
|
|
|
- this.$api.courseMgmt.saveOrUpdateCourse([this.courseInfo]).then(
|
|
|
|
- res => {
|
|
|
|
- if (res.error == null) {
|
|
|
|
- this.$Message.success('保存成功!')
|
|
|
|
- } else {
|
|
|
|
- this.$Message.error('保存失败,API Error!')
|
|
|
|
- }
|
|
|
|
- this.baseEditStatus = true
|
|
|
|
- this.isFull = false
|
|
|
|
- },
|
|
|
|
- err => {
|
|
|
|
- this.$Message.error('保存失败,API Error!')
|
|
|
|
- this.baseEditStatus = true
|
|
|
|
- this.isFull = false
|
|
|
|
- }
|
|
|
|
- )
|
|
|
|
- },
|
|
|
|
- confirmNewClassroom() {
|
|
|
|
- this.personalClassroom['scope'] = 'personal'
|
|
|
|
- this.personalClassroom['code'] = this.$store.state.userInfo.TEAMModelId
|
|
|
|
- this.personalClassroom['headMaster'] = 'HABOOK(测试名字)'
|
|
|
|
- this.personalClassroom['id'] = Math.uuid()
|
|
|
|
- this.$api.schoolSetting.classroomSettingSaveOrUpdate(this.personalClassroom).then(
|
|
|
|
- (res) => {
|
|
|
|
- if (res.error == null) {
|
|
|
|
- let resData = res.result.data
|
|
|
|
- let [...classrooms] = this.$store.state.schoolBaseInfo.classroomList
|
|
|
|
- classrooms.push(resData)
|
|
|
|
- this.classroomList.push(resData)
|
|
|
|
- this.$store.commit('schoolBaseInfo/setClassroomList', classrooms)
|
|
|
|
- this.courseInfo.classroom.push(resData.classroomCode)
|
|
|
|
- this.$api.courseMgmt.saveOrUpdateCourse([this.courseInfo]).then(
|
|
|
|
- (res) => {
|
|
|
|
- if (res.error == null) {
|
|
|
|
- this.$Message.success('个人教室添加成功!')
|
|
|
|
- } else {
|
|
|
|
- this.$Message.error('个人教室添加失败!')
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- (err) => {
|
|
|
|
- this.$Message.error('个人教室添加失败!')
|
|
|
|
- }
|
|
|
|
- )
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- (err) => {
|
|
|
|
- this.$Message.error('个人教室添加失败!')
|
|
|
|
- }
|
|
|
|
- )
|
|
|
|
- },
|
|
|
|
- closeSelectClassroom() {
|
|
|
|
- this.selectSystemStatus = 0
|
|
|
|
- },
|
|
|
|
- comfirmCustomRules() {
|
|
|
|
- if (this.groupNum === 0) {
|
|
|
|
- this.$Message.warning('分组数量不能为0')
|
|
|
|
- } else if (this.groupType == 0) {
|
|
|
|
- this.$Message.warning('请设置分组方式')
|
|
|
|
- } else {
|
|
|
|
- switch (this.groupType) {
|
|
|
|
- case '1':
|
|
|
|
- this.randomGroup()
|
|
|
|
- break
|
|
|
|
- case '2':
|
|
|
|
- this.orderGroup()
|
|
|
|
- break
|
|
|
|
- case '3':
|
|
|
|
- this.orderGroupS()
|
|
|
|
- break
|
|
|
|
- default:
|
|
|
|
- break
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- orderGroupS() {
|
|
|
|
- let surplus = this.classroomStudent.length % this.groupNum// 余数
|
|
|
|
- let maxCount = surplus == 0 ? this.classroomStudent.length / this.groupNum : Math.ceil(this.classroomStudent.length / this.groupNum)// 每组最大人数
|
|
|
|
- this.classroomStudent = this.classroomStudent.sort((a, b) => {
|
|
|
|
- a.seatNo > b.seatNo
|
|
|
|
- })
|
|
|
|
- for (let i = 0; i < maxCount; i++) {
|
|
|
|
- for (let j = 0; j < this.groupNum; j++) {
|
|
|
|
- let startIndex = this.groupNum * i
|
|
|
|
- if (startIndex + j < this.classroomStudent.length) {
|
|
|
|
- this.classroomStudent[startIndex + j].group = j + 1
|
|
|
|
- this.classroomStudent[startIndex + j].groupName = '组别别名' + (j + 1)
|
|
|
|
- } else {
|
|
|
|
- break
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- orderGroup() {
|
|
|
|
- let surplus = this.classroomStudent.length % this.groupNum// 余数
|
|
|
|
- let maxCount = surplus == 0 ? this.classroomStudent.length / this.groupNum : Math.ceil(this.classroomStudent.length / this.groupNum)// 每组最大人数
|
|
|
|
- this.classroomStudent = this.classroomStudent.sort((a, b) => {
|
|
|
|
- a.seatNo > b.seatNo
|
|
|
|
- })
|
|
|
|
- let flag = 0
|
|
|
|
- let startIndex = 0
|
|
|
|
- for (let i = 0; i < this.groupNum; i++) {
|
|
|
|
- for (let j = 0; j < maxCount; j++) {
|
|
|
|
- if (startIndex + j < this.classroomStudent.length) {
|
|
|
|
- this.classroomStudent[startIndex + j].group = i + 1
|
|
|
|
- this.classroomStudent[startIndex + j].groupName = '组别别名' + (i + 1)
|
|
|
|
- } else {
|
|
|
|
- break
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- startIndex += maxCount
|
|
|
|
- flag++
|
|
|
|
- if (flag == surplus) {
|
|
|
|
- maxCount--
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- randomGroup() {
|
|
|
|
- let surplus = this.classroomStudent.length % this.groupNum// 余数
|
|
|
|
- let surplusCount = surplus// 余数
|
|
|
|
- let maxCount = surplus == 0 ? this.classroomStudent.length / this.groupNum : Math.ceil(this.classroomStudent.length / this.groupNum)// 每组最大人数
|
|
|
|
- let record = {}// 记录每个组已经分配的人数
|
|
|
|
- for (let i = 1; i <= this.groupNum; i++) {
|
|
|
|
- record[i] = 0
|
|
|
|
- }
|
|
|
|
- let flag = true
|
|
|
|
- for (let index in this.classroomStudent) {
|
|
|
|
- let groupIndex = fn.getBtwRandom(1, this.groupNum)
|
|
|
|
- if (record[groupIndex] < maxCount) {
|
|
|
|
- record[groupIndex] = record[groupIndex] + 1
|
|
|
|
- } else {
|
|
|
|
- for (let key in record) {
|
|
|
|
- if (record[key] < maxCount) {
|
|
|
|
- record[key] = record[key] + 1
|
|
|
|
- groupIndex = key
|
|
|
|
- break
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- this.classroomStudent[index].group = groupIndex
|
|
|
|
- this.classroomStudent[index].groupName = '组别别名' + groupIndex
|
|
|
|
- if (record[groupIndex] == maxCount) {
|
|
|
|
- surplusCount--
|
|
|
|
- }
|
|
|
|
- if (surplusCount <= 0 && surplus > 0 && flag) {
|
|
|
|
- maxCount--
|
|
|
|
- flag = false
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- getSelections(selection) {
|
|
|
|
- this.selections = selection
|
|
|
|
- console.log(selection)
|
|
|
|
- },
|
|
|
|
- setGroup() {
|
|
|
|
- if (this.currentGroup == '') {
|
|
|
|
- this.$Message.warning('请设置组别')
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- if (this.selections.length == 0) {
|
|
|
|
- this.$Message.warning('请选择需要设置组别的学生')
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- let groupInfo = this.groupList[this.currentGroup]
|
|
|
|
- for (let item of this.selections) {
|
|
|
|
- let index = fn.getIndex(this.classroomStudent, item)
|
|
|
|
- if (index !== -1) {
|
|
|
|
- this.classroomStudent[index].group = groupInfo.group
|
|
|
|
- this.classroomStudent[index].groupName = groupInfo.groupName
|
|
|
|
- } else {
|
|
|
|
- this.$Message.error('error!')
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- customGroup() {
|
|
|
|
- this.customGroupStatus = true
|
|
|
|
- },
|
|
|
|
- getClassroomList() {
|
|
|
|
- this.$store.dispatch('schoolBaseInfo/getClassroom').then(
|
|
|
|
- (res) => {
|
|
|
|
- if (res.code == 1 || res.code == 3) {
|
|
|
|
- this.systemClassroomList.push(...this.$store.state.schoolBaseInfo.classroomList)
|
|
|
|
- this.classroomList.push(...this.$store.state.schoolBaseInfo.classroomList)
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- (err) => {
|
|
|
|
- console.log(err)
|
|
|
|
- }
|
|
|
|
- )
|
|
|
|
- },
|
|
|
|
- getPersonalClassroom() {
|
|
|
|
- let requestData = {
|
|
|
|
- code: this.$store.state.userInfo.TEAMModelId
|
|
|
|
- }
|
|
|
|
- this.$api.schoolSetting.findClassInfo(requestData).then(
|
|
|
|
- res => {
|
|
|
|
- if (res.error == null) {
|
|
|
|
- this.classroomList.push(...res.result.data)
|
|
|
|
- } else {
|
|
|
|
- alert('API error!')
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- err => {
|
|
|
|
- alert('API error!')
|
|
|
|
- }
|
|
|
|
- )
|
|
|
|
- },
|
|
|
|
- addClassroom(value) {
|
|
|
|
- if (value == 1) {
|
|
|
|
- this.selectSystemStatus = value
|
|
|
|
- } else if (value == 0) {
|
|
|
|
- let randomCode = 'P'
|
|
|
|
- for (let i = 0; i < 8; i++) {
|
|
|
|
- randomCode += fn.getBtwRandom(0, 9)
|
|
|
|
- }
|
|
|
|
- this.personalClassroom.classroomCode = randomCode
|
|
|
|
- this.newPersonalStatus = true
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- selectSetIndex(index) {
|
|
|
|
- this.currentSetIndex = index
|
|
|
|
- if (this.courseClassroomList[this.currentClassroomIndex].scope == 'personal') {
|
|
|
|
- if (this.joinQRcode == undefined) {
|
|
|
|
- this.createQRCode('https://account.habookaclass.biz/')
|
|
|
|
- } else {
|
|
|
|
- this.joinQRcode.clear()
|
|
|
|
- this.joinQRcode.makeCode('http://www.baidu.com')
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- this.joinQRcode = undefined
|
|
|
|
- }
|
|
|
|
- if (!this.courseClassroomList[this.currentClassroomIndex].getStatus) {
|
|
|
|
- this.getClassroomStudent()
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- initEditor() {
|
|
|
|
- if (this.classroomEditor == undefined) {
|
|
|
|
- let noticeEditor = new E(this.$refs.classroomNotice)
|
|
|
|
- noticeEditor.customConfig.onchange = (html) => {
|
|
|
|
- this.test = html
|
|
|
|
- }
|
|
|
|
- noticeEditor.customConfig.menus = [
|
|
|
|
- 'bold', // 粗体
|
|
|
|
- 'italic', // 斜体
|
|
|
|
- 'underline', // 下划线
|
|
|
|
- 'list', // 列表
|
|
|
|
- 'link', // 插入链接
|
|
|
|
- 'image' // 插入图片
|
|
|
|
- ],
|
|
|
|
- noticeEditor.customConfig.showLinkImg = false
|
|
|
|
- noticeEditor.customConfig.uploadFileName = 'files'
|
|
|
|
- noticeEditor.create()
|
|
|
|
- this.classroomEditor = noticeEditor
|
|
|
|
- } else {
|
|
|
|
- this.classroomEditor.txt.html('')
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- createQRCode(url) {
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
- // 此时已经渲染完成
|
|
|
|
- let qrcode = new QRCode('qrcode', {
|
|
|
|
- width: 200, // 设置宽度,单位像素
|
|
|
|
- height: 200, // 设置高度,单位像素
|
|
|
|
- text: url // 设置二维码内容或跳转地址
|
|
|
|
- })
|
|
|
|
- this.joinQRcode = qrcode
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- this.initEditor()
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- this.initData()
|
|
|
|
- this.getClassroomList()
|
|
|
|
- this.getPersonalClassroom()
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- courseInfo: {
|
|
|
|
- get() {
|
|
|
|
- return this.$store.getters['courseMgmt/courseInfo']
|
|
|
|
- },
|
|
|
|
- set(newVal) {
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- courseClassroomList() {
|
|
|
|
- let a = []
|
|
|
|
- a = this.classroomList.filter((item, index) => {
|
|
|
|
- return this.courseInfo.classroom.indexOf(item.classroomCode) != -1
|
|
|
|
- })
|
|
|
|
- return a
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-</script>
|
|
|
|
-<style scoped lang="less">
|
|
|
|
- @import './CourseClassroom.less';
|
|
|
|
-</style>
|
|
|
|
-
|
|
|
|
-<style>
|
|
|
|
- .classroom-student #loadingBox {
|
|
|
|
- margin-top:0px !important;
|
|
|
|
- }
|
|
|
|
- .classroom-student .ivu-spin-fix {
|
|
|
|
- background:rgba(103, 103, 103, 0.27);
|
|
|
|
- }
|
|
|
|
- .add-classroom-icon .ivu-poptip-inner {
|
|
|
|
- background-color: #404040;
|
|
|
|
- color: white;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .add-classroom-icon .ivu-poptip-arrow::after {
|
|
|
|
- display: none;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .add-classroom-icon .ivu-poptip-title:after, .add-classroom-icon .ivu-poptip-title {
|
|
|
|
- display: none;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .system-classroom-box .ivu-input, .system-classroom-box .ivu-select-selection {
|
|
|
|
- background: none;
|
|
|
|
- border-color: #424242;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .system-classroom-box .ivu-input:focus, .system-classroom-box .ivu-input:hover {
|
|
|
|
- border-color: #57A3F3 !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .system-classroom-box .ivu-select-selection:focus, .system-classroom-box .ivu-select-selection:hover {
|
|
|
|
- border-color: #57A3F3 !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .system-classroom-table .ivu-table, .system-classroom-table .ivu-table td, .system-classroom-table .ivu-table th, .system-classroom-table .ivu-table:before {
|
|
|
|
- background: none;
|
|
|
|
- color: white;
|
|
|
|
- border-color: #424242;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .system-classroom-table .ivu-table-row-hover .item-tools {
|
|
|
|
- opacity: 1;
|
|
|
|
- transition: opacity 1s;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .system-classroom-table .ivu-table-row-hover {
|
|
|
|
- background: #303030;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .sc-container .ivu-input, .sc-container .ivu-select-selection {
|
|
|
|
- background: none;
|
|
|
|
- color: white;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .classroom-base-info .w-e-toolbar {
|
|
|
|
- background: #383838 !important;
|
|
|
|
- border-radius: 5px 5px 0px 0px;
|
|
|
|
- border-color: #383838 !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .classroom-base-info .w-e-text-container {
|
|
|
|
- border-color: #383838 !important;
|
|
|
|
- border-radius: 0px 0px 5px 5px;
|
|
|
|
- overflow-y: auto !important;
|
|
|
|
- height: 220px !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .classroom-base-info .w-e-text {
|
|
|
|
- overflow-y: auto;
|
|
|
|
- color: white;
|
|
|
|
- &::-webkit-scrollbar
|
|
|
|
-
|
|
|
|
- { /*滚动条整体样式*/
|
|
|
|
- width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
|
- height: 1px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
|
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
|
|
- background: rgb(124,124,124);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &::-webkit-scrollbar-track { /*滚动条里面轨道*/
|
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
|
|
- background: rgba(68,68,68,.5);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .classroom-base-info .w-e-toolbar .w-e-menu:hover i {
|
|
|
|
- color: white !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .ivu-table-row-hover .item-tools {
|
|
|
|
- opacity: 1;
|
|
|
|
- transition: opacity .2s;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /*对话框样式修改*/
|
|
|
|
- .custom-group .ivu-modal-content {
|
|
|
|
- background-color: #383838 !important;
|
|
|
|
- color: white;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .custom-group .ivu-modal-header {
|
|
|
|
- border-color: #454545;
|
|
|
|
- color: white;
|
|
|
|
- background-color: #383838;
|
|
|
|
- border-top-left-radius: 6px;
|
|
|
|
- border-top-right-radius: 6px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .custom-group .ivu-modal-mask {
|
|
|
|
- background-color: rgba(20,20,20,.7);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .custom-group .ivu-input {
|
|
|
|
- background: none;
|
|
|
|
- border: none;
|
|
|
|
- border-bottom: 1px solid #828282;
|
|
|
|
- border-radius: 0px;
|
|
|
|
- color: white;
|
|
|
|
- font-size: 16px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .custom-group .ivu-form-item-label {
|
|
|
|
- color: #929292;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .custom-group .ivu-modal-body {
|
|
|
|
- padding: 16px 30px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .custom-group .ivu-modal-footer {
|
|
|
|
- border-color: #454545;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .custom-group .ivu-modal-header p, .custom-group .ivu-modal-header-inner {
|
|
|
|
- color: white;
|
|
|
|
- font-weight: 600;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .custom-group .ivu-btn-text {
|
|
|
|
- color: white;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .custom-group .ivu-btn-text:hover {
|
|
|
|
- color: black;
|
|
|
|
- }
|
|
|
|
-</style>
|
|
|