算法评测平台前端。
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

<% 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>