流程设计器使用文档

引入

• 前端项目中在/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("查看控制台")
        })
      }
    }
  }
  </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/svgdownload: 是否下载lint: 是否校验模型format: 是否格式化xml |

插槽

| 名称 | 说明 | | ------- | ---------- | | toolbar | 顶部操作栏 |

项目目录

.

.