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

291 lines
9.7 KiB

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