|
@@ -0,0 +1,242 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ title="班级调整"
|
|
|
+ :visible.sync="show"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="70%"
|
|
|
+ >
|
|
|
+ <el-form ref="form" :model="form" label-width="50px" label-position="right">
|
|
|
+ <el-row>
|
|
|
+ <el-row>
|
|
|
+
|
|
|
+ <el-col class="flex-center-column" :span="12">
|
|
|
+ <el-form-item>
|
|
|
+ <mx-select @change="getStudents('from',$event)" :span="12" :list="display" v-model="fromClassId"
|
|
|
+ placeholder="请选择" item-label="className" item-value="classId"
|
|
|
+ ></mx-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <class-table :list="studentsTableLeft" @confirm="studentSelected($event,'from')"></class-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="flex-center-column" :span="12">
|
|
|
+ <el-form-item>
|
|
|
+ <mx-select @change="getStudents('to',$event)" :span="12" :list="display" v-model="toClassId"
|
|
|
+ placeholder="请选择" item-label="className" item-value="classId"
|
|
|
+ ></mx-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <class-table :list="studentsTableRight" @confirm="studentSelected($event,'to')"></class-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-col :span="24" class="flex-center" v-if="fromClassId && toClassId" style="margin-top: 20px">
|
|
|
+ <el-transfer
|
|
|
+ v-model="tranRight"
|
|
|
+ :titles="[fromClassId ? `${getClassName(fromClassId)}(添加)` : '未选择', toClassId ? `${getClassName(toClassId)}(添加)`: '未选择']"
|
|
|
+ :data="parentFrame"
|
|
|
+ @change="transferChange"
|
|
|
+ >
|
|
|
+ </el-transfer>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="close">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="confirm">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { classesResult, resultDispatch } from '@/api/webApi/elective/dispatch'
|
|
|
+import MxClassTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
|
|
|
+import MxSelect from '@/components/mx-select/mx-select'
|
|
|
+import ClassTable from './class-table'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'class-adjust',
|
|
|
+ components: {
|
|
|
+ MxSelect,
|
|
|
+ ClassTable
|
|
|
+ },
|
|
|
+ inject: ['refreshData'],
|
|
|
+ mixins: [MxClassTreeTranslateMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {},
|
|
|
+ studentsTableLeft: [],
|
|
|
+ studentsTableRight: [],
|
|
|
+ fromClassId: '',
|
|
|
+ toClassId: '',
|
|
|
+ group: '',
|
|
|
+ settings: [],
|
|
|
+ selectedLeft: [],
|
|
|
+ selectedRight: [],
|
|
|
+ show: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ tranRight() {
|
|
|
+ if (!this.selectedLeft.length) return []
|
|
|
+ return this.selectedLeft.map(s => { return s.studentId })
|
|
|
+ },
|
|
|
+ parentFrame() {
|
|
|
+ const selected = this.selectedRight.concat(this.selectedLeft)
|
|
|
+ console.log(selected)
|
|
|
+ return selected.map(item => {
|
|
|
+ return {
|
|
|
+ key: item.studentId,
|
|
|
+ label: item.name,
|
|
|
+ disabled: true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ display() {
|
|
|
+ return this.settings.map(item => {
|
|
|
+ return {
|
|
|
+ classId: item.classId,
|
|
|
+ className: this.getClassName(item.classId),
|
|
|
+ disabled: this.getDisable(item.classId)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ close() {
|
|
|
+ this.show =false,
|
|
|
+ this.format()
|
|
|
+ },
|
|
|
+ format(){
|
|
|
+ this.form = {}
|
|
|
+ this.studentsTableLeft =[]
|
|
|
+ this.studentsTableRight =[]
|
|
|
+ this.fromClassId = ''
|
|
|
+ this.toClassId = ''
|
|
|
+ this.group = ''
|
|
|
+ this.settings = []
|
|
|
+ this.selectedLeft = []
|
|
|
+ this.selectedRight = []
|
|
|
+ this.show =false
|
|
|
+ },
|
|
|
+ getTranLeft() {
|
|
|
+ // 获取左tran实际的数据
|
|
|
+ // 母框去重右框
|
|
|
+ return this.parentFrame.filter(item => {
|
|
|
+ if (this.tranRight.findIndex(r => r == item.key) == -1) {
|
|
|
+ return item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTranRight() {
|
|
|
+ // 获取左tran实际的数据
|
|
|
+ // 母框去重右框
|
|
|
+ return this.parentFrame.filter(item => {
|
|
|
+ if (this.tranRight.findIndex(r => r == item.key) != -1) return item
|
|
|
+ })
|
|
|
+ },
|
|
|
+ saveResultDispatch(clazzId,students) {
|
|
|
+ // 分派转移
|
|
|
+ resultDispatch({
|
|
|
+ roundId: this.group.roundId,
|
|
|
+ students: students,
|
|
|
+ toClazzId: clazzId
|
|
|
+ }).then(res => {
|
|
|
+ if(res.code == 200) this.$message.success(res.msg)
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ if( !this.fromClassId || !this.toClassId) {
|
|
|
+ this.$message.warning('请先选择需要调整的两个班级')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 左tran 是包含 右边的 (只是不显示右tran的数据)要先去重
|
|
|
+ // 左tran 去掉跟左table重复的数据就是 右tran 需要调换的
|
|
|
+ // 同理右tran 去掉跟右table重复的数据就是 左tran 需要调换的
|
|
|
+ // 1.去重
|
|
|
+ // 左tran实际勾选去除左边table
|
|
|
+ const left = this.getTranLeft().filter(item => {
|
|
|
+ return this.studentsTableLeft.findIndex(s => s.studentId == item.key) == -1
|
|
|
+ }).map(item => item.key)
|
|
|
+ // 右tran实际勾选去除右边table
|
|
|
+ const right = this.getTranRight().filter(item => {
|
|
|
+ return this.studentsTableRight.findIndex(s => s.studentId == item.key) == -1
|
|
|
+ }).map(item => item.key)
|
|
|
+ console.log(left) // 左边的学生放入左边表格
|
|
|
+ if( !left.length && !right.length) {
|
|
|
+ this.$message.warning('调整人数不可为0')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 2.分别调用调换接口
|
|
|
+ if (left.length) this.saveResultDispatch(this.fromClassId,left)
|
|
|
+ console.log(left)// 左边的学生放入左边表格
|
|
|
+ console.log(right)// 右边的学生放入右边表格
|
|
|
+ if (right.length) this.saveResultDispatch(this.toClassId,right)
|
|
|
+ this.$nextTick(()=> {
|
|
|
+ this.show = false
|
|
|
+ // 注销数据
|
|
|
+ this.format()
|
|
|
+ this.refreshData()
|
|
|
+ })
|
|
|
+
|
|
|
+ // 2.分别调用调换接口
|
|
|
+
|
|
|
+ },
|
|
|
+ studentSelected(list, type) {
|
|
|
+ // 1 添加至母框
|
|
|
+ if (type == 'from') this.selectedLeft = list
|
|
|
+ if (type == 'to') this.selectedRight = list
|
|
|
+
|
|
|
+ },
|
|
|
+ getStudents(type, classId) {
|
|
|
+ console.log(type)
|
|
|
+ console.log(classId)
|
|
|
+ classesResult({
|
|
|
+ groupId: this.group.groupId,
|
|
|
+ roundId: this.group.roundId,
|
|
|
+ classId: classId
|
|
|
+ }).then(res => {
|
|
|
+ if( type == 'from') {
|
|
|
+ this.studentsTableLeft = res.rows
|
|
|
+ }else if( type == 'to') {
|
|
|
+ this.studentsTableRight = res.rows
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 判断是否有这个元素
|
|
|
+ getDisable(itemId) {
|
|
|
+ return this.fromClassId == itemId || this.toClassId == itemId
|
|
|
+ },
|
|
|
+ transferChange(currentVal, direction, array) {
|
|
|
+ if (!this.fromClassId || !this.toClassId) {
|
|
|
+ this.$message.warning('需要选择两个班级')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ },
|
|
|
+ open(row, settings) {
|
|
|
+ console.log(row)
|
|
|
+ console.log(settings)
|
|
|
+ this.group = row
|
|
|
+ this.settings = settings
|
|
|
+ this.show = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.flex-center-column {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-center {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+</style>
|