Skip to content

P
pica-cloud-online-exam
提交 600eb2cd 编写于 作者: haoguojing's avatar haoguojing
浏览文件
操作

feat: 新增考试

上级 74286733
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 71 行增加 和 3103 行删除
vue-manage-system/.gitignore 0 → 100644
浏览文件 @ 600eb2cd
node_modules
dist/index.js
dist/authUseful.js
dist/stroke.js
.temp/entry.js
dist/
.temp/
\ No newline at end of file
vue-manage-system/src/components/page/BaseCharts.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
<el-breadcrumb-item>基础图表</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="plugins-tips">
vue-schart：vue.js封装sChart.js的图表组件。
访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
</div>
<div class="schart">
<div class="content-title">柱状图</div>
<schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart>
</div>
<div class="schart">
<div class="content-title">折线图</div>
<schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart>
</div>
<div class="schart">
<div class="content-title">饼状图</div>
<schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
</div>
<div class="schart">
<div class="content-title">环形图</div>
<schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
</div>
</div>
</template>
<script>
import Schart from 'vue-schart';
export default {
components: {
Schart
},
data: () => ({
data1:[
{name:'2012',value:1141},
{name:'2013',value:1499},
{name:'2014',value:2260},
{name:'2015',value:1170},
{name:'2016',value:970},
{name:'2017',value:1450}
],
data2 : [
{name:'短袖',value:1200},
{name:'休闲裤',value:1222},
{name:'连衣裙',value:1283},
{name:'外套',value:1314},
{name:'羽绒服',value:2314}
],
options1: {
title: '某商店近年营业总额',
bgColor: '#009688',
titleColor: '#ffffff',
fillColor: '#e0f2f1',
axisColor: '#ffffff',
contentColor: '#999'
},
options2: {
title: '某商店各商品年度销量',
bgColor: '#607d8b',
titleColor: '#ffffff',
legendColor: '#ffffff'
}
})
}
</script>
<style scoped>
.schart{
width: 600px;
display: inline-block;
}
.content-title{
clear: both;
font-weight: 400;
line-height: 50px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
</style>
\ No newline at end of file
vue-manage-system/src/components/page/BaseForm.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item>基本表单</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="form-box">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="表单名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="选择器">
<el-select v-model="form.region" placeholder="请选择">
<el-option key="bbk" label="步步高" value="bbk"></el-option>
<el-option key="xtc" label="小天才" value="xtc"></el-option>
<el-option key="imoo" label="imoo" value="imoo"></el-option>
</el-select>
</el-form-item>
<el-form-item label="日期时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="选择开关">
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="多选框">
<el-checkbox-group v-model="form.type">
<el-checkbox label="步步高" name="type"></el-checkbox>
<el-checkbox label="小天才" name="type"></el-checkbox>
<el-checkbox label="imoo" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="单选框">
<el-radio-group v-model="form.resource">
<el-radio label="步步高"></el-radio>
<el-radio label="小天才"></el-radio>
<el-radio label="imoo"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="文本框">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data: function(){
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: true,
type: ['步步高'],
resource: '小天才',
desc: ''
}
}
},
methods: {
onSubmit() {
this.$message.success('提交成功！');
}
}
}
</script>
\ No newline at end of file
vue-manage-system/src/components/page/CreateQuestion.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<div class="question-wrap">
<div class="bind-info" v-if="isUpdate">
<h4 style="padding-bottom: 15px;">已绑定培训考试</h4>
<div class="bind-items">
<div class="bind-item" v-for="(item, i) in bindItems">
{{i + 1 + '. ' + item.responsible_user}}
</div>
<div v-if="!bindItems.length" class="empty">暂无数据</div>
</div>
</div>
<el-row class="search-wrap">
<el-col :span="4" class="name-label">
题库名称
</el-col>
<el-col :span="10">
<el-input v-model="name" placeholder="请输入题库名称"></el-input>
</el-col>
</el-row>
<el-row class="search-wrap" style="padding: 25px 0px 15px 0px;">
<el-col :span="4" class="name-label">
导入题库
</el-col>
<el-col :span="20">
<vue-xlsx-table @on-select-file="handleSelectedFile">选择导入</vue-xlsx-table>
</el-col>
</el-row>
<h4 style="padding-bottom: 15px;">预览题库</h4>
<div class="preview-wrap">
<h4 class="title" v-if="data.length" style="text-align: center">
{{name}} 题库
</h4>
<div class="question-wrap" v-for="(item, index) in data">
<div class="desc">
{{index + 1}}. {{item['title']}}
</div>
<div class="option">
A. {{item['choice_d']}}
</div>
<div class="option">
B. {{item['choice_d']}}
</div>
<div class="option">
C. {{item['choice_c']}}
</div>
<div class="option">
D. {{item['choice_d']}}
</div>
</div>
<div v-if="!data.length" class="empty">暂无数据</div>
</div>
<div class="tool">
<el-button @click="submit" type="primary">确定</el-button>
<el-button @click="cancel">取消</el-button>
</div>
</div>
</template>
<style scoped>
.bind-info {
padding-bottom: 20px;
}
.bind-items {
max-height: 100px;
overflow-y: auto;
border: 1px solid rgba(85, 85, 85, .5);
padding: 20px;
max-width: 1000px;
min-width: 500px;
}
.bind-item {
font-size: 14px;
line-height: 28px;
}
.tool-wrap {
padding: 15px 0;
}
.name-label {
line-height: 2.3;
}
.search {
margin-left: 15px;
}
.search-wrap {
width: 600px;
}
.preview-wrap {
border: 1px solid rgba(85, 85, 85, .5);
padding: 20px;
max-width: 1000px;
min-width: 500px;
max-height: 500px;
overflow-y: auto;
}
.option {
padding-left: 15px;
line-height: 24px;
}
.question-wrap {
margin-top: 20px;
}
.empty {
text-align: center;
}
.desc {
padding-bottom: 10px;
}
.tool {
padding-top: 30px;
padding-left: 353px;
}
</style>
<script>
import fetch from '../../common/fetch';
export default {
data(){
return {
name: '',
data: [],
isUpdate: false,
bindItems: [],
imported: false,
submitted: false
}
},
created() {
this.getDetail()
},
methods: {
getDetail() {
let id = this.$route.query.id
if(id) {
this.isUpdate = true
let para = {
token: localStorage.getItem("token"),
id: id
}
fetch('eagleQuestionCategorys/search', para, 'GET', 'GET').then(data => {
this.bindItems = data.eagleTrainings
this.data = data.eagleSingleSelRepos
this.name = data.eagleQuestionCategoryModel.name
});
}
},
validateFile(head) {
if(head[0].indexOf('题目') == -1) {
return false
}
if(head[1].indexOf('答案') == -1 || head[2].indexOf('答案') == -1 ||head[3].indexOf('答案') == -1
||head[4].indexOf('答案') == -1 ||head[5].indexOf('答案') == -1) {
return false
}
return true
},
handleSelectedFile (convertedData) {
if(!this.validateFile(convertedData.header)) {
this.$message.error('请选择正确的EXCEL文件');
return
}
this.imported = true
let head = convertedData.header
let body = convertedData.body
let data = this.data = []
body.forEach(item => {
data.push({
title: item[head[0]],
choice_a: item[head[1]],
choice_b: item[head[2]],
choice_c: item[head[3]],
choice_d: item[head[4]],
answer: item[head[5]]
})
})
},
cancel() {
this.$router.back()
},
submit() {
if(this.submitted) {
return
} else if(!this.name) {
this.$message.error('请输入题库名称');
return
} else if(!this.data.length) {
this.$message.error('请选择文件');
return
}
let para = {
importQuestion: this.imported,
eagleQuestionCategory: {
id: this.$route.query.id,
name: this.name
},
eagleSingleSelRepos: this.data,
token: localStorage.getItem("token")
}
const loading = this.$loading({
lock: true,
target: '#bodyContent',
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.3)'
});
let self = this
fetch('eagleQuestionCategorys/insert', para, 'POST', 'POST').then(data => {
loading.close();
this.submitted = true
this.$message({
message: self.isUpdate ? '编辑成功' : '添加成功',
type: 'success',
duration: 1000,
onClose() {
self.cancel()
}
});
});
}
}
}
</script>
vue-manage-system/src/components/page/DragList.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<section class="main">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-upload2"></i> 拖拽排序</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="drag-box-left">
<div class="drag-title">拖动排序</div>
<div class="drag-list" draggable="true"
v-for="list in data1"
:data-id="list.id"
@dragstart="dragstartEvent"
@dragend="dragendEvent"
@dragenter="dragenterEvent"
@dragleave="dragleaveEvent"
@dragover="dragoverEvent"
>{{list.title}}</div>
</div>
</section>
</template>
<script>
export default {
data() {
return {
dragElement: null,
lock: true,
data1: [
{id: 1, title: '这里是列表1的标题'},
{id: 2, title: '这里是列表2的标题'},
{id: 3, title: '这里是列表3的标题'},
{id: 4, title: '这里是列表4的标题'},
{id: 5, title: '这里是列表5的标题'},
{id: 6, title: '这里是列表6的标题'},
{id: 7, title: '这里是列表7的标题'}
],
data2: [
{id: 1, title: '这里是列表11的标题'},
{id: 2, title: '这里是列表12的标题'},
{id: 3, title: '这里是列表13的标题'},
{id: 4, title: '这里是列表14的标题'}
]
}
},
methods: {
dragstartEvent(ev) {
const self = this;
self.dragElement = ev.target;
ev.target.style.backgroundColor = '#f8f8f8';
},
dragendEvent(ev) {
ev.target.style.backgroundColor = '#fff';
ev.preventDefault();
},
dragenterEvent(ev) {
const self = this;
if(self.dragElement != ev.target){
ev.target.parentNode.insertBefore(self.dragElement, ev.target);
}
},
dragleaveEvent(ev) {
const self = this;
if(self.dragElement != ev.target){
if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
ev.target.parentNode.appendChild(self.dragElement);
self.lock = false;
}else{
self.lock = true;
}
}
},
dragoverEvent(ev) {
ev.preventDefault();
}
}
}
</script>
<style scoped>
.drag-box-left{
float: left;
width: 45%;
}
.drag-box-right{
float: right;
width: 45%;
}
.drag-list{
border: 1px solid #ddd;
padding:10px;
margin-bottom: 20px;
transition: border .3s;
}
.drag-list:hover{
border: 1px solid #20a0ff;
}
.drag-title{
font-weight: 400;
line-height: 25px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
</style>
\ No newline at end of file
vue-manage-system/src/components/page/EagleQuestion.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<div class="question-wrap">
<el-row class="search-wrap">
<el-col :span="4" class="name-label">
题库名称
</el-col>
<el-col :span="10">
<el-input v-model="searchValue" placeholder="单行输入"></el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="search()" class="search"><i class="el-icon-search"></i>&nbsp;搜索</el-button>
</el-col>
</el-row>
<el-row class="tool-wrap">
<el-col :span="12" style="font-size: 14px;line-height: 39px;">
<span style="margin-right: 20px;">下载题库模板</span>
<a href="javascript:" @click="download">雄鹰考试题库.excel</a>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-button type="primary" @click="create">新建</el-button>
</el-col>
</el-row>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="题库名称">
</el-table-column>
<el-table-column
width="200"
prop="upload_time"
label="题库上传时间">
</el-table-column>
<el-table-column
prop="uploader"
label="上传人员">
</el-table-column>
<el-table-column
width="130"
prop="bindDisplay"
label="题库状态">
<template slot-scope="scope">
<el-tag
:type="scope.row.bindDisplay === '未绑定' ? 'primary' : 'success'"
close-transition>{{scope.row.bindDisplay}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="update(scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="deleteItem(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNo"
:page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000,1500, 2000]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows">
</el-pagination>
</div>
</div>
</template>
<style scoped>
.binded {
color: #67c23a;
}
.unBinded {
color: #e6a23c;
}
.tool-wrap {
padding: 15px 0;
}
.name-label {
line-height: 2.3;
}
.search {
margin-left: 15px;
}
.search-wrap {
width: 600px;
}
</style>
<script>
import fetch from '../../common/fetch';
export default {
data(){
return {
tableData: [],
pageNo: 1,
pageSize: 15,
totalRows: 0,
searchValue: ''
}
},
created() {
this.search()
},
methods: {
format(data) {
data.forEach( item => {
item.bindDisplay = item.binding_status == 1 ? '已绑定' : '未绑定'
})
return data
},
search(callback) {
const loading = this.$loading({
lock: true,
target: '#bodyContent',
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.3)'
});
fetch('eagleQuestionCategorys/list', {
token: localStorage.getItem("token"),
name: this.searchValue,
pageSize: this.pageSize,
pageNo: this.pageNo
}, 'GET', 'GET').then(data => {
loading.close()
this.tableData = this.format(data.pdModelList)
this.totalRows = data.totalRows
callback && callback()
});
},
handleSizeChange(size) {
this.pageSize = size
this.search()
},
handleCurrentChange(no) {
this.pageNo = no
this.search()
},
create() {
this.$router.push({
path: 'create-question'
})
},
update(row) {
this.$router.push({
path: 'create-question',
query: {
id: row.id
}
})
},
deleteItem(row) {
if(row.binding_status == 1) {
this.$message.error('已绑定人员的情况下不允许删除');
return
}
this.$confirm('确定删除此题库', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
target: '#bodyContent',
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.3)'
});
let para = {
token: localStorage.getItem("token"),
id: row.id
}
fetch('eagleQuestionCategorys/delete', para, 'DELETE', 'DELETE').then(data => {
this.search( () => {
loading.close();
this.$message({
message: '删除成功',
type: 'success',
duration: 1000
});
})
});
})
},
download() {
window.location.href = localStorage.getItem('template_url') + '/File/template/雄鹰考试题库模板.xslx'
}
}
}
</script>
vue-manage-system/src/components/page/EagleTraining.vue
浏览文件 @ 600eb2cd
<template>
<div class="table">
<el-row :gutter="10">
<el-col :span="2" class="padding-top-10"><label>活动状态</label></el-col>
<el-col :span="2" class="padding-top-10"><label>考试列表</label></el-col>
<el-col :span="4">
<div class="grid-content bg-purple">
<el-input v-model="eagleTraining.name"></el-input>
......@@ -25,25 +25,30 @@
<el-button type="primary" icon="search" @click="search">搜索</el-button>
</el-col>
<el-col :span="2">
<el-button type="primary" icon="edit" @click="addEagleTraining">新增</el-button>
<el-button type="primary" icon="edit" @click="addEagleTraining">新增考试</el-button>
</el-col>
</el-row>
<el-table :data="tableData" stripe border style="width: 100%" ref="multipleTable">
<!--<el-table-column type="selection" width="55"></el-table-column>-->
<el-table-column prop="name" label="培训名称" :show-overflow-tooltip="tooltip" width="130">
<el-table-column prop="name" label="序号" :show-overflow-tooltip="tooltip" width="130">
</el-table-column>
<el-table-column label="培训时间段" min-width="230">
<el-table-column label="考试名称" min-width="230">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.start_time | dateFormat }} ~ {{ scope.row.end_time | dateFormat }}</span>
</template>
</el-table-column>
<el-table-column prop="test_user" label="考试人员" :show-overflow-tooltip="tooltip" min-width="170">
<el-table-column prop="test_user" label="时间限制" :show-overflow-tooltip="tooltip" min-width="170">
</el-table-column>
<el-table-column prop="responsible_user" label="负责人" :show-overflow-tooltip="tooltip" min-width="100">
<el-table-column prop="responsible_user" label="通过标准" :show-overflow-tooltip="tooltip" min-width="100">
</el-table-column>
<el-table-column prop="created_time" label="生成时间" :show-overflow-tooltip="tooltip" min-width="150">
<el-table-column prop="created_time" label="字段要求" :show-overflow-tooltip="tooltip" min-width="150">
</el-table-column><el-table-column prop="created_time" label="允许考试次数" :show-overflow-tooltip="tooltip" min-width="150">
</el-table-column><el-table-column prop="created_time" label="考试开放时间" :show-overflow-tooltip="tooltip" min-width="150">
</el-table-column><el-table-column prop="created_time" label="答题规则" :show-overflow-tooltip="tooltip" min-width="150">
</el-table-column>
<el-table-column prop="status" label="发布状态" min-width="100">
<el-table-column prop="created_time" label="发布结果" :show-overflow-tooltip="tooltip" min-width="150">
</el-table-column>
<el-table-column prop="status" label="状态" min-width="100">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.status | statusFilter }}</span>
<!--<el-select v-model="scope.row.status" class="handle-select mr10">-->
......@@ -58,19 +63,11 @@
</el-table-column>
<el-table-column label="操作" min-width="200">
<template scope="scope">
<el-button size="small" @click="updateEagleTraining(scope.$index, scope.row,'form')">刷新题目</el-button>
<el-button size="small" @click="updateEagleTraining(scope.$index, scope.row,'form')">管理试卷</el-button>
<el-button size="small" @click="updateEagleTraining(scope.$index, scope.row,'form')">编辑</el-button>
<el-button size="small" v-show="scope.row.status == 1" @click="updateStatus(scope.row)">暂停/发布</el-button>
<el-button size="small" v-show="scope.row.status == 1" @click="updateStatus(scope.row)">发布</el-button>
<el-button size="small" v-show="scope.row.status == 2" @click="updateStatus(scope.row)">下架</el-button>
<el-button size="small" type="danger" @click="deleteEagleTraining(scope.row)">删除</el-button>
<!--<el-button size="small" @click="viewActivityResult(scope.row)">查看结果</el-button>-->
<!--<el-button size="small" type="danger"-->
<!--@click="handleDelete(scope.$index, scope.row)">发布</el-button>-->
<!--<el-button size="small" type="danger"-->
<!--@click="handleDelete(scope.$index, scope.row)">关闭</el-button>-->
<!--<el-button size="small" type="danger"-->
<!--<el-button size="small" type="danger" @click="editActive(scope.$index, scope.row)">配置</el-button>-->
<!--<router-link :to="{ path: 'editActive', query: { id: '11' }}">配置活动</router-link>-->
<!--@click="handleDelete(scope.$index, scope.row)">查看活动结果</el-button>-->
</template>
</el-table-column>
</el-table>
......
vue-manage-system/src/components/page/ListLabel.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<div class="table">
<el-row :gutter="10">
<el-col :span="2" class="padding-top-10">新建标签</el-col>
<el-col :span="4">
<el-input v-model="labelForm.label" placeholder="输入标签"></el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="submitForm('labelForm')">添加</el-button>
</el-col>
</el-row>
</br>
</br>
<div>
<el-tag style="width:200px;height: 40px;padding: 10px;margin: 10px;background-color: #13CE66;"
v-for="tag in tableData"
:key="tag.id"
:type="primary"
:gutter="30"
:size="medium"
:color="blue">
{{tag.label}}
</el-tag>
</div>
</div>
</template>
<script>
import fetch from '../../common/fetch';
import {isEmptyUtils} from '../../common/utils';
export default {
data: function(){
return {
labelForm: {},
tableData:[]
}
},
created() {
let self = this;
self.getData();
},
methods: {
submitForm() {
let self = this;
if(isEmptyUtils(self.labelForm) || isEmptyUtils(self.labelForm.label)) {
self.$message.error('标签为空不能添加');
return;
}
fetch('label/addActivityLabel', {
token: localStorage.getItem("token"),
data: self.labelForm
}, 'PUT', 'PUT').then(function (data) {
if(data.code =='ok') {
self.getData();
}else {
self.$message.error(data.msg);
}
});
},
getData() {
let self = this;
let promise = fetch('label/queryLabelList', {
token: localStorage.getItem("token"),
type:1
}, 'GET', 'GET')
promise.then(function (data) {
self.tableData = data.list;
}, function (error) {
});
}
}
}
</script>
<style scoped>
</style>
vue-manage-system/src/components/page/Login.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<div class="login-wrap">
<div class="ms-title">后台管理系统</div>
<div class="ms-login">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
</div>
<p style="font-size:12px;line-height:30px;color:#999;">Tips : 用户名和密码随便填。</p>
</el-form>
</div>
</div>
</template>
<script>
export default {
data: function(){
return {
ruleForm: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
submitForm(formName) {
const self = this;
self.$refs[formName].validate((valid) => {
if (valid) {
localStorage.setItem('ms_username',self.ruleForm.username);
self.$router.push('/readme');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>
<style scoped>
.login-wrap{
position: relative;
width:100%;
height:100%;
}
.ms-title{
position: absolute;
top:50%;
width:100%;
margin-top: -230px;
text-align: center;
font-size:30px;
color: #fff;
}
.ms-login{
position: absolute;
left:50%;
top:50%;
width:300px;
height:160px;
margin:-150px 0 0 -190px;
padding:40px;
border-radius: 5px;
background: #fff;
}
.login-btn{
text-align: center;
}
.login-btn button{
width:100%;
height:36px;
}
</style>
\ No newline at end of file
vue-manage-system/src/components/page/Markdown.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item>markdown</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="plugins-tips">
Vue-SimpleMDE：Vue.js的Markdown Editor组件。
访问地址：<a href="https://github.com/F-loat/vue-simplemde" target="_blank">Vue-SimpleMDE</a>
</div>
<markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
<div class="plugins-tips">
<p>既然用了markdown语法了，那么就有一个很实际的问题了。要怎么在前台展示数据呢？</p>
<br>
<p>这个时候就需要解析markdown语法了。可以使用 <a href="https://github.com/miaolz123/vue-markdown" target="_blank">vue-markdown</a>：一个基于vue.js的markdown语法解析插件。（这里不作展开，有需要自行了解）</p>
</div>
</div>
</template>
<script>
import { markdownEditor } from 'vue-simplemde';
export default {
data: function(){
return {
content:'',
configs: {
status: true,
initialValue: 'Hello BBK',
renderingConfig: {
codeSyntaxHighlighting: true,
highlightingTheme: 'atom-one-light'
}
}
}
},
components: {
markdownEditor
}
}
</script>
\ No newline at end of file
vue-manage-system/src/components/page/OldCharts.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
<el-breadcrumb-item>基础图表</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="plugins-tips">
vue-echarts-v3：基于vue2和eCharts.js3的图表组件。
访问地址：<a href="https://github.com/xlsdg/vue-echarts-v3" target="_blank">vue-echarts-v3</a>
</div>
<div class="content-title">基础图表</div>
<div class="echarts">
<IEcharts :option="line" ></IEcharts>
</div>
<div class="echarts">
<IEcharts :option="bar" ></IEcharts>
</div>
<div class="echarts">
<IEcharts :option="pie" ></IEcharts>
</div>
<div class="echarts">
<IEcharts :option="pie_radius" ></IEcharts>
</div>
<div class="content-title">混合图表</div>
<div class="mix-echarts">
<IEcharts :option="mix" ></IEcharts>
</div>
<v-schart canvasId="canvas" width="500" height="400" :data="data" type="bar"></v-schart>
</div>
</template>
<script>
// import IEcharts from 'vue-echarts-v3';
import vSchart from 'vue-schart';
import IEcharts from 'vue-echarts-v3/src/lite.vue';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
export default {
components: {
IEcharts,vSchart
},
data: () => ({
data:[
{name:'2012',value:1141},
{name:'2013',value:1499},
{name:'2014',value:2260},
{name:'2015',value:1170},
{name:'2016',value:970},
{name:'2017',value:1450}
],
line: {
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949"],
title: {
text: '曲线图'
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis:{},
series: [
{
name: "销量",
type: "line",
data: [5, 20, 36, 10, 10, 20]
}
]
},
bar: {
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949"],
title: {
text: '柱状图'
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis:{},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
},
pie: {
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
title : {
text: '饼状图',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋"]
},
series : [
{
name: '销量',
type: 'pie',
radius : '55%',
center: ['50%', '50%'],
data:[
{value:335, name:'衬衫'},
{value:310, name:'羊毛衫'},
{value:234, name:'雪纺衫'},
{value:135, name:'裤子'},
{value:548, name:'高跟鞋'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
},
pie_radius:{
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
title : {
text: '环形图',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋"]
},
series : [
{
name: '销量',
type: 'pie',
radius : ['40%','60%'],
data:[
{value:335, name:'衬衫'},
{value:310, name:'羊毛衫'},
{value:234, name:'雪纺衫'},
{value:135, name:'裤子'},
{value:548, name:'高跟鞋'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
},
mix:{
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
legend: {
data:['步步高','小天才','imoo']
},
xAxis: {
data: ['周一','周二','周三','周四','周五','周末']
},
yAxis:{},
series: [
{
name: "步步高",
type: "line",
data: [15, 20, 26, 30, 40, 27]
},
{
name: "小天才",
type: "bar",
data: [5, 30, 36, 10, 34, 20]
},
{
name: "imoo",
type: "bar",
data: [35, 40, 30, 50, 60, 40]
}
]
}
})
}
</script>
<style scoped>
.echarts {
float: left;
width: 500px;
height: 400px;
}
.content-title{
clear: both;
font-weight: 400;
line-height: 50px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
.mix-echarts{
width:900px;
height:600px;
}
</style>
\ No newline at end of file
vue-manage-system/src/components/page/Readme.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<div>
<div>
<h2>欢迎来到医典系统!</h2>
</div>
</div>
</template>
<script>
export default {
data: function(){
return {}
}
}
</script>
<style scoped>
</style>
vue-manage-system/src/components/page/Upload.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item>图片上传</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="content-title">支持拖拽</div>
<div class="plugins-tips">
Element UI自带上传组件。
访问地址：<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
</div>
<el-upload
class="upload-demo"
drag
action="/api/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<div class="content-title">支持裁剪</div>
<div class="plugins-tips">
Vue-Core-Image-Upload：一款轻量级的vue上传插件，支持裁剪。
访问地址：<a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank">Vue-Core-Image-Upload</a>
</div>
<img class="pre-img" :src="src" alt="">
<vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
:crop="true"
text="上传图片"
url="/api/posts/"
extensions="png,gif,jpeg,jpg"
@:imageuploaded="imageuploaded"
@:errorhandle="handleError"></vue-core-image-upload>
</div>
</template>
<script>
import VueCoreImageUpload from 'vue-core-image-upload';
export default {
data: function(){
return {
src: './static/img/img.jpg',
fileList: []
}
},
components: {
VueCoreImageUpload
},
methods:{
imageuploaded(res) {
console.log(res)
},
handleError(){
this.$notify.error({
title: '上传失败',
message: '图片上传接口上传失败，可更改为自己的服务器接口'
});
}
}
}
</script>
<style scoped>
.content-title{
font-weight: 400;
line-height: 50px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
.pre-img{
width:250px;
height: 250px;
margin-bottom: 20px;
}
</style>
\ No newline at end of file
vue-manage-system/src/components/page/VueEditor.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item>编辑器</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="plugins-tips">
Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。
访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
</div>
<quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
<el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor';
export default {
data: function(){
return {
content: '<p>Hello BBK</p>',
editorOption: {
// something config
}
}
},
components: {
quillEditor
},
methods: {
onEditorChange({ editor, html, text }) {
this.content = html;
},
submit(){
console.log(this.content);
this.$message.success('提交成功！');
}
},
computed: {
editor() {
return this.$refs.myTextEditor.quillEditor;
}
}
}
</script>
<style scoped>
.editor-btn{
margin-top: 20px;
}
</style>
\ No newline at end of file
vue-manage-system/src/components/page/VueTable.vue 已删除 100644 → 0
浏览文件 @ 74286733
<template>
<div class="table">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
<el-breadcrumb-item>Vue表格组件</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="plugins-tips">
vue-datasource：一个用于动态创建表格的vue.js服务端组件。
访问地址：<a href="https://github.com/coderdiaz/vue-datasource" target="_blank">vue-datasource</a>
</div>
<datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination"
:actions="actions"
:change="changePage"
:searching="onSearch"></datasource>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-success="handleSuccess"
:on-change="handleChange"
:on-error="handleError"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
</template>
<script>
import axios from 'axios';
import Datasource from 'vue-datasource';
export default {
data: function(){
const self = this;
return {
url: './static/datasource.json',
information: {
pagination:{},
data:[],
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
},
columns: [
{
name: 'Id',
key: 'id',
},
{
name: 'Name',
key: 'name',
},
{
name: 'email',
key: 'email',
},
{
name: 'ip',
key: 'ip',
}
],
actions: [
{
text: 'Click',
class: 'btn-primary',
event(e, row) {
self.$message('选中的行数： ' + row.row.id);
}
}
],
query:''
}
},
components: {
Datasource
},
methods: {
changePage(values) {
this.information.pagination.per_page = values.perpage;
this.information.data = this.information.data;
},
onSearch(searchQuery) {
this.query = searchQuery;
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
handleSuccess(response, file, fileList) {
debugger
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
handleChange(file, fileList) {
console.log("handleChange");
debugger;
console.log("handleChange");
},
handleError(file, fileList) {
console.log("error");
debugger;
console.log("handleChange");
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
}
},
computed:{
getData(){
const self = this;
return self.information.data.filter(function (d) {
if(d.name.indexOf(self.query) > -1){
return d;
}
})
}
},
beforeMount(){
if(process.env.NODE_ENV === 'development'){
this.url = '/ms/table/source';
};
axios.get(this.url).then( (res) => {
this.information = res.data;
})
}
}
</script>
<style src="../../../static/css/datasource.css"></style>
vue-manage-system/src/router/index.js
浏览文件 @ 600eb2cd
......@@ -19,18 +19,15 @@ export default new Router({
path: '/',
redirect: 'eagle-training'
},
{
path: 'eagle-question',
component: resolve => require(['../components/page/EagleQuestion.vue'], resolve)
},
{
path: 'create-question',
component: resolve => require(['../components/page/CreateQuestion.vue'], resolve)
},
{
path: 'eagle-training',
component: resolve => require(['../components/page/EagleTraining.vue'], resolve)
},
{
path: 'editActive',
component: resolve => require(['../components/page/EditActive.vue'], resolve)
}
]
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或