<template>
|
<flex-layout class="useful-container" no-bg>
|
<div class="useful-header" slot="header">我的常用功能</div>
|
<div class="tools-btn" slot="header">
|
<el-row>
|
<el-col :span="12" class="left-btn">
|
<el-button
|
class="tool-btn tool-add"
|
icon="el-icon-circle-plus-outline"
|
size="mini" @click="showAddDialog">新增</el-button>
|
</el-col>
|
<el-col :span="12" class="right-btn">
|
<el-button
|
class="tool-btn tool-remove"
|
icon="iconfont el-icon-jinru"
|
size="mini" type="warning"
|
@click="showAddDialog">移除</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="useful-container">
|
<div class="useful-content">
|
<div class="useful-menus">
|
<div class="menu-item"
|
v-for="menu in menus" :key="menu.id"
|
@click="routeTo(menu)">{{ menu.label }}</div>
|
</div>
|
</div>
|
</div>
|
<!-- 添加快捷菜单 -->
|
<el-dialog
|
title="添加快捷菜单"
|
width="auto"
|
:visible.sync="addDialog"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal="false"
|
:modal-append-to-body="false">
|
<add-useful-menu :update="update" :list="menus" v-if="addDialog" @change="searchUsefulMenu"></add-useful-menu>
|
</el-dialog>
|
</flex-layout>
|
</template>
|
|
<script>
|
import AddUsefulMenu from "@/layout/components/addUsefulMenu.vue";
|
import apis from './apis';
|
export default {
|
name: "UsefulTools",
|
components: {AddUsefulMenu},
|
data() {
|
return {
|
addDialog: false,
|
update: 0,
|
menus: [],
|
};
|
},
|
methods: {
|
showAddDialog() {
|
this.addDialog = true;
|
},
|
routeTo(data) {
|
if (this.$store.state.tagsView.cachedViews.indexOf(data.name) == -1) {
|
this.$router.push(data.src)
|
} else {
|
this.$store.state.tagsView.visitedViews.map(item => {
|
if (item.name == data.name) {
|
this.$router.push(item.path)
|
this.$store.dispatch('app/closeSideBar', false)
|
}
|
})
|
}
|
this.close();
|
},
|
close() {
|
this.$emit("close", false);
|
},
|
searchUsefulMenu() {
|
apis.searchUsefulMenu().then(res=>{
|
let rs = res.data;
|
let data = [];
|
if(rs.code == 1) {
|
data = rs.data;
|
}
|
this.menus = data;
|
this.$nextTick(()=>{
|
this.update = Math.random();
|
});
|
}).catch(error=>{
|
this.menus = [];
|
console.log(error);
|
});
|
}
|
},
|
mounted() {
|
this.searchUsefulMenu();
|
}
|
};
|
</script>
|
|
<style scoped>
|
.useful-header {
|
background-color: #00feff;
|
color: #000000;
|
font-size: 20px;
|
text-align: center;
|
line-height: 36px;
|
font-weight: bold;
|
letter-spacing: 4px;
|
}
|
.pifu-item-img img {
|
width: 100%;
|
height: 100%;
|
}
|
.tools-btn {
|
padding: 8px;
|
}
|
.left-btn {
|
text-align: left;
|
}
|
.right-btn {
|
text-align: right;
|
}
|
>>> .el-button.tool-btn.el-button--mini {
|
padding: 4px 8px;
|
}
|
>>> .el-button.tool-remove.el-button--warning.el-button--mini {
|
background-color: #f2a33b;
|
}
|
>>> .tool-remove.el-button--warning {
|
color: #000000;
|
letter-spacing: 2px;
|
font-weight: bold;
|
}
|
>>> .el-button.tool-add.el-button--default.el-button--mini {
|
background-color: #FFFFFF00;
|
color: #f2a33b;
|
border: 1px solid #00feff;
|
letter-spacing: 2px;
|
font-weight: bold;
|
}
|
>>>.tool-add.el-button--default.el-button--mini .el-icon-circle-plus-outline {
|
font-size: 16px;
|
}
|
.useful-container {
|
position: relative;
|
height: 100%;
|
}
|
.useful-content {
|
position: absolute;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
overflow-y: auto;
|
}
|
.useful-menus {
|
padding: 8px;
|
}
|
.menu-item {
|
text-align: center;
|
font-size: 14px;
|
color: #00feff;
|
background-color: #024d5f;
|
margin-bottom: 2px;
|
padding: 4px 0;
|
cursor: pointer;
|
user-select: none;
|
}
|
|
.menu-item.active,
|
.menu-item:hover {
|
background-color: #018894;
|
color: #f2a33b;
|
}
|
.menu-item:active {
|
background-color: #05c3d3;
|
}
|
</style>
|
