存储流程设计节点相关参数

https://github.com/bpmn-io/bpmn-font bpmn图标

https://cdn.staticaly.com/gh/bpmn-io/bpmn-font/master/dist/demo.html

paletteData.js

/**
 * 存储流程设计相关参数
 */
export default class BpmData {
  constructor() {
    this.controls = [] // 设计器控件
    this.init()
  }

  init() {
    this.controls = [
      {
        action: 'create.start-event',
        title: '开始'
      },
      {
        action: 'create.intermediate-event',
        title: '中间'
      },
      {
        action: 'create.end-event',
        title: '结束'
      },
      {
        action: 'create.exclusive-gateway',
        title: '排他网关'
      },
      {
        action: 'create.task',
        title: '任务'
      },
      {
        action: 'create.user-task',
        title: '用户任务'
      },
      {
        action: 'create.user-sign-task',
        title: '会签任务'
      },
      {
        action: 'create.subprocess-expanded',
        title: '子流程'
      },
      {
        action: 'create.data-object',
        title: '数据对象'
      },
      {
        action: 'create.data-store',
        title: '数据存储'
      },
      {
        action: 'create.participant-expanded',
        title: '扩展流程'
      },
      {
        action: 'create.group',
        title: '分组'
      }
    ]
  }

  //  获取控件配置信息
  getControl(action) {
    const result = this.controls.filter(item => item.action === action)
    return result[0] || {}
  }
}

index.vue

<template>
  <div class="container">
    <!-- 工具栏 -->
    <ToolBar v-if="bpmnModeler" class="toolBar" :modeler="bpmnModeler" />
    <!-- 编辑器 -->
    <div ref="modeler" class="modeler" />
    <!-- 右侧panel -->
    <properties-view v-if="bpmnModeler" :modeler="bpmnModeler" class="property-panel" />
  </div>
</template>
<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'; // bpmn-js 设计器
import ToolBar from './components/ToolBar/index'; // 工具栏
import PropertiesView from './components/custom-properties-panel';// 右侧属性面板组件
import defaultDiagram from './utils/defaultDiagram';
import processPrefix from './utils/setting';
import PaletteData from './utils/paletteData';
import CustomTranslate from './custom/CustomTranslate';
import CustomContextPad from './custom/CustomContextPad';
import CustomPalette from './custom/CustomPalette';
export default {
  components: { ToolBar, PropertiesView },
  data() {
    return {
      processId: `process_${new Date().getTime()}`,
      processName: `流程_${new Date().getTime()}`,
      processPrefix: processPrefix,
      bpmnModeler: null,
      bpmData: new PaletteData()
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
       * 初始化编辑器
       */
    init() {
      let _this = this;
      let modeler = this.$refs.modeler;
      let customTranslateModule = { translate: ['value', CustomTranslate] };
      // 生成实例
      _this.bpmnModeler = new BpmnModeler({
        container: modeler,
        additionalModules: [
          CustomContextPad,
          CustomPalette,
          customTranslateModule
        ]
      });
      // 新增流程定义
      _this.createNewProcess();
    },
    /** 创建新的流程图 */
    async createNewProcess(processXml) {
      let newProcessXml = processXml || defaultDiagram(this.processId, this.processName, this.processPrefix);
      try {
        let { warnings } = await this.bpmnModeler.importXML(newProcessXml);
        if (warnings && warnings.length) {
          warnings.forEach(warn => console.warn(warn))
        } else {
          this.adjustPalette();
        }
      } catch (e) {
        console.error(`[Create New Process Warn]: ${e.message || e}`)
      }
    },
    // 调整左侧工具栏排版
    adjustPalette() {
      try {
        // 获取 bpmn 设计器实例
        let modeler = this.$refs.modeler;
        let djsPalette = modeler.children[0].children[1].children[5];
        let djsPalStyle = {
          width: '130px',
          padding: '5px',
          background: 'white',
          left: '20px',
          borderRadius: 0
        };
        for (var key in djsPalStyle) {
          djsPalette.style[key] = djsPalStyle[key];
        }
        let palette = djsPalette.children[0];
        let allGroups = palette.children;
        allGroups[0].style['display'] = 'none';
        // 修改控件样式
        for (var gKey in allGroups) {
          let group = allGroups[gKey];
          for (var cKey in group.children) {
            let control = group.children[cKey];
            let controlStyle = {
              display: 'flex',
              justifyContent: 'flex-start',
              alignItems: 'center',
              width: '100%',
              padding: '5px'
            };
            if (control.className && control.dataset && control.className.indexOf('entry') !== -1) {
            //   let controlProps = this.bpmData.getControl(
            //     control.dataset.action
            //   );
              console.log(control.title)
              //   console.log(controlProps)
              control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${
                // controlProps['title']
                control.title
              }</div>`;
              for (var csKey in controlStyle) {
                control.style[csKey] = controlStyle[csKey];
              }
            }
          }
        }
      } catch (e) {
        console.log(e);
      }
    }
  }

}
</script>
<style lang="scss" scoped>
/*左边工具栏以及编辑节点的样式*/
@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";
.container{
    width:99%;
    height:100%;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    .toolBar{
        width:100%;
        height:5%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: rgba(0, 98, 255,0.2);
    }
    .modeler{
        width:80%;
        height:95%;
    }
    .property-panel{
        width:20%;
        height:95%;
    }
}

</style>
<style lang="scss" >
.bpmn-icon-data-store {
  display: none;
}
</style>