ADD work控制台我的常用
This commit is contained in:
parent
6816f65f7e
commit
7f60c7bfa7
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<div>
|
||||
<ul class="myMods">
|
||||
<li v-for="mod in myMods" :key="mod.path" :style="{background:mod.meta.color||'#909399'}">
|
||||
<a v-if="mod.meta.type=='link'" :href="mod.path" target="_blank">
|
||||
<i :class="mod.meta.icon||'el-icon-menu'"></i>
|
||||
<p>{{ mod.meta.title }}</p>
|
||||
</a>
|
||||
<router-link v-else :to="{ path: mod.path }">
|
||||
<i :class="mod.meta.icon||'el-icon-menu'"></i>
|
||||
<p>{{ mod.meta.title }}</p>
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="modItem-add" @click="addMods">
|
||||
<a href="javascript:void(0)">
|
||||
<i class="el-icon-plus"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<el-drawer title="添加应用" v-model="modsDrawer" :size="570" destroy-on-close>
|
||||
<el-container>
|
||||
<el-main class="nopadding">
|
||||
<el-scrollbar>
|
||||
<div class="setMods">
|
||||
<h4>我的常用 ( {{myMods.length}} )</h4>
|
||||
<draggable tag="ul" v-model="myMods" animation="200" item-key="path" group="people">
|
||||
<template #item="{ element }">
|
||||
<li :style="{background:element.meta.color||'#909399'}">
|
||||
<i :class="element.meta.icon||'el-icon-menu'"></i>
|
||||
<p>{{element.meta.title}}</p>
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="setMods">
|
||||
<h4>全部应用 ( {{filterMods.length}} )</h4>
|
||||
<draggable tag="ul" v-model="filterMods" animation="200" item-key="path" :sort="false" group="people">
|
||||
<template #item="{ element }">
|
||||
<li :style="{background:element.meta.color||'#909399'}">
|
||||
<i :class="element.meta.icon||'el-icon-menu'"></i>
|
||||
<p>{{element.meta.title}}</p>
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button type="primary" size="small" @click="saveMods">保存</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mods: [],
|
||||
myMods: [],
|
||||
myModsName: [],
|
||||
filterMods: [],
|
||||
modsDrawer: false
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getMods()
|
||||
},
|
||||
methods: {
|
||||
addMods(){
|
||||
this.modsDrawer = true
|
||||
},
|
||||
getMods(){
|
||||
//这里可用改为读取远程数据
|
||||
this.myModsName = this.$TOOL.data.get("my-mods") || []
|
||||
var menuTree = this.$TOOL.data.get("user").menuList
|
||||
this.filterMenu(menuTree)
|
||||
this.myMods = this.mods.filter(item => {
|
||||
return this.myModsName.includes(item.name)
|
||||
})
|
||||
this.filterMods = this.mods.filter(item => {
|
||||
return !this.myModsName.includes(item.name)
|
||||
})
|
||||
},
|
||||
filterMenu(map){
|
||||
map.forEach(item => {
|
||||
if(item.meta.hidden){
|
||||
return false
|
||||
}
|
||||
if(item.meta.type=='iframe'){
|
||||
item.path = `/i/${item.name}`
|
||||
}
|
||||
if(item.children&&item.children.length > 0){
|
||||
this.filterMenu(item.children)
|
||||
}else{
|
||||
this.mods.push(item)
|
||||
}
|
||||
})
|
||||
},
|
||||
saveMods(){
|
||||
const myModsName = this.myMods.map(v => v.name)
|
||||
this.$TOOL.data.set("my-mods", myModsName)
|
||||
this.$message.success("设置常用成功")
|
||||
this.modsDrawer = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.myMods {list-style:none;margin:-10px;}
|
||||
.myMods li {display: inline-block;width: 100px;height:100px;vertical-align: top;transition:all 0.3s ease;margin:10px;border-radius:5px;}
|
||||
.myMods li:hover {opacity: 0.8;}
|
||||
.myMods li a {width: 100%;height: 100%;padding:10px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: #fff;}
|
||||
.myMods li i {font-size: 26px;color: #fff;}
|
||||
.myMods li p {font-size: 12px;color: #fff;margin-top: 10px;width: 100%;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}
|
||||
|
||||
.modItem-add {background: #fff;border: 1px dashed #ddd;cursor: pointer;}
|
||||
.modItem-add i {font-size: 30px;color: #999!important;}
|
||||
.modItem-add:hover,.modItem-add:hover i {border-color: #409EFF;color: #409EFF!important;}
|
||||
|
||||
.setMods {padding:0 20px;}
|
||||
.setMods h4 {font-size: 14px;font-weight: normal;}
|
||||
.setMods ul {margin:20px -5px;min-height: 90px;}
|
||||
.setMods li {display: inline-block;width: 80px;height:80px;text-align: center;margin:5px;color: #fff;vertical-align: top;padding:4px;padding-top:15px;cursor: move;border-radius: 3px;}
|
||||
.setMods li i {font-size: 20px;}
|
||||
.setMods li p {font-size: 12px;margin-top: 10px;}
|
||||
.setMods li.sortable-ghost {opacity: 0.3;}
|
||||
</style>
|
|
@ -2,28 +2,9 @@
|
|||
<el-main>
|
||||
<el-alert title="根据角色配置,可让不同角色访问不同的控制台视图,参数值在登录成功后返回 dashboard:{type}" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-row :gutter="15">
|
||||
<el-col :span="24">
|
||||
<el-card shadow="never" header="模板">
|
||||
<ul class="item-list">
|
||||
<li>
|
||||
<router-link :to="{ path: '/template/blank' }">
|
||||
<i class="el-icon-folder" style="background: #409EFF;"></i>
|
||||
<p>空白模板</p>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{ path: '/template/chartlist' }">
|
||||
<i class="el-icon-data-analysis" style="background: #67C23A;"></i>
|
||||
<p>统计列表</p>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{ path: '/template/calendar' }">
|
||||
<i class="el-icon-date" style="background: #c71585;"></i>
|
||||
<p>日历计划</p>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<el-col :lg="24">
|
||||
<el-card shadow="never" header="我的常用">
|
||||
<myapp></myapp>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
@ -31,26 +12,26 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import myapp from './components/myapp';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
myapp
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.$emit('on-mounted')
|
||||
},
|
||||
methods: {
|
||||
//获取当前用户可操作菜单
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-row {margin-bottom:15px;}
|
||||
.item-list {display: flex;flex-wrap:wrap;}
|
||||
.item-list li {list-style: none;text-align: center;}
|
||||
.item-list li a {padding:20px;border-radius: 5px;cursor: pointer;display: inline-block;}
|
||||
.item-list li i {width:70px;height:70px;border-radius: 28px;font-size: 25px;color: #fff;background: #ddd;display: flex;justify-content: center;align-items: center;}
|
||||
.item-list li p {margin-top: 15px;color: #555;}
|
||||
.item-list li a:hover {background: #ecf5ff;}
|
||||
|
||||
</style>
|
||||
|
|
|
@ -151,6 +151,7 @@
|
|||
created: function() {
|
||||
this.$TOOL.data.remove("user")
|
||||
this.$TOOL.data.remove("grid")
|
||||
this.$TOOL.data.remove("my-mods")
|
||||
this.$store.commit("clearViewTags")
|
||||
this.$store.commit("clearKeepLive")
|
||||
this.$store.commit("clearIframeList")
|
||||
|
|
Loading…
Reference in New Issue