|
15 | 15 | </el-card> |
16 | 16 | </template> |
17 | 17 |
|
18 | | -<script lang="ts"> |
19 | | -import { defineComponent } from "vue"; |
20 | | -import { mapState } from "pinia"; |
| 18 | +<script lang="ts" setup> |
| 19 | +import { ref } from "vue"; |
21 | 20 | import modelerStore from "@/store/modeler"; |
22 | 21 | import { Element } from "bpmn-js/lib/model/Types"; |
23 | 22 | import { getNameValue, setNameValue } from "@/components/BpmnJs/bo-utils/nameUtil"; |
24 | 23 | import { setIdValue } from "@/components/BpmnJs/bo-utils/idUtil"; |
25 | 24 | import { getDocumentValue, setDocumentValue } from "@/components/BpmnJs/bo-utils/documentationUtil"; |
26 | 25 | import EventBus from "@/utils/EventBus"; |
27 | 26 |
|
28 | | -export default defineComponent({ |
29 | | - name: "ElementGenerations", |
30 | | - data() { |
31 | | - return { |
32 | | - elementId: "", |
33 | | - elementName: "", |
34 | | - elementDoc: "" |
35 | | - }; |
36 | | - }, |
37 | | - watch: { |
38 | | - getActiveId: { |
39 | | - immediate: true, |
40 | | - handler() { |
41 | | - this.elementDoc = getDocumentValue(this.getActive as Element) || ""; |
42 | | - } |
43 | | - } |
44 | | - }, |
45 | | - computed: { |
46 | | - ...mapState(modelerStore, ["getActive", "getActiveId"]) |
47 | | - }, |
48 | | - mounted() { |
49 | | - this.reloadGenerationData(); |
50 | | - EventBus.on("element-update", this.reloadGenerationData); |
51 | | - }, |
52 | | - methods: { |
53 | | - reloadGenerationData() { |
54 | | - this.elementId = this.getActiveId as string; |
55 | | - this.elementName = getNameValue(this.getActive as Element) || ""; |
56 | | - this.elementDoc = getDocumentValue(this.getActive as Element) || ""; |
57 | | - }, |
58 | | - updateElementName(value: string) { |
59 | | - setNameValue(this.getActive as Element, value); |
60 | | - }, |
61 | | - updateElementId(value: string) { |
62 | | - setIdValue(this.getActive as Element, value); |
63 | | - }, |
64 | | - updateElementDoc(value) { |
65 | | - setDocumentValue(this.getActive as Element, value); |
66 | | - } |
67 | | - } |
| 27 | +const modeler = modelerStore(); |
| 28 | +
|
| 29 | +// 当前节点信息 |
| 30 | +let scopedElement: Element; |
| 31 | +// 节点id |
| 32 | +const elementId = ref<string>(""); |
| 33 | +// 节点名称 |
| 34 | +const elementName = ref<string>(""); |
| 35 | +// 节点文档 |
| 36 | +const elementDoc = ref<string>(""); |
| 37 | +
|
| 38 | +// 默认节点名称 |
| 39 | +type DefaultElement = { |
| 40 | + elementType: string; // 节点类型 |
| 41 | + defaultName: string; // 默认节点名称 |
| 42 | +}; |
| 43 | +
|
| 44 | +// 默认节点名称 |
| 45 | +const list: DefaultElement[] = [ |
| 46 | + { elementType: "bpmn:StartEvent", defaultName: "开始事件" }, |
| 47 | + { elementType: "bpmn:UserTask", defaultName: "用户任务" }, |
| 48 | + { elementType: "bpmn:ServiceTask", defaultName: "服务任务" }, |
| 49 | + { elementType: "bpmn:ExclusiveGateway", defaultName: "互斥网关" }, |
| 50 | + { elementType: "bpmn:ParallelGateway", defaultName: "并行网关" }, |
| 51 | + { elementType: "bpmn:EndEvent", defaultName: "结束节点" } |
| 52 | +]; |
| 53 | +
|
| 54 | +/** |
| 55 | + * 获取节点数据 |
| 56 | + */ |
| 57 | +const getElementData = () => { |
| 58 | + elementId.value = modeler.getActiveId as string; |
| 59 | + elementName.value = getNameValue(scopedElement) || ""; |
| 60 | + elementDoc.value = getDocumentValue(scopedElement) || ""; |
| 61 | +}; |
| 62 | +
|
| 63 | +/** |
| 64 | + * 更新节点id |
| 65 | + * @param value 节点id |
| 66 | + */ |
| 67 | +const updateElementId = (value: string) => { |
| 68 | + setIdValue(scopedElement, value); |
| 69 | +}; |
| 70 | +
|
| 71 | +/** |
| 72 | + * 更新节点名称 |
| 73 | + * @param value 节点名称 |
| 74 | + */ |
| 75 | +const updateElementName = (value: string) => { |
| 76 | + setNameValue(scopedElement, value); |
| 77 | +}; |
| 78 | +
|
| 79 | +/** |
| 80 | + * 更新节点文档 |
| 81 | + * @param value 节点文档 |
| 82 | + */ |
| 83 | +const updateElementDoc = (value: string) => { |
| 84 | + setDocumentValue(scopedElement, value); |
| 85 | +}; |
| 86 | +
|
| 87 | +/** |
| 88 | + * 初始化节点名称,如果节点名称等于空预赋值 |
| 89 | + */ |
| 90 | +const initElementName = () => { |
| 91 | + if (elementName.value) return; |
| 92 | + const item = list.find((t) => t.elementType === modeler.getActive.type); |
| 93 | + if (item) updateElementName(item.defaultName); |
| 94 | +}; |
| 95 | +
|
| 96 | +// 点击用户节点,初始化用 |
| 97 | +EventBus.on("element-init", function () { |
| 98 | + scopedElement = modeler.getActive; |
| 99 | + getElementData(); |
| 100 | + initElementName(); |
68 | 101 | }); |
69 | 102 | </script> |
70 | | -@/store/modeler |
|
0 commit comments