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配置位置

1. 在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: ''
	})
}

2. /apiConfig/config.js 中配置axios请求函数 config.js 主要作为中间件，可以针对不同数据结构的接口返回做处理（接口返回符合默认格式无需做处理）

目录

1. 页面信息 --> /src/views

   flowDesigner 流程编辑器页面代码

   FlowSetting 基础设置 components 渲染组件

   formDesigner 表单编辑器页面代码

   /components/basicSettings 基础设置 /components/formDesign 表单设计 /components/formPreview 表单预览 /mobileView 移动端生产视图 /pcView pc端生产视图

2. 表单控件 --> /src/commons/controls

3. 公共组件 --> /src/components

表单控件的开发

1. 在/src/commons/controls下创建文件夹，名称为你所需要的控件名称（套件名称建议以Kit结尾）
2. 创建控件所需要的文件 移动端样式建议参考 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: [] // 控件占比字段列表
     }

3. 无需引入，直接运行查看控件

注意

1. 控件尽量定义灵活通用
2. 套件类型的控件是为了解决特殊的业务需求，需要在内部编写业务代码
3. 预览分为编辑预览，生产预览

组件联动主要文件

1. paramsEventListener.js 接受数据
2. publicControlPackage 数据改变锚点
3. bpm-portal-ui/src/utils/dashboardEventBus.js 事件中心
4. bpm-portal-ui/src/commons/mixin/dynamicParameters.js 动态参数处理
5. bpm-portal-ui/src/commons/mixin/dashboardLinkage.js@handlerLinkageItem 处理联动事项

组件化打包命令

build:componnent 打包组件

build:componnentAnalyzer 打包组件并查看依赖关系

build:components-dll 依赖拆分

build:style build样式

build:ecoding 打包全部

注：打包组件样式前需要放开postcss配置文件中的命名空间插件注释

作为组件库引入方式

1. 安装

npm i ecoding -S

2. 使用

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
})

3. 按需引入

因为需要注册 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
})

4. 使用组件

  <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="/"
    />

5. 事件

FormDesign、FlowDesign 支持 close save 事件回调

<FormDesign @close="" @save="" />
<FlowDesign @close="" @save="" />