forked from opentiny/tiny-vue
45 lines
2.0 KiB
Vue
45 lines
2.0 KiB
Vue
<template>
|
|
<tiny-process-designer :value="xml" :height="520" file-name="basic-diagram" @save-xml="onSaveXml" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { TinyProcessDesigner } from '@opentiny/vue'
|
|
|
|
const xml = ref(`<?xml version="1.0" encoding="UTF-8"?>
|
|
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="basic" targetNamespace="http://bpmn.io/schema/bpmn">
|
|
<bpmn2:process id="Process_basic" isExecutable="false">
|
|
<bpmn2:startEvent id="StartEvent_1" name="开始"/>
|
|
<bpmn2:task id="Task_1" name="审批"/>
|
|
<bpmn2:endEvent id="EndEvent_1" name="结束"/>
|
|
<bpmn2:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_1"/>
|
|
<bpmn2:sequenceFlow id="Flow_2" sourceRef="Task_1" targetRef="EndEvent_1"/>
|
|
</bpmn2:process>
|
|
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
|
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_basic">
|
|
<bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
|
|
<dc:Bounds x="160" y="180" width="36" height="36"/>
|
|
</bpmndi:BPMNShape>
|
|
<bpmndi:BPMNShape id="Task_1_di" bpmnElement="Task_1">
|
|
<dc:Bounds x="260" y="158" width="100" height="80"/>
|
|
</bpmndi:BPMNShape>
|
|
<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1">
|
|
<dc:Bounds x="430" y="180" width="36" height="36"/>
|
|
</bpmndi:BPMNShape>
|
|
<bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1">
|
|
<di:waypoint x="196" y="198"/>
|
|
<di:waypoint x="260" y="198"/>
|
|
</bpmndi:BPMNEdge>
|
|
<bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2">
|
|
<di:waypoint x="360" y="198"/>
|
|
<di:waypoint x="430" y="198"/>
|
|
</bpmndi:BPMNEdge>
|
|
</bpmndi:BPMNPlane>
|
|
</bpmndi:BPMNDiagram>
|
|
</bpmn2:definitions>`)
|
|
|
|
const onSaveXml = ({ xml }) => {
|
|
console.log('saved xml length:', xml && xml.length)
|
|
}
|
|
</script>
|