<template>
  <BpmnViewerVue :source="source" :timeData="timeData" :options="options">
  </BpmnViewerVue>
</template>
<script>
import BpmnViewerVue from 'bpmn-viewer-vue'
export default {
  components:{BpmnViewerVue},
  data(){
    return {
      source:"https://dev.dpark.com.cn/iplatform/sipsd-flow-modeler/rest/formdetail/getprocessXml/e6c573bcc99211eba5465e2c421612f0",
      timeData:[
        {
          "id": 1,
          "taskMaxDay": "4",
          "realName": null,
          "startTime": 1623292212527,
          "restTime": -12913873,
          "customTaskMaxDay": "4",
          "taskDefinitionKey": "jsqr",
          "taskName": "建设局人员现场确认",
          "duration": 0,
          "approveType": "审批",
          "status": "待办"
        },
        {
          "id": 2,
          "taskMaxDay": "1",
          "realName": null,
          "startTime": 1623291833921,
          "restTime": -13173452,
          "customTaskMaxDay": "1",
          "taskDefinitionKey": "widowsA",
          "taskName": "窗口",
          "duration": 282,
          "approveType": "审批",
          "status": "已办"
        }
      ],
      options:{
        timeLine:true
      }
    }
  }
}
</script>

<template>
  <BpmnViewerVue :type="2"
                 :baseApi="baseApi"
                 :instanceId="instanceId"
                 :options="options"
                 :styl="styl">
  </BpmnViewerVue>
</template>
<script>
import BpmnViewerVue from 'bpmn-viewer-vue'
export default {
  components:{BpmnViewerVue},
  data(){
    return {
      baseApi:'https://example.com/flow-modeler/',
      instanceId:'e6c573bcc99211eba5465e2c421612f0',
      options:{
        timeLine:true
      }
    }
  }
}
</script>

// slotProps.item 为时间轴每项的数据对象
<BpmnViewerVue :type="2"
               :baseApi="baseApi"
               :instanceId="instanceId">
  <template v-slot:time="slotProps">
      <p>{{slotProps.item.taskName}}</p>
      <p>审批类型：{{slotProps.item.approveType}}</p>
      <p>状态：{{slotProps.item.status}}</p>
      <p>下载：<a target="_blank" href="http://www.baidu.com">baidu</a></p>
  </template>
</BpmnViewerVue>
<script>
export default {
  methods:{
  }
}
</script>

<template>
  <BpmnViewerVue :type="1"
                 :baseApi="baseApi"
                 :xmlId="xmlId">
    <a-button-group>
      <a-button>btn1</a-button>
      <a-button>btn2</a-button>
      <a-button>btn3</a-button>
    </a-button-group>
  </BpmnViewerVue>
</template>