关于状态栏区段
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
评论: