You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
3.9 KiB
131 lines
3.9 KiB
5 years ago
|
<% include util %>
|
||
|
|
<script>
|
||
|
|
Vue.component('problem-table', {
|
||
|
|
template: '#problemTable',
|
||
|
|
props: ['disabledidarray', 'userselectarray'],// 禁止选择的选项， 用户已经选择的选项
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
allproblemList:[],
|
||
|
|
checkedArray: [],
|
||
|
|
datas: [],
|
||
|
|
currentPage:1,
|
||
|
|
max: 0,
|
||
|
|
arrayItem: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
allproblemList: function(newData, olbData){
|
||
|
|
this.datas = newData.slice(0,10);
|
||
|
|
},
|
||
|
|
userselectarray: function(newData, olbData) {
|
||
|
|
console.log('更新了');
|
||
|
|
// this.checkedArray = newData;
|
||
|
|
this.toggleSelection(newData)
|
||
|
|
},
|
||
|
|
checkedArray: function(newdata, olddata){
|
||
|
|
console.log('checked更新了');
|
||
|
|
this.toggleSelection(newdata)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
console.log('加载');
|
||
|
|
console.log(this.userselectarray);
|
||
|
|
this.getCount();
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
getCount: function(){
|
||
|
|
let that = this;
|
||
|
|
$.ajax({
|
||
|
|
url: '/api/pagination/allproblem',
|
||
|
|
type: 'GET',
|
||
|
|
success: function (data) {
|
||
|
|
that.max = parseInt(data.problemInfo.length);
|
||
|
|
that.allproblemList = data.problemInfo;
|
||
|
|
},
|
||
|
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
||
|
|
alert('创建失败');
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleClose(tag) {
|
||
|
|
const deleteItem = this.checkedArray.splice(this.checkedArray.indexOf(tag), 1);
|
||
|
|
this.toggleSelection(deleteItem)
|
||
|
|
},
|
||
|
|
getProblemPagination(page) {
|
||
|
|
let that = this;
|
||
|
|
this.datas = this.allproblemList.slice((page - 1)*10, (page - 1)*10+10);
|
||
|
|
this.$nextTick(function(){
|
||
|
|
that.toggleSelection(that.checkedArray);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
selectProblem: function(array) {
|
||
|
|
this.toggleSelection(array)
|
||
|
|
},
|
||
|
|
toggleSelection(rows) {
|
||
|
|
if (rows) {
|
||
|
|
console.log(rows);
|
||
|
|
rows.forEach(row => {
|
||
|
|
this.$refs.multipleTable.toggleRowSelection(row);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.$refs.multipleTable.clearSelection();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handlePageChange(page){
|
||
|
|
this.selectProblem(this.checkedArray);
|
||
|
|
this.getProblemPagination(page);
|
||
|
|
},
|
||
|
|
handleSelectionChange(val, row){
|
||
|
|
const multipleSelectionId = this.checkedArray.map(item => item.id);
|
||
|
|
if (multipleSelectionId.includes(row.id)) {
|
||
|
|
this.checkedArray.splice(this.checkedArray.indexOf(row), 1)
|
||
|
|
} else {
|
||
|
|
this.checkedArray.push(row);
|
||
|
|
}
|
||
|
|
// this.$emit('getuserchoose', this.checkedArray)
|
||
|
|
},
|
||
|
|
disableCheckbox: function(row) {
|
||
|
|
if (this.disabledidarray) {
|
||
|
|
return !this.disabledidarray.includes(row.id);
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script id="problemTable" type="text/x-template">
|
||
|
|
<div>
|
||
|
|
<div class="field">
|
||
|
|
<label>当前练习阶段已经选择的题</label>
|
||
|
|
<el-table
|
||
|
|
ref="multipleTable"
|
||
|
|
:data="datas"
|
||
|
|
tooltip-effect="dark"
|
||
|
|
style="width: 100%"
|
||
|
|
@select="handleSelectionChange"
|
||
|
|
>
|
||
|
|
<el-table-column
|
||
|
|
type="selection"
|
||
|
|
:selectable="disableCheckbox"
|
||
|
|
width="55">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="id"
|
||
|
|
label="题目id">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="title"
|
||
|
|
label="题目标题">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<el-pagination
|
||
|
|
@current-change="handlePageChange"
|
||
|
|
layout="prev, pager, next"
|
||
|
|
:current-page.sync="currentPage"
|
||
|
|
:total="max">
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</script>
|