dfem-nutflow

2.0.3 • Public • Published

流程设计器使用文档

引入

  • 前端项目中在/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 顶部操作栏

项目目录

输入图片说明.

输入图片说明.

Package Sidebar

Install

npm i dfem-nutflow

Weekly Downloads

0

Version

2.0.3

License

none

Unpacked Size

4.08 MB

Total Files

16

Last publish

Collaborators

  • zoutiancong