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

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

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

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

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

1
src/layout/index.vue
View File

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

1
src/router/index.js
View File

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

15
src/store/index.js
View File

@ -1,8 +1,15 @@
/**
* @description 自动import导入所有 vuex 模块
*/
import { createStore } from '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({ export default createStore({
modules: { modules
keepAlive
}
}); });

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-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 {border: none!important;}
.el-menu-item.is-active {background: #ecf5ff;} .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-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> <template>
<el-row :gutter="20"> <el-main>
<el-col :span="24"> <el-row :gutter="15">
<el-card shadow="never"> <el-col :span="24">
<div class="welTop"> <el-card shadow="never">
<div class="icon"> <div class="welTop">
<el-avatar :size="60" src="images/avatar.jpg"></el-avatar> <div class="icon">
</div> <el-avatar :size="60" src="images/avatar.jpg"></el-avatar>
<div class="main"> </div>
<h2>嗨~ admin，忙碌了一上午，记得吃午饭哦。</h2> <div class="main">
<p>最近更新：动态面包屑，外部链接，Iframe链接等</p> <h2>嗨~ admin，忙碌了一上午，记得吃午饭哦。</h2>
</div> <p>最近更新：动态面包屑，外部链接，Iframe链接等</p>
<div class="icons"> </div>
<div class="avatar-list"> <div class="icons">
<el-tooltip content="Sakuya" placement="top"> <div class="avatar-list">
<el-avatar class="avatar" :size="30" src="images/avatar.jpg"></el-avatar> <el-tooltip content="Sakuya" placement="top">
</el-tooltip> <el-avatar class="avatar" :size="30" src="images/avatar.jpg"></el-avatar>
<el-tooltip content="Lolowan" placement="top"> </el-tooltip>
<el-avatar class="avatar" :size="30" src="images/avatar2.gif"></el-avatar> <el-tooltip content="Lolowan" placement="top">
</el-tooltip> <el-avatar class="avatar" :size="30" src="images/avatar2.gif"></el-avatar>
<el-tooltip content="Ali" placement="top"> </el-tooltip>
<el-avatar class="avatar" :size="30" src="images/avatar3.gif"></el-avatar> <el-tooltip content="Ali" placement="top">
</el-tooltip> <el-avatar class="avatar" :size="30" src="images/avatar3.gif"></el-avatar>
</el-tooltip>
</div>
<p>Participants</p>
</div> </div>
<p>Participants</p>
</div> </div>
</div> </el-card>
</el-card> </el-col>
</el-col> </el-row>
</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-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> </template>
<script> <script>
@ -56,7 +57,7 @@
</script> </script>
<style scoped> <style scoped>
.el-row {margin-bottom:20px;} .el-row {margin-bottom:15px;}
.el-tag+.el-tag {margin-left: 10px;} .el-tag+.el-tag {margin-left: 10px;}

100
src/views/list.vue
View File

@ -1,8 +1,61 @@
<template> <template>
<div> <el-container>
<el-empty description="LIST"></el-empty> <el-aside width="200px">
<el-input v-model="input" placeholder="请输入内容"></el-input> <div>
</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> </template>
<script> <script>
@ -10,11 +63,46 @@
name: 'list', name: 'list',
data() { data() {
return { 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> </script>
<style> <style scoped>
</style> </style>

9
src/views/login.vue
View File

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

12
src/views/show.vue
View File

@ -10,12 +10,22 @@
name: 'show', name: 'show',
data() { data() {
return { return {
id: this.$route.params.id,
input: "" input: ""
} }
},
mounted: function() {
//修改tags title
this.$store.commit("updateViewTags", {
path: this.$route.path,
meta: {
title:"详情ID="+this.id
}
})
} }
} }
</script> </script>
<style scoped> <style scoped>
.main {width:200px;} .main {width:200px;}
</style> </style>