zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP

This commit is contained in:
sc 2021-04-23 15:46:10 +08:00
parent a313f90c39
commit fe1688c7a3
12 changed files with 229 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/json/user.json
View File

@ -15,14 +15,14 @@
"children": []
},
{
"name": "layout2",
"path": "/layout",
"name": "template",
"path": "/template",
"meta": {
"title": "组件",
"title": "模板",
"icon": "el-icon-files"
},
"children": [{
"path": "/layout/list",
"path": "/template/list",
"name": "list",
"meta": {
"title": "列表"
@ -30,10 +30,11 @@
"component": "list"
},
{
"path": "/layout/show",
"path": "/template/show/:id",
"name": "show",
"meta": {
"title": "详情"
"title": "详情",
"hidden": true
},
"component": "show"
}

19
src/layout/components/side.vue
View File

@ -58,27 +58,22 @@
//点击显示
showMenu(route) {
this.pmenu = route;
this.nextMenu = route.children;
},
//根据path获取
getRoute(path, menu){
for (var item of menu) {
if (item.path == path) {
return item;
}
if (item.children) {
this.getRoute(path, item.children);
}
}
this.nextMenu = this.filterUrl(route.children);
},
//转换外部链接的路由
filterUrl(map){
var newMap = []
map.forEach(item => {
item.meta = item.meta?item.meta:{};
//处理隐藏
if(item.meta.hidden){
return false
}
//处理http
if(item.path.startsWith('http') && item.meta.target!='_blank'){
item.path = `/${encodeURIComponent(item.path)}`;
}
//递归循环
if(item.children&&item.children.length > 0){
this.filterUrl(item.children);
}

33
src/layout/components/tags.vue
View File

@ -10,13 +10,14 @@
</ul>
</div>
<ul v-if="contextMenuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu" id="contextmenu">
<li @click="refreshTab()">刷新</li>
<hr>
<li @click="closeTabs()" :class="contextMenuItem.meta.affix?'disabled':''">关闭标签</li>
<li @click="closeOtherTabs()">关闭其他标签</li>
</ul>
<transition name="el-zoom-in-top">
<ul v-if="contextMenuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu" id="contextmenu">
<li @click="refreshTab()">刷新</li>
<hr>
<li @click="closeTabs()" :class="contextMenuItem.meta.affix?'disabled':''">关闭标签</li>
<li @click="closeOtherTabs()">关闭其他标签</li>
</ul>
</transition>
</template>
<style>
@ -66,7 +67,7 @@
contextMenuItem: null,
left: 0,
top: 0,
tagList: []
tagList: this.$store.state.viewTags.viewTags
}
},
props: {},
@ -92,21 +93,16 @@
}
}
},
mounted() {
created() {
this.addViewTags(this.$router.options.routes[0].children[0].children[0]);
this.addViewTags(this.$route);
},
methods: {
//增加tag
addViewTags(route) {
var ishas = this.tagList.some(item=>{
if(item.path == route.path){
return true
}
})
if(!ishas){
if(route.name){
this.$store.commit("pushViewTags",route)
this.$store.commit("pushKeepLive",route.name)
this.tagList.push(route)
}
},
//高亮tag
@ -115,11 +111,10 @@
},
//关闭tag
closeSelectedTag(tag) {
const newtagList = this.tagList.filter(item => item.path !== tag.path)
this.tagList = newtagList;
this.$store.commit("removeViewTags", tag)
this.$store.commit("removeKeepLive", tag.name)
if (this.isActive(tag)) {
const latestView = newtagList.slice(-1)[0]
const latestView = this.tagList.slice(-1)[0]
if (latestView) {
this.$router.push(latestView)
} else {

1
src/layout/index.vue
View File

@ -6,7 +6,6 @@
<Tags></Tags>
<div class="adminui-main">
<router-view></router-view>
<!-- <router-view :key="$route.fullPath"></router-view> -->
</div>
</div>

1
src/router/index.js
View File

@ -34,7 +34,6 @@ const routes = [{
]
},
{
name: "login",
path: "/login",
component: () => import(/* webpackChunkName: "login" */ '@/views/login'),
meta: {

15
src/store/index.js
View File

@ -1,8 +1,15 @@
/**
* @description 自动import导入所有 vuex 模块
*/
import { createStore } from 'vuex';
import keepAlive from './modules/keepAlive';
const files = require.context('./modules', false, /\.js$/);
const modules = {}
files.keys().forEach((key) => {
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
export default createStore({
modules: {
keepAlive
}
modules
});

31
src/store/modules/viewTags.js Normal file
View File

@ -0,0 +1,31 @@
export default {
state: {
viewTags: []
},
mutations: {
pushViewTags(state, route){
let target = state.viewTags.find((item) => item.path === route.path)
let isName = route.name
if(!target && isName){
state.viewTags.push(route)
}
},
removeViewTags(state, route){
state.viewTags.forEach((item, index) => {
if (item.path === route.path){
state.viewTags.splice(index, 1)
}
})
},
updateViewTags(state, route){
state.viewTags.forEach((item) => {
if (item.path == route.path){
item = Object.assign(item, route)
}
})
},
clearViewTags(state){
state.viewTags = []
}
}
}

8
src/style/style.less
View File

@ -56,9 +56,15 @@
.adminui-tags li.active a {color: #fff;}
.adminui-main {position: absolute;top:85px;left:0px;right:0px;bottom:0px;overflow: auto;padding: 20px;}
.adminui-main {position: absolute;top:85px;left:0px;right:0px;bottom:0px;overflow: auto;}
.el-menu {border: none!important;}
.el-menu-item.is-active {background: #ecf5ff;}
.el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}
.el-container {height: 100%;}
.el-aside {border-right: 1px solid #e6e6e6;background: #fff;padding-top:20px;}
.el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;}
.el-main {padding:15px;}
.el-pagination {margin-top: 20px;}

83
src/views/home.vue
View File

@ -1,47 +1,48 @@
<template>
<el-row :gutter="20">
<el-col :span="24">
<el-card shadow="never">
<div class="welTop">
<div class="icon">
<el-avatar :size="60" src="images/avatar.jpg"></el-avatar>
</div>
<div class="main">
<h2>嗨~ admin，忙碌了一上午，记得吃午饭哦。</h2>
<p>最近更新：动态面包屑，外部链接，Iframe链接等</p>
</div>
<div class="icons">
<div class="avatar-list">
<el-tooltip content="Sakuya" placement="top">
<el-avatar class="avatar" :size="30" src="images/avatar.jpg"></el-avatar>
</el-tooltip>
<el-tooltip content="Lolowan" placement="top">
<el-avatar class="avatar" :size="30" src="images/avatar2.gif"></el-avatar>
</el-tooltip>
<el-tooltip content="Ali" placement="top">
<el-avatar class="avatar" :size="30" src="images/avatar3.gif"></el-avatar>
</el-tooltip>
<el-main>
<el-row :gutter="15">
<el-col :span="24">
<el-card shadow="never">
<div class="welTop">
<div class="icon">
<el-avatar :size="60" src="images/avatar.jpg"></el-avatar>
</div>
<div class="main">
<h2>嗨~ admin，忙碌了一上午，记得吃午饭哦。</h2>
<p>最近更新：动态面包屑，外部链接，Iframe链接等</p>
</div>
<div class="icons">
<div class="avatar-list">
<el-tooltip content="Sakuya" placement="top">
<el-avatar class="avatar" :size="30" src="images/avatar.jpg"></el-avatar>
</el-tooltip>
<el-tooltip content="Lolowan" placement="top">
<el-avatar class="avatar" :size="30" src="images/avatar2.gif"></el-avatar>
</el-tooltip>
<el-tooltip content="Ali" placement="top">
<el-avatar class="avatar" :size="30" src="images/avatar3.gif"></el-avatar>
</el-tooltip>
</div>
<p>Participants</p>
</div>
<p>Participants</p>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-card shadow="never" header="User Permissions">
<el-tag v-if="$HAS('user.add')">user.add</el-tag>
<el-tag v-if="$HAS('user.edit')">user.edit</el-tag>
<el-tag v-if="$HAS('user.delete')">user.delete</el-tag>
<el-tag v-if="$HAS('list.add')">list.add</el-tag>
<el-tag v-if="$HAS('list.edit')">list.edit</el-tag>
<el-tag v-if="$HAS('list.delete')">list.delete</el-tag>
</el-card>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<el-row :gutter="15">
<el-col :span="24">
<el-card shadow="never" header="User Permissions">
<el-tag v-if="$HAS('user.add')">user.add</el-tag>
<el-tag v-if="$HAS('user.edit')">user.edit</el-tag>
<el-tag v-if="$HAS('user.delete')">user.delete</el-tag>
<el-tag v-if="$HAS('list.add')">list.add</el-tag>
<el-tag v-if="$HAS('list.edit')">list.edit</el-tag>
<el-tag v-if="$HAS('list.delete')">list.delete</el-tag>
</el-card>
</el-col>
</el-row>
</el-main>
</template>
<script>
@ -56,7 +57,7 @@
</script>
<style scoped>
.el-row {margin-bottom:20px;}
.el-row {margin-bottom:15px;}
.el-tag+.el-tag {margin-left: 10px;}

100
src/views/list.vue
View File

@ -1,8 +1,61 @@
<template>
<div>
<el-empty description="LIST"></el-empty>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</div>
<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>
<el-button type="primary">主要按钮</el-button>
<el-button disabled>默认按钮</el-button>
<el-button disabled>默认按钮</el-button>
<el-dropdown style="margin-left: 10px;">
<el-button>更多<i class="el-icon-arrow-down el-icon--right"></i></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>
</el-header>
<el-main id="tableMain">
<el-card shadow="never" @selection-change='handleSelectionChange'>
<el-table :data="tableData" row-key="name" stripe default-expand-all :height="tableHeight">
<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">
<template #default="scope">
{{ scope.row.meta.hidden?"是":"否" }}
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="100">
<template>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="1000"></el-pagination>
</el-card>
</el-main>
</el-container>
</el-container>
</template>
<script>
@ -10,11 +63,46 @@
name: 'list',
data() {
return {
input: ""
data: [
{label: '桌面'},
{label: '下载'},
{label: '文档'},
{label: '图片'},
{label: '磁盘', id: 1, children:[
{label: 'Windows (C)'},
{label: '本地磁盘 (D)'},
{label: '本地磁盘 (E)'}
]}
],
tableHeight: '0',
tableData: []
}
},
created() {
this.tableData = this.$TOOL.data.get("user").menuList;
},
mounted(){
this.$nextTick(() => {
this.setTableHeight()
})
window.onresize = ()=>{
this.setTableHeight()
}
},
methods: {
setTableHeight(){
this.tableHeight = this.$el.querySelector("#tableMain").offsetHeight - 40 - 78
},
handleNodeClick(data){
console.log(data);
},
handleSelectionChange(val) {
console.log(val);
}
}
}
</script>
<style>
<style scoped>
</style>

9
src/views/login.vue
View File

@ -17,12 +17,11 @@
login: async function() {
var userInfo = await this.$API.user.info();
this.$TOOL.data.set("user", userInfo.data);
this.$router.replace({path: '/'});
this.$router.replace({
path: '/'
});
//开启欢迎词
this.$notify.success({
title: '登录成功',
message: '欢迎登录'
})
this.$message.success("Login Success 登录成功")
}
}
}

10
src/views/show.vue
View File

@ -10,8 +10,18 @@
name: 'show',
data() {
return {
id: this.$route.params.id,
input: ""
}
},
mounted: function() {
//修改tags title
this.$store.commit("updateViewTags", {
path: this.$route.path,
meta: {
title:"详情ID="+this.id
}
})
}
}
</script>