vue实现 bpmn 自定义属性模板(activiti版)

清疚 2023-06-25 02:15 5阅读 0赞

例子地址：[https://github.com/RubyLinT/bpmnActiviti.git][https_github.com_RubyLinT_bpmnActiviti.git]

安装包：npm i

运行：npm run dev

访问[http://localhost:8081/\#/][http_localhost_8081]为官网提供的模板

访问[http://localhost:8081/\#/pro][http_localhost_8081_pro]为自定义的模板

1.页面内容：

<template>
      <div class="containers" ref="content">
        <div class="canvas" ref="canvas"></div>
        
        <panel ref="panel" :element="element" :businessObject="businessObject" :moddle="moddle" :modeling="modeling"/>
      </div>
    </template>
    
    <script>
    // 引入相关的依赖
    import BpmnModeler from 'bpmn-js/lib/Modeler'
    import activitiModdleDescriptor from './activiti.json'//要自定义的属性
    import { getBusinessObject } from 'bpmn-js/lib/util/ModelUtil';
    import panel from './panel'
    export default {
      components:{panel},
      data () {
        return {
          businessObject:null,
          element:null,
          moddle:null,
          modeling:null,
          // bpmn建模器
          bpmnModeler: null,
          container: null,
          canvas: null,
        }
      },
      methods: {
        createNewDiagram () {
          let _this = this
          const bpmnXmlStr = `<?xml version="1.0" encoding="UTF-8"?>
            <bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" id="Definitions_0u4gsqp" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="6.1.1">
              <bpmn:process id="Process_1d6bkiu" isExecutable="false" />
              <bpmndi:BPMNDiagram id="BPMNDiagram_1">
                <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1d6bkiu" />
              </bpmndi:BPMNDiagram>
            </bpmn:definitions>`
          // 将字符串转换成图显示出来
          this.bpmnModeler.importXML(bpmnXmlStr, function (err) {
            if (err) {
              console.error(err)
            }
            _this.moddle = _this.bpmnModeler.get('moddle')
            _this.modeling = _this.bpmnModeler.get('modeling')
          })
        },
      },
      mounted () {
        // 获取到属性ref为“content”的dom节点
        this.container = this.$refs.content
        // 获取到属性ref为“canvas”的dom节点
        const canvas = this.$refs.canvas
    
        // 建模，官方文档这里讲的很详细
        this.bpmnModeler = new BpmnModeler({
          container: canvas,
          moddleExtensions: {
            activiti: activitiModdleDescriptor
          }
        })
    
        // 下载画图
        let _this = this
        // 点击事件
        this.bpmnModeler.on('element.click',(event)=>{
          event.originalEvent.preventDefault();
          event.originalEvent.stopPropagation();
          _this.element = event.element
          _this.businessObject = getBusinessObject(_this.element);
          console.log('businessObject',_this.businessObject)
          _this.$nextTick(()=>{
            _this.$refs.panel.init()
          })
        })
        this.createNewDiagram(this.bpmnModeler)
      },
    }
    </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: 90%;
      }
      .canvas{
        width: 100%;
        height: 100%;
      }
      .panel{
        position: absolute;
        right: 0;
        top: 0;
        width: 260px;
      }
    </style>

2.panel.vue

<template>
      <div v-if="show" class="panelWrapper">
        <div class="panelHeader">{
       {form.id}}</div>
        <el-form class="panelForm" :model="form" label-position="top">
          <el-tabs v-model="activeName">
            <el-tab-pane label="普通" name="general">
              <el-form-item label="Id">
                <el-input size="mini" v-model="form.id" @change="v=>updateForm('id',v)"></el-input>
              </el-form-item>
              <el-form-item label="名称">
                <el-input size="mini" v-model="form.name" @change="v=>updateForm('name',v)"></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane v-if="formType.includes(businessObject.$type)" label="表单" name="form">
              <el-form-item label="表单Id">
                <el-input size="mini" v-model="form.formKey" @change="v=>updateForm('formKey',v)"></el-input>
              </el-form-item>
              <el-form-item label="表单字段">
                <el-button :disabled="!currentRow" class="tableBtn" type="text" @click="delFP"><i class="el-icon-remove"></i></el-button>
                <el-button class="tableBtn" type="text" @click="addFP"><i class="el-icon-circle-plus"></i></el-button>
                <el-table class="fpTable" border :show-header="false" :data="formProperty" style="width: 100%" highlight-current-row @current-change="handleCurrentChange">
                  <el-table-column prop="id"></el-table-column>
                </el-table>
              </el-form-item>
              <template v-if="currentRow">
                <div class="title">字段属性</div>
                <el-form-item label="id">
                  <el-input size="mini" v-model="currentRow.id" @change="v=>updateFormProperty('id',v)"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                  <el-select size="mini" style="width:100%" v-model="currentRow.type" placeholder="请选择" @change="v=>updateFormProperty('type',v)">
                    <el-option v-for="item in options" :key="item"
                      :label="item" :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="名称">
                  <el-input size="mini" v-model="currentRow.name" @change="v=>updateFormProperty('name',v)"></el-input>
                </el-form-item>
                <el-form-item label="默认值">
                  <el-input size="mini" v-model="currentRow.default" @change="v=>updateFormProperty('default',v)"></el-input>
                </el-form-item>
              </template>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
    </template>
    
    <script>
    export default {
      props:{
        element:{},
        businessObject:{
          default:function(){
            return {}
          },
        },
        modeling:{},
        moddle:{},
      },
      data(){
        return {
          show:false,
          activeName:'general',
          form:{},
          formProperty:[],
          currentRow :'',
          extensionElements:'',
          options:['long','string','boolean','date','enum','custom type'],
          formType:["bpmn:StartEvent","bpmn:UserTask"],
        }
      },
      methods:{
        // 初始化
        init(){
          this.show = true
          this.activeName='general'
          if(this.formType.includes(this.businessObject.$type)){
            this.extensionElements= this.businessObject.extensionElements || this.moddle.create('bpmn:ExtensionElements',{ values: [] })
            this.modeling.updateProperties(this.element, {
              extensionElements: this.extensionElements
            });
            this.formProperty = this.extensionElements.values
          }
          this.currentRow = ''
          this.form = this.$copy(this.businessObject)
          console.log('form',this.form)
          console.log('businessObject',this.businessObject)
          console.log('extensionElements',this.extensionElements)
          console.log('formProperty',this.formProperty)
        },
        //修改表单
        updateForm(type,v){
          this.modeling.updateProperties(this.element, {
            [type]: v
          });
          console.log(this.form,this.businessObject)
        },
        //修改表单字段
        updateFormProperty(type,v){
          this.modeling.updateProperties(this.element, {
            extensionElements: this.extensionElements
          });
          console.log(this.businessObject,this.extensionElements)
        },
        // 删除表单字段
        delFP(){
          let i = this.formProperty.findIndex(e=>e.id==this.currentRow.id)
          this.formProperty.splice(i,1)
          console.log(this.extensionElements)
          this.modeling.updateProperties(this.element, {
            extensionElements: this.extensionElements
          });
        },
        // 新增表单字段
        addFP(){
          //activiti:FormProperty里的FormProperty要与activiti.json保持
          let formProperty = this.moddle.create('activiti:FormProperty',{id: "FormProperty_"+this.random(100000,999999)});
          this.extensionElements.get('values').push(formProperty);
          this.modeling.updateProperties(this.element, {
            extensionElements: this.extensionElements
          });
          // this.formProperty.push({id: "FormProperty_"+this.random(100000,999999),$type: "activiti:formProperty"})
          console.log(this.formProperty,this.extensionElements)
        },
        // 获取随机数
        random(lower, upper) {
          return Math.floor(Math.random() * (upper - lower)) + lower;
        },
        // 选中表单字段行
        handleCurrentChange(row){
          this.currentRow  = row
        },
      },
    }
    </script>
    
    <style lang="scss" scoped>
    .panelWrapper{
      position: fixed;
      right:0;
      top:0;
      border-left:1px solid #ccc;
      height:100%;
      background-color: #f8f8f8;
      width:260px;
      .panelHeader{
        padding: 15px;
        padding-bottom: 5px;
        font-size: 120%;
        font-weight: bolder;
      }
      .panelForm{
        padding:15px;
      }
    }
    .tableBtn{
      padding:0;
      font-size: 18px;
    }
    .title {
      line-height: 32px;
      font-size: 16px;
    }
    </style>
    <style lang="scss">
    .panelForm{
      .el-form-item {
        margin-bottom: 10px;
      }
      .el-form-item__label{
        line-height: 20px;
        padding-bottom:0;
      }
    }
    .fpTable{
      height:150px;
      overflow-y:auto;
      td, th{
        padding:0;
        cursor: pointer;
      }
    }
    </style>

3.activiti.json：注意name大小写（FormProperty和formProperty将是两个不同的标签）

{
      "name": "Activiti",
      "uri": "http://some-company/schema/bpmn/activiti",
      "prefix": "activiti",
      "xml": {
        "tagAlias": "lowerCase"
      },
      "types": [
        {
          "name": "FormSupported",
          "isAbstract": true,
          "extends": [
            "bpmn:StartEvent",
            "bpmn:UserTask"
          ],
          "properties": [
            {
              "name": "formKey",
              "isAttr": true,
              "type": "String"
            }
          ]
        },
        {
          "name": "FormProperty",
          "superClass": [ "Element" ],
          "meta": {
            "allowedIn": [
              "bpmn:StartEvent",
              "bpmn:UserTask"
            ]
          },
          "properties": [
            {
              "name": "id",
              "type": "String",
              "isAttr": true
            },
            {
              "name": "name",
              "type": "String",
              "isAttr": true
            },
            {
              "name": "type",
              "type": "String",
              "isAttr": true
            },
            {
              "name": "default",
              "type": "String",
              "isAttr": true
            }
          ]
        }
      ],
      "emumerations": [],
      "associations": []
    }

[https_github.com_RubyLinT_bpmnActiviti.git]: https://github.com/RubyLinT/bpmnActiviti.git
[http_localhost_8081]: http://192.168.60.90:8081/#/
[http_localhost_8081_pro]: http://192.168.60.90:8081/#/pro