关于边栏面板

边栏面板可以在以下三个区域显示:左边栏右边栏状态栏左侧

边栏面板类型

边栏面板分为两个类型:

  1. 预定义面板:在系统中预先定义的面板,可以分配访问权限
  2. 动态面板:在系统运行时动态打开的面板,比如显示仪表盘的配置页面,显示仪表盘部件的属性页面,等等

开启面板

可以通过Config配置默认的边栏面板,也可以通过JS动态开启面板

1. Config配置

src/module/a-layoutpc/front/src/config/config.js

  layout: {
    sidebar: {
      left: {
        panels: [
          { module: 'a-layoutpc', name: 'panelMenu' },
          { module: 'a-layoutpc', name: 'panelAtom' },
          { module: 'a-layoutpc', name: 'panelSearch' },
        ],
      },
    },
  },

layout.sidebar.left.panels定义左边栏默认开启的面板

名称 说明
module 面板所属模块
name 面板名称

2. JS开启

模块a-layoutpcnavigate进行了扩展,增加了两个选项scenesceneOptions,用于指定面板打开的区域和参数

2.1 开启预定义面板

在右边栏开启菜单面板

const panelUrl=null;
this.$view.navigate(panelUrl, { 
  scene: 'sidebar', 
  sceneOptions: {
    side: 'right',
    module: 'a-layoutpc',
    name: 'panelMenu',
  } 
});
名称 说明
panelUrl 由于预定义面板有约定的url,所以这里为空
scene sidebar:指定在边栏开启
sceneOptions 开启参数
sceneOptions.side 开启的区域:left/right/bottom
sceneOptions.module 面板所属的模块
sceneOptions.name 面板的名称

2.2 开启动态面板

在右边栏显示仪表盘部件的属性页面

src/module/a-dashboard/front/src/components/widget.vue

    onWidgetProperties(widget) {
      const panelUrl=`/a/dashboard/widget/properties?widgetId=${this.options.id}`;
      this.$view.navigate(panelUrl, {
        scene: 'sidebar',
        sceneOptions: { side: 'right', name: 'properties', title: 'Properties' },
        context: {
          params: {
            dashboard: this.dashboard,
            widget: this,
          },
        },
      });
    },
名称 说明
panelUrl 面板页面的Url
scene sidebar:指定在边栏开启
sceneOptions 开启参数
sceneOptions.side 开启的区域:left/right/bottom
sceneOptions.name 面板的名称
sceneOptions.title 面板的标题
context.params 传入面板的参数,请参见:页面传参与返回值

添加预定义面板

由于面板的本质是通过View容器来显示一个页面,所以,不需要单独开发类似Vue component之类的组件,只需要在后端定义相应的功能即可

我们以面板菜单为例来说明如何定义一个预定义面板

1. 功能定义

src/module/a-layoutpc/backend/src/meta.js

...
panelMenu: {
  title: 'Menu',
  url: '/a/base/menu/list',
  menu: 2,
  public: 1,
},
...
名称 说明
title 面板的标题
url 面板的Url
menu 常量2:对应面板的类别
public 是否公开。如果是公开就不需要进行授权,所有用户均可访问

2. 功能初始化

src/module/a-layoutpc/backend/src/service/version.js

      if (options.version === 1) {

        // roleFunctions: panels
        const rolePanels = [
          { roleName: null, name: 'panelMenu' },
          { roleName: null, name: 'panelAtom' },
          { roleName: null, name: 'panelSearch' },
        ];
        await this.ctx.meta.role.addRoleFunctionBatch({ roleFunctions: rolePanels });

      }

    }

我们需要在模块数据版本初始化时,向数据库中添加面板的授权记录。因为面板的publictrue,所以,这里的roleNamenull

  1. 关于模块数据版本的概念,请参见:模块数据版本
  2. 面板的功能定义,请参见:功能与菜单
  3. 面板的功能授权,请参见:功能授权