UP 1.1.2
This commit is contained in:
sakuya
parent
14fb16a90f
commit
03fe176d3d
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "SCUI-Admin",
|
"name": "SCUI-Admin",
|
||||||
"version": "1.1.1",
|
"version": "1.1.2",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"serve": "vue-cli-service serve",
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ const DEFAULT_CONFIG = {
|
||||||
APP_NAME: "SCUI",
|
APP_NAME: "SCUI",
|
||||||
|
|
||||||
//版本号
|
//版本号
|
||||||
APP_VER: "1.1.1",
|
APP_VER: "1.1.2",
|
||||||
|
|
||||||
//接口地址
|
//接口地址
|
||||||
API_URL: "",
|
API_URL: "",
|
||||||
|
|
@ -11,6 +11,12 @@ const DEFAULT_CONFIG = {
|
||||||
//MOCK接口地址
|
//MOCK接口地址
|
||||||
MOCK_URL: "https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api",
|
MOCK_URL: "https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api",
|
||||||
|
|
||||||
|
//布局 默认：default | 通栏：header
|
||||||
|
LAYOUT: 'default',
|
||||||
|
|
||||||
|
//菜单是否折叠
|
||||||
|
MENU_IS_COLLAPSE: false,
|
||||||
|
|
||||||
//是否开启多标签
|
//是否开启多标签
|
||||||
LAYOUT_TAGS: true,
|
LAYOUT_TAGS: true,
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,9 @@
|
||||||
<el-menu-item v-if="!navMenu.children" :index="navMenu.path">
|
<el-menu-item v-if="!navMenu.children" :index="navMenu.path">
|
||||||
<a v-if="navMenu.meta&&navMenu.meta.type=='link'" :href="navMenu.path" target="_blank" @click.stop='a'></a>
|
<a v-if="navMenu.meta&&navMenu.meta.type=='link'" :href="navMenu.path" target="_blank" @click.stop='a'></a>
|
||||||
<i v-if="navMenu.meta&&navMenu.meta.icon" :class="navMenu.meta.icon || 'el-icon-menu'"></i>
|
<i v-if="navMenu.meta&&navMenu.meta.icon" :class="navMenu.meta.icon || 'el-icon-menu'"></i>
|
||||||
|
<template #title>
|
||||||
<span>{{navMenu.meta.title}}</span>
|
<span>{{navMenu.meta.title}}</span>
|
||||||
|
</template>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
<el-submenu v-if="navMenu.children" :index="navMenu.path">
|
<el-submenu v-if="navMenu.children" :index="navMenu.path">
|
||||||
<template #title>
|
<template #title>
|
||||||
|
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="adminui-header">
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-breadcrumb separator-class="el-icon-arrow-right" class="hidden-sm-and-down">
|
|
||||||
<template v-for="(item) in breadList" v-bind:key="item" >
|
|
||||||
<el-breadcrumb-item v-if="item.path !='/'"><i v-if="item.meta&&item.meta.icon" :class="item.meta.icon || 'el-icon-menu'"></i>{{item.meta.title}}</el-breadcrumb-item>
|
|
||||||
</template>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="center-panel">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="right-panel">
|
|
||||||
<div class="screen panel-item hidden-sm-and-down" @click="screen">
|
|
||||||
<i class="el-icon-full-screen"></i>
|
|
||||||
</div>
|
|
||||||
<div class="setting panel-item hidden-sm-and-down">
|
|
||||||
<i class="el-icon-setting"></i>
|
|
||||||
</div>
|
|
||||||
<el-popover placement="bottom" :width="360" trigger="click">
|
|
||||||
<template #reference>
|
|
||||||
<div class="msg panel-item">
|
|
||||||
<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
|
|
||||||
<i class="el-icon-bell"></i>
|
|
||||||
</el-badge>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div>
|
|
||||||
<el-empty v-if="msgList.length==0" description="暂无新消息"></el-empty>
|
|
||||||
<div v-else class="msgList">
|
|
||||||
<header>
|
|
||||||
<label>通知</label>
|
|
||||||
<el-link :underline="false" href="javascript:void(0);" @click="markRead">全部标记已读</el-link>
|
|
||||||
</header>
|
|
||||||
<ul>
|
|
||||||
<el-scrollbar>
|
|
||||||
<li v-for="item in msgList" v-bind:key="item.id">
|
|
||||||
<a :href="item.link" target="_blank">
|
|
||||||
<h2>{{item.title}}</h2>
|
|
||||||
<p>{{item.describe}}</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</el-scrollbar>
|
|
||||||
</ul>
|
|
||||||
<footer><el-link :underline="false" href="https://gitee.com/lolicode/scui" target="_blank">前往通知中心</el-link></footer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
<el-dropdown trigger="click" @command="handleUser">
|
|
||||||
<div class="user panel-item">
|
|
||||||
<el-avatar :size="30">{{ userNameF }}</el-avatar>
|
|
||||||
<label>{{ userName }}<i class="el-icon-arrow-down el-icon--right"></i></label>
|
|
||||||
</div>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item command="uc">个人设置</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="cmd">CMD</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
breadList: [],
|
|
||||||
userName: "",
|
|
||||||
userNameF: "",
|
|
||||||
msgList: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: "关于版本发布的通知",
|
|
||||||
describe: "点进去Gitee获取最新开源版本",
|
|
||||||
link: "https://gitee.com/lolicode/scui"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: "感谢登录SCUI Admin",
|
|
||||||
describe: "Vue 3.0 + Vue-Router 4.0 + ElementPlus + Axios 后台管理系统。",
|
|
||||||
link: "https://gitee.com/lolicode/scui"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
var userInfo = this.$TOOL.data.get("user").userInfo;
|
|
||||||
this.userName = userInfo.userName;
|
|
||||||
this.userNameF = this.userName.substring(0,1);
|
|
||||||
this.getBreadcrumb();
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route() {
|
|
||||||
this.getBreadcrumb();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//个人信息
|
|
||||||
handleUser(command) {
|
|
||||||
if(command == "uc"){
|
|
||||||
this.$router.push({path: '/usercenter'});
|
|
||||||
}
|
|
||||||
if(command == "outLogin"){
|
|
||||||
this.$router.replace({path: '/login'});
|
|
||||||
}
|
|
||||||
if(command == "cmd"){
|
|
||||||
this.$router.push({path: '/cmd'});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getBreadcrumb(){
|
|
||||||
let matched = this.$route.matched;
|
|
||||||
this.breadList = matched;
|
|
||||||
},
|
|
||||||
//全屏
|
|
||||||
screen(){
|
|
||||||
var element = document.documentElement;
|
|
||||||
this.$TOOL.screen(element)
|
|
||||||
},
|
|
||||||
//标记已读
|
|
||||||
markRead(){
|
|
||||||
this.msgList = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<template>
|
||||||
|
<el-form ref="form" label-width="120px" label-position="left" style="padding:0 20px;">
|
||||||
|
<el-alert title="以下配置可实时预览，开发者可在 config/index.js 中配置默认值，非常不建议在生产环境下开放布局设置" type="error" :closable="false"></el-alert>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<el-form-item label="框架布局">
|
||||||
|
<el-select v-model="layout" placeholder="请选择">
|
||||||
|
<el-option label="默认" value="default"></el-option>
|
||||||
|
<el-option label="通栏" value="header"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="折叠菜单">
|
||||||
|
<el-switch v-model="menuIsCollapse"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="标签栏">
|
||||||
|
<el-switch v-model="layoutTags"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
layout: this.$store.state.global.layout,
|
||||||
|
menuIsCollapse: this.$store.state.global.menuIsCollapse,
|
||||||
|
layoutTags: this.$store.state.global.layoutTags,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
layout(val) {
|
||||||
|
this.$store.commit("SET_layout", val)
|
||||||
|
},
|
||||||
|
menuIsCollapse(){
|
||||||
|
this.$store.commit("TOGGLE_menuIsCollapse")
|
||||||
|
},
|
||||||
|
layoutTags(){
|
||||||
|
this.$store.commit("TOGGLE_layoutTags")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="aminui-side-split">
|
|
||||||
<div class="adminui-side-split-scroll">
|
|
||||||
<ul>
|
|
||||||
<li v-for="item in menu" v-bind:key="item" :class="pmenu.path==item.path?'active':''" @click="showMenu(item)">
|
|
||||||
<i :class="item.meta.icon || 'el-icon-menu'"></i>
|
|
||||||
<p>{{ item.meta.title }}</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="aminui-side">
|
|
||||||
<div class="adminui-side-top">
|
|
||||||
<h2>{{ pmenu.meta.title }}</h2>
|
|
||||||
</div>
|
|
||||||
<div class="adminui-side-scroll">
|
|
||||||
<el-menu :default-active="$route.fullPath" router>
|
|
||||||
<NavMenu :navMenus="nextMenu"></NavMenu>
|
|
||||||
</el-menu>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import NavMenu from './NavMenu.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
NavMenu
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
menu: [],
|
|
||||||
nextMenu: [],
|
|
||||||
pmenu: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created: function() {
|
|
||||||
var menu = this.$TOOL.data.get("user").menuList;
|
|
||||||
var home = this.$router.options.routes[0].children[0];
|
|
||||||
menu.unshift(home);
|
|
||||||
this.menu = this.filterUrl(menu);
|
|
||||||
this.showThis()
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route() {
|
|
||||||
this.showThis()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//路由监听高亮
|
|
||||||
showThis(){
|
|
||||||
var home = this.$router.options.routes[0].children[0];
|
|
||||||
this.pmenu = this.$route.matched[1] || home;
|
|
||||||
this.nextMenu = this.filterUrl(this.pmenu.children);
|
|
||||||
},
|
|
||||||
//点击显示
|
|
||||||
showMenu(route) {
|
|
||||||
this.pmenu = route;
|
|
||||||
this.nextMenu = this.filterUrl(route.children);
|
|
||||||
},
|
|
||||||
//转换外部链接的路由
|
|
||||||
filterUrl(map){
|
|
||||||
var newMap = []
|
|
||||||
map && map.forEach(item => {
|
|
||||||
item.meta = item.meta?item.meta:{};
|
|
||||||
//处理隐藏
|
|
||||||
if(item.meta.hidden){
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
//处理http
|
|
||||||
if(item.meta.type=='iframe'){
|
|
||||||
item.path = `/i/${item.name}`;
|
|
||||||
}
|
|
||||||
//递归循环
|
|
||||||
if(item.children&&item.children.length > 0){
|
|
||||||
this.filterUrl(item.children);
|
|
||||||
}
|
|
||||||
newMap.push(item)
|
|
||||||
})
|
|
||||||
return newMap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<template>
|
||||||
|
<div class="adminui-topbar">
|
||||||
|
<div class="left-panel">
|
||||||
|
<div class="menu-collapse hidden-sm-and-down" @click="$store.commit('TOGGLE_menuIsCollapse')">
|
||||||
|
<i class="el-icon-s-fold"></i>
|
||||||
|
</div>
|
||||||
|
<el-breadcrumb separator-class="el-icon-arrow-right" class="hidden-sm-and-down">
|
||||||
|
<template v-for="(item) in breadList" v-bind:key="item" >
|
||||||
|
<el-breadcrumb-item v-if="item.path !='/'">{{item.meta.title}}</el-breadcrumb-item>
|
||||||
|
</template>
|
||||||
|
</el-breadcrumb>
|
||||||
|
</div>
|
||||||
|
<div class="center-panel"></div>
|
||||||
|
<div class="right-panel">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
breadList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getBreadcrumb();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route() {
|
||||||
|
this.getBreadcrumb();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getBreadcrumb(){
|
||||||
|
let matched = this.$route.matched;
|
||||||
|
this.breadList = matched;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,121 @@
|
||||||
|
<template>
|
||||||
|
<div class="user-bar">
|
||||||
|
<div class="screen panel-item hidden-sm-and-down" @click="screen">
|
||||||
|
<i class="el-icon-full-screen"></i>
|
||||||
|
</div>
|
||||||
|
<el-popover placement="bottom" :width="360" trigger="click">
|
||||||
|
<template #reference>
|
||||||
|
<div class="msg panel-item">
|
||||||
|
<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
|
||||||
|
<i class="el-icon-bell"></i>
|
||||||
|
</el-badge>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div>
|
||||||
|
<el-empty v-if="msgList.length==0" description="暂无新消息"></el-empty>
|
||||||
|
<div v-else class="msgList">
|
||||||
|
<header>
|
||||||
|
<label>通知</label>
|
||||||
|
<el-link :underline="false" href="javascript:void(0);" @click="markRead">全部标记已读</el-link>
|
||||||
|
</header>
|
||||||
|
<ul>
|
||||||
|
<el-scrollbar>
|
||||||
|
<li v-for="item in msgList" v-bind:key="item.id">
|
||||||
|
<a :href="item.link" target="_blank">
|
||||||
|
<h2>{{item.title}}</h2>
|
||||||
|
<p>{{item.describe}}</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</el-scrollbar>
|
||||||
|
</ul>
|
||||||
|
<footer><el-link :underline="false" href="https://gitee.com/lolicode/scui" target="_blank">前往通知中心</el-link></footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
<el-dropdown trigger="click" @command="handleUser" style="height: 100%;">
|
||||||
|
<div class="user panel-item">
|
||||||
|
<el-avatar :size="30">{{ userNameF }}</el-avatar>
|
||||||
|
<label>{{ userName }}<i class="el-icon-arrow-down el-icon--right"></i></label>
|
||||||
|
</div>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item command="uc">个人设置</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="cmd">CMD</el-dropdown-item>
|
||||||
|
<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
userName: "",
|
||||||
|
userNameF: "",
|
||||||
|
msgList: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "关于版本发布的通知",
|
||||||
|
describe: "点进去Gitee获取最新开源版本",
|
||||||
|
link: "https://gitee.com/lolicode/scui"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "感谢登录SCUI Admin",
|
||||||
|
describe: "Vue 3.0 + Vue-Router 4.0 + ElementPlus + Axios 后台管理系统。",
|
||||||
|
link: "https://gitee.com/lolicode/scui"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
var userInfo = this.$TOOL.data.get("user").userInfo;
|
||||||
|
this.userName = userInfo.userName;
|
||||||
|
this.userNameF = this.userName.substring(0,1);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//个人信息
|
||||||
|
handleUser(command) {
|
||||||
|
if(command == "uc"){
|
||||||
|
this.$router.push({path: '/usercenter'});
|
||||||
|
}
|
||||||
|
if(command == "outLogin"){
|
||||||
|
this.$router.replace({path: '/login'});
|
||||||
|
}
|
||||||
|
if(command == "cmd"){
|
||||||
|
this.$router.push({path: '/cmd'});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//全屏
|
||||||
|
screen(){
|
||||||
|
var element = document.documentElement;
|
||||||
|
this.$TOOL.screen(element)
|
||||||
|
},
|
||||||
|
//标记已读
|
||||||
|
markRead(){
|
||||||
|
this.msgList = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.user-bar {display: flex;align-items: center;height: 100%;}
|
||||||
|
.user-bar .panel-item {padding: 0 10px;cursor: pointer;height: 100%;display: flex;align-items: center;}
|
||||||
|
.user-bar .panel-item i {font-size: 16px;}
|
||||||
|
.user-bar .panel-item:hover {background: rgba(0, 0, 0, 0.1);}
|
||||||
|
.user-bar .user {display: flex;align-items: center;}
|
||||||
|
.user-bar .user label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}
|
||||||
|
|
||||||
|
.msgList header {height:35px;line-height: 35px;display: flex;justify-content: space-between;}
|
||||||
|
.msgList footer {height:35px;line-height: 35px;text-align:center;}
|
||||||
|
.msgList ul {height:180px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
|
||||||
|
.msgList ul li a {display: inline-block;width: 100%;height: 100%;padding:10px;border: 1px solid transparent;cursor:pointer;}
|
||||||
|
.msgList ul li h2 {font-size: 14px;font-weight: normal;line-height: 1.8;}
|
||||||
|
.msgList ul li h2 i {margin-right: 10px;}
|
||||||
|
.msgList ul li p {font-size: 12px;color: #999;line-height: 1.8;}
|
||||||
|
.msgList ul li a:hover {background: #ecf5ff;border-top: 1px solid #d9ecff;border-bottom: 1px solid #d9ecff;}
|
||||||
|
.msgList ul li a:hover h2 {color: #409EFF;}
|
||||||
|
</style>
|
||||||
|
|
@ -1,44 +1,147 @@
|
||||||
<template>
|
<template>
|
||||||
<Side v-if="!ismobile"></Side>
|
<!-- 通栏布局 -->
|
||||||
|
<template v-if="layout=='header'">
|
||||||
|
<header class="adminui-header">
|
||||||
|
<div class="adminui-header-left">
|
||||||
|
<div class="logo">
|
||||||
|
<i class="el-icon-platform-eleme"></i>
|
||||||
|
<span>SCUI-Admin</span>
|
||||||
|
</div>
|
||||||
|
<ul v-if="!ismobile" class="nav">
|
||||||
|
<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''" @click="showMenu(item)">
|
||||||
|
<i :class="item.meta.icon || 'el-icon-menu'"></i>
|
||||||
|
<span>{{ item.meta.title }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="adminui-header-right">
|
||||||
|
<userbar></userbar>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section class="aminui-wrapper">
|
||||||
|
<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
|
||||||
|
<div v-if="!menuIsCollapse" class="adminui-side-top">
|
||||||
|
<h2>{{ pmenu.meta.title }}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="adminui-side-scroll">
|
||||||
|
<el-menu :default-active="$route.fullPath" router :collapse="menuIsCollapse">
|
||||||
|
<NavMenu :navMenus="nextMenu"></NavMenu>
|
||||||
|
</el-menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<Side-m v-if="ismobile"></Side-m>
|
<Side-m v-if="ismobile"></Side-m>
|
||||||
<div class="aminui-body el-container">
|
<div class="aminui-body el-container">
|
||||||
<Head></Head>
|
<Topbar v-if="!ismobile"></Topbar>
|
||||||
<Tags v-if="!ismobile && $CONFIG.LAYOUT_TAGS"></Tags>
|
<Tags v-if="!ismobile && layoutTags"></Tags>
|
||||||
<div class="adminui-main" id="adminui-main">
|
<div class="adminui-main" id="adminui-main">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 默认布局 -->
|
||||||
|
<template v-else>
|
||||||
|
<section class="aminui-wrapper">
|
||||||
|
<div v-if="!ismobile" class="aminui-side-split">
|
||||||
|
<div class="adminui-side-split-scroll">
|
||||||
|
<ul>
|
||||||
|
<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''"
|
||||||
|
@click="showMenu(item)">
|
||||||
|
<i :class="item.meta.icon || 'el-icon-menu'"></i>
|
||||||
|
<p>{{ item.meta.title }}</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
|
||||||
|
<div v-if="!menuIsCollapse" class="adminui-side-top">
|
||||||
|
<h2>{{ pmenu.meta.title }}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="adminui-side-scroll">
|
||||||
|
<el-menu :default-active="$route.fullPath" router :collapse="menuIsCollapse">
|
||||||
|
<NavMenu :navMenus="nextMenu"></NavMenu>
|
||||||
|
</el-menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Side-m v-if="ismobile"></Side-m>
|
||||||
|
<div class="aminui-body el-container">
|
||||||
|
<Topbar>
|
||||||
|
<userbar></userbar>
|
||||||
|
</Topbar>
|
||||||
|
<Tags v-if="!ismobile && layoutTags"></Tags>
|
||||||
|
<div class="adminui-main" id="adminui-main">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="layout-setting" @click="openSetting"><i class="el-icon-brush"></i></div>
|
||||||
|
|
||||||
|
<el-drawer title="布局实时演示" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
|
||||||
|
<setting></setting>
|
||||||
|
</el-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Side from './components/side.vue';
|
|
||||||
import SideM from './components/sideM.vue';
|
import SideM from './components/sideM.vue';
|
||||||
import Head from './components/head.vue';
|
import Topbar from './components/topbar.vue';
|
||||||
import Tags from './components/tags.vue';
|
import Tags from './components/tags.vue';
|
||||||
|
import NavMenu from './components/NavMenu.vue';
|
||||||
|
import userbar from './components/userbar.vue';
|
||||||
|
import setting from './components/setting.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'index',
|
name: 'index',
|
||||||
components: {
|
components: {
|
||||||
Side,
|
|
||||||
SideM,
|
SideM,
|
||||||
Head,
|
Topbar,
|
||||||
Tags
|
Tags,
|
||||||
|
NavMenu,
|
||||||
|
userbar,
|
||||||
|
setting
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
settingDialog: false,
|
||||||
|
menu: [],
|
||||||
|
nextMenu: [],
|
||||||
|
pmenu: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed:{
|
computed:{
|
||||||
ismobile(){
|
ismobile(){
|
||||||
return this.$store.state.global.ismobile
|
return this.$store.state.global.ismobile
|
||||||
|
},
|
||||||
|
layout(){
|
||||||
|
return this.$store.state.global.layout
|
||||||
|
},
|
||||||
|
layoutTags(){
|
||||||
|
return this.$store.state.global.layoutTags
|
||||||
|
},
|
||||||
|
menuIsCollapse(){
|
||||||
|
return this.$store.state.global.menuIsCollapse
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.onLayoutResize();
|
this.onLayoutResize();
|
||||||
window.addEventListener('resize', this.onLayoutResize);
|
window.addEventListener('resize', this.onLayoutResize);
|
||||||
|
var menu = this.$TOOL.data.get("user").menuList;
|
||||||
|
var home = this.$router.options.routes[0].children[0];
|
||||||
|
menu.unshift(home);
|
||||||
|
this.menu = this.filterUrl(menu);
|
||||||
|
this.showThis()
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route() {
|
||||||
|
this.showThis()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
openSetting(){
|
||||||
|
this.settingDialog = true;
|
||||||
|
},
|
||||||
onLayoutResize(){
|
onLayoutResize(){
|
||||||
const clientWidth = document.body.clientWidth;
|
const clientWidth = document.body.clientWidth;
|
||||||
if(clientWidth < 992){
|
if(clientWidth < 992){
|
||||||
|
|
@ -46,6 +149,38 @@
|
||||||
}else{
|
}else{
|
||||||
this.$store.commit("SET_ismobile", false)
|
this.$store.commit("SET_ismobile", false)
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
//路由监听高亮
|
||||||
|
showThis(){
|
||||||
|
var home = this.$router.options.routes[0].children[0];
|
||||||
|
this.pmenu = this.$route.matched[1] || home;
|
||||||
|
this.nextMenu = this.filterUrl(this.pmenu.children);
|
||||||
|
},
|
||||||
|
//点击显示
|
||||||
|
showMenu(route) {
|
||||||
|
this.pmenu = route;
|
||||||
|
this.nextMenu = this.filterUrl(route.children);
|
||||||
|
},
|
||||||
|
//转换外部链接的路由
|
||||||
|
filterUrl(map){
|
||||||
|
var newMap = []
|
||||||
|
map && map.forEach(item => {
|
||||||
|
item.meta = item.meta?item.meta:{};
|
||||||
|
//处理隐藏
|
||||||
|
if(item.meta.hidden){
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
//处理http
|
||||||
|
if(item.meta.type=='iframe'){
|
||||||
|
item.path = `/i/${item.name}`;
|
||||||
|
}
|
||||||
|
//递归循环
|
||||||
|
if(item.children&&item.children.length > 0){
|
||||||
|
this.filterUrl(item.children);
|
||||||
|
}
|
||||||
|
newMap.push(item)
|
||||||
|
})
|
||||||
|
return newMap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ app.config.globalProperties.$HAS = permission;
|
||||||
|
|
||||||
app.use(store);
|
app.use(store);
|
||||||
app.use(router);
|
app.use(router);
|
||||||
app.use(ElementPlus, {size: 'small', zIndex: 1000 ,locale: locale});
|
app.use(ElementPlus, {size: 'small', zIndex: 2000 ,locale: locale});
|
||||||
|
|
||||||
app.component('scTable', scTable);
|
app.component('scTable', scTable);
|
||||||
app.component('scFilterBar', scFilterBar);
|
app.component('scFilterBar', scFilterBar);
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@ const routes = [{
|
||||||
path: "/dashboard",
|
path: "/dashboard",
|
||||||
meta: {
|
meta: {
|
||||||
title: "控制台",
|
title: "控制台",
|
||||||
|
icon: "el-icon-menu",
|
||||||
affix: true
|
affix: true
|
||||||
},
|
},
|
||||||
component: () => import(/* webpackChunkName: "home" */ '@/views/home'),
|
component: () => import(/* webpackChunkName: "home" */ '@/views/home'),
|
||||||
|
|
@ -33,7 +34,8 @@ const routes = [{
|
||||||
name: "userCenter",
|
name: "userCenter",
|
||||||
path: "/usercenter",
|
path: "/usercenter",
|
||||||
meta: {
|
meta: {
|
||||||
title: "个人信息"
|
title: "个人信息",
|
||||||
|
icon: "el-icon-user",
|
||||||
},
|
},
|
||||||
component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
|
component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
|
||||||
},
|
},
|
||||||
|
|
@ -41,7 +43,8 @@ const routes = [{
|
||||||
name: "autocode",
|
name: "autocode",
|
||||||
path: "/autocode",
|
path: "/autocode",
|
||||||
meta: {
|
meta: {
|
||||||
title: "代码生成器"
|
title: "代码生成器",
|
||||||
|
icon: "el-icon-magic-stick",
|
||||||
},
|
},
|
||||||
component: () => import(/* webpackChunkName: "autocode" */ '@/views/autocode'),
|
component: () => import(/* webpackChunkName: "autocode" */ '@/views/autocode'),
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,28 @@
|
||||||
|
import config from "@/config";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
state: {
|
state: {
|
||||||
ismobile: false
|
//移动端布局
|
||||||
|
ismobile: false,
|
||||||
|
//布局
|
||||||
|
layout: config.LAYOUT,
|
||||||
|
//菜单是否折叠 toggle
|
||||||
|
menuIsCollapse: config.MENU_IS_COLLAPSE,
|
||||||
|
//多标签栏
|
||||||
|
layoutTags: config.LAYOUT_TAGS,
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
SET_ismobile(state, key){
|
SET_ismobile(state, key){
|
||||||
state.ismobile = key
|
state.ismobile = key
|
||||||
|
},
|
||||||
|
SET_layout(state, key){
|
||||||
|
state.layout = key
|
||||||
|
},
|
||||||
|
TOGGLE_menuIsCollapse(state){
|
||||||
|
state.menuIsCollapse = !state.menuIsCollapse
|
||||||
|
},
|
||||||
|
TOGGLE_layoutTags(state){
|
||||||
|
state.layoutTags = !state.layoutTags
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,26 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
|
||||||
::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}
|
::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}
|
||||||
|
|
||||||
/* 大布局样式 */
|
/* 大布局样式 */
|
||||||
.aminui {display: flex;}
|
.aminui {display: flex;flex-flow: column;}
|
||||||
|
.aminui-wrapper {display: flex;flex:1;overflow: auto;}
|
||||||
|
|
||||||
|
/*布局设置*/
|
||||||
|
.layout-setting {position: fixed;width: 40px;height: 40px;border-radius: 3px 0 0 3px;bottom: 100px;right: 0px;z-index: 100;background: #409EFF;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;}
|
||||||
|
.layout-setting i {font-size: 18px;color: #fff;}
|
||||||
|
|
||||||
|
/* 头部 */
|
||||||
|
.adminui-header {height: 60px;background: #222b45;color: #fff;display: flex;justify-content:space-between;}
|
||||||
|
.adminui-header-left {display: flex;align-items: center;padding-left:20px;}
|
||||||
|
.adminui-header-right {display: flex;align-items: center;}
|
||||||
|
.adminui-header .logo {font-size: 20px;font-weight: bold;display: flex;align-items: center;}
|
||||||
|
.adminui-header .logo i {font-size: 30px;color: #09f;margin-right: 10px;}
|
||||||
|
.adminui-header .nav {display: flex;height: 100%;margin-left: 40px;}
|
||||||
|
.adminui-header .nav li {padding:0 10px;margin: 0 10px 0 0;font-size: 14px;color: rgba(255, 255, 255, 0.6);list-style: none;height: 100%;display: flex;align-items: center;cursor: pointer;}
|
||||||
|
.adminui-header .nav li i {margin-right: 5px;}
|
||||||
|
.adminui-header .nav li:hover {color: #fff;}
|
||||||
|
.adminui-header .nav li.active {background: rgba(255, 255, 255, 0.1);color: #fff;}
|
||||||
|
.adminui-header .user-bar .panel-item:hover {background: rgba(255, 255, 255, 0.1)!important;}
|
||||||
|
.adminui-header .user-bar .user label{color: #fff;}
|
||||||
|
|
||||||
/* 左侧菜单 */
|
/* 左侧菜单 */
|
||||||
.aminui-side-split {width:65px;flex-shrink:0;background: #333;}
|
.aminui-side-split {width:65px;flex-shrink:0;background: #333;}
|
||||||
|
|
@ -32,36 +51,25 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
|
||||||
.adminui-side-split-scroll::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
|
.adminui-side-split-scroll::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
|
||||||
.adminui-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}
|
.adminui-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}
|
||||||
|
|
||||||
.aminui-side {display: flex;flex-flow: column;flex-shrink:0;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
|
.aminui-side {display: flex;flex-flow: column;flex-shrink:0;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;transition:width 0.3s;}
|
||||||
.adminui-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
|
.adminui-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
|
||||||
.adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
|
.adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
|
||||||
.adminui-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;}
|
.adminui-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;}
|
||||||
|
.aminui-side.isCollapse {width: 64px;}
|
||||||
|
|
||||||
/* 右侧内容 */
|
/* 右侧内容 */
|
||||||
.aminui-body {flex: 1;display: flex;flex-flow: column;}
|
.aminui-body {flex: 1;display: flex;flex-flow: column;}
|
||||||
|
|
||||||
.adminui-header {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
|
.adminui-topbar {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
|
||||||
.adminui-header .left-panel {display: flex;align-items: center;padding-left:20px;}
|
.adminui-topbar .left-panel {display: flex;align-items: center;}
|
||||||
.adminui-header .right-panel {display: flex;align-items: center;}
|
.adminui-topbar .right-panel {display: flex;align-items: center;}
|
||||||
|
|
||||||
.right-panel-search {display: flex;align-items: center;}
|
.right-panel-search {display: flex;align-items: center;}
|
||||||
.right-panel-search > * + * {margin-left:10px;}
|
.right-panel-search > * + * {margin-left:10px;}
|
||||||
.adminui-header .panel-item {height:50px;line-height: 50px;padding:0 10px;cursor: pointer;}
|
|
||||||
.adminui-header .panel-item i {font-size: 16px;}
|
|
||||||
.adminui-header .panel-item .badge .el-badge__content {top:15px}
|
|
||||||
.adminui-header .panel-item:hover {background: #eee;}
|
|
||||||
.adminui-header .el-breadcrumb .el-breadcrumb__inner i {margin-right:5px;}
|
|
||||||
.adminui-header .user {display: flex;align-items: center;}
|
|
||||||
.adminui-header .user label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}
|
|
||||||
|
|
||||||
.msgList header {height:35px;line-height: 35px;display: flex;justify-content: space-between;}
|
.adminui-topbar .menu-collapse {height: 50px;width: 60px;padding: 0 20px;display: flex;align-items: center;cursor: pointer;}
|
||||||
.msgList footer {height:35px;line-height: 35px;text-align:center;}
|
.adminui-topbar .menu-collapse i {font-size: 16px;}
|
||||||
.msgList ul {height:180px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
|
.adminui-topbar .menu-collapse:hover {background-image: linear-gradient(90deg, #d9ecff, transparent);}
|
||||||
.msgList ul li a {display: inline-block;width: 100%;height: 100%;padding:10px;border: 1px solid transparent;cursor:pointer;}
|
|
||||||
.msgList ul li h2 {font-size: 14px;font-weight: normal;line-height: 1.8;}
|
|
||||||
.msgList ul li h2 i {margin-right: 10px;}
|
|
||||||
.msgList ul li p {font-size: 12px;color: #999;line-height: 1.8;}
|
|
||||||
.msgList ul li a:hover {background: #ecf5ff;border-top: 1px solid #d9ecff;border-bottom: 1px solid #d9ecff;}
|
|
||||||
.msgList ul li a:hover h2 {color: #409EFF;}
|
|
||||||
|
|
||||||
.adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;box-shadow: 0 1px 4px rgba(0,21,41,.08);}
|
.adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;box-shadow: 0 1px 4px rgba(0,21,41,.08);}
|
||||||
.adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;}
|
.adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;}
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,16 @@
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activities: [
|
activities: [
|
||||||
|
{
|
||||||
|
content: [
|
||||||
|
"[新增] 布局实时演示",
|
||||||
|
"[优化] 抽离tinymce、echarts模块",
|
||||||
|
"[优化] 更换富文本编辑为tinymce",
|
||||||
|
"[优化] 打印工具可直接传入html",
|
||||||
|
"[删除] 诺干个无用的模板",
|
||||||
|
],
|
||||||
|
timestamp: '2021-05-30'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
content: [
|
content: [
|
||||||
"[优化] 上传组件上传行为",
|
"[优化] 上传组件上传行为",
|
||||||
|
|
|
||||||
|
|
@ -1,76 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="right-panel">
|
|
||||||
<div class="right-panel-search">
|
|
||||||
<el-input v-model="keyword" placeholder="请输入内容" clearable></el-input>
|
|
||||||
<el-button type="primary" icon="el-icon-search"></el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<div class="sc-itemList">
|
|
||||||
<div class="sc-itemList-list">
|
|
||||||
<el-row :gutter="20">
|
|
||||||
|
|
||||||
<el-col :xl="6" :lg="8" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.title">
|
|
||||||
<el-card shadow="hover" :body-style="{ padding: '0px' }">
|
|
||||||
<el-image :src="item.image" fit="cover" :preview-src-list="[item.image]"></el-image>
|
|
||||||
<div class="title">
|
|
||||||
<h2>{{item.title}}</h2>
|
|
||||||
<p>
|
|
||||||
<el-tag type="warning">免费</el-tag>
|
|
||||||
<el-tag v-for="tag in item.tags" :key="tag">{{tag}}</el-tag>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
<div class="sc-itemList-page">
|
|
||||||
<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="20" :page-size="20" :currentPage="1" ></el-pagination>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'itemList',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
keyword: "",
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
title: "VUE Next",
|
|
||||||
tags: ["跨平台", "3.0", "测试版"],
|
|
||||||
image: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Element Plus",
|
|
||||||
tags: ["Vue3.0", "个人"],
|
|
||||||
image: ""
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-card {margin-bottom: 20px;height:310px;}
|
|
||||||
.el-image {width: 100%;height:200px;background: #ddd;}
|
|
||||||
.title {padding:20px;}
|
|
||||||
.title h2 {font-size: 16px;}
|
|
||||||
.title p {font-size: 12px;color: #999;margin-top: 15px;}
|
|
||||||
.title p .el-tag {margin-right:8px;}
|
|
||||||
|
|
||||||
.sc-itemList {display:flex;flex-direction:column;height:100%;}
|
|
||||||
.sc-itemList-list {flex:1;border-bottom: 1px solid #EBEEF5;padding:20px;overflow: auto;}
|
|
||||||
.sc-itemList-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,269 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
|
|
||||||
<el-popconfirm :title="'确定删除选中的 '+selection.length+' 项吗？'" @confirm="batch_del">
|
|
||||||
<template #reference>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
|
|
||||||
</template>
|
|
||||||
</el-popconfirm>
|
|
||||||
</div>
|
|
||||||
<div class="right-panel">
|
|
||||||
<div class="right-panel-search">
|
|
||||||
<el-input v-model="search.name" placeholder="请输入内容" clearable></el-input>
|
|
||||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
|
||||||
</div>
|
|
||||||
<scFilterBar ref="scFilterBar" :options="options" @change="updata"></scFilterBar>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<scTable ref="table" :apiObj="apiObj" :column="column" @selection-change="selectionChange">
|
|
||||||
<!-- 表格列开始 -->
|
|
||||||
<el-table-column type="selection" width="50"></el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="头像" width="60">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-avatar size="small">{{ scope.row.name.substring(0,1) }}</el-avatar>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="名称" prop="name" width="150"></el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="进度" prop="progress" width="200">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-progress :percentage="scope.row.progress" status="success"></el-progress>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="邮箱" prop="yx" width="150"></el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="状态" prop="audit" width="50">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag>{{scope.row.audit}}</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="加入时间" prop="date" width="170"></el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="操作" fixed="right" align="right" width="140">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button @click="table_show(scope.row, scope.$index)" type="text" size="small">查看</el-button>
|
|
||||||
<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
|
|
||||||
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.$index)">
|
|
||||||
<template #reference>
|
|
||||||
<el-button type="text" size="small">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-popconfirm>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<!-- 表格列结束 -->
|
|
||||||
</scTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
|
|
||||||
<!-- 弹窗开始 -->
|
|
||||||
<el-dialog :title="titleMap[dialogMode]" :width="600" v-model="showDialog" :before-close="closeDialog" append-to-body>
|
|
||||||
<el-form :model="form" :rules="rules" :disabled="dialogMode=='show'" ref="dialogForm" label-width="80px" label-position="top">
|
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="名称" prop="name">
|
|
||||||
<el-input v-model="form.name"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="邮箱" prop="yx">
|
|
||||||
<el-input v-model="form.yx"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="进度" prop="progress">
|
|
||||||
<el-input v-model.number="form.progress"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="状态" prop="audit">
|
|
||||||
<el-switch v-model="form.audit" active-value="1" inactive-value="0"></el-switch>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="closeDialog">取 消</el-button>
|
|
||||||
<el-button v-if="dialogMode=='add'" type="primary" @click="submitForm()">创 建</el-button>
|
|
||||||
<el-button v-if="dialogMode=='edit'" type="primary" @click="editForm()">保 存</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
<!-- 弹窗结束 -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'list',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
search : {
|
|
||||||
name: ""
|
|
||||||
},
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '状态',
|
|
||||||
value: 'type',
|
|
||||||
type: 'select',
|
|
||||||
extend: {
|
|
||||||
data:[
|
|
||||||
{
|
|
||||||
label: "通过",
|
|
||||||
value: "0"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "失败",
|
|
||||||
value: "1"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '加入时间',
|
|
||||||
value: 'date',
|
|
||||||
type: 'daterange'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
apiObj: this.$API.demo.demolist.list,
|
|
||||||
selection: [],
|
|
||||||
showDialog: false,
|
|
||||||
dialogMode: "add",
|
|
||||||
editIndex: null,
|
|
||||||
titleMap: {
|
|
||||||
add: "新增",
|
|
||||||
edit: "编辑",
|
|
||||||
show: "查看"
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
name: "",
|
|
||||||
audit: "1",
|
|
||||||
yx: "",
|
|
||||||
progress: 0
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
name: [
|
|
||||||
{ required: true, message: '请输入名称' },
|
|
||||||
],
|
|
||||||
yx: [
|
|
||||||
{ required: true, message: '请输入完整的邮箱地址' },
|
|
||||||
],
|
|
||||||
progress: [
|
|
||||||
{ required: true, message: '请输入进度' },
|
|
||||||
]
|
|
||||||
},
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: "NAME",
|
|
||||||
prop: "name",
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "PROGRESS",
|
|
||||||
prop: "progress",
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "AUDIT",
|
|
||||||
prop: "audit",
|
|
||||||
width: 150
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//表格选择后回调事件
|
|
||||||
selectionChange(selection){
|
|
||||||
this.selection = selection;
|
|
||||||
},
|
|
||||||
//行删除
|
|
||||||
table_del(index){
|
|
||||||
this.$refs.table.tableData.splice(index, 1);
|
|
||||||
},
|
|
||||||
//批量删除
|
|
||||||
batch_del(){
|
|
||||||
var _this = this;
|
|
||||||
_this.selection.forEach(function (item) {
|
|
||||||
_this.$refs.table.tableData.forEach(function (itemI, indexI) {
|
|
||||||
if (item.id === itemI.id) {
|
|
||||||
_this.$refs.table.tableData.splice(indexI, 1)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//关闭弹窗
|
|
||||||
closeDialog(){
|
|
||||||
this.showDialog = false;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.dialogForm.resetFields();
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//打开弹窗
|
|
||||||
openDialog(mode){
|
|
||||||
this.dialogMode = mode;
|
|
||||||
this.showDialog = true;
|
|
||||||
},
|
|
||||||
//新增提交
|
|
||||||
submitForm(){
|
|
||||||
this.$refs.dialogForm.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
var newData = {
|
|
||||||
...this.form,
|
|
||||||
id: new Date().getTime(),
|
|
||||||
date: "2021-04-30 13:57:00"
|
|
||||||
}
|
|
||||||
this.$refs.table.tableData.unshift(newData)
|
|
||||||
this.closeDialog();
|
|
||||||
}else{
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//编辑
|
|
||||||
table_edit(row, index){
|
|
||||||
this.editIndex = index;
|
|
||||||
this.openDialog('edit');
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.form = {...row}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
//编辑提交
|
|
||||||
editForm(){
|
|
||||||
this.$refs.dialogForm.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
Object.assign(this.$refs.table.tableData[this.editIndex], this.form)
|
|
||||||
this.closeDialog();
|
|
||||||
}else{
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//查看
|
|
||||||
table_show(row){
|
|
||||||
this.openDialog('show');
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.form = {...row}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
upsearch(){
|
|
||||||
var data = Object.assign({}, this.search, this.$refs.scFilterBar.getFilter());
|
|
||||||
this.$refs.table.upData(data)
|
|
||||||
},
|
|
||||||
updata(val){
|
|
||||||
var data = Object.assign({},this.search, val);
|
|
||||||
this.$refs.table.upData(data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-empty description="SHOW"></el-empty>
|
|
||||||
<h2>ID={{ id }}</h2>
|
|
||||||
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'show',
|
|
||||||
props: ['showid'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
id: this.$route.params.id || this.showid,
|
|
||||||
input: ""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted: function() {
|
|
||||||
//如果路由与组件名称相同修改tags title，防止作用于非路由组件时修改tags
|
|
||||||
if(this.$route.name==this.$options.name){
|
|
||||||
this.$store.commit("updateViewTags", {
|
|
||||||
path: this.$route.path,
|
|
||||||
meta: {
|
|
||||||
title:"详情ID="+this.id
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.main {width:200px;}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,127 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="200px">
|
|
||||||
<div>
|
|
||||||
<el-tree node-key="id" :data="data" :default-expanded-keys="[1]" :highlight-current="true" :expand-on-click-node="false" :show-checkbox="true" @node-click="handleNodeClick"></el-tree>
|
|
||||||
</div>
|
|
||||||
</el-aside>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
|
||||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
|
||||||
<el-button type="primary">默认按钮</el-button>
|
|
||||||
<el-dropdown style="margin-left: 10px;">
|
|
||||||
<el-button type="primary" plain icon="el-icon-arrow-down"></el-button>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
|
||||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<scTable ref="table" :data="tableData" row-key="name">
|
|
||||||
<!-- 表格列开始 -->
|
|
||||||
<el-table-column type="selection" width="50"></el-table-column>
|
|
||||||
<el-table-column label="显示名称" prop="meta.title" width="200"></el-table-column>
|
|
||||||
<el-table-column label="图标" width="80">
|
|
||||||
<template #default="scope">
|
|
||||||
<i :class="scope.row.meta.icon"></i>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="路由名称" prop="name" width="100"></el-table-column>
|
|
||||||
<el-table-column label="路由地址" prop="path" width="200">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag>{{scope.row.path}}</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="路由组件" prop="component" width="100"></el-table-column>
|
|
||||||
<el-table-column label="是否隐藏" prop="meta.hidden" width="100">
|
|
||||||
<template #default="scope">
|
|
||||||
{{ scope.row.meta.hidden?"是":"否" }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="操作" fixed="right" align="right" width="140">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button @click="table_edit(scope.row)" type="text" size="mini">编辑</el-button>
|
|
||||||
<el-dropdown style="margin-left:10px;">
|
|
||||||
<el-button size="mini" type="primary" plain icon="el-icon-arrow-down"></el-button>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item @click="table_show(scope.row)">查看</el-dropdown-item>
|
|
||||||
<el-dropdown-item>更新数据</el-dropdown-item>
|
|
||||||
<el-dropdown-item>转移</el-dropdown-item>
|
|
||||||
<el-dropdown-item>删除</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<!-- 表格列结束 -->
|
|
||||||
</scTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</el-container>
|
|
||||||
|
|
||||||
<el-drawer title="我是标题" v-model="drawer" :size="800" :append-to-body="true" direction="rtl" destroy-on-close>
|
|
||||||
<Show showid="我来自父组件"></Show>
|
|
||||||
</el-drawer>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Show from './show.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'sideList',
|
|
||||||
components: {
|
|
||||||
Show
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data: [
|
|
||||||
{label: '桌面'},
|
|
||||||
{label: '下载'},
|
|
||||||
{label: '文档'},
|
|
||||||
{label: '图片'},
|
|
||||||
{label: '磁盘', id: 1, children:[
|
|
||||||
{label: 'Windows (C)'},
|
|
||||||
{label: '本地磁盘 (D)'},
|
|
||||||
{label: '本地磁盘 (E)'}
|
|
||||||
]}
|
|
||||||
],
|
|
||||||
tableData: [],
|
|
||||||
drawer: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async created() {
|
|
||||||
var userInfo = await this.$API.user.login.get();
|
|
||||||
this.tableData = userInfo.data.menuList;
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleNodeClick(data){
|
|
||||||
console.log(data);
|
|
||||||
},
|
|
||||||
table_show(row) {
|
|
||||||
this.$router.push({
|
|
||||||
path: '/template/show/' + row.meta.title
|
|
||||||
});
|
|
||||||
},
|
|
||||||
table_edit(row) {
|
|
||||||
console.log(row);
|
|
||||||
this.drawer = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue