cd-work-flow-web/src/components/page/GlobalNavFooter.vue

/* eslint-disable camelcase */
<template>
  <div id="navFooter">
    <!-- 底部快捷菜单 -->
    <!-- <a-row> -->
    <!-- 左 小箭头 -->
    <a-col :span="1" @click="handleChange" style="background:rgba(24, 144, 255,.9);">
      <a class="arrowBtn">
        <!-- 切换频繁时使用v-show  -->
        <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:;background:rgba(24, 144, 255,.9); ">
            <!-- 设置快捷 -->
            <a-col :span="16">
              <a href="#" @click="showDrawer" class="setBtn" style="float:left;marginRight:6px;">设置快捷</a>
              <!-- 菜单 -->
              <div class="nav" v-for="item in selectList" :key="item.id">
                <a href="#" @click="menuPuth(item)">{{ item.name }}</a>
              </div>
            </a-col>
            <!-- 公司名称 -->
            <a-col :span="8" style="textAlign:right;">
              <span style="color:#ccc;">上海萃颠信息科技有限公司出品</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 v-if="selectList.length > 0" class="selected">
                <a-tag
                  :key="item.id"
                  v-for="item in selectList"
                  :closable="true"
                  @close="() => handleClose(item)"
                  class="selectedItem"
                >
                  <span style="width: 8em">
                    {{ item.name }}
                  </span>
                </a-tag>
              </div>
              <!-- 无快捷 -->
              <span v-if="selectList.length == 0" style="color:#6a040f;marginLeft:12px;">
                请点击选择快捷菜单
              </span>
            </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"
                v-model="searchName"
                @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" class="LevelOneMenu">
                <span>{{ menu.name }}：</span>
              </a-col>
              <!-- 二级菜单 -->
              <a-col :span="20" class="LevelTwoMenu">
                <div v-for="item in menu.childList" :key="item.id" class="twoMenuItem">
                  <a
                    href="#"
                    style="width: 8em"
                    @click.stop="selectItem(item)"
                    :class="{ active: getActive(item.sysPermissionId) }"
                  >
                    {{ item.name }}
                  </a>
                </div>
              </a-col>
              <a-divider :dashed="true" />
            </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: [], // 后台接收快捷菜单
            searchName: '' // 搜索的菜单名称
        }
    },
    created () {
        this.getFooterNav() // 获取快捷导航
    },
    methods: {
    // 搜索菜单
        searchMenu () {
            this.getMenuList()
        },
        // 所有菜单
        getMenuList () {
            this.$nextTick(() => {
                let token = Vue.ls.get(ACCESS_TOKEN)
                let params = { token: token, name: this.searchName }
                console.log('params---->', params.name)
                getUserPermissionByTokenBottom(params).then(res => {
                    console.log('所有菜单res---->', res)
                    if (res.success) {
                        this.menuALL = res.result.menu
                    }
                })
            })
        },
        // 设置快捷
        showDrawer () {
            // 每次打开抽屉时，重新渲染所有菜单
            this.getMenuList()
            this.visible = true
        },
        // 底部菜单跳转
        menuPuth (item) {
            console.log('点击快捷菜单', item)
            this.visible = false
            this.$router.push(item.path)
        },
        // 判断是否勾选(参数是菜单 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 () {
            await addBatch({ bottomMenuList: this.selectList }).then(res => {
                if (res.success) {
                    // 无需其他操作
                    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)
            })
        },

        // 抽屉取消
        openTips () {
            console.log('点击抽屉取消')
            this.visible = false
        },

        // 底部导航 显示隐藏
        handleChange () {
            console.log(this.isShow, '000000')
            if (!this.isShow) {
                this.visible = false
                this.isShow = true
            } else {
                this.isShow = false
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
// 抽屉样式（独立文件）
@import '~@assets/less/drawer.less';

// 整个底部导航
#navFooter {
  width: 100%;
  position: fixed;
  bottom: -0;
  left: 0;
  height: 40px;
  line-height: 40px;
  z-index: 9999;

  // 箭头
  .arrowBtn {
    background: transparent;
    font-size: 24px;
    color: white;
  }

  // 可消失行
  .shortcut {
    //设置快捷(文字)
    .setBtn {
      font-size: 12px;
      font-weight: 700;
      color: white;
    }

    // 快捷菜单
    .nav {
      float: left;
      a {
        margin: 0 6px;
        font-size: 12px;
        color: white;
        font-weight: 700;
      }
    }
    a.setBtn:hover,
    a:hover {
      color: orange;
      font-weight: 400;
    }
  }

  // 动画效果
  .animation-enter,
  .animation-leave-to {
    opacity: 0;
    transform: translateX(-20px);
  }
  .animation-enter-to,
  .animation-leave {
    opacity: 1;
  }
  .animation-enter-active,
  .animation-leave-active {
    transition: all 0.5s;
  }
}
</style>