update 增加 Element类型定义
This commit is contained in:
parent
bc10eb9d33
commit
9443218e86
@ -12,27 +12,16 @@ import ProcessPanel from './panel/ProcessPanel.vue';
|
||||
import StartEndPanel from './panel/StartEndPanel.vue';
|
||||
import GatewayPanel from './panel/GatewayPanel.vue';
|
||||
import SequenceFlowPanel from './panel/SequenceFlowPanel.vue';
|
||||
import { Modeler, Modeling, Element } from 'bpmn';
|
||||
interface propsType {
|
||||
users: Array<any>;
|
||||
groups: Array<any>;
|
||||
categorys: Array<any>;
|
||||
modeler: any;
|
||||
modeler: Modeler;
|
||||
}
|
||||
const props = withDefaults(defineProps<propsType>(), {});
|
||||
|
||||
const element = ref<any>();
|
||||
|
||||
const form = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
color: null
|
||||
});
|
||||
|
||||
const roles = ref([
|
||||
{ value: 'manager', label: '经理' },
|
||||
{ value: 'personnel', label: '人事' },
|
||||
{ value: 'charge', label: '主管' }
|
||||
]);
|
||||
const element = ref<Element>();
|
||||
|
||||
const startEndType = ['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'];
|
||||
const taskType = [
|
||||
@ -69,20 +58,24 @@ const nodeName = computed(() => {
|
||||
});
|
||||
|
||||
const handleModeler = () => {
|
||||
props.modeler.on('root.added', (e) => {
|
||||
props.modeler.on('root.added', (e: any) => {
|
||||
if (e.element.type === 'bpmn:Process') {
|
||||
element.value = null;
|
||||
nextTick(() => {
|
||||
element.value = e.element;
|
||||
// const modeling = props.modeler.get<Modeling>('modeling');
|
||||
// modeling.setColor(e.element.children, {
|
||||
// fill: 'green'
|
||||
// });
|
||||
});
|
||||
}
|
||||
});
|
||||
props.modeler.on('element.click', (e) => {
|
||||
props.modeler.on('element.click', (e: any) => {
|
||||
if (e.element.type === 'bpmn:Process') {
|
||||
element.value = e.element;
|
||||
}
|
||||
});
|
||||
props.modeler.on('selection.changed', (e) => {
|
||||
props.modeler.on('selection.changed', (e: any) => {
|
||||
// 先给null为了让vue刷新
|
||||
element.value = null;
|
||||
const newElement = e.newSelection[0];
|
||||
|
@ -1,8 +1,8 @@
|
||||
import showConfig from '@/components/BpmnDesign/assets/showConfig';
|
||||
import { Moddle, Modeler, Modeling } from 'bpmn';
|
||||
import { Moddle, Modeler, Modeling, Element } from 'bpmn';
|
||||
interface Options {
|
||||
modeler: Modeler;
|
||||
element: any;
|
||||
element: Element;
|
||||
}
|
||||
|
||||
export default (ops: Options) => {
|
||||
|
@ -1,10 +1,9 @@
|
||||
import { Ref } from 'vue';
|
||||
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
|
||||
import { Modeler } from 'bpmn';
|
||||
import { Element, Modeler } from 'bpmn';
|
||||
|
||||
interface Options {
|
||||
modeler: Modeler;
|
||||
element: any;
|
||||
element: Element;
|
||||
}
|
||||
|
||||
interface Data {
|
||||
|
@ -63,13 +63,14 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="BpmnDesign">
|
||||
import { Canvas, ElementRegistry, Modeler } from 'bpmn';
|
||||
import PropertyPanel from './PropertyPanel.vue';
|
||||
import BpmnModeler from 'bpmn-js/lib/Modeler.js';
|
||||
import diagramXML from '@/components/BpmnDesign/assets/defaultXML';
|
||||
import flowableModdle from '@/components/BpmnDesign/assets/moddle/flowable';
|
||||
import Modules from './assets/module/index';
|
||||
import useModelerStore from '@/store/modules/modeler';
|
||||
import { Canvas, Modeler } from 'bpmn';
|
||||
const modelerStore = useModelerStore();
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
@ -146,13 +147,12 @@ const initCanvas = () => {
|
||||
* 初始化Model
|
||||
*/
|
||||
const initModel = () => {
|
||||
let store = useModelerStore();
|
||||
if (store.getModeler()) {
|
||||
if (modelerStore.getModeler()) {
|
||||
// 清除旧 modeler
|
||||
store.getModeler().destroy();
|
||||
store.setModeler(undefined);
|
||||
modelerStore.getModeler().destroy();
|
||||
modelerStore.setModeler(undefined);
|
||||
}
|
||||
store.setModeler(bpmnModeler.value);
|
||||
modelerStore.setModeler(bpmnModeler.value);
|
||||
};
|
||||
|
||||
/**
|
||||
@ -325,20 +325,6 @@ const getProcessElement = () => {
|
||||
@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
|
||||
@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
|
||||
|
||||
.view-mode {
|
||||
.el-header,
|
||||
.el-aside,
|
||||
.djs-palette,
|
||||
.bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.el-loading-mask {
|
||||
background-color: initial;
|
||||
}
|
||||
.el-loading-spinner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.app-containers {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -18,12 +18,12 @@
|
||||
<script setup lang="ts">
|
||||
import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
|
||||
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
|
||||
import { Modeler } from 'bpmn';
|
||||
import { Modeler, Element } from 'bpmn';
|
||||
import { GatewayPanel } from 'bpmnDesign';
|
||||
|
||||
interface PropType {
|
||||
modeler: Modeler;
|
||||
element: any;
|
||||
element: Element;
|
||||
categorys?: any[];
|
||||
}
|
||||
const props = withDefaults(defineProps<PropType>(), {
|
||||
|
@ -25,14 +25,14 @@
|
||||
import ExecutionListener from './property/ExecutionListener.vue';
|
||||
import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
|
||||
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
|
||||
import { Modeler } from 'bpmn';
|
||||
import { Modeler, Element } from 'bpmn';
|
||||
import { ProcessPanel } from 'bpmnDesign';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
interface PropType {
|
||||
modeler: Modeler;
|
||||
element: any;
|
||||
element: Element;
|
||||
categorys?: any[];
|
||||
}
|
||||
const props = withDefaults(defineProps<PropType>(), {
|
||||
|
@ -24,12 +24,12 @@
|
||||
<script setup lang="ts">
|
||||
import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
|
||||
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
|
||||
import { Modeler } from 'bpmn';
|
||||
import { Modeler, Element } from 'bpmn';
|
||||
import { SequenceFlowPanel } from 'bpmnDesign';
|
||||
|
||||
interface PropType {
|
||||
modeler: Modeler;
|
||||
element: any;
|
||||
element: Element;
|
||||
categorys?: any[];
|
||||
}
|
||||
const props = withDefaults(defineProps<PropType>(), {
|
||||
|
@ -18,12 +18,12 @@
|
||||
<script setup lang="ts">
|
||||
import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
|
||||
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
|
||||
import { Modeler } from 'bpmn';
|
||||
import { Modeler, Element } from 'bpmn';
|
||||
import { StartEndPanel } from 'bpmnDesign';
|
||||
|
||||
interface PropType {
|
||||
modeler: Modeler;
|
||||
element: any;
|
||||
element: Element;
|
||||
categorys?: any[];
|
||||
}
|
||||
const props = withDefaults(defineProps<PropType>(), {
|
||||
|
@ -23,12 +23,12 @@
|
||||
<script setup lang="ts">
|
||||
import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
|
||||
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
|
||||
import { Modeler } from 'bpmn';
|
||||
import { Element, Modeler } from 'bpmn';
|
||||
import { TaskPanel } from 'bpmnDesign';
|
||||
|
||||
interface PropType {
|
||||
modeler: Modeler;
|
||||
element: any;
|
||||
element: Element;
|
||||
categorys?: any[];
|
||||
}
|
||||
const props = withDefaults(defineProps<PropType>(), {
|
||||
|
@ -75,7 +75,7 @@
|
||||
import ListenerParam from './ListenerParam.vue';
|
||||
import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
|
||||
import { ExecutionListenerVO } from 'bpmnDesign';
|
||||
import { Moddle, Modeler } from 'bpmn';
|
||||
import { Moddle, Modeler, Element } from 'bpmn';
|
||||
|
||||
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
|
||||
import useDialog from '@/hooks/useDialog';
|
||||
@ -83,7 +83,7 @@ import useDialog from '@/hooks/useDialog';
|
||||
const emit = defineEmits(['close']);
|
||||
interface PropType {
|
||||
modeler: Modeler;
|
||||
element: any;
|
||||
element: Element;
|
||||
categorys?: any[];
|
||||
}
|
||||
const props = withDefaults(defineProps<PropType>(), {
|
||||
|
@ -74,7 +74,7 @@
|
||||
import ListenerParam from './ListenerParam.vue';
|
||||
import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
|
||||
import { TaskListenerVO } from 'bpmnDesign';
|
||||
import { Moddle, Modeler } from 'bpmn';
|
||||
import { Moddle, Modeler, Element } from 'bpmn';
|
||||
|
||||
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
|
||||
import useDialog from '@/hooks/useDialog';
|
||||
@ -83,7 +83,7 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
interface PropType {
|
||||
modeler: Modeler;
|
||||
element: any;
|
||||
element: Element;
|
||||
categorys?: any[];
|
||||
}
|
||||
const props = withDefaults(defineProps<PropType>(), {
|
||||
|
2
src/types/bpmn/index.d.ts
vendored
2
src/types/bpmn/index.d.ts
vendored
@ -4,10 +4,12 @@ declare module 'bpmn' {
|
||||
import type modeling from 'bpmn-js/lib/features/modeling/Modeling';
|
||||
import type canvas from 'diagram-js/lib/core/Canvas';
|
||||
import type elementRegistry from 'diagram-js/lib/core/ElementRegistry';
|
||||
import type { Element as element } from 'bpmn-js/lib/model/Types';
|
||||
|
||||
export type Modeler = modeler;
|
||||
export type Modeling = modeling;
|
||||
export type Canvas = canvas;
|
||||
export type ElementRegistry = elementRegistry;
|
||||
export type Moddle = moddle;
|
||||
export type Element = element;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user