流程设计器使用文档
引入
-
前端项目中在
/plblic/index.html
中引入打包好的流程设计器
和表单设计器
的静态js -
main.js
Vue.use(window.AvueFormDesign) Vue.use(window.WfDesign)
-
页面中使用
<template> <wf-design style="height: 100vh;" ref="bpmn" :options="options"> <template #toolbar> <el-button size="mini" icon="el-icon-check" @click="handleSubmit">确定</el-button> </template> </wf-design> </template> <script> export default { data() { return { options: { config: true, mode: 'edit', // process: { // id: "as123123", // name: '123' // }, // toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'], form: `{column:[{type:'input',label:'单行文本',span:24,display:true,prop:'1605160330582_56902'}]}`, button: [{ label: '批准', prop: 'wf_pass', display: true }, { label: '驳回', prop: 'wf_reject', display: true }, { label: '打印', prop: 'wf_print', display: true },], user: { leftColumns: [{ title: '姓名', dataIndex: 'name', align: 'center' }, { title: '部门', dataIndex: 'dept', align: 'center' }], rightColumns: [{ title: '姓名', dataIndex: 'name', align: 'center' },], data: [{ key: '1', name: '用户1', dept: '部门1' }, { key: '2', name: '用户2', dept: '部门2' }, { key: '3', name: '用户3', dept: '部门3' }, { key: '4', name: '用户4', dept: '部门4' }, { key: '5', name: '用户5', dept: '部门5' }, { key: '6', name: '用户6', dept: '部门6' }, { key: '7', name: '用户7', dept: '部门7' }, { key: '8', name: '用户8', dept: '部门8' }, { key: '9', name: '用户9', dept: '部门9' }, { key: '10', name: '用户10', dept: '部门10' }, { key: '11', name: '用户11', dept: '部门11' }, { key: '12', name: '用户12', dept: '部门12' },], filterKey: 'name', separator: ',' }, group: { leftColumns: [{ title: '角色', dataIndex: 'name', align: 'center' }, { title: '别名', dataIndex: 'alias', align: 'center' }], rightColumns: [{ title: '角色', dataIndex: 'name', align: 'center' },], data: [{ key: '1', name: '角色1', alias: 'admin1' }, { key: '2', name: '角色2', alias: 'admin2' }, { key: '3', name: '角色3', alias: 'admin3' }, ], filterKey: 'name', separator: ',' } }, drawerVisible: false } }, methods: { handleSubmit() { // type download lint format this.$refs.bpmn.getData('xml', false, false, false).then(data => { this.$message.success("查看控制台") console.log(data) }) } } } </script>
组件属性
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
options | 组件配置(详情见下) | Object | {} |
storage | 是否开启本地缓存 | Boolean | false |
options字段配置
属性 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
config | 是否开启右下角配置 | Boolean | false | true/false |
xml | 初始xml | String | '' | - |
mode | 设计器模式 | String | 'edit' | 'edit'编辑模式/'view'预览模式 |
engine | 设计器xml引擎 | String | 'camunda' | 'camunda'/'flowable'/'activiti' |
toolbar | 顶部工具栏 | Array | ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview', 'get', 'download-xml', 'download-svg'] | - |
lint | 是否开始模型校验 | Boolean | true | true/false |
form | 表单设计器json,详见文档 | String/Json | - | - |
button | 按钮配置,见下 | Array | [] | - |
user | 人员配置,见下 | Array | [] | - |
group | 候选组配置,同user | Array | [] | - |
flows | 流转节点颜色配置(mode='view')时生效,见下 | Array | [] | - |
button按钮配置
属性 | 说明 | 类型 |
---|---|---|
label | 按钮名称 | String |
prop | 按钮属性,用于节点按钮显示 | String |
display | 是否显示 | Boolean |
user人员配置
人员配置临时使用antd-vue的穿梭框,可参考antd-vue的配置,后期会优化或使用其他组件,可能会带来不便请谅解。
穿梭框左侧字段 leftColumns
leftColumns: [{
title: '姓名',
dataIndex: 'name',
align: 'center'
}, {
title: '部门',
dataIndex: 'dept',
align: 'center'
}],
穿梭框右侧字段 rightColumns
rightColumns: [{
title: '姓名',
dataIndex: 'name',
align: 'center'
},],
穿梭框数据 data
data: [{
key: '1',
name: '用户1',
dept: '部门1'
}, {
key: '2',
name: '用户2',
dept: '部门2'
}, {
key: '3',
name: '用户3',
dept: '部门3'
},],
搜索字段 filterKey
filterKey: 'name'
多选id分割字符 separator
separator: ','
flows节点颜色配置
属性 | 说明 | 类型 | 可选值 |
---|---|---|---|
id | 节点id | String | - |
class | 节点class名(可自定义) | String | 'nodeSuccess'/'nodeWarn'/'nodeError'/'lineSuccess'/'lineWarn'/'lineError' |
tips | 节点提示 | String | - |
事件
名称 | 说明 | 回调参数 |
---|---|---|
get | 获取xml按钮回调 | 当前配置的xml |
方法
名称 | 说明 | 参数 |
---|---|---|
getData | 获取设计器xml | type: 类型 xml/svg download: 是否下载 lint: 是否校验模型 format: 是否格式化xml |
插槽
名称 | 说明 |
---|---|
toolbar | 顶部操作栏 |