96 lines
2.4 KiB
Vue
96 lines
2.4 KiB
Vue
<template>
|
|
<div class="fast-menu">
|
|
<el-dropdown
|
|
trigger="click"
|
|
@command="menuClick"
|
|
placement="top-end"
|
|
@visible-change="handleVisibleChange"
|
|
append-to-body="true"
|
|
>
|
|
<img class="img" :src="imgsrc" alt="" />
|
|
<!-- <el-icon color="#fff" size="24px">
|
|
<Plus v-if="!showMenu" />
|
|
<Close v-else />
|
|
</el-icon> -->
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item
|
|
v-for="(item, index) in quickStore.quickMenus"
|
|
:key="index"
|
|
:command="item.menuId"
|
|
>
|
|
{{ returnMenuName(item.menuId) }}
|
|
</el-dropdown-item>
|
|
<el-dropdown-item :command="-1">
|
|
<el-icon>
|
|
<Edit color="#4080FF" />
|
|
</el-icon>
|
|
<span style="color: #4080ff">编辑</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, computed } from "vue";
|
|
import { useQuickStore, usePermissionStore, useUserStore } from "@/store";
|
|
import router from "@/router";
|
|
|
|
const userStore = useUserStore();
|
|
const quickStore = useQuickStore();
|
|
const permissionStore = usePermissionStore();
|
|
console.log("permissionStore", permissionStore.menus);
|
|
|
|
function menuClick(menuId: number) {
|
|
console.log("menuId", menuId);
|
|
if (menuId == -1) {
|
|
if (userStore.userInfo.id == 1) {
|
|
return router.push("/system/commonlyUsedMenu");
|
|
} else {
|
|
return router.push("/commonlyUsedMenu");
|
|
}
|
|
}
|
|
permissionStore.menuJump(menuId);
|
|
}
|
|
|
|
function returnMenuName(menuId: number) {
|
|
return permissionStore.returnMenuName(menuId);
|
|
}
|
|
|
|
const imgsrc = computed(() => {
|
|
return showMenu.value
|
|
? new URL("/src/assets/images/close.png", import.meta.url).href
|
|
: new URL("/src/assets/images/plus.png", import.meta.url).href;
|
|
});
|
|
const showMenu = ref(false);
|
|
function handleVisibleChange(visible: boolean) {
|
|
showMenu.value = visible;
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.fast-menu {
|
|
position: fixed;
|
|
$size: 40px;
|
|
right: 40px;
|
|
bottom: 40px;
|
|
width: $size;
|
|
height: $size;
|
|
.img {
|
|
width: $size;
|
|
height: $size;
|
|
}
|
|
// box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
|
|
// background: linear-gradient(135deg, #409eff, #3a84ff);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
.svg-icon {
|
|
margin-right: 0;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|