dfem-nutflow

流程设计器使用文档

引入

• 前端项目中在/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/svg download: 是否下载 lint: 是否校验模型 format: 是否格式化xml

插槽

名称	说明
toolbar	顶部操作栏

项目目录

.

.