yd-header

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

使用说明

yd-header中包含 YdHeader YdSidebar YdHeader: 头部组件，原先的menu-list属性不需要了，改为组件内部请求菜单数据，详见组件说明 YdSidebar: 侧边栏组件，数据有头部传递出来，详见组件说明

安装
npm i yd-header --save 或者yarn add yd-header
使用
1.[*.entry.js]
例（'menuComp'名字可以任意命名）：
import menuComp from 'yd-header'
Vue.use(menuComp)

2.[*.vue]
- YdHeader组件说明
<yd-header
  :active-menu=""
  :active-tenant=""
  :tenant-list=""
  :user-name=""
  :email=""
  :over-view-url=""
  :has-overview-url=""
  :page-level=""
  :system-id=""
  :help-doc-url=""
  @logout=""
  @changeTenant=""
  @notInMenuList=""
  @on-header-menu=""
  @on-page-two-menu=""
  @on-all-menu=""
></yd-header>

| 参数      | 说明       | 类型   | 可选值                                    |
| --------- | ---------- | ------ | ----------------------------------------- |
| name      | 系统名称   | String | 默认值:云道平台                           |
| activeMenu      | 当前选中菜单，必填   | String | 传各中心对应的菜单名称                           |
| tenantList | 租户列表，必填   | Array | 例子:[{tenantCode: 1,tenantName: '租户A' }]                 |
| activeTenant | 当前租户，必填   | String,Number | 对应tenantList中的tenantCode       |
| userName  | 当前用户名，必填 | String |              
| email  | 当前用户邮箱，必填 | String |                                 |
| overViewUrl | 总览地址,必填（需要根据当前环境动态配置） | String | 例子: http://10.128.22.189:31166 |
| hasOverviewUrl | 若不传overViewUrl时必填为false | Boolean | 默认true，有传overViewUrl属性；false为没有传overViewUrl属性 |
| loopTime | 公告轮询时间 | Number | 默认为10，单位为分钟 |
| pageLevel | 当前页面层级 | Number | 默认为工作台所在页面为1级页，值为 1，目前有1和2 |
| systemId | 系统id，有系统ID时必填，切换系统要传 | String,Number | 用户选择系统 |
| helpDocUrl | 帮助文档地址，必填 | String | 例子：http://10.128.22.189:30098/user/_book/faq/faq.html | |

事件

| 事件名称      | 说明                     | 回调参数                                         |
| ------------- | ------------------------ | ------------------------------------------------ |
| changeTenant  | 切换租户                 | tenantCode: 对应tenantList中的tenantCode         |
| notInMenuList | 当前的菜单不在菜单列表中 | (menuName,tenantCode) 当前的菜单名称, 当前的租户 |
| logout | 退出回调事件 | 无 |
| on-header-menu | 接收当前头部菜单项对应的侧边栏菜单数据 | 是一个json对象：{ menuList: [], activeMenuName: '' }；其中 menuList: 当前头部菜单项对应的侧边栏菜单数据，activeMenuName：选中的头部菜单名称 |
| on-page-two-menu | 当处于一级页面时，接收所有二级页面的菜单数据 | menuList: 所有二级页面的菜单数据 |
| on-all-menu | 接收所有菜单数据 | menuList: 收所有菜单数据 |

- YdSidebar组件说明
<yd-sidebar
  :active-header-menu=""
  :menu-list=""
  :no-side-bar=""
  :is-full-path=""
  :active-tenant=""
  :system-id=""
  @handle-select-sidebar=""
  @handle-toggle-sidebar=""
  :tran-route-func=""
></yd-sidebar>

| 参数      | 说明       | 类型   | 可选值                                    |
| --------- | ---------- | ------ | ----------------------------------------- |
| activeHeaderMenu | 当前头部菜单选中的菜单名称，必填 | String | 头部菜单选中的菜单名称，与YdHead组件中的activeMenu同值 |
| menuList | 侧边栏菜单（可通过头部事件on-header-menu获取menuList属性值），必填，根据本中心需求，自行判断是否对menuUrl进行截取路径处理，如若截取，则isFullPath属性必传，详见isFullPath介绍 | Array | 侧边栏菜单数据 |
| noSideBar | 侧边菜单栏是否显示 | Boolean | 默认为显示false |
| isFullPath | 是否对侧边菜单栏数据中的menuUrl进行处理截取路径部分，该属性用来标识处理过的菜单数据中的menuUrl是否是全路径 | Boolean | 默认为显示全路径true；true则显示全路径，例如：http://127.0.0.1:8080/home；false则不显示IP端口，例如：/home |
| activeTenant | 当前租户，必填   | String,Number | 对应tenantList中的tenantCode       |
| systemId | 系统id，有系统ID时必填，切换系统要传 | String,Number | 用户选择系统 |
| tran-route-func | 路由转换函数，path参数为跳转路由地址（如果isFullPath为true，该路由地址就为全路径？之前的所有内容），返回其对应左边菜单对应的路由地址，需要时才传参 | Function | 用于页面触发路由跳转时，能选中对应左边菜单，例如 tranRouteFunc(path){ return path;}
                                                                                             
事件

| 事件名称      | 说明                     | 回调参数                                         |
| ------------- | ------------------------ | ------------------------------------------------ |
| handle-select-sidebar | 侧边栏切换事件 | menuName: 当前点击菜单项的菜单名称 |
| handle-toggle-sidebar | 侧边栏收缩展示值获取事件 | collapse: 侧边栏是收缩还是展开 |

3. 布局及样式代码参考（非完整代码，仅供参考，结合实际调整）
<template>
    <div class="app-wrapper">
        <yd-header></yd-header>
        <div class="main-wrapper">
            <yd-sidebar></yd-sidebar>
            <div class="main-container"></div>
        </div>
    </div>
</template>
<style>
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-wrapper {
  height: calc(100% - 50px);
  display: flex;
  width: 100%;
}

.main-container {
  flex: 1;
  height: 100%;
  overflow: auto;
}
</style>

4. url参数说明：

systemId 系统id
tenantCode 租户
sidebarMenuId 当前选中侧边栏菜单id