|
|
@@ -0,0 +1,348 @@
|
|
|
+/* eslint-disable camelcase */
|
|
|
+<template>
|
|
|
+ <div id="navFooter">
|
|
|
+ <!-- 底部快捷菜单 -->
|
|
|
+ <a-row style="background:rgba(24, 144, 255,.9);">
|
|
|
+ <!-- 左 小箭头 -->
|
|
|
+ <a-col :span="1" @click="handleChange">
|
|
|
+ <a class="arrowBtn">
|
|
|
+ <a-icon v-if="isShow" type="arrow-left" />
|
|
|
+ <a-divider type="vertical" style="width:3px;height:20px;marginBottom:6px;borderRadius:4px;" />
|
|
|
+ <a-icon v-if="!isShow" type="arrow-right" />
|
|
|
+ </a>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <!-- 右 菜单 -->
|
|
|
+ <a-col :span="23">
|
|
|
+ <transition-group name="animation">
|
|
|
+ <div class="shortcut" v-if="isShow" :key="1">
|
|
|
+ <a-row style="textAlign:center;">
|
|
|
+ <!-- 设置快捷抽屉 -->
|
|
|
+ <a-col :span="1">
|
|
|
+ <a href="#" @click="showDrawer" class="setBtn">设置快捷</a>
|
|
|
+ </a-col>
|
|
|
+ <!-- 菜单 -->
|
|
|
+ <a-col :span="20">
|
|
|
+ <div class="nav" v-for="item in selectList" :key="item.id">
|
|
|
+ <a href="#">{{ item.name }}</a>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <!-- 公司名称 -->
|
|
|
+ <a-col :span="3">
|
|
|
+ <span style="color:rgba(224, 224, 224);">上海萃颠信息科技有限公司出品</span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </transition-group>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ <!-- 抽屉 设置快捷 -->
|
|
|
+ <a-drawer
|
|
|
+ title="设置快捷菜单"
|
|
|
+ width="520"
|
|
|
+ :placement="placement"
|
|
|
+ :closable="false"
|
|
|
+ :visible="visible"
|
|
|
+ :bodyStyle="{ padding: '12px', marginBottom: '90px', background: '#90caf9' }"
|
|
|
+ >
|
|
|
+ <!-- 固定屏幕 部分-->
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ position: 'absolute',
|
|
|
+ left: 0,
|
|
|
+ top: '0',
|
|
|
+ width: '100%',
|
|
|
+ textAlign: 'left',
|
|
|
+ zIndex: 6,
|
|
|
+ height: '124px'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <!-- 已选 -->
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-card title="已选功能" :bordered="false" class="selectTag">
|
|
|
+ <div class="selected">
|
|
|
+ <a-tag
|
|
|
+ :key="item.id"
|
|
|
+ v-for="item in selectList"
|
|
|
+ :closable="true"
|
|
|
+ @close="() => handleClose(item)"
|
|
|
+ class="selectedItem"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ <!-- <a-empty v-show="this.selectList.length == 0" /> -->
|
|
|
+ </a-tag>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- 搜索栏 -->
|
|
|
+ <div class="second">
|
|
|
+ <a-row style="textAlign:right;">
|
|
|
+ <a-col :span="3">
|
|
|
+ <span style="fontSize:14px;fontWeight:700;">功能菜单</span>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :span="20">
|
|
|
+ <a-input-search placeholder="请输入菜单名称" style="width: 180px" @search="searchMenu" />
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 所有菜单-->
|
|
|
+ <a-row>
|
|
|
+ <a-col a-col :span="24">
|
|
|
+ <a-card title="" :bordered="false" class="searchLine">
|
|
|
+ <!-- 所有菜单 -->
|
|
|
+ <a-row v-for="menu in menuALL" :key="menu.name">
|
|
|
+ <a-col :span="4">
|
|
|
+ <span>{{ menu.name }}：</span>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :span="20" class="LevelTwoMenu">
|
|
|
+ <span v-for="item in menu.childList" :key="item.id" class="twoMenuItem">
|
|
|
+ <!-- active: 返回的值是布尔值，调用判断布尔值的方法 -->
|
|
|
+ <a
|
|
|
+ href="#"
|
|
|
+ style="width: 6em"
|
|
|
+ @click.stop="selectItem(item)"
|
|
|
+ :class="{ active: getActive(item.sysPermissionId) }"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </a>
|
|
|
+ </span>
|
|
|
+ </a-col>
|
|
|
+ <a-divider />
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ <!-- 抽屉底部按钮 -->
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ position: 'absolute',
|
|
|
+ right: 0,
|
|
|
+ bottom: '40px',
|
|
|
+ width: '100%',
|
|
|
+ padding: '10px 16px',
|
|
|
+ background: '#fff',
|
|
|
+ textAlign: 'right',
|
|
|
+ zIndex: 1,
|
|
|
+ background: '#90caf9'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <a-popconfirm title="确定取消设置吗？" ok-text="是" cancel-text="否" @confirm="openTips">
|
|
|
+ <a-button :style="{ marginRight: '8px' }">取消</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+
|
|
|
+ <a-button type="primary" @click="drawerSave">保存</a-button>
|
|
|
+ </div>
|
|
|
+ </a-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Vue from 'vue'
|
|
|
+import { ACCESS_TOKEN } from '@/store/mutation-types'
|
|
|
+import { getUserPermissionByTokenBottom, getListByCreateBy, addBatch } from '@api/api.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'GlobalNavFooter',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ isShow: true, // 默认显示快捷导航
|
|
|
+ visible: false, // 抽屉默认关闭
|
|
|
+ placement: 'left', // 抽屉方向布局
|
|
|
+ selectList: [], // 已选功能
|
|
|
+ menuALL: {}, // 所有菜单
|
|
|
+ bottomMenuList: [] // 后台接收快捷菜单
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getFooterNav() // 获取快捷导航
|
|
|
+ this.getMenuList() // 所有菜单
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 判断是否勾选(参数是菜单 ID)
|
|
|
+ getActive (sysPermissionId) {
|
|
|
+ let isActive = false // 默认未点击
|
|
|
+ this.selectList.forEach(element => {
|
|
|
+ if (sysPermissionId === element.sysPermissionId) {
|
|
|
+ isActive = true // 点击
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // console.log(isActive)
|
|
|
+ return isActive // 返回active状态
|
|
|
+ },
|
|
|
+ // 点击勾选
|
|
|
+ selectItem (item) {
|
|
|
+ // console.log('【点击的菜单】', item.name)
|
|
|
+ let isSelect = false // 默认未勾选
|
|
|
+ this.selectList.forEach((element, index) => {
|
|
|
+ // 判断是否重复
|
|
|
+ if (item.sysPermissionId === element.sysPermissionId) {
|
|
|
+ isSelect = true // 勾选
|
|
|
+ this.selectList.splice(index, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 长度控制
|
|
|
+ if (this.selectList.length >= 8) {
|
|
|
+ this.$message.warning('最多可选8个快捷菜单')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 未勾选
|
|
|
+ if (!isSelect) {
|
|
|
+ this.selectList.push(item)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取快捷菜单
|
|
|
+ async getFooterNav () {
|
|
|
+ await getListByCreateBy().then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ console.log('底部快捷菜单', res)
|
|
|
+ this.selectList = res.result
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 保存 快捷菜单
|
|
|
+ async drawerSave () {
|
|
|
+ // console.log('保存')
|
|
|
+ await addBatch({ bottomMenuList: this.selectList }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ // 无需其他操作
|
|
|
+ // this.getMenuList()
|
|
|
+ this.$message.success('快捷菜单保存成功')
|
|
|
+ this.visible = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 头部叉叉
|
|
|
+ handleClose (item) {
|
|
|
+ console.log('点击的叉叉', item)
|
|
|
+ this.selectList.forEach((e, index) => {
|
|
|
+ if (e.id == item.id) {
|
|
|
+ this.selectList.splice(index, 1)
|
|
|
+ }
|
|
|
+ console.log(' 删后this.selectList', this.selectList)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 所有菜单
|
|
|
+ async getMenuList () {
|
|
|
+ let token = Vue.ls.get(ACCESS_TOKEN)
|
|
|
+ let params = { token: token }
|
|
|
+ await getUserPermissionByTokenBottom(params).then(res => {
|
|
|
+ // console.log('所有菜单res---->', res)
|
|
|
+ if (res.success) {
|
|
|
+ this.menuALL = res.result.menu
|
|
|
+ // console.log('所有菜单res---->', res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 抽屉取消
|
|
|
+ openTips () {
|
|
|
+ console.log('点击抽屉取消')
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+
|
|
|
+ // 搜索菜单
|
|
|
+ searchMenu () {
|
|
|
+ console.log('设置搜索条件')
|
|
|
+ },
|
|
|
+ // 设置快捷
|
|
|
+ showDrawer () {
|
|
|
+ this.visible = true
|
|
|
+ this.getFooterNav() // 获取nav
|
|
|
+ },
|
|
|
+
|
|
|
+ // 底部导航 显示隐藏
|
|
|
+ handleChange () {
|
|
|
+ // console.log(this.isShow)
|
|
|
+ if (!this.isShow) {
|
|
|
+ this.visible = false
|
|
|
+ this.isShow = true
|
|
|
+ } else {
|
|
|
+ this.isShow = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+// 单独抽屉样式 如下
|
|
|
+@import '~@assets/less/drawer.less';
|
|
|
+@import '~@assets/less/common.less';
|
|
|
+// 整个底部导航
|
|
|
+#navFooter {
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ z-index: 99999;
|
|
|
+
|
|
|
+ // 箭头
|
|
|
+ .arrowBtn {
|
|
|
+ background: transparent;
|
|
|
+ font-size: 26px;
|
|
|
+ padding-left: 32px;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 可消失行
|
|
|
+ .shortcut {
|
|
|
+ //设置快捷(文字)
|
|
|
+ .setBtn {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .setBtn:hover {
|
|
|
+ color: orange;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ // 快捷菜单
|
|
|
+ .nav {
|
|
|
+ float: left;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ a {
|
|
|
+ margin: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: white;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ a:hover {
|
|
|
+ color: orange;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 右侧公司名称
|
|
|
+ span {
|
|
|
+ // border-radius: ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 动画效果
|
|
|
+ .animation-enter,
|
|
|
+ .animation-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateX(-40px);
|
|
|
+ }
|
|
|
+ .animation-enter-to,
|
|
|
+ .animation-leave {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .animation-enter-active,
|
|
|
+ .animation-leave-active {
|
|
|
+ transition: all 0.5s;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
liangyan0105