盘古低代码平台组件开发
介绍
当Pangea提供的官方组件不满足业务需求时，开发人员可以通过自定义组件开发脚手架进行组件开发。
脚手架目录
bash
vue-component
└── src
├── assets # 图片等静态资源文件
├── components # 公共组件
├── layout # 布局组件
├── router # 路由
├── utils # 公共工具方法
├── views # 组件文件夹
├── Demo # 组件脚手架demo示例
├── ComDemo # 设计器自定义组件示例
├── CustomButton # 设计器表格组件自定义操作按钮示例
└── TableButton # 设计器表格组件自定义表格按钮按钮示例
├── MyCom1 # 自定义组件1
├── index.js # 组件入口文件
├── index.vue # 组件UI文件
└── configJson.js # 组件配置json
├── MyCom2 # 自定义组件2
├── index.js
├── index.vue
└── configJson.js
└── ...开发组件时需要在src/views路径新建一个组件文件夹，文件中包含index.js、index.vue和configJson.js三个文件。
| 文件名称 | 说明 |
|---|---|
| index.js | 组件入口文件，内容参照ComDemo，无需修改。 |
| index.vue | 组件UI渲染文件，组件开发时需遵守组件开发规范，参考组件开发规范章节。 |
| configJson.js | 组件配置信息文件，用于描述组件的可配置属性，参考右面板属性配置章节。 |
组件调试
将/src/views/TestEntry/index.vue文件中import的组件路由调整为你需要本地调试的组件文件夹中index.vue路径，在组件脚手架根目录命令行执行npm start即可调试当前组件。
开发说明
组件参数
在编写组件index.vue文件时，可通过props中的config属性获取组件通过configJson.js文件设置的组件参数。
Ajax请求方法
组件中ajax请求通过如下方式进行调用。
js
import request from "@/utils/request";
// GET
request("/api?parma");
// POST
request("/api", {
method: "POST",
body: param
});
// PUT
request("/api", {
method: "PUT",
body: param
});
// DELETE
request("/api", {
method: "DELETE",
body: param
});注意
- request方法中的api请求路径需要以
/开头，例如/api/getUser，否则，在真实请求路径中会插入访问路由路径。 - 可通过request().then()方法里进行接口调用后的回调操作。
- 系统在request方法中统一做操作成功及失败的提示，请勿在request的.then方法中做弹框提示。
本地存储
组件中本地存储示例如下：
js
// 存储
this.$ls.set('foo', 'boo');
// 获取
this.$ls.get('foo');
// 删除
this.$ls.remove('foo');
// 监听
this.$ls.on('foo', callback)
// 取消监听
this.$ls.off('foo', callback)多语言
自定义组件中的文案建议使用国际化，分为两种类型：
- 动态文案——作为属性在页面设计器中动态配置的文案，当组件多次使用时，可设置为不同的文案
- 预设文案——通用性文案，不需要使用者在页面设计器中动态设置的文案
配置方式如下：
动态文案
该组件属性可使用多语言输入框进行维护，组件的属性描述信息配置如下所示：
json
{
"json": [
{
"type": "i18nInputBox",
"col": "title",
"label": "动态文案",
"props": {}
},
]
"props": {
"title": {
"intlKey": "",
"val": "默认文案"
}
}
}其中，val字段用于设置属性的默认语言文案，支持在页面设计器中进行文案修改。编写组件时，可通过props获取到该属性的intlKey值，通过$t(intlKey)语句进行国际化文案的显示。
预设文案
自定义组件在使用多语言时，需要前往「控制台——应用开发——多语言——文案管理」中创建多语言文案，将文案的多语言标识（$t(语言标识字符串)）回填到组件中，并在组件的配置信息中添加如下配置：
{
defaultIntl: ["语言标识字符串1", "语言标识字符串2", "语言标识字符串3", ...]
}自定义组件在使用多语言后，文案的维护都在「控制台——应用开发——多语言——文案管理」中进行，相同的文案可以使用同一多语言标识。
权限配置
Step.1 JSON配置
自定义组件中的一些操作需要授权限控制，可以在组件对应的configJson.js的buttonList中添加需要控制的操作，代码示例如下：
js
const comJson = {
json: [
{
xxx: "xxx"
}
],
buttonList: [
{
butCode: "abtn_query",
butName: "查询"
},
{
butCode: "abtn_add",
butName: "新增"
}
],
props: {
xxx: "xxx"
}
};
export default comJson;Step.2 权限配置
将自定义组件拖入页面设计器中保存，再到角色管理中找到对应的菜单把数据权限打开
<img src={require('../../static/img/dev/组件开发-权限配置.png').default}/>
Step.3 代码使用
组件中使用代码如下：
js
<script>
export default {
name: "xxx",
props: {
buttonList: {
type: Array,
default() {
return [];
}
}
},
}
</script>组件打包
当组件完成开发后，可执行以下命令在脚手架根目录进行打包操作：
bash
npm run build:com注意
- 打包前修改
package.json文件中scripts属性的build:com属性值，--name后面的myCom修改为需要上传组件的组件编码，myCom后面的文件路径调整为需要打包组件的入口文件 - 打包后的文件在根目录
dist文件夹中，comName.umd.min.js为最终需要上传你的js文件，其中comName为组件编码。 - 修改上传的自定义组件文件时，若文件名未修改，由于浏览器缓存，会出现组件修改部分未生效的问题。可通过在文件名添加后缀的方式解决。或在打包命令中添加
--filename $RANDOM参数，但该方法生成的文件名不会包含comName编码。建议通过在文件名添加后缀的方式进行解决。
主工程中联调
前置条件：自定义组件已打包上传且在页面中使用。开始开发前可先打包一个简单页面上传一下，以便本地自定义开发时可找到对应的组件编码。
Step.1 修改变量
将src/common/constant中的useLocalCom变量修改为true。
Step2 新建文件夹
在src下新加customComs文件夹，该文件夹中用于放置自定义组件。
框架中获取本地自定义组件方式 customComs/组件编码/index.(js|vue),即customComs下的组件文件夹名称为各个自定义组件的组件编码。 该方式对于自定义上传组件，表格自定义按钮，表格自定义单元格，首页自定义卡片均可。
提示
开发完成后无需删除customComs文件夹，该文件夹已在gitignore中配置，不会提交到远程仓库，仅用于本地调试开发。