bpm-portal-ui 接入指南
快速开始
npm install || yarn install npm run dev
访问 http://0.0.0.0:8080（默认流程引擎界面）
若想选择访问流程或者表单请按如下示例
参数 type: form / flow appId: 应用id operate add / edit / copy 例: ?type=form&appId=304281933460799488&operate=add http://0.0.0.0:8080/#/?type=form&appId=304281933460799488&operate=add
若预览表单 访问 /pcview 并且参数如下
// formCode 表单code
// processDefId 流程定义id
// product 是否生产预览
// stageId 环节id
// processInstId 流程实例id
if (this.$route.query.start == 'Y') { // 启动任务
this.frameUrl = `static/frameView/index.html#/pcview?formCode=${this.$route.query.formId}&processDefId=${obj.processDefId}&product=true&stageId=${obj.activityDefId}`
} else if (this.$route.query.start == 'N') { // 代办
this.frameUrl = `static/frameView/index.html#/pcview?formCode=${this.$route.query.formId}&product=true&processInstId=${this.$route.query.processInstId}&stageId=${obj.activityDefId}&processDefId=${obj.processDefId}`
} else if (this.$route.query.start == 'S') { // 已办
this.frameUrl = `static/frameView/index.html#/pcview?formCode=${this.$route.query.formId}&product=true&processInstId=${this.$route.query.processInstId}&stageId=${this.$route.query.stageId}&processDefId=${this.$route.query.processDefId}`
} else if (this.$route.query.start == 'P') { // 流程实例
this.frameUrl = `static/frameView/index.html#/pcview?formCode=${this.$route.query.formId}&product=true&processInstId=${this.$route.query.processInstId}&processDefId=${this.$route.query.processDefId}`
}
配置编辑器数据接口
/src/api/... 为api配置位置
- 在apiSeek.js、flow.js、treeList.js...配置接口地址以及调用的函数名称 编辑器必须接口已经定义，若您需要修改接口地址，则直接修改地址即可，无需修改函数名称，若您想添加新接口，按如下格式添加即可
/*
*函数名称可以不用修改，否则编辑器内调用位置需要修改
apiConfig()中 参数1为 /apiConfig/config.js 中调用的方法名
*/
export function getFormModule(data) {
return apiConfig('getFormModule', { // 查询表单数据
methods: 'GET',
url: `/bpm-server/api/biz-resources/forms/${data.id}`,
data: ''
})
}
- /apiConfig/config.js 中配置axios请求函数 config.js 主要作为中间件，可以针对不同数据结构的接口返回做处理（接口返回符合默认格式无需做处理）
目录
-
页面信息 --> /src/views
flowDesigner 流程编辑器页面代码
FlowSetting 基础设置 components 渲染组件
formDesigner 表单编辑器页面代码
/components/basicSettings 基础设置 /components/formDesign 表单设计 /components/formPreview 表单预览 /mobileView 移动端生产视图 /pcView pc端生产视图
-
表单控件 --> /src/commons/controls
-
公共组件 --> /src/components
表单控件的开发
- 在/src/commons/controls下创建文件夹，名称为你所需要的控件名称（套件名称建议以Kit结尾）
- 创建控件所需要的文件
移动端样式建议参考 Vant-ui pc端样式建议参考Element-ui
- attributes.vue --> 控件编辑时的属性
- config.js --> 控件配置信息
- mobile.vue --> 移动端控件样式
- pc.vue --> pc端控件样式
attributes.vue
mobile.vue
pc.vue
config.js
export default { id: '', name: "input", // 控件名称 sort: 1, group: "default", // 分组 updateTime: "", // 更新时间 controlType: 'control', // kit 套件 group 分组 advanced 高级 dataSource: '', // 数据来源 无 / 数据模型 / ... control: { // --------------------- 控件必须属性 -------------------------------- align: '', // 对齐方式 displayName: '', // 显示名称 introduction: '', // 简介 titleLength: 20, // 标题最大长度 labelWidth: '130', // 标题宽度 propsForm: '', // 若为子表单，则为表单code objPath: '', subTable: false, // 是否在子表格 subTableType: '', // 子表格类型 code: '', // 字段标识 labelPosition: 'right', defaultType: 'String', type: "input", // 控件类型 label: "单行输入框", // 控件标题 required: false, //是否必填 icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAG1BMVEVHcEwZHiYZHiUaHyMdKCgZHiYaISQYHiQZHiYtE7tIAAAACXRSTlMAZVUSCTQmQxxVUCeiAAAA7ElEQVQoz9WSTW7CQAxGTQIlSz6XDFumvUBSUYklpTkAkXqAgkTXmS5YE1Gp167HM8micwK+ReK8/DzbCtG9Z4oyhTMghRnwmcDeoEugW7jH1NP10bS97SJ8wDVjvdsCfI0eFr+vXyAxAdYl5Wqy5SZ3HD1isUuiAgeiOcJXsSZqSz9DFQ/eI52/8ThIFU6bptmrid7PNsAaGjHl375Q2AYoJoeny2uAMF8SZ8TxPIiKsIyeaQIa4HzQVfVqvIzNzNBpdVTYhgXlWGT4mP5Ce/MD+lhT6D7Ao0feYDoBq53lf+ve3uSpn7v5C/8Auc4hwIODgzAAAAAASUVORK5CYII=", // 图标 // --------------------- 控件自身属性 -------------------------------- placeholder: "请输入", // 提示语 tipText: "", // 提示文字 defaults: { type: 'const', value: '' }, // 默认值 rules: "", // 校验规则 format: '', // 显示格式 valueLength: 20, // value最大长度 inputType: 'text', proportion: 100 // 占比 }, colList: [] // 控件占比字段列表 } - 无需引入，直接运行查看控件
注意
- 控件尽量定义灵活通用
- 套件类型的控件是为了解决特殊的业务需求，需要在内部编写业务代码
- 预览分为编辑预览，生产预览
组件联动主要文件
- paramsEventListener.js 接受数据
- publicControlPackage 数据改变锚点
- bpm-portal-ui/src/utils/dashboardEventBus.js 事件中心
- bpm-portal-ui/src/commons/mixin/dynamicParameters.js 动态参数处理
- bpm-portal-ui/src/commons/mixin/dashboardLinkage.js@handlerLinkageItem 处理联动事项
组件化打包命令
build:componnent 打包组件
build:componnentAnalyzer 打包组件并查看依赖关系
build:components-dll 依赖拆分
build:style build样式
build:ecoding 打包全部
注：打包组件样式前需要放开postcss配置文件中的命名空间插件注释
作为组件库引入方式
- 安装
npm i ecoding -S
- 使用
import 'ecoding/ecoding/static/ExpansionModules/config/moduleList.js'
import 'ecoding/ecoding/static/ExpansionModules/config/modulesLoader.js'
import 'ecoding/ecoding/style/main.css'
import poratl from 'ecoding'
Vue.use(poratl, {
vuex: store
})
- 按需引入
因为需要注册 vuex 所以统一使用 use 方式
import {
FormDesign,
FormRenderPc,
FlowDesign,
FlowSheet
FormRenderMobile
} from 'ecoding'
Vue.use(FormDesign, {
vuex: store
})
Vue.use(FormRenderPc, {
vuex: store
})
Vue.use(FlowDesign, {
vuex: store
})
Vue.use(FlowSheet, {
vuex: store
})
Vue.use(FormRenderMobile, {
vuex: store
})
- 使用组件
<FormDesign :operate="operate" :path="'/'" :appId="appId" :id="id" :formCode="formCode" :version="version" :type="type" :bpm_homepage_code="bpm_homepage_code" :status="status" />
<FormRenderPc :path="'/'" formCode appId version status />
<FlowSheet :path="'/'" appId processDefId status />
<FlowDesign :path="'/'" type="process" appId operate="edit" id status />
<FormRenderMobile
correlationBizId="476352569854132224"
workItemId="476352573045997568"
appId="test"
formCode="f_asset_change"
processInstId="476352564300873728"
stageId="Z1S3Xkc9J"
product="true"
processDefId="466665183532548096"
page="processStart"
approval_form_state="allow"
path="/"
/>- 事件
FormDesign、FlowDesign 支持 close save 事件回调
<FormDesign @close="" @save="" />
<FlowDesign @close="" @save="" />