关于边栏面板

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

最佳实践：可以根据业务需要开发自定义的边栏面板，然后再创建一个新的PC布局，或修改现有PC布局的配置

PC布局配置，请参见：PC布局配置

边栏面板类型

边栏面板分为两个类型：

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

JS打开面板

可以在系统运行时，通过JS随时打开面板

模块a-layoutpc对方法$view.navigate进行了扩展，增加了两个选项scene和sceneOptions，用于指定面板打开的区域和参数

1. 打开预定义面板

在右边栏打开菜单面板

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

2. 打开动态面板

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

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

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

创建预定义面板

由于面板的本质是通过View容器来显示一个页面，所以，不需要单独开发类似Vue component之类的组件，只需要定义静态资源即可

我们以面板数据为例来说明如何创建预定义面板的静态资源

1. 定义静态资源

定义一个静态资源数组

src/module-system/a-layoutpc/backend/src/config/static/resources.js

  1. 1module.exports = app => {
  2. 2  const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3  const resources = [
  4. 4    // panels
  5. 5    {
  6. 6      atomName: 'Atom',
  7. 7      atomStaticKey: 'panelAtom',
  8. 8      atomRevision: 10,
  9. 9      atomCategoryId: 'a-layoutpc:panel.General',
  10. 10      resourceType: 'a-layoutpc:panel',
  11. 11      resourceConfig: JSON.stringify({
  12. 12        url: '/a/basefront/atom/list',
  13. 13      }),
  14. 14      resourceRoles: 'root',
  15. 15    },
  16. 16  ];
  17. 17  return resources;
  18. 18};
名称 说明
atomStaticKey 系统自动添加模块名称前缀，生成a-layoutpc:panelAtom
atomCategoryId 资源归属目录。资源类型全称a-layoutpc:panel作为一级目录
resourceType 资源类型全称
resourceConfig 资源配置信息
resourceConfig.url 需要打开的页面路径
resourceRoles 资源授权对象，这里是角色root

角色root是整个角色树的根，也就意味着所有用户（包括匿名用户）均可访问此资源

更多配置说明，参见静态资源

2. 注册静态资源

前面定义好一组静态资源，接下来就需要在模块的meta文件中进行注册

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

  1. 1const staticResources = require('./config/static/resources.js')(app);
  2. 2
  3. 3base: {
  4. 4  statics: {
  5. 5    'a-base.resource': {
  6. 6      items: staticResources,
  7. 7    },
  8. 8  },
  9. 9},
名称 说明
a-base.resource 原子类型的全称。在这里，原子类型resource是由模块a-base提供的
items 静态资源数组