|
|
|
@ -28,26 +28,34 @@
|
|
|
|
|
<label>练习阶段顺序</label> |
|
|
|
|
<el-input-number disabled v-model="order" :min="1" :max="calcOrderMax" label="练习阶段顺序"></el-input-number> |
|
|
|
|
</div> |
|
|
|
|
<div class="field required" :class="{ error: problemIdArray.length === 0 }"> |
|
|
|
|
<div class="field required" :class="{ error: multipleSelection.length === 0 }"> |
|
|
|
|
<label>题目选择(至少包含一道题)</label> |
|
|
|
|
<el-select |
|
|
|
|
style="width:100%" |
|
|
|
|
v-model="problemIdArray" |
|
|
|
|
multiple |
|
|
|
|
filterable |
|
|
|
|
remote |
|
|
|
|
reserve-keyword |
|
|
|
|
placeholder="请输入关键词" |
|
|
|
|
:remote-method="remoteMethod" |
|
|
|
|
:loading="loading"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in problemOptions" |
|
|
|
|
:key="item.value" |
|
|
|
|
:label="item.label" |
|
|
|
|
:disabled="item.disabled" |
|
|
|
|
:value="item.value"> |
|
|
|
|
</el-option> |
|
|
|
|
</el-select> |
|
|
|
|
<el-table |
|
|
|
|
ref="multipleTable" |
|
|
|
|
:data="problemList" |
|
|
|
|
tooltip-effect="dark" |
|
|
|
|
style="width: 100%" |
|
|
|
|
@selection-change="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" |
|
|
|
|
:total="problemCount"> |
|
|
|
|
</el-pagination> |
|
|
|
|
</div> |
|
|
|
|
<button class="ui button" @click="submitInfo">{{calcModalTitle}}</button> |
|
|
|
|
</div> |
|
|
|
@ -102,45 +110,78 @@
|
|
|
|
|
classifyId: -1, |
|
|
|
|
problemOptions: [], |
|
|
|
|
loading: false, |
|
|
|
|
problemList: [], |
|
|
|
|
usedProblemId: [], |
|
|
|
|
multipleSelection: [], |
|
|
|
|
problemCount: -1 |
|
|
|
|
}, |
|
|
|
|
created: function() { |
|
|
|
|
this.getClassifyInfo(); |
|
|
|
|
this.getCount(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
remoteMethod(query) { |
|
|
|
|
getCount: function(){ |
|
|
|
|
let that = this; |
|
|
|
|
if (query !== '') { |
|
|
|
|
if (this.usedProblemId.includes(parseInt(query))) { |
|
|
|
|
this.$message({ |
|
|
|
|
message: '这道题已经分配过', |
|
|
|
|
type: 'warning' |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.loading = true; |
|
|
|
|
setTimeout(() => { |
|
|
|
|
$.ajax({ |
|
|
|
|
url: `/api/v2/search/problems/${query}`, |
|
|
|
|
type: 'GET', |
|
|
|
|
success: function (data) { |
|
|
|
|
that.problemOptions = data.results.map((item) => { |
|
|
|
|
return { |
|
|
|
|
id: item.value, |
|
|
|
|
label: item.name, |
|
|
|
|
value: item.value, |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
error: function (XMLHttpRequest, textStatus, errorThrown) { |
|
|
|
|
alert('创建失败'); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.loading = false; |
|
|
|
|
}, 200); |
|
|
|
|
$.ajax({ |
|
|
|
|
url: '/api/pagination/allproblem', |
|
|
|
|
type: 'GET', |
|
|
|
|
success: function (data) { |
|
|
|
|
console.log(data.problemInfo.count); |
|
|
|
|
that.problemCount = parseInt(data.problemInfo.count); |
|
|
|
|
}, |
|
|
|
|
error: function (XMLHttpRequest, textStatus, errorThrown) { |
|
|
|
|
alert('创建失败'); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
disableCheckbox: function(row) { |
|
|
|
|
const currentIdArray = this.problemIdArray.map((function(item){ |
|
|
|
|
return item.id; |
|
|
|
|
})); |
|
|
|
|
function findDifference(source, target){ |
|
|
|
|
return target.filter(function(item){ |
|
|
|
|
return !source.includes(item); |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
const disabledId = findDifference(currentIdArray, this.usedProblemId) |
|
|
|
|
return !disabledId.includes(row.id); |
|
|
|
|
}, |
|
|
|
|
toggleSelection(rows) { |
|
|
|
|
if (rows) { |
|
|
|
|
rows.forEach(row => { |
|
|
|
|
this.$refs.multipleTable.toggleRowSelection(row); |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.options = []; |
|
|
|
|
this.$refs.multipleTable.clearSelection(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
handlePageChange(page) { |
|
|
|
|
this.selectProblem(); |
|
|
|
|
this.getProblemPagination(page); |
|
|
|
|
if (this.classifyId) { |
|
|
|
|
this.getClassifyInfos(this.classifyId); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
getProblemPagination(page) { |
|
|
|
|
let that = this; |
|
|
|
|
$.ajax({ |
|
|
|
|
url: '/api/pagination', |
|
|
|
|
type: 'GET', |
|
|
|
|
data: { |
|
|
|
|
pagesize: 10, |
|
|
|
|
page: page - 1 |
|
|
|
|
}, |
|
|
|
|
success: function (data) { |
|
|
|
|
that.problemList = data.problemInfo; |
|
|
|
|
}, |
|
|
|
|
error: function (XMLHttpRequest, textStatus, errorThrown) { |
|
|
|
|
alert('创建失败'); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
handleSelectionChange(val) { |
|
|
|
|
this.multipleSelection = val; |
|
|
|
|
}, |
|
|
|
|
getClassifyInfo: function() { |
|
|
|
|
let that = this; |
|
|
|
|
$.ajax({ |
|
|
|
@ -163,10 +204,12 @@
|
|
|
|
|
this.problemOptions=[]; |
|
|
|
|
this.order = this.calcOrderMax; |
|
|
|
|
}, |
|
|
|
|
show: function(id){ |
|
|
|
|
selectProblem: function() { |
|
|
|
|
this.toggleSelection(this.problemIdArray) |
|
|
|
|
}, |
|
|
|
|
getClassifyInfos: function(id){ |
|
|
|
|
let that = this; |
|
|
|
|
if (id) { |
|
|
|
|
this.classifyId = id; |
|
|
|
|
if (id !== -1) { |
|
|
|
|
$.ajax({ |
|
|
|
|
url: `/api/practice/classify/${id}`, |
|
|
|
|
type: 'GET', |
|
|
|
@ -175,33 +218,27 @@
|
|
|
|
|
const {classifyInfo: {id, intro, name, order}, problem} = data; |
|
|
|
|
that.classifyName = name; |
|
|
|
|
that.classifyIntro = intro; |
|
|
|
|
that.problemIdArray = problem; |
|
|
|
|
that.problemIdArray = that.problemList.filter(function(problemItem){ |
|
|
|
|
return problem.includes(problemItem.id) |
|
|
|
|
}); |
|
|
|
|
that.toggleSelection(that.problemIdArray) |
|
|
|
|
that.order = order; |
|
|
|
|
problem.forEach(function(problemId) { |
|
|
|
|
$.ajax({ |
|
|
|
|
url: `/api/v2/search/problems/${problemId}`, |
|
|
|
|
type: 'GET', |
|
|
|
|
success: function (data) { |
|
|
|
|
that.problemOptions = data.results.map((item) => { |
|
|
|
|
return { |
|
|
|
|
id: item.value, |
|
|
|
|
label: item.name, |
|
|
|
|
disabled: true, |
|
|
|
|
value: item.value, |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
error: function (XMLHttpRequest, textStatus, errorThrown) { |
|
|
|
|
alert('创建失败'); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
error: function (XMLHttpRequest, textStatus, errorThrown) { |
|
|
|
|
alert('创建失败'); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
show: function(id){ |
|
|
|
|
let that = this; |
|
|
|
|
console.log(id); |
|
|
|
|
this.getProblemPagination(1) |
|
|
|
|
if (id) { |
|
|
|
|
this.classifyId = id; |
|
|
|
|
// this.getProblemPagination(1) |
|
|
|
|
this.getClassifyInfos(id); |
|
|
|
|
} else { |
|
|
|
|
this.resetModal(); |
|
|
|
|
} |
|
|
|
@ -215,12 +252,14 @@
|
|
|
|
|
let that = this; |
|
|
|
|
let name = this.classifyName; |
|
|
|
|
let intro = this.classifyIntro; |
|
|
|
|
if(this.checkStringLength(name, 20) && this.checkStringLength(intro, 100) && this.problemIdArray.length > 0) { |
|
|
|
|
if(this.checkStringLength(name, 20) && this.checkStringLength(intro, 100) && this.multipleSelection.length > 0) { |
|
|
|
|
const obj = { |
|
|
|
|
name: this.classifyName, |
|
|
|
|
intro: this.classifyIntro, |
|
|
|
|
order: this.order, |
|
|
|
|
problemIdArray: this.problemIdArray |
|
|
|
|
problemIdArray: this.multipleSelection.map(function(item){ |
|
|
|
|
return item.id |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
if (this.classifyId === -1) { |
|
|
|
|
$.ajax({ |
|
|
|
|