ADD work控制台我的常用

This commit is contained in:
sakuya 2021-07-25 23:02:44 +08:00
parent 6816f65f7e
commit 7f60c7bfa7
3 changed files with 149 additions and 31 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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")