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

341 lines
12 KiB

<% this.adminPage = 'classify'; %>
<% include admin_header %>
<style>
[v-cloak] {
display: none;
}
.current-classify{
margin-bottom: 20px;
}
.classify{
height:85%;
overflow: auto;
}
.ui.modal>.close {
top: 1.0535rem;
right: 1rem;
color: rgba(0, 0, 0, .87);
}
</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">
<label>当前练习阶段已经选择的题</label>
<el-tag @close="handleClose(item)" closable v-for="item in multipleSelection" style="margin-right:5px">#{{item.id}}{{item.title}}</el-tag>
</div>
<div class="field required" :class="{ error: multipleSelection.length === 0 }">
<label>题目选择(至少包含一道题)</label>
<el-table
ref="multipleTable"
:data="problemList"
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="problemCount">
</el-pagination>
</div>
<!-- <div is='problem-table' @getuserchoose="handleUserChoose" :userselectarray="multipleSelection" :disabledidarray="disabledId"></div>-->
<button class="ui button" @click="submitInfo">保存</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>
<% include problem_table %>
<script>
new window.Vue({
el: '#classify',
data: {
problemIdArray: [],
order: 1,
classifyName: '',
classifyIntro: '',
classifyArray: [],
classifyId: -1,
loading: false,
problemList: [],
allproblemList: [],
usedProblemId: [],
multipleSelection: [],
problemCount: -1,
currentPage:1,
disabledId: [],
},
created: function() {
this.getClassifyInfo();
this.getCount();
},
methods: {
handleClose(tag) {
const deleteItem = this.multipleSelection.splice(this.multipleSelection.indexOf(tag), 1);
this.toggleSelection(deleteItem)
},
getCount: function(){
let that = this;
$.ajax({
url: '/api/pagination/allproblem',
type: 'GET',
success: function (data) {
that.problemCount = parseInt(data.problemInfo.length);
that.allproblemList = data.problemInfo;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('创建失败');
}
})
},
disableCheckbox: function(row) {
return !this.disabledId.includes(row.id);
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handlePageChange(page) {
this.selectProblem(this.multipleSelection);
this.getProblemPagination(page);
},
getProblemPagination(page) {
let that = this;
this.problemList = this.allproblemList.slice((page - 1)*10, (page - 1)*10+10);
this.$nextTick(function(){
that.toggleSelection(that.multipleSelection);
})
},
handleSelectionChange(val, row) {
console.log(val);
const multipleSelectionId = this.multipleSelection.map(item => item.id);
if (multipleSelectionId.includes(row.id)) {
this.multipleSelection.splice(this.multipleSelection.indexOf(row), 1)
} else {
this.multipleSelection.push(row);
}
},
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.order = this.calcOrderMax;
},
selectProblem: function(array) {
this.toggleSelection(array)
},
getClassifyInfos: function(id){
let that = this;
if (id !== -1) {
$.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 = that.allproblemList.filter(function(problemItem){
return problem.includes(problemItem.id)
});
const currentIdArray = that.problemIdArray.map((function(item){
return item.id;
}));
function findDifference(source, target){
return target.filter(function(item){
return !source.includes(item);
})
}
that.disabledId = findDifference(currentIdArray, that.usedProblemId);
that.multipleSelection = that.problemIdArray;
that.getProblemPagination(1);
that.order = order;
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('创建失败');
}
});
}
},
show: function(id){
let that = this;
if (id) {
this.classifyId = id;
this.getClassifyInfos(id);
this.currentPage = 1;
} 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.multipleSelection.length > 0) {
const obj = {
name: this.classifyName,
intro: this.classifyIntro,
order: this.order,
problemIdArray: this.multipleSelection.map(item=>item.id)
}
if (this.classifyId === -1) {
$.ajax({
url: '/api/practice/create',
type: 'POST',
async: true,
data: obj,
success: function (data) {
if (data.error_code) {
alert('创建失败');
that.resetModal();
} 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 %>