|
|
|
<% this.adminPage = 'classify'; %>
|
|
|
|
<% include admin_header %>
|
|
|
|
<style>
|
|
|
|
[v-cloak] {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.current-classify{
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="classify" v-cloak>
|
|
|
|
<div class="ui modal classify">
|
|
|
|
<i class="close icon"></i>
|
|
|
|
<div class="header">
|
|
|
|
{{calcModalTitle}}
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="ui form">
|
|
|
|
<div class="field required" :class="{ error: classifyName.length > 20 }">
|
|
|
|
<label>练习阶段名称(20字以内)</label>
|
|
|
|
<input type="text" v-model="classifyName" placeholder="请输入分类名称">
|
|
|
|
</div>
|
|
|
|
<div class="field required" :class="{ error: classifyName.length > 100 }">
|
|
|
|
<label>练习阶段简介(100字以内)</label>
|
|
|
|
<input type="text" v-model="classifyIntro" placeholder="请输入分类简介">
|
|
|
|
</div>
|
|
|
|
<div class="field required" >
|
|
|
|
<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 }">
|
|
|
|
<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>
|
|
|
|
</div>
|
|
|
|
<button class="ui button" @click="submitInfo">{{calcModalTitle}}</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="classifyArray.length === 0">
|
|
|
|
<div class="ui placeholder segment">
|
|
|
|
<div class="ui icon header">
|
|
|
|
<i class="sticky note icon"></i>
|
|
|
|
暂无练习阶段
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-else>
|
|
|
|
<div class="current-classify">
|
|
|
|
<h4>目前练习阶段</h4>
|
|
|
|
<div class="ui cards">
|
|
|
|
<div class="card" v-for="item in classifyArray">
|
|
|
|
<div class="content">
|
|
|
|
<div class="header">{{item.name}}</div>
|
|
|
|
<div class="description">
|
|
|
|
{{item.intro}}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="ui bottom attached button" @click="show(item.id)">
|
|
|
|
<i class="add icon"></i>
|
|
|
|
编辑练习阶段信息
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="ui labeled button" tabindex="0" @click="show()">
|
|
|
|
<div class="ui button">
|
|
|
|
<i class="plus icon"></i> 新增练习阶段
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
|
<!-- 引入组件库 -->
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
|
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
|
<script>
|
|
|
|
new window.Vue({
|
|
|
|
el: '#classify',
|
|
|
|
data: {
|
|
|
|
problemIdArray: [],
|
|
|
|
order: 1,
|
|
|
|
classifyName: '',
|
|
|
|
classifyIntro: '',
|
|
|
|
classifyArray: [],
|
|
|
|
classifyId: -1,
|
|
|
|
problemOptions: [],
|
|
|
|
loading: false,
|
|
|
|
},
|
|
|
|
created: function() {
|
|
|
|
this.getClassifyInfo();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
remoteMethod(query) {
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.options = [];
|
|
|
|
}
|
|
|
|
},
|
|
|
|
getClassifyInfo: function() {
|
|
|
|
let that = this;
|
|
|
|
$.ajax({
|
|
|
|
url: '/api/practice/all',
|
|
|
|
type: 'GET',
|
|
|
|
success: function (data) {
|
|
|
|
that.classifyArray = data.result;
|
|
|
|
that.usedProblemId = data.problem.map(function(item){return item.p_id});
|
|
|
|
},
|
|
|
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
|
|
|
alert('查询失败');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
resetModal: function() {
|
|
|
|
this.classifyName = '';
|
|
|
|
this.classifyIntro = '';
|
|
|
|
this.problemIdArray = [];
|
|
|
|
this.classifyId = -1;
|
|
|
|
this.problemOptions=[];
|
|
|
|
this.order = this.calcOrderMax;
|
|
|
|
},
|
|
|
|
show: function(id){
|
|
|
|
let that = this;
|
|
|
|
if (id) {
|
|
|
|
this.classifyId = id;
|
|
|
|
$.ajax({
|
|
|
|
url: `/api/practice/classify/${id}`,
|
|
|
|
type: 'GET',
|
|
|
|
success: function (data) {
|
|
|
|
if (!data.error_code) {
|
|
|
|
const {classifyInfo: {id, intro, name, order}, problem} = data;
|
|
|
|
that.classifyName = name;
|
|
|
|
that.classifyIntro = intro;
|
|
|
|
that.problemIdArray = problem;
|
|
|
|
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('创建失败');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.resetModal();
|
|
|
|
}
|
|
|
|
$('.ui.modal.classify')
|
|
|
|
.modal('show')
|
|
|
|
},
|
|
|
|
checkStringLength: function(string, maxLen) {
|
|
|
|
return string.length > 0 && string.length <= maxLen;
|
|
|
|
},
|
|
|
|
submitInfo: function() {
|
|
|
|
let that = this;
|
|
|
|
let name = this.classifyName;
|
|
|
|
let intro = this.classifyIntro;
|
|
|
|
if(this.checkStringLength(name, 20) && this.checkStringLength(intro, 100) && this.problemIdArray.length > 0) {
|
|
|
|
const obj = {
|
|
|
|
name: this.classifyName,
|
|
|
|
intro: this.classifyIntro,
|
|
|
|
order: this.order,
|
|
|
|
problemIdArray: this.problemIdArray
|
|
|
|
}
|
|
|
|
if (this.classifyId === -1) {
|
|
|
|
$.ajax({
|
|
|
|
url: '/api/practice/create',
|
|
|
|
type: 'POST',
|
|
|
|
async: true,
|
|
|
|
data: obj,
|
|
|
|
success: function (data) {
|
|
|
|
if (data.error_code) {
|
|
|
|
alert('创建失败');
|
|
|
|
} else {
|
|
|
|
alert('添加成功');
|
|
|
|
that.resetModal();
|
|
|
|
$('.ui.modal.classify')
|
|
|
|
.modal('hide')
|
|
|
|
that.getClassifyInfo();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
|
|
|
alert('创建失败');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
$.ajax({
|
|
|
|
url: `/api/practice/classify/update/${that.classifyId}`,
|
|
|
|
type: 'PUT',
|
|
|
|
async: true,
|
|
|
|
data: obj,
|
|
|
|
success: function (data) {
|
|
|
|
if (data.error_code) {
|
|
|
|
alert('更新失败');
|
|
|
|
} else {
|
|
|
|
alert('更新成功');
|
|
|
|
that.resetModal();
|
|
|
|
$('.ui.modal.classify')
|
|
|
|
.modal('hide')
|
|
|
|
that.getClassifyInfo();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
|
|
|
alert('更新时发生错误');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
calcModalTitle: function(){
|
|
|
|
if (this.classifyId === -1) {
|
|
|
|
return '新增练习阶段';
|
|
|
|
} else {
|
|
|
|
return '编辑练习阶段'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
calcOrderMax: function() {
|
|
|
|
if (this.classifyId === -1) {
|
|
|
|
return this.classifyArray.length + 1;
|
|
|
|
} else {
|
|
|
|
return this.classifyArray.length
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
<% include admin_footer %>
|