tarsier-vue-tools侧边菜单栏

2021-07-09 by uino 31 tarsier-vue 研发

使用之前需要确保以下工作已经完成

存储数据到localStorage

  • ssoServerRoot 单点登录的服务器地址
// 'ssoServerRoot': 这是从后台config接口获取的单点登录服务器的地址
localStorage.setItem("ssoServerRoot", "http://192.168.1.125:80/vmdb-sso");
  • serverRoot 提供服务的服务器地址
// 'serverRoot': 这是从后台config接口获取的服务器地址

localStorage.setItem("serverRoot", "http://192.168.1.125:80/tarsier-vmdb");
  • navStyle 菜单的样式
// 'navStyle': 原来url上的三个参数集合,现在保存到localStroage中
/**
 * nav表示菜单栏的状态
 * nav = 1 表示左侧栏和头部栏均出现
 * nav = 2 表示左侧栏和头部栏均消失
 * nav = 3 表示左侧栏消失
 * nav = 4 表示头部栏消失
 * less表示左侧菜单栏的状态
 * less = 1表示左侧菜单栏是收起的状态
 * favorite  表示左侧菜单栏的收藏状态
 * favorite = 1 表示菜单栏呈现收藏模式
 **/
localStorage.setItem("navStyle", "nav=1&favorite=0&less=0");

侧边栏

关于侧边框

相对于原来的插件用法优化如下:

  1. 无须进行菜单的创建,仅仅需要数据的传入,并在store中提供修改菜单选中项的api
  2. 无须关心菜单点击的 url 改变,会自动处理是路由改变还是通过 code 跳转别的项目页面
  3. 无须关心菜单的收起和展开,将会自动处理,并存储到localStorageTarsier_MenuInfo
  4. 无须关心侧边栏的lessfavorite状态,将会自动处理,并存储到localStoragenavStyle中,跳转别的项目时候会自动加入到url
  5. 无须关心菜单的收藏和取消,将会自动请求服务器,并进行收藏和取消收藏的状态改变
使用前的准备工作
  1. 确保 url 上的参数:如 token,nav,favorit,less 等已经保存到localstorage中和cookie
  2. 确保vuex中注入了menustore并命名为MenuStore
  3. 确保vue-router已经注入

侧边栏需要的字段说明, 均为必须

 // data数据只需要传入后台的数据即可
 const data = await Fetch('/tarsier-vmdb/cmv/sys/vframe/getAllModuleAuthMenuTree');
  • codeMapping: code和路由地址的映射对象
// key为项目中的code, value为项目的路由地址
const codeMapping = {
  '0280': 'ci',
  '028201': 'org',
  '030701': 'ruler',
  '030702': 'right',
  '030703': 'all',
  '0301': 'search',
  '0311': 'impact',
  '0303': 'rlt',
  '0313': 'reason',
  '0317': 'market',
  '0319': 'total',
  '0320': 'config',
  '0204': 'user',
  '0321': 'any',
};
  • img: logo 图片的地址
/**
 * 图片的数据均是请求后台的系统图片接口获取的:
 * 注意: Logo的图片的varName为'LOGO_PATH_NAV'
 **/
const img =
  "http://192.168.1.125:80/vmdb-sso/rsm/cli/read/122/logos/Logo_path_nav.png";
  • favorUrl: 收藏菜单的请求地址
/**
 *这是请求收藏的地址,需要填写的路径是除了域名的路径
 **/

// 例如请求的全路径为: 'http//192.168.1.124/tarsier-vmdb/cmv/customMenu/enshrineMenu'
const favorUrl = "/tarsier-vmdb/cmv/customMenu/enshrineMenu";
  • unFavorUrl: 取消菜单收藏的地址
/**
 * 这是请求取消收藏的地址,需要填写的路径是除了域名的路径
 **/

// 例如请求的全路径为: 'http://192.168.1.124/tarsier-vmdb/cmv/customMenu/unenshrineMenu'
const unFavorUrl = "/tarsier-vmdb/cmv/customMenu/unenshrineMenu";

侧边框的使用示例

// store.js:
import { MenuStore } from 'uino-tarsier-vue-lib';
export default new Vuex.Store({
  state:{},
  modules:{
    MenuStore
  }
});
// app.vue
<template>
    <Menu
      :data="menu"
      :codeMapping="codeMapping"
      :logo="logo"
      :unFavoriteUrl="favoriteUrl"
      :favoriteUrl="unFavoriteUrl"
    />
</template>
<script>
import {Menu} from 'uino-tarsier-vue-lib';

// 模拟的处理过的菜单数据
const mockData = [
  {
    label: 'CMV-CMDB配置管理',
    id: '1',
    isOpen: true,
    children: [
      {
        label: '配置查询',
        id: '2',
        isSelect: true,
        path: 'ci',
      }
    ]
  }
];
const mockMapping = {
  '0280': 'ci',
  '028201': 'org',
  '030701': 'ruler',
  '030702': 'right',
}

export default {
    data:{
        return {
            logo: '',
            favoriteUrl: '/tarsier-vmdb/cmv/customMenu/enshrineMenu',
            unFavoriteUrl: '/tarsier-vmdb/cmv/customMenu/unenshrineMenu',
            menu: mockData,
            codeMapping: mockMapping
        }
    }
    components: {
        Menu
    }
}
</script>

侧边框的store

  • state中的selectedItem提供选中菜单项的信息

import { mapState } from 'vuex';

....
computed: {
  ...mapState('MenuStore', ['selectedItem'])
}

/**
  * 菜单的数据
  * {
        label: '配置查询',
        id: '2',
        isSelect: true,
        path: 'ci',
    }
**/
this.seletctedItem // 选中菜单的数据对象与传入的数据一致

  • mutations中的setSelectById提供修改选中菜单项,传入菜单的id即可
import { mapState } from 'vuex';

...
methods: {
  ...mapMutations('MenuStore',['setSelectById']),
}

this.setSelectById('2'); // 将会选中菜单,并且store中state的selectedItem将会变成修改的菜单数据

  • mutations中的setSelectByCode提供修改选中菜单项,传入菜单的code即可
import { mapMutations } from 'vuex';

...
methods: {
  ...mapMutations('MenuStore',['setSelectByCode']),
}

this.setSelectByCode('0201'); // 将会选中菜单,并且store中state的selectedItem将会变成修改的菜单数据

顶部菜单栏

关于顶部菜单栏

相对于原来的插件用法优化如下:

  1. 无须进行顶部菜单的栏的创建,仅仅需要传入用户信息
  2. 无须关心下拉菜单中的页面跳转
  3. 无须关心document.title的设置, 设置面包屑后会根据面包屑的数据中menuNames字段进行的设置,如果没有将会设置label的名字
  4. 面包屑的修改仅需要进行操作store中的api
  5. 面包屑的导航根据参数有无path,自动调用$router.push进行跳转
使用前准备工作
  1. 确保url上的参数:如token,nav,favorit,less等已经保存到localstorage中和cookie
  2. 确保vuex中注入了navstore并命名为NavStore
  3. 确保vue-router已经注入

顶部菜单栏需要的字段说明, 均为必须

  • user: 用户的信息(后台请求获取, 无须进行处理)
// 各个项目中后台获取的数据都一样
const user = {
  custom3: "http://192.168.1.125:80/vmdb-sso/rsm/cli/read/122/defaultIcon/default_account_photo.png"
  dataStatus: 1
  domainId: 1
  emailAdress: "test@test.com"
  id: 1
  lastLoginTime: 20190530095128
  lockFlag: 0
  loginCode: "admin"
  mobileNo: "13888888888"
  modifier: "admin"
  notes: "拥有的最高权限"
  opCode: "admin"
  opKind: 2
  opName: "admin"
  shortName: "admin"
  status: 1
  superUserFlag: 0
  userDomainId: 1
}

顶部菜单的使用示例

// store.js:

import { NavStore } from 'uino-tarsier-vue-lib';
export default new Vuex.Store({
  state:{},
  modules:{
    NavStore
  }
});


// app.vue:

<template>
    <Nav
      :user="user"
    />
</template>

<script>
import { Nav } from 'uino-tarsier-vue-lib';

const userMock = {
  custom3: "http://192.168.1.125:80/vmdb-sso/rsm/cli/read/122/defaultIcon/default_account_photo.png"
  dataStatus: 1
  domainId: 1
  emailAdress: "test@test.com"
  id: 1
  lastLoginTime: 20190530095128
  lockFlag: 0
  loginCode: "admin"
  mobileNo: "13888888888"
  modifier: "admin"
  notes: "拥有的最高权限"
  opCode: "admin"
  opKind: 2
  opName: "admin"
  shortName: "admin"
  status: 1
  superUserFlag: 0
  userDomainId: 1
}
export default {
    data:{
        return {
            user: userMock
        }
    }
    components: {
        Nav
    }
}
</script>

顶部菜单栏中store

  • mutations中的setBreadeTitle,提供设置面包屑的方法,参数为数组
/**
参数描述:
1. 参数为数组
2. 数组的每个对象必须包含label,非必须的path
3. 如果存在path,将会调用vue-router的push方法 $router.push(path)
**/
const BreadTitleMock = [{
  label: '导航1',
  path: 'path1'
}, {
  label: '导航2',
  path: 'path2',
  menuNames: ['导航1', '导航2']
}];

import { mapMutations } from 'vuex';

...
methods: {
  ...mapMutations('NavStore', ['setBreadeTitle'])
}

// document的title将会根据最后一个值的menuNames进行设置为'导航2 - 导航1'
this.setBreadeTitle(BreadTitleMock);


顶部菜单和左侧栏一起使用

例子主要通过watch监听MenuStore中的selectedItem改变,从而调用NavStore中的setBreadeTitle

<template>
  <div id="app">
    <Load :show="!initState"/>
    <Menu
      v-if="menu && logo"
      :data="menu"
      :logo="logo"
      :unFavoriteUrl="getUrl('unfavorit')"
      :favoriteUrl="getUrl('favorit')"
    />
    <div class="content">
      <Nav
        v-if="useInfo"
        :user="useInfo"
      />
      <div class="view-conten">
      </div>
    </div>
  </div>
</template>
<script>
import { Menu, Nav, Load } from "tarsier-vue-tools";
import { mapMutations, mapState, mapGetters } from 'vuex';

export default {
  components: {
    Menu,
    Load,
    Nav
  },
  data() {
    return {
      menu:null, // 左侧菜单数据
      logo: '', // logo Url
      useInfo: null, // 用户信息
      initState: false, // 是否初始化完成
    };
  },
  computed: {
    // 项目中的获取系统配置数据的store可以忽略
    ...mapGetters(['getPics','getMenuTree', 'getUserInfo', 'getUrl']),

    ...mapState('MenuStore',['selectedItem'])
  },
  created() {
    this.projectInit();
  },
  methods: {
    async projectInit() {
      ....
      // 省略了所有数据的获取过程
      this.logo = this.getPics('LOGO_PATH_LOGIN').varValue;
      this.menu = this.getMenuTree();
      this.useInfo = this.getUserInfo();
      // 初始化完成
      this.initState = true;
    },
    ...mapMutations('NavStore',['setBreadeTitle'])
  },
  watch: {
    // 监听左侧状态栏的变化
    selectedItem: function(val) {
      // 设置面包屑
      this.setBreadeTitle([val]);
    }
  }
};
</script>

Load 窗

关于 Load 窗

这是页面打开前统一的加载标志

参数说明

  • show:是否显示 Load 窗Boolean类型

Load 窗的使用示例

<template>
 <Load show={show} />
</template>
<script>
import { Menu, Nav, Load } from "tarsier-vue-tools";

...
data() {
  return {
    show: true
  }
}
</script>