介绍 ​

<template>
    <BpmnRender
        v-if="xmlContent&&activityInsListData.length&&recordListData.length"
        :taskId="taskId"
        :xmlContent='xmlContent'
        :recordListData="recordListData"
        :activityInsListData="activityInsListData"
    ></BpmnRender>
</template>

<template>
    <DmnRender
        :xmlContent='xmlContent'
    ></DmnRender>
</template>

<template>
  <div class="containers">
    <div
      id="canvas"
      class="canvas"
    ></div>
    <div>
      <div
        class="panel mr-2 mt-8"
      >
        <div
          id="js-properties-panel"
          ref="jsPropertiesPanel"
        ></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs } from 'vue';

// 引入相关的依赖
/* import BpmnViewer from 'bpmn-js'*/
import BpmnModeler from 'bpmn-js/lib/Modeler';
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  // use Camunda Platform properties provider
  CamundaPlatformPropertiesProviderModule,
}
  from 'bpmn-js-properties-panel';
import CamundaExtensionModule from 'camunda-bpmn-moddle/lib';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';

import './assets/diagram-js.css';
import './assets/bpmn-js.css';
import './assets/bpmn-font/css/bpmn.css';
import './assets/bpmn-font/css/bpmn-codes.css';
import './assets/bpmn-font/css/bpmn-embedded.css';
/* 右边工具栏样式*/
// import './assets/bpmn-js-properties-panel.css';
import './assets/element-templates.css';
import './assets/properties-panel.css';
import customTranslate from './customTranslate';


let bpmnModeler = null as any;
// interface vallab {
//   value?: string;
//   label?: string;
// }
export default defineComponent({
  name: 'BpmnDrawer',
  components: { },

  props: {
    xmlContent: {
      type: String,
      reuquired: true,
      default: '',
    },
    record: {
      type: Object,
      reuquired: false,
      default: null,
    },
    isUpdate: {
      type: Boolean,
      reuquired: false,
      default: false,
    },
  },
  emits: ['exportXML'],
  setup(props, { emit }) {
    console.log(props);
    let { xmlContent, record } = toRefs(props);
  
    let stateData = reactive({
      container: null,
      xmlContents: ''
    });
    stateData.xmlContents = xmlContent.value;

    console.log(stateData.categoryName);

    onMounted(() => {
      // 建模，官方文档这里讲的很详细
      bpmnModeler = new BpmnModeler({
        container: '#canvas',
        // 添加控制板
        propertiesPanel: {
          parent: '#js-properties-panel',
        },
        additionalModules: [
          // 左边工具栏以及节点
          BpmnPropertiesPanelModule,
          BpmnPropertiesProviderModule,
          // 右边的工具栏
          CamundaPlatformPropertiesProviderModule,
          CamundaExtensionModule,
          {
            translate: ['value', customTranslate],
          },
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor,
        },
      });

    await initCanvas(stateData.xmlContents);
    });

    async function initCanvas(xml: string) {
      try {
        await bpmnModeler.importXML(xml)
      } catch (err) {
        console.error(err);
      }
    }
    return {
      initCanvas,
      ...toRefs(stateData)
    };
  },
});
</script>

<style lang="scss" scoped>
.containers {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}

#canvas {
  width: 100%;
  height: 100%;
}

.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  overflow-y: auto;
  height: 100%;
}

.panel.hide {
  width: 30px;
}

.bjs-container .bjs-breadcrumbs {
  position: absolute !important;
  top: -5px !important;
}

.bjs-powered-by {
  display: none !important;
}
</style>

<template>
  <div style="background: #fff">
    <div class="containers">
      <div
        id="canvas"
        style="height: 90vh"
      ></div>
      <div>
        <div
          class="panel"
          id="properties"
        ></div>
      </div>

    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs } from 'vue';
import customTranslate from './translations/index';
// dmn-js 样式
import './assets/diagram-js.css';
import './assets/dmn-js-drd.css';
import './assets/dmn-js-decision-table-controls.css';
import './assets/dmn-js-decision-table.css';
import './assets/dmn-js-decision-table.css';
import './assets/dmn-js-literal-expression.css';
import './assets/dmn-js-shared.css';
import './assets/dmn-font/css/dmn.css';
import './assets/dmn-js-properties-panel.css';
import DmnModeler from 'dmn-js/lib/Modeler.js';
import propertiesPanelModule from 'dmn-js-properties-panel';
import drdAdapterModule from 'dmn-js-properties-panel/lib/adapter/drd';
import propertiesProviderModule from 'dmn-js-properties-panel/lib/provider/camunda/index.js';
import camundaModdleDescriptor from 'camunda-dmn-moddle/resources/camunda.json';


// (1) import DMN diagram
let dmnModeler: any = null;
// drag and drop DMN diagrams
export default defineComponent({
  name: 'DmnDrawer',
  components: { },

  props: {
    xmlContent: {
      type: String,
      reuquired: true,
      default: '',
    },
    record: {
      type: Object,
      reuquired: false,
      default: null,
    },
    isUpdate: {
      type: Boolean,
      reuquired: false,
      default: false,
    }
  },
  emits: ['exportDMN'],
  setup(props, { emit }) {
    let { xmlContent, record } = toRefs(props);

    let stateData = reactive({
      xmlContents: '',
      isUpdate: false
    });
    stateData.xmlContents = ''
    stateData.xmlContents = xmlContent.value;
    stateData.isUpdate = props.isUpdate;
    onMounted(() => {

      importDMN(stateData.xmlContents);

    });
    async function importDMN(xml) {
      dmnModeler = new DmnModeler({
        container: '#canvas',
        drd: {
          propertiesPanel: {
            parent: '#properties',
          },
          additionalModules: [
            propertiesPanelModule,
            propertiesProviderModule,
            drdAdapterModule,
            {
              translate: ['value', customTranslate],
            },
          ],
          moddleExtensions: {
            camunda: camundaModdleDescriptor,
          },
        },
      });
      // (1.2) import DMN 1.3 diagram
      try {
        // console.log(dmnModeler)
        dmnModeler?.importXML(xml).then(() => {
          // hack 编辑不允许修改id
          let camundaId = document.getElementById('camunda-id')
          if (stateData.isUpdate && camundaId) {
            camundaId['disabled'] = true
          }
        });

      } catch (err) {
        console.log(err);
      }
    }
    return {
      ...toRefs(stateData)
    };
  },
});
</script>
<style scoped>
#canvas {
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.font12 {
  font-size: 12px;
}

#properties {
  margin-top: 40px;
}

.containers {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}

.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  overflow-y: auto;
  height: 100%;
}
</style>