Skip to content

A
admin-base
Commit 081199f3 authored by wangwei's avatar wangwei
Browse files
Options

页面编写

parent a1d8fc0c
Hide whitespace changes
Inline Side-by-side
Showing with 533 additions and 125 deletions
index.html
View file @ 081199f3
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_746649_4ncxt4ojup6.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_746649_qg8dujb9rl.css">
<title>singsing-new-admin</title>
</head>
<body>
......
src/components/entity/index.vue 0 → 100644
View file @ 081199f3
<template>
<el-container>
<el-aside width="250px">
<el-menu
:default-active="index">
<el-submenu v-for="data in leftList" :key="data.id" :index="data.name">
<template slot="title">
<span>{{data.name}}({{data.children | lengthNum}})
</span>
</template>
<el-submenu class="list2" :index="item.name" v-for="item in data.children" :key="item.id">
<span slot="title">
{{item.name}}
</span>
<div @click="chooseId(i)" v-for="i in item.children" :key="i.name">
<el-menu-item class="list3" :index="i.name">
{{i.name}}
</el-menu-item>
</div>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<that-list :id="id"></that-list>
</el-main>
</el-container>
</template>
<script>
import {getEntityMenuApi,sortCategoryApi} from "../../service/api";
import thatList from './list'
export default {
data(){
return {
leftList:[],
index:'',
id:''
}
},
components:{
thatList
},
filters:{
lengthNum:function (value) {
if(value){
return value.length
}else{
return '0'
}
}
},
methods:{
getList(){
getEntityMenuApi('').then(res=>{
this.leftList = res;
this.$store.commit('mainCanShow')
})
},
upIndex(data,item){
let i = item.indexOf(data);
if(i>0){
let json = {
category_up_id : data.id ,
category_down_id : item[i-1].id
};
sortCategoryApi(json).then(res=>{
this.getList()
})
}
},
downIndex(data,item){
let i = item.indexOf(data);
let lth=item.length - 1;
if(i < lth){
let json = {
category_up_id :item[i+1].id,
category_down_id:data.id
};
sortCategoryApi(json).then(res=>{
this.getList()
})
}
},
editIndex(data){
alert(21)
},
delIndex(data){
alert(21)
},
chooseId(data){
this.id = data.id
console.log(this.id)
}
},
mounted(){
this.getList()
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.el-container{
height: 100%;
.el-menu{
height: 100%;
.el-submenu{
.btn-block{
margin-left: 10px;
transition: all 1s;
display: none;
i{
color: #aaaaaa;
font-size: 14px;
&:hover{
color: #3a8ee6;
}
}
}
.list2:hover .list2-btn{
display: inline-block;
}
.list3:hover .list3-btn{
display: inline-block;
}
}
}
}
</style>
src/components/entity/list.vue 0 → 100644
View file @ 081199f3
<template>
<div>
<div class="add-block">
<el-button class="add-btn">+新增课时</el-button>
</div>
<el-card v-for="data in list" :key="data.id" class="box-card">
<div class="id">
<img :src="data.cover">
</div>
<div class="btn">
<el-button
type=""
icon="el-icon-arrow-down"
circle size="mini"
@click="downLesson()">
</el-button>
<el-button
type=""
icon="el-icon-arrow-up"
circle size="mini"
@click="upLesson()">
</el-button>
<el-button
type=""
icon="el-icon-edit"
circle size="mini"
@click="editLesson()">
</el-button>
<el-button
type=""
icon="el-icon-delete"
circle size="mini"
@click="delLseeon()">
</el-button>
</div>
<div class="name">
{{data.title}}
<el-tag size="mini">level{{data.min_level}}-level{{data.max_level}}</el-tag>
<el-tag type="success" size="mini">{{data.min_age}}-{{data.max_age}}岁</el-tag>
</div>
</el-card>
</div>
</template>
<script>
import {getEntityApi} from "../../service/api";
export default {
name: "list",
props:[
'id'
],
data(){
return {
list:[]
}
},
created(){
if(this.id !== '' && this.id !== null)this.getList()
},
methods:{
getList(){
console.log(this.id);
getEntityApi(this.id).then(res=>{
this.list = res.list
})
},
delLseeon(){
},
},
watch:{
id(value){
if(value !== '' && value !== null)this.getList()
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.box-card{
margin: 10px 0;
cursor: pointer;
padding: 0;
&:hover{
background: #3a8ee6;
color: white;
}
.id{
margin-right: 20px;
width: 4em;
text-align: center;
float: left;
img{
width: 100%;
}
}
.btn{
float: right;
}
.name{
span{
display: inline-block;
text-align: center;
}
}
}
.add-block{
.clear-both;
.add-btn{
float: right;
}
}
</style>
src/components/framework/index.vue
View file @ 081199f3
......@@ -12,7 +12,7 @@
<div class="router-block">
<transition name="el-fade-in-linear">
<keep-alive>
<router-view class="child-view"/>
<router-view class="child-view" v-loading="$store.state.mainLoad"/>
</keep-alive>
</transition>
</div>
......@@ -37,16 +37,6 @@
menuType() {
return this.$store.state.menuType;
}
},
watch:{
'menuType':function (value) {
console.log(value)
if(value){
this.asideWidth = '68px'
}else{
this.asideWidth = '200px'
}
}
}
}
</script>
......
src/components/framework/tab.vue
View file @ 081199f3
<template>
<div class="tab">
<div :class="{'li-parent':true,light:data.routerName === $store.state.nowTab}" :key="data.routerName" v-for="data in tabList">
<div :class="{'li-parent':true,light:data.name === $store.state.nowTab}" :key="data.routerName" v-for="data in tabList">
<div class="tab-li" @click="toPath(data.routerName)">
{{data.value}}
</div>
......
src/components/resources/index.vue
View file @ 081199f3
......@@ -8,21 +8,27 @@
<span>{{data.name}}({{data.children | lengthNum}})
</span>
</template>
<el-submenu :index="item.name" v-for="item in data.children" :key="item.id">
<el-submenu class="list2" :index="item.name" v-for="item in data.children" :key="item.id">
<span slot="title">
{{item.name}}
<i class="iconfont icon-shangyi"></i>
<i class="iconfont icon-xiayi"></i>
<i class="iconfont icon-bianji"></i>
<i class="iconfont icon-shanchu"></i>
<div class="btn-block list2-btn">
<i class="iconfont icon-shangyi"></i>
<i class="iconfont icon-xiayi"></i>
<i class="iconfont icon-bianji"></i>
<i class="iconfont icon-shanchu"></i>
</div>
</span>
<el-menu-item :index="i.name" v-for="i in item.children">
{{i.name}}
<i class="iconfont icon-shangyi"></i>
<i class="iconfont icon-xiayi"></i>
<i class="iconfont icon-bianji"></i>
<i class="iconfont icon-shanchu"></i>
</el-menu-item>
<div @click="chooseId(i)" v-for="i in item.children" :key="i.name">
<el-menu-item class="list3" :index="i.name">
{{i.name}}
<div class="btn-block list3-btn">
<i class="iconfont icon-shangyi" @click="upIndex(i,item.children)"></i>
<i class="iconfont icon-xiayi" @click="downIndex(i,item.children)"></i>
<i class="iconfont icon-bianji" @click="editIndex(i,item.children)"></i>
<i class="iconfont icon-shanchu" @click="delIndex(i,item.children)"></i>
</div>
</el-menu-item>
</div>
</el-submenu>
</el-submenu>
</el-menu>
......@@ -34,7 +40,7 @@
</template>
<script>
import {getCategoryApi} from "../../service/api";
import {getCategoryApi,sortCategoryApi} from "../../service/api";
import thatList from './list'
export default {
data(){
......@@ -59,16 +65,50 @@
},
methods:{
getList(){
this.$store.commit('mainUnShow')
getCategoryApi('').then(res=>{
this.leftList = res;
if(this.id === ''){
this.id = res[0].children[0].id;
this.index = res[0].children[0].name
this.id = res[0].children[0].children[0].id;
this.index = res[0].children[0].children[0].name
}
this.$store.commit('mainCanShow')
})
},
upIndex(data,item){
let i = item.indexOf(data);
if(i>0){
let json = {
category_up_id : data.id ,
category_down_id : item[i-1].id
};
sortCategoryApi(json).then(res=>{
this.getList()
})
}
},
downIndex(data,item){
let i = item.indexOf(data);
let lth=item.length - 1;
if(i < lth){
let json = {
category_up_id :item[i+1].id,
category_down_id:data.id
};
sortCategoryApi(json).then(res=>{
this.getList()
})
}
},
editIndex(data){
alert(21)
},
delIndex(data){
alert(21)
},
chooseId(data){
this.id = data.id
console.log(this.id)
}
},
mounted(){
......@@ -83,6 +123,26 @@
height: 100%;
.el-menu{
height: 100%;
.el-submenu{
.btn-block{
margin-left: 10px;
transition: all 1s;
display: none;
i{
color: #aaaaaa;
font-size: 14px;
&:hover{
color: #3a8ee6;
}
}
}
.list2:hover .list2-btn{
display: inline-block;
}
.list3:hover .list3-btn{
display: inline-block;
}
}
}
}
</style>
src/components/resources/list.vue
View file @ 081199f3
......@@ -33,13 +33,17 @@
@click="delLseeon()">
</el-button>
</div>
<div class="name">{{data.name}}</div>
<div class="name">
{{data.title}}
<el-tag size="mini">level{{data.min_level}}-level{{data.max_level}}</el-tag>
<el-tag type="success" size="mini">{{data.min_age}}-{{data.max_age}}岁</el-tag>
</div>
</el-card>
</div>
</template>
<script>
import {getCategoryApi} from "../../service/api";
import {getCateListApi} from "../../service/api";
export default {
name: "list",
props:[
......@@ -55,7 +59,8 @@
},
methods:{
getList(){
getCategoryApi(this.id).then(res=>{
console.log(this.id)
getCateListApi(this.id).then(res=>{
this.list = res.list
})
},
......@@ -93,6 +98,13 @@
.btn{
float: right;
}
.name{
span{
display: inline-block;
text-align: center;
}
}
}
.add-block{
.clear-both;
......
src/components/system/admin.vue
View file @ 081199f3
......@@ -188,6 +188,7 @@
getAdminListApi().then(res=>{
this.adminList = res.list
this.total=Number(res.total)
this.$store.commit('mainCanShow')
})
},
editPW(data){
......
src/components/system/index.vue
View file @ 081199f3
......@@ -4,7 +4,7 @@
<el-menu
style="float: left;height: 100%"
:unique-opened="true"
:default-active="`admin`"
:default-active="menuIndex"
:collapse="menuType">
<div class="menu-btn" @click="menuType = !menuType">
<span v-if="!menuType">收起</span>
......@@ -30,9 +30,12 @@
return {
menuList:this.$store.state.menuList.find((a)=>{return a.name === 'system'}).children,
menuType:false,
menuIndex:'',
menuIndex:this.$route.name,
}
},
mounted(){
this.$store.commit('mainCanShow')
},
methods:{
//菜单跳转
toPath(data){
......@@ -41,12 +44,16 @@
this.$router.push({name:router})
}
},
//缓存为role则跳到role
activated(){
if(this.menuIndex === 'role'){
this.$router.push({name:'role'})
watch:{
$route(to){
let data = {
name:'system',
to:to
};
if(to.matched[1].name === 'system')this.$store.commit('changeParentRouter',data)
}
}
//缓存为role则跳到role
}
</script>
......
src/components/teacher/index.vue
View file @ 081199f3
......@@ -46,6 +46,7 @@
</template>
</el-table-column>
<el-table-column
width="250"
label="操作">
<template slot-scope="scope">
<el-button size="mini" plain type="primary" @click="detail(scope.row)">
......
src/components/textarea/editor.vue
View file @ 081199f3
<template>
<el-container>
<el-header height="80px">
<div class="head-top">
<el-button size="mini">
课程基本信息编辑
</el-button>
<el-button size="mini" type="primary">
课时设置
</el-button>
<span class="page-type">
分页模式
<el-switch
v-model="value2">
</el-switch>
</span>
</div>
<div class="head-content">
<div>
未命名页面
</div>
</div>
</el-header>
<el-container>
<el-aside width="200px">321</el-aside>
<el-main>123</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: "editor"
name: "editor",
data(){
return {
value2:''
}
}
}
</script>
<style scoped>
<style scoped lang="less">
.el-container{
background: white;
.el-header{
padding: 0;
.head-top{
background: #f5f8ff;
font-size: 14px;
color: #333333;
padding: 5px;
.page-type{
display: inline-block;
padding: 0 10px;
}
}
.head-content{
padding: 10px;
}
}
}
</style>
src/components/textarea/index.vue
View file @ 081199f3
<template>
<div class='tinymce'>
<div class="left">
<editor v-if="show" id='tinymce' v-model='tinymceHtml' :init='init'></editor>
</div>
<div class="right">
<div class="phone">
<div class="content" v-html='tinymceHtml'></div>
<el-container>
<el-aside class="left-block" width="140px">
<div class="list-title">
页面列表
</div>
</div>
</div>
<div class="page-list">
<div class="box">
</div>
<div class="title">未命名页面</div>
</div>
<div class="page-list-add">
<img :src="addUrl"/>
<div class="title">添加新页面</div>
</div>
</el-aside>
<el-main>
<editor/>
</el-main>
</el-container>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/media'
import {getAdminListApi} from "../../service/api";
import addUrl from '../../assets/editor/Group 7.png'
import editor from './editor'
export default {
name: 'tinymce',
data () {
return {
tinymceHtml: '请输入内容',
show:'',
init: {
language_url: '/static/tinymce/zh_CN.js',
language: 'zh_CN',
skin_url: '/static/tinymce/skins/lightgray',
height: 500,
plugins: 'preview media link lists image code table colorpicker textcolor wordcount contextmenu',
// toolbar:
// 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
branding: false
}
}
},
activated(){
this.show = true
getAdminListApi().then(res=>{
console.log(res)
})
},
deactivated(){
this.show = false
},
mounted () {
components:{
editor
},
created:function(){
tinymce.init({})
},
components: {Editor}
data(){
return{
addUrl:addUrl
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.tinymce{
.el-container{
height: 100%;
overflow: auto;
.clear-both;
&>div{
float: left;
width: 50%;
position: relative;
.phone{
background:url("../../assets/phone.png") no-repeat;
background-size: 100% 100%;
width: 600px;
height: 800px;
position: relative;
.content{
position: absolute;
top: 120px;
left: 135px;
right: 160px;
bottom: 135px;
overflow: auto;
.el-main{
padding: 10px;
background: #f5f8ff;
}
.left-block{
box-shadow: 1px 0 2px 0 #CCCCCC;
font-size: 14px;
color: #333333;
text-align: center;
.list-title{
padding: 5px;
}
.page-list{
padding: 10px 0;
.box{
height: 63px;
margin: auto;
width: 112px;
border: 1px solid #666666;
border-radius: 9px;
}
.title{
font-size: 12px;
text-align: center;
}
&-add{
cursor: pointer;
padding: 10px 0;
font-size: 12px;
color: #CCCCCC;
}
}
}
......
src/router/index.js
View file @ 081199f3
......@@ -13,6 +13,7 @@ import role from '@/components/system/role'
import user from '@/components/user'
import teacher from '@/components/teacher'
import lesson from '@/components/lesson'
import entity from '@/components/entity'
Vue.use(Router)
const router =new Router({
......@@ -39,6 +40,10 @@ const router =new Router({
path: '/resources',
name:'resources',
component: resources
},{
path: '/entity',
name:'entity',
component: entity
},{
path: '/lesson',
name:'lesson',
......@@ -84,6 +89,7 @@ router.beforeEach((to,from,next)=> {
// return;
// }
//获取cookie里的token
store.commit('mainUnShow')
if(Cookie.get('cc_token')){
store.dispatch('setToken',Cookie.get('cc_token'));
if(Cookie.get('cc_user_name') !== null){
......@@ -93,14 +99,11 @@ router.beforeEach((to,from,next)=> {
}
}
if(to.name !== 'first'){
let thisMenu = store.state.menuList.find((i)=>{return i.routerName === to.name});
if(to.name === 'role'){
store.state.nowTab = 'admin'
}else{
store.state.nowTab = to.name
}
let thisMenu = store.state.menuList.find((i)=>{return i.name === to.matched[1].name});
store.state.nowTab = to.matched[1].name
if(store.state.openedTab.indexOf(thisMenu) < 0){
store.state.openedTab.push(thisMenu);
console.log(store.state.openedTab)
}
}
// 登录拦截
......
src/service/api.js
View file @ 081199f3
......@@ -138,6 +138,27 @@ const delCategoryUrl = `${_baseUrl}api/admin/category`;
export const delCategoryApi = function (id) {
return Vue.prototype.$del(`${delCategoryUrl}/${id}`)
};
//元素排序修改
const sortCategoryUrl = `${_baseUrl}api/admin/category/sort`;
export const sortCategoryApi = function (json) {
return Vue.prototype.$patch(sortCategoryUrl,json)
};
//添加元素
const addElementUrl = `${_baseUrl}api/admin/element/add/`
//获取分类下的元素列表
const getCateDetailListUrl = `${_baseUrl}api/admin/element/list/0?category_id=`;
export const getCateListApi = function (id) {
return Vue.prototype.$fetch(`${getCateDetailListUrl}${id}`)
};
//获取实物列表
const getEntityUrl = `${_baseUrl}api/admin/element/list/2?category_id=`;
export const getEntityApi = function (id) {
return Vue.prototype.$fetch(`${getEntityUrl}${id}`)
};
//查询实物、菜单分类
const getEntityMenuUrl = `${_baseUrl}api/admin/category/list/1`;
export const getEntityMenuApi = function (pid) {
return Vue.prototype.$fetch(getEntityMenuUrl,{'pid':pid})
};
src/store/index.js
View file @ 081199f3
......@@ -10,6 +10,7 @@ export default new vuex.Store({
show:false,
userName:'',
token:'',
mainLoad:true,
menuList:menu,
menuType:false,
nowTab:'first',
......@@ -17,6 +18,7 @@ export default new vuex.Store({
{
value:'首页',
routerName:'first',
name:'first',
delNo:true,
routerPath:'/index'
}
......
src/store/mutations.js
View file @ 081199f3
......@@ -11,5 +11,14 @@ const mutations={
state.userName=userName;
Cookie.set('cc_user_name',userName);
},
mainCanShow(state){
state.mainLoad = false
},
mainUnShow(state){
state.mainLoad = true
},
changeParentRouter(state,data){
state.menuList.find((a)=>{return a.name === data.name}).routerName = data.to.name
}
};
export default mutations;
src/util/menuList.js
View file @ 081199f3
......@@ -35,6 +35,30 @@ export default [
id:6,
icon:'icon-laoshi',
routerName:'teacher',
},{
name:'teacher',
value:'商品',
id:6,
icon:'icon-shangpin1',
routerName:'teacher',
},{
name:'teacher',
value:'排期管理',
id:6,
icon:'icon-rili',
routerName:'teacher',
},{
name:'entity',
value:'实物管理',
id:6,
icon:'icon-shu',
routerName:'entity',
children:[{
name:'single',
value:'单品管理',
id:61,
}]
},{
name:'system',
value:'系统管理',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment