dfem-nutflow v2.0.3

流程设计器使用文档

引入

• 前端项目中在/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字段配置

button按钮配置

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节点颜色配置

事件

方法

插槽

项目目录

.

.