refactor: 重构 bpmnProcessDesigner ProcessPalette 组件 ele => antd

This commit is contained in:
puhui999
2025-09-07 19:36:10 +08:00
parent 3036a174fc
commit ed1b152a39

View File

@@ -1,24 +1,15 @@
<template>
<div class="my-process-palette">
<div class="test-button" @click="addTask" @mousedown="addTask">
测试任务
</div>
<div class="test-container" id="palette-container">1</div>
</div>
</template>
<script lang="ts" setup> <script lang="ts" setup>
import { Button } from 'ant-design-vue';
import { assign } from 'min-dash'; import { assign } from 'min-dash';
defineOptions({ name: 'MyProcessPalette' }); defineOptions({ name: 'MyProcessPalette' });
const bpmnInstances = () => (window as any).bpmnInstances; const bpmnInstances = () =>
const addTask = (event, options: any = {}) => { (window as typeof window & { bpmnInstances?: any }).bpmnInstances;
const addTask = (event: MouseEvent, options: any = {}) => {
const ElementFactory = bpmnInstances().elementFactory; const ElementFactory = bpmnInstances().elementFactory;
const create = bpmnInstances().modeler.get('create'); const create = bpmnInstances().modeler.get('create');
console.log(ElementFactory, create);
const shape = ElementFactory.createShape( const shape = ElementFactory.createShape(
assign({ type: 'bpmn:UserTask' }, options), assign({ type: 'bpmn:UserTask' }, options),
); );
@@ -26,24 +17,21 @@ const addTask = (event, options: any = {}) => {
if (options) { if (options) {
shape.businessObject.di.isExpanded = options.isExpanded; shape.businessObject.di.isExpanded = options.isExpanded;
} }
console.log(event, 'event');
console.log(shape, 'shape');
create.start(event, shape); create.start(event, shape);
}; };
</script> </script>
<style scoped lang="scss"> <template>
.my-process-palette { <div class="my-process-palette p-20 pt-80">
box-sizing: border-box; <Button type="primary" @click="addTask" @mousedown="addTask">
padding: 80px 20px 20px; 测试任务
</Button>
<div class="test-container" id="palette-container">1</div>
</div>
</template>
.test-button { <style scoped>
box-sizing: border-box; .test-container {
padding: 8px 16px; margin-top: 16px;
cursor: pointer;
border: 1px solid rgb(24 144 255 / 80%);
border-radius: 4px;
}
} }
</style> </style>