关于状态栏区段

CabloyJS对状态栏区段进行了抽象，既有利于灵活定制，也便于开发新的按钮

模块a-layoutpc内置了两个状态栏区段，分别是：

名称 说明
时钟 显示时钟
版权 显示版权

我们以版权为例来说明如何开发一个状态栏区段

1. 创建一个Vue组件

状态栏区段本身是一个Vue组件，但是巧妙的使用了Vue的多个语法特性。为了更清晰地说明，这里先贴出全部源码，再做详细解释

src/module/a-layoutpc/front/src/components/sections/copyright.vue

<template>
  <span>{{$text('CopyrightTip')}}</span>
</template>
<script>
// export
export default {
  install,
};

// install
function install(_Vue) {
  const Vue = _Vue;
  const ebLayoutSectionBase = Vue.prototype.$meta.module.get('a-layoutpc').options.mixins.ebLayoutSectionBase;
  return {
    mixins: [ebLayoutSectionBase],
  };
}

</script>

1.1 export default

首先，我们并不像一般的Vue组件那样直接导出Options对象，而是像Vue插件一样导出一个带install方法的对象

1.2 mixins: [ebLayoutSectionBase]

ebLayoutSectionBase是模块a-layoutpc提供的区段基类，所有区段都必须mixin这个基类

这里我们就可以解释为什么不能直接导出Options对象。因为模块a-layoutpc是异步加载的模块，而所有区段又必须继承ebLayoutSectionBase。如果直接导出Options对象，那么在编译期是获取不到ebLayoutSectionBase的，所以mixin必然失败

2. 引用Vue组件

为了让系统可以找到此Vue组件，需要在组件清单中引用

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

import sectionCopyright from './components/sections/copyright.vue';

export default {
  sectionCopyright,
};

3. 后端功能定义

在一个复杂的系统中，会涉及到数据授权的问题，我们需要对区段进行权限控制。那么，我们需要在后端定义与区段对应的功能，从而可以对区段进行授权

3.1 功能定义

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

...
sectionCopyright: {
  title: 'Copyright',
  component: 'sectionCopyright',
  menu: 4,
  public: 1,
},
...
名称 说明
title 区段的标题
component 区段所对应的Vue组件
menu 常量4：对应区段的类别
public 是否公开。如果是公开就不需要进行授权，所有用户均可访问

3.2 功能初始化

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

      if (options.version === 1) {

        // roleFunctions: sections
        const roleSections = [
          { roleName: null, name: 'sectionCopyright' },
          { roleName: null, name: 'sectionClock' },
        ];
        await this.ctx.meta.role.addRoleFunctionBatch({ roleFunctions: roleSections });

      }

    }

我们需要在模块数据版本初始化时，向数据库中添加区段的授权记录。因为区段的public为true，所以，这里的roleName为null

  1. 关于模块数据版本的概念，请参见：模块数据版本
  2. 区段的功能定义，请参见：功能与菜单
  3. 区段的功能授权，请参见：功能授权