npm 安裝 bpmn

npm install bpmn-js@7.3.1 bpmn-js-properties-panel@0.37.2 camunda-bpmn-moddle@4.4.0

bpmnDemo.vue

<template>
    <div class="containers">
        <img :src="imageSrc" alt="" srcset="" style="width: 100px;height: 100px;" v-if="imageSrc">
        <button type="primary" @click="submitPic()">保存XML</button>
        <button type="primary" @click="downloadBpmn()">下載XML</button>
        <button type="primary" @click="downloadSvg()">下載SVG</button>
        <button type="primary" @click="downloadImage()">下載圖片</button>
        <button type="primary" @click="handlerUndo()">撤銷</button>
        <button type="primary" @click="handlerRedo()">恢復(fù)</button>
        <button type="primary" @click="handlerZoom(0.1)">放大</button>
        <button type="primary" @click="handlerZoom(-0.1)">縮小</button>
        <button type="primary" @click="handlerZoom(0)">還原</button>
        <!-- canvas： bpmn容器 -->
        <div class="canvas" ref="canvas" id="canvas" />
        <!-- propertiesPanel： 右側(cè)屬性欄容器 -->
        <div id="propertiesPanel" class="panel"></div>

        <a hidden ref="downloadLink"></a>
    </div>
</template>

<script>
    import BpmnModeler from "bpmn-js/lib/Modeler"; // bpmn-js 設(shè)計器
    // propertiesPanelModule propertiesProviderModule camundaModdleDescriptor 引入右側(cè)屬性欄依賴
    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.json';
    import {
        bpmnXmlStr
    } from './children/initXmlString'; // 初始化流程模板
    import customTranslate from './children/customTranslate'; //漢化包引入
    export default {
        data() {
            return {
                bpmnModeler: null, // bpmn建模器
                scale: 1,
                imageSrc: ""
            };
        },
        mounted() {
            this.initModeler();
        },
        methods: {
            initModeler() {
                // 配置漢化
                const customTranslateModule = {
                    translate: ['value', customTranslate]
                }
                // 生成實例
                this.bpmnModeler = new BpmnModeler({
                    container: "#canvas",
                    propertiesPanel: {
                        parent: "#propertiesPanel"
                    },
                    additionalModules: [
                        // 植入漢化包
                        customTranslateModule,
                        propertiesPanelModule,
                        propertiesProviderModule
                    ],
                    moddleExtensions: {
                        camunda: camundaModdleDescriptor
                    },
                    // 打開鍵盤快捷鍵
                    keyboard: {
                        bindTo: document // 或者window兰英，注意與外部表單的鍵盤監(jiān)聽事件是否沖突
                    }
                });
                // 將初始化的模板引入岳链，在頁面初始化時會加載初始化流程模板的內(nèi)容
                this.initXML();
            },

            initXML() {
                console.log(bpmnXmlStr)
                this.bpmnModeler.importXML(bpmnXmlStr, err => {
                    if (err) {
                        console.error(err);
                        console.error("初始化模板異常");
                    }
                });
            },

            // 保存XML
            submitPic: function() {
                this.bpmnModeler.saveXML({
                    format: true
                }).then((res) => {
                    console.log('保存xml數(shù)據(jù)：', res.xml);

                });

                this.bpmnModeler.saveXML({
                    format: true
                }, (err, xml) => {
                    if (!err) {
                        let bpmnFile = new File([xml], `${this.getFilename(xml)}bpmn20.xml`, {
                            type: 'text/xml'
                        });
                        //  使用 FormData 將文件作為流的形式傳輸?shù)胶蠖?                        let formData = new FormData();
                        formData.append('file', bpmnFile);
                        console.log('保存數(shù)據(jù)：', formData, bpmnFile);
                    }
                });
            },

            // 下載XML
            downloadBpmn() {
                this.bpmnModeler.saveXML({
                    format: true
                }, (err, xml) => {
                    if (!err) {
                        // 獲取文件名
                        const name = `${this.getFilename(xml)}bpmn20.xml`;
                        // 將文件名以及數(shù)據(jù)交給下載方法
                        this.download({
                            name: name,
                            data: xml
                        });
                    }
                });
            },

            getFilename(xml) {
                let start = xml.indexOf('process');
                let filename = xml.substr(start, xml.indexOf('>'));
                filename = filename.substr(filename.indexOf('id') + 4);
                filename = filename.substr(0, filename.indexOf('"'));
                return filename;
            },

            download({
                name = 'diagram.bpmn',
                data
            }) {
                // 這里就獲取到了之前設(shè)置的隱藏鏈接
                const downloadLink = this.$refs.downloadLink;
                // 把輸就轉(zhuǎn)換為URI，下載要用到的
                const encodedData = encodeURIComponent(data);

                if (data) {
                    // 將數(shù)據(jù)給到鏈接
                    downloadLink.href = 'data:application/bpmn20.xml;charset=UTF-8,' + encodedData;
                    // 設(shè)置文件名
                    downloadLink.download = name;
                    // 觸發(fā)點擊事件開始下載
                    downloadLink.click();
                }
            },

            // 保存svg
            downloadSvg() {
                let This = this
                This.bpmnModeler.get('canvas').zoom('fit-viewport');
                This.bpmnModeler.saveXML({
                    format: true
                }, (err, xml) => {
                    if (!err) {
                        // 獲取文件名
                        const name = `${This.getFilename(xml)}.svg`;

                        // 從建模器畫布中提取svg圖形標(biāo)簽
                        let canvas = This.bpmnModeler.get('canvas');
                        canvas.zoom('fit-viewport', 'auto');
                        let context = '';
                        const djsGroupAll = This.$refs.canvas.querySelectorAll('.djs-group');
                        for (let item of djsGroupAll) {
                            context += item.innerHTML;
                        }
                        // 獲取svg的基本數(shù)據(jù)截亦，長寬高
                        const viewport = This.$refs.canvas.querySelector('.viewport').getBBox();

                        // 將標(biāo)簽和數(shù)據(jù)拼接成一個完整正常的svg圖形
                        const svg = `
                                    <svg
                                      xmlns="http://www.w3.org/2000/svg"
                                      xmlns:xlink="http://www.w3.org/1999/xlink"
                                      width="${viewport.width}"
                                      height="${viewport.height}"
                                      viewBox="${viewport.x} ${viewport.y} ${viewport.width} ${viewport.height}"
                                      version="1.1"
                                      >
                                      ${context}
                                    </svg>
                                  `;
                        // 將文件名以及數(shù)據(jù)交給下載方法
                        this.download({
                            name: name,
                            data: svg
                        });
                    }
                });
            },

            // 保存圖片
            downloadImage() {
                let This = this
                This.bpmnModeler.get('canvas').zoom('fit-viewport');
                This.bpmnModeler.saveXML({
                    format: true
                }, (err, xml) => {
                    if (!err) {
                        // 獲取文件名
                        // const name = `${This.getFilename(xml)}.svg`;
                        const name = This.getFilename(xml);

                        // 從建模器畫布中提取svg圖形標(biāo)簽
                        let canvas = This.bpmnModeler.get('canvas');
                        canvas.zoom('fit-viewport', 'auto');
                        let context = '';
                        const djsGroupAll = This.$refs.canvas.querySelectorAll('.djs-group');
                        for (let item of djsGroupAll) {
                            context += item.innerHTML;
                        }
                        // 獲取svg的基本數(shù)據(jù)，長寬高
                        const viewport = This.$refs.canvas.querySelector('.viewport').getBBox();

                        // 將標(biāo)簽和數(shù)據(jù)拼接成一個完整正常的svg圖形
                        const svg = `
                                    <svg
                                      xmlns="http://www.w3.org/2000/svg"
                                      xmlns:xlink="http://www.w3.org/1999/xlink"
                                      width="${viewport.width}"
                                      height="${viewport.height}"
                                      viewBox="${viewport.x} ${viewport.y} ${viewport.width} ${viewport.height}"
                                      version="1.1"
                                      >
                                      ${context}
                                    </svg>
                                  `;
                        // 將文件名以及數(shù)據(jù)交給下載方法
                        console.log(name)
                        console.log(svg)
                        this.covertSVG2Image(svg, name, viewport.width, viewport.height, "png")
                    }
                });
            },

            covertSVG2Image(source, name, width, height, type = 'png') {
                let image = new Image()
                image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
                let canvas = document.createElement('canvas')
                canvas.width = width
                canvas.height = height
                let context = canvas.getContext('2d')
                context.fillStyle = '#fff'
                context.fillRect(0, 0, 10000, 10000)
                image.onload = function() {
                    context.drawImage(image, 0, 0)
                    let a = document.createElement('a')
                    a.download = `${name}.${type}`
                    a.href = canvas.toDataURL(`image/${type}`)
                    a.click()
                }
            },

            // 恢復(fù)
            handlerRedo() {
                this.bpmnModeler.get('commandStack').redo();
            },

            // 撤銷
            handlerUndo() {
                this.bpmnModeler.get('commandStack').undo();
            },

            // 放大 縮小 還原
            handlerZoom(radio) {
                const newScale = !radio ? 1.0 : this.scale + radio;
                console.log(newScale)
                this.bpmnModeler.get('canvas').zoom(newScale);
                this.scale = newScale;
                /* const taskTool = document.querySelector('.bpmn-icon-screw-wrench');
                console.log('taskTool', taskTool);
                const taskTool1 = document.querySelector('.bpmn-icon-intermediate-event-none');
                console.log('taskTool1', taskTool1);
                taskTool.remove();
                taskTool1.remove(); */
            },
        },

    };
</script>

<style scoped>
    /*左邊工具欄以及編輯節(jié)點的樣式*/
    @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%;
    }

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

    .panel {
        position: absolute;
        right: 0;
        top: 0;
    }

    >>>.bjs-powered-by {
        display: none;
    }

    >>>.bpp-textfield input {
        box-sizing: border-box;
    }
</style>

customTranslate.js

// 引入translations.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) {
       let str = replacements[key];
       if (translations[replacements[key]] != null && translations[replacements[key]] != 'undefined') {
           str = translations[replacements[key]];
       }
       return str || '{' + key + '}';
   });
}

translations.js 漢化

export default {
    // hong
    // Labels
    'Activate the global connect tool': '激活全局連接工具',
    'Append {type}': '追加 {type}',
    'Append EndEvent': '追加 結(jié)束事件 ',
    'Append Task': '追加 任務(wù)',
    'TextAnnotation': '追加 注釋文本',
    'Append Gateway': '追加 網(wǎng)關(guān)',
    'Append Intermediate/Boundary Event': '追加 中間/邊界 事件',
    'Add Lane above': '在上面添加道',
    'Divide into two Lanes': '分割成兩個道',
    'Divide into three Lanes': '分割成三個道',
    'Add Lane below': '在下面添加道',
    'Append compensation activity': '追加補償活動',
    'Change type': '修改類型',
    'Connect using Association': '使用關(guān)聯(lián)連接',
    'Connect using Sequence/MessageFlow or Association': '使用順序/消息流或者關(guān)聯(lián)連接',
    'Connect using DataInputAssociation': '使用數(shù)據(jù)輸入關(guān)聯(lián)連接',
    'Remove': '移除',
    'Activate the hand tool': '激活抓手工具',
    'Activate the lasso tool': '激活套索工具',
    'Activate the create/remove space tool': '激活創(chuàng)建/刪除空間工具',
    'Create expanded SubProcess': '創(chuàng)建擴展子過程',
    'Create IntermediateThrowEvent/BoundaryEvent': '創(chuàng)建中間拋出事件/邊界事件',
    'Create Pool/Participant': '創(chuàng)建池/參與者',
    'Parallel Multi Instance': '并行多重事件',
    'Sequential Multi Instance': '時序多重事件',
    'DataObjectReference': '數(shù)據(jù)對象參考',
    'DataStoreReference': '數(shù)據(jù)存儲參考',
    'Loop': '循環(huán)',
    'Ad-hoc': '即席',
    'Create {type}': '創(chuàng)建 {type}',
    'Create Task': '創(chuàng)建任務(wù)',
    'Create StartEvent': '創(chuàng)建開始事件',
    'Create EndEvent': '創(chuàng)建結(jié)束事件',
    'Create Group': '創(chuàng)建組',
    'Task': '任務(wù)',
    'Send Task': '發(fā)送任務(wù)',
    'Receive Task': '接收任務(wù)',
    'User Task': '用戶任務(wù)',
    'Manual Task': '手工任務(wù)',
    'Business Rule Task': '業(yè)務(wù)規(guī)則任務(wù)',
    'Service Task': '服務(wù)任務(wù)',
    'Script Task': '腳本任務(wù)',
    'Call Activity': '調(diào)用活動',
    'Sub Process (collapsed)': '子流程（折疊的）',
    'Sub Process (expanded)': '子流程（展開的）',
    'Start Event': '開始事件',
    'StartEvent': '開始事件',
    'Intermediate Throw Event': '中間事件',
    'End Event': '結(jié)束事件',
    'EndEvent': '結(jié)束事件',
    'Create Gateway': '創(chuàng)建網(wǎng)關(guān)',
    'GateWay': '網(wǎng)關(guān)',
    'Create Intermediate/Boundary Event': '創(chuàng)建中間/邊界事件',
    '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': '消息結(jié)束事件',
    'Escalation End Event': '定時結(jié)束事件',
    'Error End Event': '錯誤結(jié)束事件',
    'Cancel End Event': '取消結(jié)束事件',
    'Compensation End Event': '補償結(jié)束事件',
    'Signal End Event': '信號結(jié)束事件',
    'Terminate End Event': '終止結(jié)束事件',
    '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': '互斥網(wǎng)關(guān)',
    'Parallel Gateway': '并行網(wǎng)關(guān)',
    'Inclusive Gateway': '相容網(wǎng)關(guān)',
    'Complex Gateway': '復(fù)雜網(wǎng)關(guān)',
    'Event based Gateway': '事件網(wǎng)關(guān)',
    'Transaction': '轉(zhuǎn)運',
    '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規(guī)范',
    'no diagram to display': '沒有可展示的流程圖',
    'no process or collaboration to display': '沒有可展示的流程/協(xié)作',
    'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未繪制',
    'already rendered {element}': '{element} 已被渲染',
    'failed to import {element}': '導(dǎo)入{element}失敗',
    //屬性面板的參數(shù)
    'Id': '編號',
    'Name': '名稱',
    'General': '常規(guī)',
    'Details': '詳情',
    'Message Name': '消息名稱',
    'Message': '消息',
    'Initiator': '創(chuàng)建者',
    'Asynchronous Continuations': '持續(xù)異步',
    'Asynchronous Before': '異步前',
    'Asynchronous After': '異步后',
    'Job Configuration': '工作配置',
    'Exclusive': '排除',
    'Job Priority': '工作優(yōu)先級',
    'Retry Time Cycle': '重試時間周期',
    'Documentation': '文檔',
    'Element Documentation': '元素文檔',
    'History Configuration': '歷史配置',
    'History Time To Live': '歷史的生存時間',
    'Forms': '表單',
    'Form Key': '表單key',
    'Form Fields': '表單字段',
    'Business Key': '業(yè)務(wù)key',
    'Form Field': '表單字段',
    'ID': '編號',
    'Type': '類型',
    'Label': '名稱',
    'Default Value': '默認值',
    'Validation': '校驗',
    'Add Constraint': '添加約束',
    'Config': '配置',
    'Properties': '屬性',
    'Add Property': '添加屬性',
    'Value': '值',
    'Add': '添加',
    'Values': '值',
    'Add Value': '添加值',
    'Listeners': '監(jiān)聽器',
    'Execution Listener': '執(zhí)行監(jiān)聽',
    'Event Type': '事件類型',
    'Listener Type': '監(jiān)聽器類型',
    'Java Class': 'Java類',
    'Expression': '表達式',
    'Must provide a value': '必須提供一個值',
    'Delegate Expression': '代理表達式',
    'Script': '腳本',
    'Script Format': '腳本格式',
    'Script Type': '腳本類型',
    'Inline Script': '內(nèi)聯(lián)腳本',
    'External Script': '外部腳本',
    'Resource': '資源',
    'Field Injection': '字段注入',
    'Extensions': '擴展',
    'Input/Output': '輸入/輸出',
    'Input Parameters': '輸入?yún)?shù)',
    'Output Parameters': '輸出參數(shù)',
    'Parameters': '參數(shù)',
    'Output Parameter': '輸出參數(shù)',
    'Timer Definition Type': '定時器定義類型',
    'Timer Definition': '定時器定義',
    'Date': '日期',
    'Duration': '持續(xù)',
    'Cycle': '循環(huán)',
    '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': '版本標(biāo)簽',
    'Executable': '可執(zhí)行文件',
    'External Task Configuration': '擴展任務(wù)配置',
    'Task Priority': '任務(wù)優(yōu)先級',
    'External': '外部',
    'Connector': '連接器',
    'Must configure Connector': '必須配置連接器',
    'Connector Id': '連接器編號',
    'Implementation': '實現(xiàn)方式',
    'Field Injections': '字段注入',
    'Fields': '字段',
    'Result Variable': '結(jié)果變量',
    'Topic': '主題',
    'Configure Connector': '配置連接器',
    'Input Parameter': '輸入?yún)?shù)',
    'Assignee': '代理人',
    'Candidate Users': '候選用戶',
    'Candidate Groups': '候選組',
    'Due Date': '到期時間',
    'Follow Up Date': '跟蹤日期',
    'Priority': '優(yōu)先級',
    '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標(biāo)準(zhǔn)日期蜕提，如：2015-06-26T09:54:00',
    'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟蹤日期必須符合EL表達式乌妙，如： ${someDate} ,或者一個ISO標(biāo)準(zhǔn)日期使兔，如：2015-06-26T09:54:00',
    'Variables': '變量',
    'Candidate Starter Configuration': '候選開始配置',
    'Task Listener': '任務(wù)監(jiān)聽器',
    'Candidate Starter Groups': '候選開始組',
    'Candidate Starter Users': '候選開始用戶',
    'Tasklist Configuration': '任務(wù)列表配置',
    'Startable': '啟動',
    'Specify more than one group as a comma separated list.': '指定多個組,用逗號分隔',
    'Specify more than one user as a comma separated list.': '指定多個用戶,用逗號分隔',
    'This maps to the process definition key.': '這會映射為流程定義的鍵',
    'CallActivity Type': '調(diào)用活動類型',
    'Condition Type': '條件類型',
    'Create UserTask': '創(chuàng)建用戶任務(wù)',
    'Create CallActivity': '創(chuàng)建調(diào)用活動',
    'Called Element': '調(diào)用元素',
    'Create DataObjectReference': '創(chuàng)建數(shù)據(jù)對象引用',
    'Create DataStoreReference': '創(chuàng)建數(shù)據(jù)存儲引用',
    'Multi Instance': '多實例',
    'Loop Cardinality': '實例數(shù)量',
    'Collection': '任務(wù)參與人列表',
    'Element Variable': '元素變量',
    'Completion Condition': '完成條件'
};

initXmlString.js 初始化模板

export const bpmnXmlStr = `
      <?xml version="1.0" encoding="UTF-8"?>
      <bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC">
        <bpmn2:process id="process1567044459787" name="流程1567044459787">
          <bpmn2:documentation>描述</bpmn2:documentation>
          <bpmn2:startEvent id="StartEvent_01ydzqe" name="開始">
            <bpmn2:outgoing>SequenceFlow_1qw929z</bpmn2:outgoing>
          </bpmn2:startEvent>
          <bpmn2:sequenceFlow id="SequenceFlow_1qw929z" sourceRef="StartEvent_01ydzqe" targetRef="Task_1piqdk6" />
          <bpmn2:userTask id="Task_1piqdk6" name="請假申請">
            <bpmn2:incoming>SequenceFlow_1qw929z</bpmn2:incoming>
            <bpmn2:outgoing>SequenceFlow_11h4o22</bpmn2:outgoing>
          </bpmn2:userTask>
          <bpmn2:exclusiveGateway id="ExclusiveGateway_0k39v3u">
            <bpmn2:incoming>SequenceFlow_11h4o22</bpmn2:incoming>
            <bpmn2:outgoing>SequenceFlow_1iu7pfe</bpmn2:outgoing>
            <bpmn2:outgoing>SequenceFlow_04uqww2</bpmn2:outgoing>
          </bpmn2:exclusiveGateway>
          <bpmn2:sequenceFlow id="SequenceFlow_11h4o22" sourceRef="Task_1piqdk6" targetRef="ExclusiveGateway_0k39v3u" />
          <bpmn2:sequenceFlow id="SequenceFlow_1iu7pfe" sourceRef="ExclusiveGateway_0k39v3u" targetRef="Task_10fqcwp" />
          <bpmn2:userTask id="Task_10fqcwp" name="經(jīng)理審批">
            <bpmn2:incoming>SequenceFlow_1iu7pfe</bpmn2:incoming>
            <bpmn2:outgoing>SequenceFlow_1xod8nh</bpmn2:outgoing>
          </bpmn2:userTask>
          <bpmn2:sequenceFlow id="SequenceFlow_04uqww2" sourceRef="ExclusiveGateway_0k39v3u" targetRef="Task_15n23yh" />
          <bpmn2:userTask id="Task_15n23yh" name="總部審批">
            <bpmn2:incoming>SequenceFlow_04uqww2</bpmn2:incoming>
            <bpmn2:outgoing>SequenceFlow_0c8wrs4</bpmn2:outgoing>
          </bpmn2:userTask>
          <bpmn2:exclusiveGateway id="ExclusiveGateway_1sq33g6">
            <bpmn2:incoming>SequenceFlow_0c8wrs4</bpmn2:incoming>
            <bpmn2:incoming>SequenceFlow_1xod8nh</bpmn2:incoming>
            <bpmn2:outgoing>SequenceFlow_0h8za82</bpmn2:outgoing>
          </bpmn2:exclusiveGateway>
          <bpmn2:sequenceFlow id="SequenceFlow_0c8wrs4" sourceRef="Task_15n23yh" targetRef="ExclusiveGateway_1sq33g6" />
          <bpmn2:sequenceFlow id="SequenceFlow_1xod8nh" sourceRef="Task_10fqcwp" targetRef="ExclusiveGateway_1sq33g6" />
          <bpmn2:endEvent id="EndEvent_0pnmjd3">
            <bpmn2:incoming>SequenceFlow_0h8za82</bpmn2:incoming>
          </bpmn2:endEvent>
          <bpmn2:sequenceFlow id="SequenceFlow_0h8za82" sourceRef="ExclusiveGateway_1sq33g6" targetRef="EndEvent_0pnmjd3" />
        </bpmn2:process>
        <bpmndi:BPMNDiagram id="BPMNDiagram_1">
          <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="process1567044459787">
            <bpmndi:BPMNEdge id="SequenceFlow_0h8za82_di" bpmnElement="SequenceFlow_0h8za82">
              <di:waypoint x="550" y="565" />
              <di:waypoint x="550" y="602" />
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge id="SequenceFlow_1xod8nh_di" bpmnElement="SequenceFlow_1xod8nh">
              <di:waypoint x="1300" y="390" />
              <di:waypoint x="1300" y="540" />
              <di:waypoint x="575" y="540" />
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge id="SequenceFlow_0c8wrs4_di" bpmnElement="SequenceFlow_0c8wrs4">
              <di:waypoint x="430" y="460" />
              <di:waypoint x="430" y="540" />
              <di:waypoint x="525" y="540" />
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge id="SequenceFlow_04uqww2_di" bpmnElement="SequenceFlow_04uqww2">
              <di:waypoint x="525" y="300" />
              <di:waypoint x="430" y="300" />
              <di:waypoint x="430" y="380" />
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge id="SequenceFlow_1iu7pfe_di" bpmnElement="SequenceFlow_1iu7pfe">
              <di:waypoint x="556" y="319" />
              <di:waypoint x="580" y="400" />
              <di:waypoint x="830" y="120" />
              <di:waypoint x="1250" y="326" />
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge id="SequenceFlow_11h4o22_di" bpmnElement="SequenceFlow_11h4o22">
              <di:waypoint x="550" y="230" />
              <di:waypoint x="550" y="275" />
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge id="SequenceFlow_1qw929z_di" bpmnElement="SequenceFlow_1qw929z">
              <di:waypoint x="550" y="108" />
              <di:waypoint x="550" y="150" />
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNShape id="StartEvent_01ydzqe_di" bpmnElement="StartEvent_01ydzqe">
              <dc:Bounds x="532" y="72" width="36" height="36" />
              <bpmndi:BPMNLabel>
                <dc:Bounds x="539" y="53" width="22" height="14" />
              </bpmndi:BPMNLabel>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="UserTask_1qxjy46_di" bpmnElement="Task_1piqdk6">
              <dc:Bounds x="500" y="150" width="100" height="80" />
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="ExclusiveGateway_0k39v3u_di" bpmnElement="ExclusiveGateway_0k39v3u" isMarkerVisible="true">
              <dc:Bounds x="525" y="275" width="50" height="50" />
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="UserTask_1j0us24_di" bpmnElement="Task_15n23yh">
              <dc:Bounds x="380" y="380" width="100" height="80" />
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="ExclusiveGateway_1sq33g6_di" bpmnElement="ExclusiveGateway_1sq33g6" isMarkerVisible="true">
              <dc:Bounds x="525" y="515" width="50" height="50" />
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="EndEvent_0pnmjd3_di" bpmnElement="EndEvent_0pnmjd3">
              <dc:Bounds x="532" y="602" width="36" height="36" />
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="UserTask_18pwui1_di" bpmnElement="Task_10fqcwp">
              <dc:Bounds x="1250" y="310" width="100" height="80" />
            </bpmndi:BPMNShape>
          </bpmndi:BPMNPlane>
        </bpmndi:BPMNDiagram>
      </bpmn2:definitions>
    
      `;