精华内容
下载资源
问答
  • 2019-05-21 11:20:12

    工作流 概念:

    workflow流程性通知和审批控制,业务流程中、发送、提供附加信息或进行附加业务处理,两个或两个以上的人为共同目标,连续以并行或串行的方式完成某一业务。

    工作流 设计:

    按照业务规划流程图,根据流程图进行workflow的基础架构。统筹每个流程的流程编码FUNCTIONID以及业务类型BUSITYPE。最好每个类型表设计版本,以便新旧业务流程变动。
    设计工作流活动表:lwactivity , 创建此节点的时候要执行的活动以及离开此节点时需要进行的活动(执行BeforeInit、AfterInit、BeforeEnd、AfterEnd任务)。
    设计工作流活动流转定义表:lwprocesstrans, 流程编码processid,以及起始节点和跳转节点,并根据流转标记判断要跳转的节点。

    设计工作流轨迹表: lwmission,missionid以及子节点submissionid(记录进入此节点的次数),以及对应的业务参数开发流程:获取节id和流程id,如果没有节点并满足创建初始节点标记,根据业务类型和流程编码---获取初始节点编码,创建工作流记录编码和子节点“1”,创建工作流记录并根据属性映射准备属性值。

    设计工作流字段映射表:lwfiledmap,设计每个节点属性值对应的属性类型。
    如果已有节点,进行业务分配,执行当前任务,创建下一节点任务、删除当前任务。如果是最中任务节点,执行当前任务后删除当前节点。

    1. 根据流程图,设计工作流活动表lwactivity:

      字段属性

      属性描述

      申请节点

      分部审批节点

      总部审批节点

      ActivityID

      活动id

      10001

      10002

      10003

      ActivityName

      活动名

      维护

      初审

      复审

      ActivityDesc

      活动说明

      客户完善申请信息

      分部进行初审

      总部进行复审

      FunctionID

      功能节点号

      10001

      10002

      10003

      BeforeInit

      活动进入前动作无

       

      BeforeInitType

      活动进入前动作类型

      AfterInit

      活动进入后动作

      AfterInitType

      活动进入后动作类型

      BeforeEnd

      活动结束前动作

      BeforeEndType

      活动结束前动作类型

      AfterEnd

      活动结束后动作

      AfterEndType

      活动结束后动作类型

      TimeOut

      超时时间

      Operator

      操作员代码

      MakeDate

      入机日期

      MakeTime

      入机时间

      ModifyDate

      最后一次修改日期

      ModifyTime

      最后一次修改时间

      BusiType

      业务类型

      IsNeed

      活动属性

      ActivityFlag

      活动标志

      ImpDegree

      重要等级

      CreateAction

      创建动作

      CreateActionType

      创建动作类型

      ApplyAction

      分配动作

      ApplyActionType

      分配动作类型

      DeleteAction

      删除动作

      DeleteActionType

      删除动作类型

      Together

      聚合模式

      MenuNodeCode

      菜单节点

    2. 设计工作流活动流转定义表:lwprocesstrans:

      字段属性

      属性描述

      维护节点->分部审批节点

      分部审批节点->维护节点

      分部审批节点->总部审批节点

      TRANSITIONID

      转移ID

      序列号

      序列号

      序列号

      PROCESSID

      过程ID

      99999

      99999

      99999

      TRANSITIONSTART

      转移起点

      10001

      10002

      10002

      TRANSITIONEND

      转移终点

      10002

      10001

      10003

      TRANSITIONCOND

      转移条件

      ?ProcessFlag?=1

      ?ProcessFlag?=2

      ?ProcessFlag?=3

      TRANSITIONCONDT

      转移条件类型

       

       

       

      TRANSITIONMODEL

      转移时方式

       

       

       

      STARTTYPE

      起点类型

       

       

       

      VERSION

      版本控制

      1

      1

       

    3. 设计工作流轨迹表lwmission:

      字段属性

      属性描述

      解释

      MISSIONID

      任务ID

       

      SUBMISSIONID

      子任务ID

       

      ACTIVITYID

      当前活动ID

       

      PROCESSID

      过程ID

       

      ACTIVITYSTATUS

      当前活动状态

       

      MISSIONPROP1

      任务属性1

       

      MISSIONPROP2

      任务属性2

       

      MISSIONPROP3

      任务属性3

       

      MISSIONPROP4

      任务属性4

       

      MISSIONPROP5

      任务属性5

       

      MISSIONPROP6

      任务属性6

       

      MISSIONPROP7

      任务属性7

       

      MISSIONPROP8

      任务属性8

       

      MISSIONPROP9

      任务属性9

       

      MISSIONPROP10

      任务属性10

       

      DEFAULTOPERATOR

      默认提交的操作员代码

       

      LASTOPERATOR

      最后操作员代码

       

      CREATEOPERATOR

      创建者操作员代码

       

      MAKEDATE

      入机日期

       

      MAKETIME

      入机时间

       

      MODIFYDATE

      最后一次修改日期

       

      MODIFYTIME

      最后一次修改时间

       

      INDATE

      进入日期

       

      INTIME

      进入时间

       

      OUTDATE

      退出日期

       

      OUTTIME

      退出时间

       

      TIMEID

      时效ID

       

      STANDENDDATE

      标准结束日期

       

      STANDENDTIME

      标准结束时间

       

      OPERATECOM

      操作机构

       

      MAINMISSIONID

      主任务ID

       

      SQLPRIORITYID

      SQL优先级ID

       

      PRIORITYID

      时效优先级ID

       

      VERSION

      版本控制

       

    4.  设计工作流字段映射表:lwfiledmap   

      字段属性

      属性描述

      举例

      ACTIVITYID

      活动ID

      10001

      FIELDORDER

      顺序号

      1

      SOURTABLENAME

      源表名

      业务表

      SOURFIELDNAME

      源字段

      业务表字段

      SOURFIELDCNAME

      源字段中文名

      业务表字段描述

      DESTTABLENAME

      目标表名

      MissionProp1

      DESTFIELDNAME

      目标字段

      属性字段1

      DESTFIELDCNAME

      目标字段中文名

       

      GETVALUE

      从源到目标的取数规则

       

      GETVALUETYPE

      从源到目标的取数规则类型

       

      CANSHOW

      是否显示

       

         
    更多相关内容
  • Html5+jquery实现的工作流设计器。剥离了原来的各种内部设置,做成了纯粹的设计器,通用性更广。 提供了常用的调用函数,以便大家可以在外部进行设置扩展。需要的朋友赶快下了。都是开源的js文件。 使用和说明,...
  • 拖拽式表单设计器java版,排版可随意定制,提供丰富的表单控件,根据Ueditor改造,表单设计完成之后,可直接进行工作流的扭转,工作流纯源码,可以随意定制二次改造,微信搜索 开源码农 ,更多资源免费下载
  • web工作流设计-myflow

    热门讨论 2016-08-16 09:43:20
    web工作流设计-myflow:使用myflow.js进行设计工作流,基于web页面进行操作,里边包含删除按钮功能。
  • 工作流数据库表结构设计

    热门讨论 2014-04-26 10:31:50
    工作流就是业务流程的计算机化或自动化。许多公司采用纸张表单,手工传递的方式,一级一级审批签字,工作效率非常低下,对于统计报表功能则不能实现。...:::本资源包含了工作流所涉及的表结构设计。:::
  • 前言: 整理在vue项目中使用bpmn.js的过程和源码。 实现最终效果: 1、bpmn.js的介绍 2、bpmn.js中实现最简单的效果: 3、bpmn.js引入中文版 4、bpmn.js引入左侧的功能面板 5、bpmn.js引入右侧的详情......

    前言:

           整理在vue项目中使用bpmn.js的过程和源码。

    实现最终效果:

    目录:

    1、bpmn.js的介绍,官网入口

    2、bpmn.js中实现最简单的效果:

    引入插件1:

    开始开发:

    (1)页面上:创建容器

    (2)js文件中:xml可以获取本地,也可以用axios获取在线地址

    (3) css样式

    3、bpmn.js引入中文版

    官方不仅仅提供了,中文版,还有其他版本,想了解的点我

    在第二步的基础上,js中在引入:

    4、bpmn.js引入左侧的功能面板

    (1)当前页面引入,我用的是scss

    (2)main.js中引入:

    5、bpmn.js引入右侧的详情面板

     引入:2个插件,加上上面那个,一共是3个

    代码开发:

    页面上增加元素:

    样式:

    或者在 main.js 中

    js中:先引入配置

    6、完整源码:

    index.vue

    新建一个文件夹:customTranslate

    customTranslate.js

    translations.js

    xml.js

    参考文献:


    1、bpmn.js的介绍,官网入口

           业务流程模型注解(Business Process Modeling Notation - BPMN)是 业务流程模型的一种标准图形注解。这个标准 是由对象管理组(Object Management Group - OMG)维护的。

    2、bpmn.js中实现最简单的效果:

    引入插件1:

    cnpm install bpmn-js --save-dev

    开始开发:

    (1)页面上:创建容器

    <template>
      <div class="containers" ref="containers">
        <div id="js-canvas" class="canvas" ref="canvas"></div>
      </div>
    </template>

    (2)js文件中:xml可以获取本地,也可以用axios获取在线地址

    import xmlStr from './xml' //引入默认显示的xml字符串数据
    import BpmnModeler from 'bpmn-js/lib/Modeler' // 引入 bpmn-js
     export default {
        data () {
          return {
            bpmnModeler: null,
            containers: null
          }
        },
        mounted() {
          this.initDiagram()
        },
        methods:{
          //初始化方法
          initDiagram(){
             this.containers = this.$refs.containers   // 获取到属性ref为“containers”的dom节点
             const canvas = this.$refs.canvas   // 获取到属性ref为“canvas”的dom节点
             this.bpmnModeler = new BpmnModeler({
              container: canvas,
            })
            this.createNewDiagram()
         },
          // 注意:必须先加载一个bpmn文件,新建就是加载一个空的bpmn文件,否则不能拖拽节点
          createNewDiagram(){
            /**
             * 获取后台,获取默认的xml
             * */
            // var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
            // this.$axios.get(diagramUrl).then((res)=>{
            //     console.log(res.data)
            //     this.openDiagram(res.data)
            //   }).catch((err)=>{
            //     console.log(err)
            //   })
    
            let mr_xml = xmlStr //默认值-xml
            // let mr_xml = '' //默认值-xml
            this.openDiagram(mr_xml)
    
          },  
          openDiagram(xml){
            /**
             * 导入xml(字符串形式),返回导入结果
             * 后续会取消传入回调函数的方式
             * 推荐使用async/await或者链式调用
             * @param { string } xml 流程图xml字符串
             * @param { Promise } callback 回调函数,出错时返回{ warnings,err }
             */
            this.bpmnModeler.importXML(xml, function(err) {
              if (err) {
                // container
                //     .removeClass('with-diagram')
                //     .addClass('with-error');
                console.error(err);
              } else {
                // container
                //   .removeClass('with-error')
                //   .addClass('with-diagram');
              }
            });
          },
    
        }
    
    
    }

    (3) css样式

    <style lang="scss" scope>
      .containers{
        position: absolute;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        display: flex;
        .canvas{
          width: 100%;
          height: 100%;
        }
        .bjs-powered-by {
          display: none;
        }
      }
    </style>

    3、bpmn.js引入中文版

    官方不仅仅提供了,中文版,还有其他版本,想了解的点我

    在第二步的基础上,js中在引入:

    import customTranslate from './customTranslate/customTranslate'  //汉化
    export default {
        data () {
          return {
            bpmnModeler: null,
            containers: null,
    
            //加入-------start-----------
            customTranslateModule: {
              translate: [ 'value', customTranslate ]
            }
            //加入-------end-----------
    
          }
        },
    
    }
     methods:{
          //初始化方法
          initDiagram(){
    
            this.containers = this.$refs.containers   // 获取到属性ref为“containers”的dom节点
            const canvas = this.$refs.canvas   // 获取到属性ref为“canvas”的dom节点
            this.bpmnModeler = new BpmnModeler({
              container: canvas,
    
              //加入-------start-----------
              additionalModules: [
                this.customTranslateModule,
              ],
              //加入-------end-----------
    
            })
            this.createNewDiagram()
          },
    
    
    }

    4、bpmn.js引入左侧的功能面板

    (1)当前页面引入,我用的是scss

    加入:

     /*左边工具栏以及编辑节点的样式*/
      @import '~bpmn-js/dist/assets/diagram-js.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

    完整:

    <style lang="scss" scope>
      /*左边工具栏以及编辑节点的样式*/
      @import '~bpmn-js/dist/assets/diagram-js.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
     
    
      .containers{
        position: absolute;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        display: flex;
        .canvas{
          width: 100%;
          height: 100%;
        }
        .bjs-powered-by {
          display: none;
        }
      }
    </style>

    (2)main.js中引入:

    // 以下为bpmn工作流绘图工具的样式
    import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
    import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
    import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
    import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'

    5、bpmn.js引入右侧的详情面板

     引入:2个插件,加上上面那个,一共是3个

    cnpm install --save bpmn-js-properties-panel
    cnpm install --save camunda-bpmn-moddle

    代码开发:

    页面上增加元素:

    <template>
      <div class="containers" ref="containers">
        <div id="js-canvas" class="canvas" ref="canvas"></div>
    
    
        增加
        <div id="js-properties-panel"></div>
    
    
      </div>
    </template>

    样式:

    /*右侧详情*/
      @import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
    
    
    
    .containers{        
        display: flex;  //新增,为了让右侧和左侧一起看到   
    }

    或者在 main.js 中

    import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'

    js中:先引入配置

      //右侧属性栏功能
      import propertiesPanelModule from 'bpmn-js-properties-panel'
      import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
      import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
    methods:{
          //初始化方法
          initDiagram(){
            this.containers = this.$refs.containers   // 获取到属性ref为“containers”的dom节点
            const canvas = this.$refs.canvas   // 获取到属性ref为“canvas”的dom节点
            this.bpmnModeler = new BpmnModeler({
              container: canvas,
    
              //添加控制板-----------增加1-------------
              propertiesPanel: {
                parent: '#js-properties-panel'
              },
              //-----------增加1-------------
    
    
              //左侧
              additionalModules: [
                this.customTranslateModule,
    
    
                // 右边的属性栏-----------增加2-------------
                propertiesProviderModule,
                propertiesPanelModule
                //-----------增加2-------------
    
              ],
              moddleExtensions: {
                camunda: camundaModdleDescriptor
              }
    
    
    
            })
            this.createNewDiagram()
          },
    
    
    }

    6、完整源码:

    index.vue

    <template>
      <div class="containers" ref="containers">
        <div id="js-canvas" class="canvas" ref="canvas"></div>
        <div id="js-properties-panel"></div>
      </div>
    </template>
    <script>
      import BpmnModeler from 'bpmn-js/lib/Modeler' // 引入 bpmn-js
      import customTranslate from './customTranslate/customTranslate'  //汉化
      import xmlStr from './xml' //引入默认显示的xml字符串数据
    
      //右侧属性栏功能
      import propertiesPanelModule from 'bpmn-js-properties-panel'
      import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
      import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
    
      export default {
        data () {
          return {
            bpmnModeler: null,
            containers: null,
            canvas: null,
            customTranslateModule: {
              translate: [ 'value', customTranslate ]
            }
          }
        },
        mounted() {
          this.initDiagram()
        },
        methods:{
          //初始化方法
          initDiagram(){
    
            this.containers = this.$refs.containers   // 获取到属性ref为“containers”的dom节点
            const canvas = this.$refs.canvas   // 获取到属性ref为“canvas”的dom节点
            this.bpmnModeler = new BpmnModeler({
              container: canvas,
              //添加控制板
              propertiesPanel: {
                parent: '#js-properties-panel'
              },
              //左侧
              additionalModules: [
                this.customTranslateModule,
                // 右边的属性栏
                propertiesProviderModule,
                propertiesPanelModule
              ],
              moddleExtensions: {
                camunda: camundaModdleDescriptor
              }
    
    
    
            })
            this.createNewDiagram()
          },
          // 注意:必须先加载一个bpmn文件,新建就是加载一个空的bpmn文件,否则不能拖拽节点
          createNewDiagram(){
            /**
             * 获取后台,获取默认的xml
             * */
            // var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
            // this.$axios.get(diagramUrl).then((res)=>{
            //     console.log(res.data)
            //     this.openDiagram(res.data)
            //   }).catch((err)=>{
            //     console.log(err)
            //   })
    
            let mr_xml = xmlStr //默认值-xml
            // let mr_xml = '' //默认值-xml
            this.openDiagram(mr_xml)
    
          },
          openDiagram(xml){
            /**
             * 导入xml(字符串形式),返回导入结果
             * 后续会取消传入回调函数的方式
             * 推荐使用async/await或者链式调用
             * @param { string } xml 流程图xml字符串
             * @param { Promise } callback 回调函数,出错时返回{ warnings,err }
             */
            this.bpmnModeler.importXML(xml, function(err) {
              if (err) {
                // container
                //     .removeClass('with-diagram')
                //     .addClass('with-error');
                console.error(err);
              } else {
                // container
                //   .removeClass('with-error')
                //   .addClass('with-diagram');
              }
            });
          },
        },
    
      }
    </script>
    <style lang="scss">
      /*左边工具栏以及编辑节点的样式*/
      @import '~bpmn-js/dist/assets/diagram-js.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
      /*右侧详情*/
      @import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
    
      .containers{
        position: absolute;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        display: flex;
        .canvas{
          width: 100%;
          height: 100%;
        }
        .bjs-powered-by {
          display: none;
        }
      }
    </style>
    
    

    新建一个文件夹:customTranslate

    customTranslate.js

    import translations from './translations';
    
    
    export default function customTranslate(template, replacements) {
      replacements = replacements || {};
    
      // Translate
      template = translations[template] || template;
    
      // Replace
      return template.replace(/{([^}]+)}/g, function(_, key) {
        return replacements[key] || '{' + key + '}';
      });
    }

    translations.js

    export default {
      // Labels
      'Activate the global connect tool': '激活全局连接工具',
      'Append {type}': '添加 {type}',
      'Add Lane above': '在上面添加道',
      'Divide into two Lanes': '分割成两个道',
      'Divide into three Lanes': '分割成三个道',
      'Add Lane below': '在下面添加道',
      'Append compensation activity': '追加补偿活动',
      'Change type': '修改类型',
      'Connect using Association': '使用关联连接',
      'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
      'Connect using DataInputAssociation': '使用数据输入关联连接',
      Remove: '移除',
      'Activate the hand tool': '激活抓手工具',
      'Activate the lasso tool': '激活套索工具',
      'Activate the create/remove space tool': '激活创建/删除空间工具',
      'Create expanded SubProcess': '创建扩展子过程',
      'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
      'Create Pool/Participant': '创建池/参与者',
      'Parallel Multi Instance': '并行多重事件',
      'Sequential Multi Instance': '时序多重事件',
      DataObjectReference: '数据对象参考',
      DataStoreReference: '数据存储参考',
      Loop: '循环',
      'Ad-hoc': '即席',
      'Create {type}': '创建 {type}',
      Task: '任务',
      'Send Task': '发送任务',
      'Receive Task': '接收任务',
      'User Task': '用户任务',
      'Manual Task': '手工任务',
      'Business Rule Task': '业务规则任务',
      'Service Task': '服务任务',
      'Script Task': '脚本任务',
      'Call Activity': '调用活动',
      'Sub Process (collapsed)': '子流程(折叠的)',
      'Sub Process (expanded)': '子流程(展开的)',
      'Start Event': '开始事件',
      StartEvent: '开始事件',
      'Intermediate Throw Event': '中间事件',
      'End Event': '结束事件',
      EndEvent: '结束事件',
      'Create Gateway': '创建网关',
      'Create Intermediate/Boundary Event': '创建中间/边界事件',
      'Message Start Event': '消息开始事件',
      'Timer Start Event': '定时开始事件',
      'Conditional Start Event': '条件开始事件',
      'Signal Start Event': '信号开始事件',
      'Error Start Event': '错误开始事件',
      'Escalation Start Event': '升级开始事件',
      'Compensation Start Event': '补偿开始事件',
      'Message Start Event (non-interrupting)': '消息开始事件(非中断)',
      'Timer Start Event (non-interrupting)': '定时开始事件(非中断)',
      'Conditional Start Event (non-interrupting)': '条件开始事件(非中断)',
      'Signal Start Event (non-interrupting)': '信号开始事件(非中断)',
      'Escalation Start Event (non-interrupting)': '升级开始事件(非中断)',
      'Message Intermediate Catch Event': '消息中间捕获事件',
      'Message Intermediate Throw Event': '消息中间抛出事件',
      'Timer Intermediate Catch Event': '定时中间捕获事件',
      'Escalation Intermediate Throw Event': '升级中间抛出事件',
      'Conditional Intermediate Catch Event': '条件中间捕获事件',
      'Link Intermediate Catch Event': '链接中间捕获事件',
      'Link Intermediate Throw Event': '链接中间抛出事件',
      'Compensation Intermediate Throw Event': '补偿中间抛出事件',
      'Signal Intermediate Catch Event': '信号中间捕获事件',
      'Signal Intermediate Throw Event': '信号中间抛出事件',
      'Message End Event': '消息结束事件',
      'Escalation End Event': '定时结束事件',
      'Error End Event': '错误结束事件',
      'Cancel End Event': '取消结束事件',
      'Compensation End Event': '补偿结束事件',
      'Signal End Event': '信号结束事件',
      'Terminate End Event': '终止结束事件',
      'Message Boundary Event': '消息边界事件',
      'Message Boundary Event (non-interrupting)': '消息边界事件(非中断)',
      'Timer Boundary Event': '定时边界事件',
      'Timer Boundary Event (non-interrupting)': '定时边界事件(非中断)',
      'Escalation Boundary Event': '升级边界事件',
      'Escalation Boundary Event (non-interrupting)': '升级边界事件(非中断)',
      'Conditional Boundary Event': '条件边界事件',
      'Conditional Boundary Event (non-interrupting)': '条件边界事件(非中断)',
      'Error Boundary Event': '错误边界事件',
      'Cancel Boundary Event': '取消边界事件',
      'Signal Boundary Event': '信号边界事件',
      'Signal Boundary Event (non-interrupting)': '信号边界事件(非中断)',
      'Compensation Boundary Event': '补偿边界事件',
      'Exclusive Gateway': '互斥网关',
      'Parallel Gateway': '并行网关',
      'Inclusive Gateway': '相容网关',
      'Complex Gateway': '复杂网关',
      'Event based Gateway': '事件网关',
      Transaction: '转运',
      'Sub Process': '子流程',
      'Event Sub Process': '事件子流程',
      'Collapsed Pool': '折叠池',
      'Expanded Pool': '展开池',
    
      // Errors
      'no parent for {element} in {parent}': '在{parent}里,{element}没有父类',
      'no shape type specified': '没有指定的形状类型',
      'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
      'out of bounds release': 'out of bounds release',
      'more than {count} child lanes': '子道大于{count} ',
      'element required': '元素不能为空',
      'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
      'no diagram to display': '没有可展示的流程图',
      'no process or collaboration to display': '没有可展示的流程/协作',
      'element {element} referenced by {referenced}#{property} not yet drawn':
        '由{referenced}#{property}引用的{element}元素仍未绘制',
      'already rendered {element}': '{element} 已被渲染',
      'failed to import {element}': '导入{element}失败',
      // 属性面板的参数
      Id: '编号',
      Name: '名称',
      General: '常规',
      Details: '详情',
      'Message Name': '消息名称',
      Message: '消息',
      Initiator: '创建者',
      'Asynchronous Continuations': '持续异步',
      'Asynchronous Before': '异步前',
      'Asynchronous After': '异步后',
      'Job Configuration': '工作配置',
      Exclusive: '排除',
      'Job Priority': '工作优先级',
      'Retry Time Cycle': '重试时间周期',
      Documentation: '文档',
      'Element Documentation': '元素文档',
      'History Configuration': '历史配置',
      'History Time To Live': '历史的生存时间',
      Forms: '表单',
      'Form Key': '表单key',
      'Form Fields': '表单字段',
      'Business Key': '业务key',
      'Form Field': '表单字段',
      ID: '编号',
      Type: '类型',
      Label: '名称',
      'Default Value': '默认值',
      Validation: '校验',
      'Add Constraint': '添加约束',
      Config: '配置',
      Properties: '属性',
      'Add Property': '添加属性',
      Value: '值',
      Listeners: '监听器',
      'Execution Listener': '执行监听',
      'Event Type': '事件类型',
      'Listener Type': '监听器类型',
      'Java Class': 'Java类',
      Expression: '表达式',
      'Must provide a value': '必须提供一个值',
      'Delegate Expression': '代理表达式',
      Script: '脚本',
      'Script Format': '脚本格式',
      'Script Type': '脚本类型',
      'Inline Script': '内联脚本',
      'External Script': '外部脚本',
      Resource: '资源',
      'Field Injection': '字段注入',
      Extensions: '扩展',
      'Input/Output': '输入/输出',
      'Input Parameters': '输入参数',
      'Output Parameters': '输出参数',
      Parameters: '参数',
      'Output Parameter': '输出参数',
      'Timer Definition Type': '定时器定义类型',
      'Timer Definition': '定时器定义',
      Date: '日期',
      Duration: '持续',
      Cycle: '循环',
      Signal: '信号',
      'Signal Name': '信号名称',
      Escalation: '升级',
      Error: '错误',
      'Link Name': '链接名称',
      Condition: '条件名称',
      'Variable Name': '变量名称',
      'Variable Event': '变量事件',
      'Specify more than one variable change event as a comma separated list.':
        '多个变量事件以逗号隔开',
      'Wait for Completion': '等待完成',
      'Activity Ref': '活动参考',
      'Version Tag': '版本标签',
      Executable: '可执行文件',
      'External Task Configuration': '扩展任务配置',
      'Task Priority': '任务优先级',
      External: '外部',
      Connector: '连接器',
      'Must configure Connector': '必须配置连接器',
      'Connector Id': '连接器编号',
      Implementation: '实现方式',
      'Field Injections': '字段注入',
      Fields: '字段',
      'Result Variable': '结果变量',
      Topic: '主题',
      'Configure Connector': '配置连接器',
      'Input Parameter': '输入参数',
      Assignee: '代理人',
      'Candidate Users': '候选用户',
      'Candidate Groups': '候选组',
      'Due Date': '到期时间',
      'Follow Up Date': '跟踪日期',
      'Specify more than one group as a comma separated list.': '多个用户使用逗号隔开',
      Priority: '优先级',
      // eslint-disable-next-line no-template-curly-in-string
      'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
        '跟踪日期必须符合EL表达式,如: ${someDate} ,或者一个ISO标准日期,如:2015-06-26T09:54:00',
      // eslint-disable-next-line no-template-curly-in-string
      'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
        '跟踪日期必须符合EL表达式,如: ${someDate} ,或者一个ISO标准日期,如:2015-06-26T09:54:00',
      Variables: '变量',
      'Candidate Starter Users': '选择启动候选人',
      'Candidate Starter Configuration': '候选人启动器配置',
      'Candidate Starter Groups': '候选人启动组',
      'This maps to the process definition key.': '编号将映射到流程主键.',
    
      save: '保存',
      Tools: '工具',
      FlowGateway: '流程网关',
      ProcessControl: '流程节点',
      'Create StartEvent': '开始节点',
      'Create EndEvent': '结束节点',
      'Create ExclusiveGateway': '互斥网关',
      'Create ParallelGateway': '并行网关',
      'Create Task': '任务节点',
      'Create UserTask': '用户任务节点',
      'Condition Type': '条件类型',
    
      // 左侧工具箱补充汉化项 热水2020.1.12
      'Create Group': '创建组',
      'Create DataObjectReference': '创建数据对象引用',
      'Create DataStoreReference': '创建数据存储引用',
    
      // 节点添加Pad 补充汉化 热水2020.1.12
      'Append EndEvent': '追加结束事件节点',
      'Append Gateway': '追加网关节点',
      'Append UserTask': '追加用户任务节点',
      'Append Intermediate/Boundary Event': '追加中间或边界事件',
      'Append TextAnnotation': '追加文本批注' // 此句要有效,必须在CustomContexPadProvide给此节点增加一个translate('Append TextAnnotation')
    }
    

    xml.js

    let xmlStr = `
      <?xml version="1.0" encoding="UTF-8"?>
      <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" targetNamespace="" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd">
        <collaboration id="sid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424">
          <participant id="sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F" name="Customer" processRef="sid-C3803939-0872-457F-8336-EAE484DC4A04" />
        </collaboration>
        <process id="sid-C3803939-0872-457F-8336-EAE484DC4A04" name="Customer" processType="None" isClosed="false" isExecutable="false">
          <extensionElements />
          <laneSet id="sid-b167d0d7-e761-4636-9200-76b7f0e8e83a">
            <lane id="sid-57E4FE0D-18E4-478D-BC5D-B15164E93254">
              <flowNodeRef>sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26</flowNodeRef>
              <flowNodeRef>sid-E49425CF-8287-4798-B622-D2A7D78EF00B</flowNodeRef>
              <flowNodeRef>sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138</flowNodeRef>
              <flowNodeRef>sid-E433566C-2289-4BEB-A19C-1697048900D2</flowNodeRef>
              <flowNodeRef>sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9</flowNodeRef>
              <flowNodeRef>SCAN_OK</flowNodeRef>
            </lane>
          </laneSet>
          <task id="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26" name="Scan QR code">
            <incoming>sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D</incoming>
            <outgoing>sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A</outgoing>
          </task>
          <task id="sid-E49425CF-8287-4798-B622-D2A7D78EF00B" name="Open product information in mobile  app">
            <incoming>sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB</incoming>
            <outgoing>sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C</outgoing>
          </task>
          <startEvent id="sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138" name="Notices&#10;QR code">
            <outgoing>sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD</outgoing>
          </startEvent>
          <endEvent id="sid-E433566C-2289-4BEB-A19C-1697048900D2" name="Is informed">
            <incoming>sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C</incoming>
          </endEvent>
          <exclusiveGateway id="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9">
            <incoming>sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD</incoming>
            <incoming>sid-337A23B9-A923-4CCE-B613-3E247B773CCE</incoming>
            <outgoing>sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D</outgoing>
          </exclusiveGateway>
          <exclusiveGateway id="SCAN_OK" name="Scan successful?&#10;">
            <incoming>sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A</incoming>
            <outgoing>sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB</outgoing>
            <outgoing>sid-337A23B9-A923-4CCE-B613-3E247B773CCE</outgoing>
          </exclusiveGateway>
          <sequenceFlow id="sid-337A23B9-A923-4CCE-B613-3E247B773CCE" name="Yes" sourceRef="SCAN_OK" targetRef="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" />
          <sequenceFlow id="sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D" sourceRef="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" targetRef="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26" />
          <sequenceFlow id="sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB" name="No" sourceRef="SCAN_OK" targetRef="sid-E49425CF-8287-4798-B622-D2A7D78EF00B" />
          <sequenceFlow id="sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C" sourceRef="sid-E49425CF-8287-4798-B622-D2A7D78EF00B" targetRef="sid-E433566C-2289-4BEB-A19C-1697048900D2" />
          <sequenceFlow id="sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A" sourceRef="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26" targetRef="SCAN_OK" />
          <sequenceFlow id="sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD" sourceRef="sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138" targetRef="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" />
        </process>
        <bpmndi:BPMNDiagram id="sid-74620812-92c4-44e5-949c-aa47393d3830">
          <bpmndi:BPMNPlane id="sid-cdcae759-2af7-4a6d-bd02-53f3352a731d" bpmnElement="sid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424">
            <bpmndi:BPMNShape id="sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F_gui" bpmnElement="sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F" isHorizontal="true">
              <omgdc:Bounds x="83" y="105" width="933" height="250" />
              <bpmndi:BPMNLabel labelStyle="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
                <omgdc:Bounds x="47.49999999999999" y="170.42857360839844" width="12.000000000000014" height="59.142852783203125" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="sid-57E4FE0D-18E4-478D-BC5D-B15164E93254_gui" bpmnElement="sid-57E4FE0D-18E4-478D-BC5D-B15164E93254" isHorizontal="true">
              <omgdc:Bounds x="113" y="105" width="903" height="250" />
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26_gui" bpmnElement="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26">
              <omgdc:Bounds x="393" y="170" width="100" height="80" />
              <bpmndi:BPMNLabel labelStyle="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
                <omgdc:Bounds x="360.5" y="172" width="84" height="12" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="sid-E49425CF-8287-4798-B622-D2A7D78EF00B_gui" bpmnElement="sid-E49425CF-8287-4798-B622-D2A7D78EF00B">
              <omgdc:Bounds x="728" y="170" width="100" height="80" />
              <bpmndi:BPMNLabel labelStyle="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
                <omgdc:Bounds x="695.9285736083984" y="162" width="83.14285278320312" height="36" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNEdge id="sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A_gui" bpmnElement="sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A">
              <omgdi:waypoint x="493" y="210" />
              <omgdi:waypoint x="585" y="210" />
              <bpmndi:BPMNLabel>
                <omgdc:Bounds x="494" y="185" width="90" height="20" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge id="sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB_gui" bpmnElement="sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB">
              <omgdi:waypoint x="635" y="210" />
              <omgdi:waypoint x="728" y="210" />
              <bpmndi:BPMNLabel labelStyle="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
                <omgdc:Bounds x="642" y="185" width="16" height="12" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge id="sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD_gui" bpmnElement="sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD">
              <omgdi:waypoint x="223" y="210" />
              <omgdi:waypoint x="275" y="210" />
              <bpmndi:BPMNLabel>
                <omgdc:Bounds x="204" y="185" width="90" height="20" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge id="sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D_gui" bpmnElement="sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D">
              <omgdi:waypoint x="325" y="210" />
              <omgdi:waypoint x="393" y="210" />
              <bpmndi:BPMNLabel>
                <omgdc:Bounds x="314" y="185" width="90" height="20" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge id="sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C_gui" bpmnElement="sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C">
              <omgdi:waypoint x="828" y="210" />
              <omgdi:waypoint x="901" y="210" />
              <bpmndi:BPMNLabel>
                <omgdc:Bounds x="820" y="185" width="90" height="20" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge id="sid-337A23B9-A923-4CCE-B613-3E247B773CCE_gui" bpmnElement="sid-337A23B9-A923-4CCE-B613-3E247B773CCE">
              <omgdi:waypoint x="611" y="234" />
              <omgdi:waypoint x="610.5" y="299" />
              <omgdi:waypoint x="300.5" y="299" />
              <omgdi:waypoint x="301" y="234" />
              <bpmndi:BPMNLabel labelStyle="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
                <omgdc:Bounds x="585" y="236" width="21" height="12" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNShape id="StartEvent_0l6sgn0_di" bpmnElement="sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138">
              <omgdc:Bounds x="187" y="192" width="36" height="36" />
              <bpmndi:BPMNLabel>
                <omgdc:Bounds x="182" y="229" width="46" height="24" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="EndEvent_0xwuvv5_di" bpmnElement="sid-E433566C-2289-4BEB-A19C-1697048900D2">
              <omgdc:Bounds x="901" y="192" width="36" height="36" />
              <bpmndi:BPMNLabel>
                <omgdc:Bounds x="892" y="231" width="56" height="12" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="ExclusiveGateway_1g0eih2_di" bpmnElement="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" isMarkerVisible="true">
              <omgdc:Bounds x="275" y="185" width="50" height="50" />
              <bpmndi:BPMNLabel>
                <omgdc:Bounds x="210" y="160" width="90" height="12" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="ExclusiveGateway_0vci1x5_di" bpmnElement="SCAN_OK" isMarkerVisible="true">
              <omgdc:Bounds x="585" y="185" width="50" height="50" />
              <bpmndi:BPMNLabel>
                <omgdc:Bounds x="568" y="157" width="88" height="24" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNShape>
          </bpmndi:BPMNPlane>
          <bpmndi:BPMNLabelStyle id="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
            <omgdc:Font name="Arial" size="11" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
          </bpmndi:BPMNLabelStyle>
          <bpmndi:BPMNLabelStyle id="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
            <omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
          </bpmndi:BPMNLabelStyle>
        </bpmndi:BPMNDiagram>
      </definitions>
    `
    export default xmlStr
    

    参考文献:

    1、https://chu1204505056.gitee.io/admin-pro/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci=#/other/workflow

    2、https://segmentfault.com/a/1190000039152721

    3、https://github.com/miyuesc/bpmn-process-designer

    4、https://juejin.cn/post/6844904017584193544

    5、https://blog.csdn.net/zhongzk69/article/details/103675421

    6、https://blog.csdn.net/juny0302/article/details/105739542/

    展开全文
  • CommitFlow在线工作流设计系统是一套可见即所得的工作流设计程序,系统实现基于WEB浏览器的工作流设计和管理。系统针工作流设计应用的特点,通过图形化操作界面,让开发者用最少的时间设计或修改企业业务流程。
  • 表单式工作流功能模块设计方案

    千次阅读 2021-08-26 13:48:41
    最近一个项目中需要独自设计一个表单式工作流功能模块,在此将整个功能模块的设计思路分享出来。

    最近一个项目中需要独自设计一个表单式工作流功能模块,在此将整个功能模块的设计思路分享出来。



    1. 需求及分析

    此处所有的需求是建立在医院临床信息管理系统之上的。这里只分析关于表单式工作流功能模块的需求。

    关于表单式工作流功能模块的需求全部整理如下:

    • 1.一个患者在不同时期要填写的表单不同。
    • 2.每个患者的手术类型不同,也就意味着,每个患者的各个时期可能都不相同。
    • 3.每个时期需要单独填写多张表单,相同时期要填写表单的相同。
    • 4.在每个时期要填写的其中一张表单中,可能一条患者信息对应一条记录,也可能一条患者信息对应多条记录。比如在手术期的一张检查表单中,一条患者信息只对应一条记录,但是术后期的一张检查表单中,可能会有手术后30天的情况,也会有手术后60天的情况,也就是一条患者信息对应多条记录。
    • 5.对于某一个患者,要能单独的处理它的工作流(也就是不同时期的表单)。
    • 6.对于某一个时期,要能单独处理在这个时期的所有患者信息。
    • 7.对每张表单要有增删改查操作,在每个时期,都要能通过各种方式查询患者的信息。

    针对这些需求,对整个工作流功能模块初步的想法大概是这个样子:

    在这里插入图片描述

    • 1.每位患者可以绑定一个工作流程,称为表单式的工作流。
    • 2.每个流程由若干个节点组成。
    • 3.医生在一个时期处理完所有的表单后,点击完成该流程节点即可进入下一流程节点。
    • 4.医生还可以修改一个患者已经完成的流程节点的数据,但是无法查看还未达到的流程节点的数据。

    2. 功能实现分析

    上述要实现的表单式的工作流跟oa系统中的工作流不大一样,oa系统中的工作流一般是这样几个步骤:

    • 1.设计流程。上级设计一种办事的流程,其中包含若干个节点,一个节点代表着一个审批人,所有节点审批都通过后才算完成,一个节点不通过,就会被打回。
    • 2.发起流程。由普通员工发起一个流程申请,发起后,员工无法修改这张表单,随后这张表单会跟随流程一级一级审批。
    • 3.流程审批。有若干上级审批流程,点击审批通过,该表单就会进入下以流程节点,点审批失败,流程会终止或者打回。
    • 4.流程通过。所有流程通过之后,会得到流程通过的凭证,就可以拿着这个凭证去处理相关的事情。

    整个oa系统的工作流功能的核心就是多级审批机制,但我们需求中的表单式的工作流,并不设计审批机制,整个工作流的功能可以简单理解为:一条患者信息选择流程后会在各个时期不停流动,在一个时期需要填写非常多的表单,这些表单填写完成后,医生点击进入下一流程,患者信息即可进入下一流程,但是这条患者信息已经留在了每个时期的表单中,医生仍然可以查看和修改这条信息。

    oa式的工作流的实现非常复杂,市面上也有商业化和开源的工作流框架和引擎,但是针对我们这个需求来看,如果硬加使用,只会使整个业务更加复杂,因此,最好的办法就是自己设计一种简单工作流机制,实现上述全部的需求。

    3. 工作流结构设计

    根据上面的需求分析和功能实现的分析,设计的整个工作流结构如下:

    在这里插入图片描述

    • 每个工作流包含若干个节点。
    • 每个节点包含基本信息和若干个表单。
    • 每个患者绑定一个工作流,患者在每个工作流节点需要处理多张表单。

    4. 数据库设计

    4.1 总设计思路

    根据上面的分析,总的设计思路如下:

    • 每个不同的时期有一张主表,主要记载患者的id,每当有患者信息到达该节点时,记录患者的id,一共有两种方式记载。两种方式各有好处。综合考虑还是第1种方式最好。
      • 1.只记载患者信息的id。
      • 2.记载同步记载所有患者信息。
      • 不管使用哪种方法,都需要将患者的id作为主表的主键,这样方便查询子表中的信息。
      • 如果使用第1种方法,那么每张主表中其实主要就是吧包含主键。但在每个时期,都需要联合患者表一起查询数据。
      • 如果使用第2种方法,那么每张主表需要同步患者的所有信息,且不管在哪修改了患者信息,都需要在所有主表同步患者的消息。
    • 每个时期的若干小表都是主表的子表,包含该小表需要填写的所有数据字段,外键是主表的id。
    • 流程节点表中绑定一张主表。
      • 这样设计的好处就是,在每一个流程节点处,还能看到许多该流程节点的其它信息。
    • 工作流表绑定若干个流程节点。
    • 个患者绑定一个工作流,并且存储当前节点,下一节点。

    4.1 各时期主表设计

    各时期的主表主要干的事情就是存储患者信息的id,代表着患者正处于当前流程节点或者已经完成该流程节点。

    患者id模式

    • 这种模式很简单,基本上不需要什么字段。
    字段说明
    id患者id
    权限管理需要的其它字段

    同步所有患者信息模式

    • 这种方式需要同步主表的所有字段。
    字段说明
    id患者id
    患者表所有字段

    4.2 每个时期的若干小表

    存储基本信息,关键是外键是主表的id。

    字段说明
    id唯一id
    所有数据字段

    4.3 流程节点表

    主要是绑定主表,还可以添加一个时期的额外数据,比如一个时期的表单填写提示。

    字段说明
    id唯一id
    master_table主表名称
    权限控制相关字段
    该时期的其它数据字段

    4.4 工作流表

    在工作流表中绑定多个工作节点有两种方式:

    • 1.根据最多节点数目设置若干个节点字段,存储流程节点的id。
    • 2.设置一个字段,字符串拼接的形式,存储所有流程节点id。

    同样,两种方式各有好处:

    • 使用第1种方式,需要需求中最多节点个数完全确定,才方便设计合适的字段。
    • 使用第2种方式,可以存储任意个节点,但在拿出处理的时候有些麻烦。

    一个字段模式

    字段说明
    id唯一id
    process_name工作流名称
    process_des工作流描述
    process_ndoes所有节点id
    权限控制相关的其它字段

    多个字段模式

    • 其中哈希值主要用来工作流判重。
    字段说明
    id唯一id
    process_name工作流名称
    process_des工作流描述
    node_num节点数目
    process_hash工作流哈希值
    node1节点1
    node2节点2
    node3节点3
    若干节点
    权限控制相关的其它字段

    4.5 患者表

    患者表中和流程相关的一共三个字段:工作流id,当前节点id,下一节点id。其中存储下一节点id的做法类似单链表。

    字段说明
    id唯一id
    process_id工作流id
    current_node_id当前节点id
    next_node_id下一节点id
    所有数据字段

    5.接口设计

    5.1 针对工作流节点的接口

    • 1.新增工作流节点。

      • 需要保证工作流节点所绑定的主表id和名称是唯一的。
    • 2.修改工作流节点。

      • 如果修改了工作流绑定的主表,先要判断这个节点所在工作流是否被患者绑定,如果绑定了,那么将无法修改主表。
    • 3.删除工作流节点。

      • 需要保证该节点未绑定任何工作流。
    • 4.查询工作流节点。

      • 查询该节点的所有数据。

    5.2 针对工作流的接口

    • 1.新增工作流。

      • 需要保证工作流节点不重复,重复就会出错。
      • 需要保证节点数大于0.
      • 需要保证整条节点链表不重复。
      • 如果是多字段模式的,还需要检验是否依次填写节点。
    • 2.修改工作流。

      • 如果已经有患者绑定了工作流,那么将不能修改工作流的节点。
    • 3.删除工作流。

      • 如果已经有患者绑定了工作流,那么将不能删除工作流的节点。
    • 4.查询工作流。

      • 查询工作流的所有字段。

    5.3 针对患者的接口

    • CRUD操作略。

    • 查询患者流程信息。

      • 需要获取患者所处流程的所有节点信息。
      • 需要判断哪些节点已经完成,正处于哪个节点,哪些节点还未到达。
    • 患者流程通过。

      • 患者的信息将会插入下一节点对应的主表。
      • 修改患者当前节点,下一节点。

    6. 前端页面设计

    6.1 针对化患者信息处

    • 在操作一栏中能够处理患者的流程。
      在这里插入图片描述

    6.2 患者流程处理处

    在这里插入图片描述

    6.3 具体时期处

    在这里插入图片描述

    7.其它

    这种表单式工作流的设计,理论上是可以抽取出来成为一个独立的框架,待日后有时间精力再去尝试。


    ATFWUS 2021-08-26

    展开全文
  • bpmn-js + vue实现工作流设计

    万次阅读 2020-04-24 21:30:27
    此文只为记录一下自己学习bpmn-js和使用bpmn-js实现工作流设计器的过程。 bpmn-js初体验 安装vue 新版的vue-cli有图形化工具,新版本的Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经...

    此文只为记录一下自己学习bpmn-js和使用bpmn-js实现工作流设计器的过程。以后我将通过不断提出新需求的方式,来逐渐完成一个简单的工作流设计器。

    1、bpmn-js初体验

    安装vue

    新版的vue-cli有图形化工具,新版本的Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g进行卸载

    # 新版安装命令
    npm install -g @vue/cli
    # 安装完成后,我们就可以使用vue ui命令打开图形界面来创建管理vue项目了
    vue ui
    

    在这里插入图片描述

    使用vue-cli创建项目

    略…

    安装bpmn-js

    # 切换到新建的项目
    npm install bpmn-js --save-dev
    

    按装完成后可以在node-modules中找到这几个文件夹
    在这里插入图片描述

    简单的查看工作流图形的例子

    官方的例子都是基于jquery的,在获取bpmn20.xml文档的时候可以直接import,在vue中需要通过异步请求来获取数据,因此需要安装axios

    • 安装axios
    npm install axios
    
    • 安装完成以后修改main.js
      在这里插入图片描述
    • 添加一个vue组件,直接上代码
    <template>
      <div class="containers">
        <div id="canvas" class="canvas" ref="canvas"></div> 
      </div>
    </template>
    <script>
    import BpmnJS from 'bpmn-js' // 引入 bpmn-js
    export default {
        data () {
        },
        mounted() {
            var viewer = new BpmnJS({
                container: '#canvas'
            })
            
            var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
            // var diagramUrl = 'http://localhost:8080/pizza-collaboration.bpmn20.xml';
            this.$http.get(diagramUrl)
                .then(function(res){
                       viewer.importXML(res.data, function(err){
                        if (!err) {
                            console.log('success!')
                            viewer.get('canvas').zoom('fit-viewport')
                            console.log('success...')
                        } else {
                            console.log('something went wrong:', err)
                        } 
                    })
                })
                .catch(function(err){
                    console.log(err)
                })
        }
    }
    </script>
    <style lang="scss">
      /*左边工具栏以及编辑节点的样式*/  
      @import '~bpmn-js/dist/assets/diagram-js.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
      .containers{
        position: absolute;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        .canvas{
          width: 100%;
          height: 100%;
        }
        .bjs-powered-by {
          display: none;
        }
      }
    </style>
    
    

    运行以后可以看到一下页面
    在这里插入图片描述

    使用中间遇到的问题

    • 图形不显示,F12 发现报错

    something went wrong: Error: unparsable content omgdc:Bounds detected; this may indicate an invalid BPMN 2.0 diagram file
    line: 0
    column: 4310
    nested error: missing namespace on omgdc:Bounds
    at error (index.esm.js?42c7:63)
    at handleError (index.esm.js?42c7:689)
    at handleError (index.esm.js?ea8d:193)
    at parse (index.esm.js?ea8d:1016)
    at Parser.parse (index.esm.js?ea8d:298)
    at eval (index.esm.js?42c7:856)

    非常郁闷,我的bpmn文件命名都指明了namespace,为什么还提示 missing namespace?
    viewer#importXML需要的参数是个字符串,所以想当然的将res转化为字符串,后来 仔细查看res中的数据发现res是一个object,res = {data:""} ,所以只需需要取出data就可以了。
    解决:
    在这里插入图片描述

    2、新需求:可以拖拽自定义工作流

    实现工作流的编辑需要用到bpmn-js的另一个重要的组件(BpmnModeler)。
    效果: 这里顺便测试了国际化
    在这里插入图片描述

    还是直接上代码

    <template>
      <div class="containers" ref="containers">
        <div id="js-canvas" class="canvas" ref="canvas"></div> 
      </div>
    </template>
    <script>
    // 引入Modeler
    import BpmnModeler from 'bpmn-js/lib/Modeler' // 引入 bpmn-js
    // 用来进行国际化,参考官方的例子 bpmn-js-examples-master ===> i18n
    import customTranslate from '../customTranslate/customTranslate';
    export default {
        data () {
            return {
                bpmnModeler: null,
                containers: null,
                canvas: null,
                customTranslateModule: {
                  translate: [ 'value', customTranslate ]
                }
            }
        },
        methods:{
            openDiagram(xml){
                this.bpmnModeler.importXML(xml, function(err) {
                    if (err) {
                        // container
                        //     .removeClass('with-diagram')
                        //     .addClass('with-error');
                        console.error(err);
                    } else {
                      // container
                      //   .removeClass('with-error')
                      //   .addClass('with-diagram');
                    }
                });
            },
            // 注意:必须先加载一个bpmn文件,新建就是加载一个空的bpmn文件,否则不能拖拽节点
            createNewDiagram(){
                //var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
                // var diagramUrl = 'http://localhost:8080/newDiagram.bpmn';
                this.$http.get(diagramUrl)
                	// 这里必须使用箭头函数,否则提示找不到openDiagram方法
                    .then((res)=>{
                        console.log(res.data)
                        this.openDiagram(res.data)
                    })
                    .catch((err)=>{
                        console.log(err)
                    })        
            },
        },
        mounted() {
            // 获取到属性ref为“containers”的dom节点
            this.containers = this.$refs.containers
            console.log(this.customTranslate)
            // 获取到属性ref为“canvas”的dom节点
            const canvas = this.$refs.canvas
            this.bpmnModeler = new BpmnModeler({
                                container: canvas,
                                additionalModules: [
                                    this.$data.customTranslateModule
                                ]
                            })
            this.createNewDiagram()
        }
    }
    </script>
    <style lang="scss">
      /*左边工具栏以及编辑节点的样式*/  
      @import '~bpmn-js/dist/assets/diagram-js.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
      .containers{
        position: absolute;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        .canvas{
          width: 100%;
          height: 100%;
        }
        .bjs-powered-by {
          display: none;
        }
      }
    </style>
    
    

    碰到的问题:

    1. 找不到openDiagram方法: 开始的时候在axios#get#then方法中使用匿名函数作为回调函数,这个问题主要是由于this这个对象指向引起的. 改成箭头函数,问题解决。
    • axios中的this的指向:

    匿名函数的指针指向->函数操作的本身
    箭头函数的指针指向->组件
    也就是说当你需要使用到组件中声明的变量或者函数,就需要使用箭头函数

    简单记录一下匿名函数和箭头函数中this的指向:

    • 匿名函数:

    在一般情况下,this对象时在运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。但是,匿名函数的执行环境具有全局性,因此它的this对象通常指向windows.

    • 箭头函数:

    (1)默认指向定义它时,所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向,偶尔没有上下文对象,this就指向window
    (2)即使是call,apply,bind等方法也不能改变箭头函数this的指向

    3、新需求:添加属性面板

    属性面板需要单独安装

    npm install --save bpmn-js-properties-panel
    npm install --save camunda-bpmn-moddle
    

    待续。。。

    展开全文
  • 工作流通常会使用xml进行管理与配置,之间流转关系使用不同的xml节点进行配置,看着xml文件,很难直接Get到流程之间的流转关系。如果使用可视化的呈现来展现工作流,则很好的解决这个问题。更好的管理与维护。 可视...
  • 工作流设计流程图

    千次阅读 2015-06-11 16:37:39
    工作流程设计(实例操作)  经过三步操作即可设计一个基本的工作流程。  下面我们以《请假流程》为例介绍流程设计的操作方法——   第一步:分析流程和表单  1、分析请假单,如下图示  手动输入的内容需要...
  • 后台系统设计:工作流设计剖析

    千次阅读 2017-11-28 00:00:00
    一般在稍微复杂一些的后台系统中,工作流设计是不可避免的一个重要部分。 设计好一个后台工作流,不仅可以使得后期使用系统的时候更加高效,同时也是十分考验产品经理的。 刚好最近自己在做这方面的工作...
  • 工作流设计

    2008-01-16 11:55:49
    工作流设计器,生成xoml文件,支持角色管理。详细说明文档。
  • 一个工作流表单设计器开源项目form-design。可实现form表单组件的拖动,基于bootstrap,jquery。
  • 群友分享的一个很漂亮的FLEX流程设计器,包含源码,很漂亮的界面,大家可以下载看看,如果感兴趣,可以自行修改,变成自己的工作流设计器。感谢作者的分享
  • 工作流设计简介

    千次阅读 2014-02-17 16:03:36
    (有可能你并不知道,你现在做的功能就是一个工作流功能) 一、  什么是工作流 举个很土的例子。程序员出差,回来后要报销票据。公司规定票据需要由员工所属经理审批,然后交由财务审批,财务审批通
  • flex 工作流设计

    热门讨论 2010-03-07 01:00:42
    flex 工作流设计器flex 工作流设计
  • python 版工作流设计

    千次阅读 2017-05-19 16:14:36
    因工作需要,做了个工作流系统,用于本部门对其他部门提供服务的接口。做之前在网上找了些资料... 工单:具体的待处理事项,用户新建的是工单,工单按照工作流设计来实现不同状态不同处理人之间的流转  工作流...
  • 微软.net工作流设计器及源代码

    热门讨论 2009-10-29 10:33:54
    提示 在IE6下面运行有问题,不出现设计器的界面 从网上收集的.net编写的工作流设计器和源代码,可以嵌入到IE中使用,比较适合用.net平台开发工作流的朋友使用.........
  • 开源工作流引擎(含流程设计器)

    千次阅读 2021-04-09 16:11:39
    工作流引擎 源码 该流程引擎完全开源免费,致力于打造与平台组织架构无关、高扩展的工作流引擎。 通过自定义用户选择器和条件处理器实现既有业务的组织架构关联和审批过程处理。 使用介绍 直接从git下载源码编译...
  • easyui版的工作流设计器源码--HTML版

    热门讨论 2012-07-16 16:04:24
    easyui版的工作流设计器源码--HTML版
  • 在网上收集的采用flash-flex开发的两个流程设计器的原型及其源代码,属于半成品,适合FLASH开发者学习使用工作流设计器开发
  • 本人收集的各种和工作流技术相关的资料和文档
  • 本文以项目中的一个工作流模块,演示责任链模式、策略模式、命令模式的组合实现! 流程简介 最近在做的一个项目,涉及到的是一个流程性质的需求。关于工程机械行业的服务流程:服务任务流程和备件发运流程。 ...
  • java工作流详解

    千次阅读 2020-08-04 18:21:41
    什么是工作流工作流:两个或两个以上的人,为了共同的目标,连续的以串行或并行的方式去完成某一业务。 业务:工作流所指业务涵盖了与经营相关的活动。 串行或并行:业务中的步骤也许以一步接着一步的方式进行...
  • Java 实现简单工作流

    千次阅读 2021-02-12 08:51:51
    工作流主要运用到反射机制创建一张工作流表如:主键 | 工作流Code | 工作流内容其中工作流,内容为Json格式工作流内容如下{"procCode": "OPS","procName": "c端补齐(乘客信息补全)","taskControlVoList": [{"sortNo...
  • 应群友要求特在CSDN开辟了一个视频课程,以工作流这个作为第一个课程,后续根据课程反馈情况再录像增加相关课程。本视频课程提供在线视频学习方式,上课时间自由选定,可以反复播放学习,解决了多数人没有固定时间...
  • 基于java和javascript的工作流设计器xiorkflow(含源代码)
  • 工作流管理系统中,引擎的所有的活动,驱动,和流转,都是以流程定义为基础而展开的。流程定义文件是流程能运行的先决条件,同时流程定义文件又是工作流引擎的设计基础,引擎必须要能生成,解释

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 713,556
精华内容 285,422
关键字:

工作流设计