|
@@ -10,19 +10,19 @@
|
|
|
<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="from" placeholder="请选择" item-label="className" item-value="classId"
|
|
|
+ <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 :label="from">
|
|
|
+ <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="to" placeholder="请选择" item-label="className" item-value="classId"
|
|
|
+ <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 :label="to">
|
|
|
+ <el-form-item >
|
|
|
<class-table :list="studentsTableRight" @confirm="studentSelected($event,'to')" ></class-table>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
@@ -34,11 +34,11 @@
|
|
|
<!-- :closable="false">-->
|
|
|
<!-- </el-alert>-->
|
|
|
<!-- </el-col>-->
|
|
|
- <el-col :span="24" class="flex-center" v-if="this.from && this.to" style="margin-top: 20px">
|
|
|
+ <el-col :span="24" class="flex-center" v-if="fromClassId && toClassId" style="margin-top: 20px">
|
|
|
<el-transfer
|
|
|
v-model="tranRight"
|
|
|
- :titles="[from ? from : '未选择', to ? to : '未选择']"
|
|
|
- :data="tranLeft"
|
|
|
+ :titles="[fromClassId ? getClassName(fromClassId) : '未选择', toClassId ? getClassName(toClassId) : '未选择']"
|
|
|
+ :data="parentFrame"
|
|
|
@change="transferChange"
|
|
|
>
|
|
|
</el-transfer>
|
|
@@ -47,13 +47,14 @@
|
|
|
</el-form>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="show = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="show = false">确 定</el-button>
|
|
|
+ <el-button type="primary" @click="confirm">确 定</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getDispatchResult } from '@/api/webApi/elective/dispatch'
|
|
|
+import { classesResult, getDispatchResult } 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'
|
|
|
|
|
@@ -63,24 +64,18 @@ export default {
|
|
|
MxSelect,
|
|
|
ClassTable
|
|
|
},
|
|
|
+ mixins: [MxClassTreeTranslateMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
studentListOne: [],
|
|
|
form: {},
|
|
|
studentsTableLeft: [],
|
|
|
studentsTableRight: [],
|
|
|
- from: '',
|
|
|
- to: '',
|
|
|
- classList: [{
|
|
|
- classId: '201',
|
|
|
- className: '201班'
|
|
|
- }, {
|
|
|
- classId: '202',
|
|
|
- className: '202班'
|
|
|
- }, {
|
|
|
- classId: '203',
|
|
|
- className: '203班'
|
|
|
- }],
|
|
|
+ fromClassId: '',
|
|
|
+ toClassId: '',
|
|
|
+ group: '',
|
|
|
+ settings: [],
|
|
|
+ classList: [],
|
|
|
selectedLeft: [],
|
|
|
selectedRight: [],
|
|
|
show: false,
|
|
@@ -90,26 +85,61 @@ export default {
|
|
|
created() {
|
|
|
},
|
|
|
computed: {
|
|
|
- tranLeft() {
|
|
|
+ parentFrame() {
|
|
|
const selected = this.selectedRight.concat(this.selectedLeft)
|
|
|
return selected.map(item => {
|
|
|
return {
|
|
|
key: item.studentId,
|
|
|
label: item.studentName,
|
|
|
+ classId: item.classId
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
display() {
|
|
|
- return this.classList.map(item => {
|
|
|
+ return this.settings.map(item => {
|
|
|
return {
|
|
|
classId: item.classId,
|
|
|
- className: item.className,
|
|
|
+ className: this.getClassName(item.classId),
|
|
|
disabled: this.getDisable(item.classId)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ // 左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
|
|
|
+ })
|
|
|
+ // 右tran实际勾选去除右边table
|
|
|
+ const right = this.getTranRight().filter(item => {
|
|
|
+ return this.studentsTableRight.findIndex(s => s.studentId == item.key) == -1
|
|
|
+ })
|
|
|
+ console.log(left) // 左边的学生放入左边表格
|
|
|
+ console.log(right)// 右边的学生放入右边边表格
|
|
|
+ // 2.分别调用调换接口
|
|
|
+
|
|
|
+ },
|
|
|
studentSelected(list,type) {
|
|
|
// 1 添加至母框
|
|
|
if(type== 'from'){
|
|
@@ -119,54 +149,45 @@ export default {
|
|
|
this.selectedRight = list
|
|
|
}
|
|
|
},
|
|
|
- async getStudents(type,classId) {
|
|
|
+ getStudents(type,classId) {
|
|
|
+ console.log(type)
|
|
|
console.log(classId)
|
|
|
- if(type == 'from') {
|
|
|
- // 左边table
|
|
|
- const res = await getDispatchResult()
|
|
|
- const index = res.data.findIndex(item=>(item.classId == classId))
|
|
|
- index != -1 ? this.studentsTableLeft = res.data[index].students.map(
|
|
|
- item => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- className: res.data[index].classId
|
|
|
- }
|
|
|
- }
|
|
|
- )
|
|
|
- :
|
|
|
- this.studentsTableLeft = []
|
|
|
-
|
|
|
- }
|
|
|
- if(type == 'to') {
|
|
|
- // 右边table
|
|
|
- const res = await getDispatchResult()
|
|
|
- const index = res.data.findIndex(item=>(item.classId == classId))
|
|
|
- index != -1 ? this.studentsTableRight = res.data[index].students.map(
|
|
|
- item => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- className: res.data[index].classId
|
|
|
- }
|
|
|
- }
|
|
|
- )
|
|
|
- :
|
|
|
- this.studentsTableRight = []
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
+ classesResult({
|
|
|
+ group: this.group.groupId,
|
|
|
+ roundId: this.group.roundId,
|
|
|
+ classId: classId
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ getDispatchResult().then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if( type =='from') this.studentsTableLeft = res.data[0].students.map(item => {
|
|
|
+ item.classId = classId
|
|
|
+ item.className = this.getClassName(classId)
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ if( type =='to') this.studentsTableRight = res.data[1].students.map(item => {
|
|
|
+ item.classId = classId
|
|
|
+ item.className = this.getClassName(classId)
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ })
|
|
|
},
|
|
|
// 判断是否有这个元素
|
|
|
getDisable(itemId) {
|
|
|
- return this.from == itemId || this.to == itemId
|
|
|
+ return this.fromClassId == itemId || this.toClassId == itemId
|
|
|
},
|
|
|
transferChange(currentVal, direction, array) {
|
|
|
- if(!this.from || !this.to) {
|
|
|
- console.log(111111111)
|
|
|
+ if(!this.fromClassId || !this.toClassId) {
|
|
|
this.$message.warning('需要选择两个班级')
|
|
|
return
|
|
|
}
|
|
|
},
|
|
|
- open() {
|
|
|
+ open(row ,settings) {
|
|
|
+ console.log(row)
|
|
|
+ console.log(settings)
|
|
|
+ this.group = row
|
|
|
+ this.settings = settings
|
|
|
this.show = true
|
|
|
}
|
|
|
}
|