dd_flow_design v1.1.1

dd_flow_design

1.基于vue、iview仿钉钉流程设计界面

2.在这基础上扩展发起审批、审批详情组件

3.参考了掘金@游刃有余的文章https://juejin.im/post/5d4a3e0e51882506a87c6ad1  和  github @Stavin Li的https://github.com/StavinLi/Workflow.git

效果图

流程设计：

流程节点为空的时候：

审批人选择：

条件选择：

发起审批：

审批节点编辑：

审批详情：

使用

npm install --save vue

npm install --save iview

npm install --save dd_flow_design

import flowDesign from 'dd_flow_design'

import 'dd_flow_design/lib/flowDesign.css'

import 'iview/dist/styles/iview.css';

Vue.use(flowDesign)


流程设计  flowDesign
<flowDesign
      :flowData="flowData"
      :isTried="isTried"
      :relationForm="relationForm"
      @show-approver-drawer="showApproverDrawer"
      @show-condition-drawer="showConditionDrawer"
      @show-poptip-add="showPoptipAdd"
      @custom-add-node="customAddNode"
      @custom-add-condition="customAddCondition"
    ></flowDesign>

发起审批  flowDetails
<flowDetails
      :bpmnModelNode="nodes"
      :flowType="'launchApproval'"
      :isEdit="isEdit"
      @add-node="emitAddNode"
      @edit-node="emitEditNode"
    ></flowDetails>

审批详情  flowDetails
<flowDetails
      :bpmnModelNode="nodes"
      :flowType="'approvalDetails'"
    ></flowDetails>        

参数说明

flowDesign组件的：

1.flowData Object 流程节点数据

如果是新增的，一开始给个开始节点 
flowData = {
  name: "发起人",  //节点名称
  nodeId: "123",  //节点id
  type: "start",
  properties：{
    groupType: "level_menber",
    approvals: []
  }
}

flowData = {
  name: "发起人",  //节点名称
  nodeId: "123",  //节点id
  type: "start", //节点类型 start:开始节点 approver：审批人节点 节点有conditionNodes那type=route放分支节点  节点有conditionNodes,并且有条件type=condition：条件节点
  properties: { //节点属性，一些自定义参数
    activateType: 2, //1依次审批 2 会签  3或签
    groupType: "level_menber", //审批人类型 parent_level：上级  level_continue_mutil：连续多级 level_dept：部门  level_menber：成员 level_me：自己 level_role：角色  level_post：岗位
    approvals: [{
      assignee:'', //审批人id
      assigneeUserName:'', //审批人名字
      avatar: null, //审批人的头像
      endTime: 1584610392000, //审批时间
      processState: 1, //审批状态  1：已撤销 2：已拒绝  3：已转交  4：已驳回  5：已同意  8：待审批  9：未到审批 10：已被处理
      signatureImage: null, //签名图片，根据自己业务需求自定义
      taskAttachmentList: [{ //审批附件或图片
        filePath:'', //审批附件或图片路径
        fileName:'' //审批附件或图片名称
      }], 
      taskComment: "",//审批意见
      showMore:false,//false，审批意见没超过50个字符，如果审批意见超过50个字符收起来，只展示两行
      transferList: [], //转交人员，里面的参数和approvals一样
    }],
    assigneeEmpty: false, //若该审批人空缺，由其在通讯录中的再上一级主管代为审批
    manual: true, //是否手写签名 true同意按钮 false签名
    nodeEndLevel: -1, //审批终点
    groupType: "null", //审批人类型 parent_level：上级  level_continue_mutil：连续多级 level_dept：部门  level_menber：成员 level_me：自己 level_role：角色  level_post：岗位。主要是给流程设计回显用到，还有发起审批的时候，根据类型获取人员审批
    groups: [{ //公司、部门、岗位或角色集合
      groupId:'', //公司、部门、岗位或角色的id
      groupName:'', //公司、部门、岗位或角色的名称
    }],
    waiting:true,//true整个节点还没审批完，false整个节点已经审批完
  },
  childNode:{ //下个节点，如果没有下一个节点，childNode是null或不要返回childNode，参数和上一层一样，关键是多了一个prevId参数
    prevId:"123"，关联上一个节点的nodeId
    type: "approver",
    ...name
  },
  conditionNodes:[ //条件节点，参数和上一样,类型不一样，properties多了conditions条件
  {
     type: "condition",
     prevId:"123",
     properties:{
       conditions:[{
           compareKey: "<",
           paramKey: "money",
           paramLabel: "金额",
           value: "10"
       }]
     },
     childNode:{
       ....
     }
  }
  ],
}

2.isTried Boolean false 主要是提交节点的时候，判断节点的审批人或条件是否为空，如果有空的，对应的节点会变红

3.relationForm Array []  表单控件，主要是给条件用到的

4.flowType String 'flowDesign'  流程类型 'flowDesign'：可以编辑的   'preview'：预览流程

5.nodeClick  true 允许审批人自定义事件

6.conditionClick  true 允许条件分支自定义事件

flowDetails组件的：
1.bpmnModelNode Object {} 发起审批和审批详情数据节点，具体可以去git的examples看示例

2.flowType String 'launchApproval' 类型 'launchApproval':发起审批  'approvalDetails':审批详情

3.isEdit Boolean false  -- false：不可编辑 true：可以编辑 主要是给发起审批用的

事件说明

flowDesign组件的：
1.show-approver-drawer  //点击审批人节点事件，根据自己业务需求来实现
  返回值 data  当前节点数据

2.show-condition-drawer  //点击条件节点事件，根据自己业务需求来实现
  返回值 data  
  data = {
    conditionItem:{},// 当前条件节点
    nodeConfig:{},// 当前节点的父级节点
  }

3.show-poptip-add  //点击节点加号 
  返回值 data 当前节点数据

4.custom-add-node //点击审批人  配合nodeClick参数使用
  返回值 data 当前节点数据

5.custom-add-condition //点击条件分支  配合conditionClick参数使用
  返回值 data 当前节点数据

flowDetails组件的：  

1.add-node //点击添加节点事件 返回data，上个节点的数据

2.edit-node //编辑节点事件 返回data  data = {nodeItem:{},approvals:[]} nodeItem当前节点 approvals当前审批人

码云 GIT 地址

https://gitee.com/huanglsj/flowDesign.git

安装依赖
npm install

本地运行
npm run serve

打包
npm run build