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

129 lines
4.1 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">
新增练习阶段
</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">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
<button class="ui button" @click="submitInfo">提交</button>
</div>
</div>
</div>
<div v-if="mockClassify.length === 0">
暂无练习阶段
</div>
<div v-else>
<div class="current-classify">
<h4>目前练习阶段</h4>
<div class="ui cards">
<div class="card" v-for="item in mockClassify">
<div class="content">
<div class="header">{{item.title}}</div>
<div class="description">
{{item.description}}
</div>
</div>
<div class="ui bottom attached button">
<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>
<script>
new window.Vue({
el: '#classify',
data: {
classifyName: '',
classifyIntro: '',
message: 'Hello Vue!',
mockClassify: [{
title: '测试分类a',
description: '测试介绍'
}, {
title: '测试分类1',
description: '测试介绍1'
}]
},
methods: {
show: function(){
$('.ui.modal.classify')
.modal('show')
},
checkStringLength: function(string, maxLen) {
return string.length > 0 && string.length <= maxLen;
},
submitInfo: function() {
let name = this.classifyName;
let intro = this.classifyIntro;
if(this.checkStringLength(name, 20) && this.checkStringLength(intro, 100)) {
const obj = {
name: this.classifyName,
intro: this.classifyIntro
}
$.ajax({
url: '/api/practice/create',
type: 'POST',
async: true,
data: obj,
success: function (data) {
console.log(data);
if (data.error_code) {
alert('创建失败');
} else {
alert('添加成功')
$('.ui.modal.classify')
.modal('hide')
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest);
alert('创建失败');
}
});
}
}
}
})
</script>
<% include admin_footer %>