fix: 修复 bpmn-process-designer 图标使用问题，使用 h 函数

2025-09-15 10:44:36 +08:00
parent 9af3745670
commit 9e3b4461cf
4 changed files with 38 additions and 33 deletions
--- a/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
@@ -9,6 +9,7 @@ import {
  defineEmits,
  defineOptions,
  defineProps,
+  h,
  onBeforeUnmount,
  onMounted,
  provide,
@@ -524,7 +525,7 @@ onBeforeUnmount(() => {
      <template v-if="!$slots['control-header']">
        <ButtonGroup key="file-control">
          <Button
-            :icon="FolderOpenOutlined"
+            :icon="h(FolderOpenOutlined)"
            title="打开文件"
            @click="refFile.click()"
          />
@@ -544,7 +545,7 @@ onBeforeUnmount(() => {
                </Button>
              </div>
            </template>
-            <Button :icon="DownloadOutlined" title="下载文件" />
+            <Button :icon="h(DownloadOutlined)" title="下载文件" />
          </Tooltip>
          <Tooltip>
            <template #title>
@@ -552,14 +553,14 @@ onBeforeUnmount(() => {
              <br />
              <Button type="link" @click="previewProcessJson">预览JSON</Button>
            </template>
-            <Button :icon="EyeOutlined" title="浏览" />
+            <Button :icon="h(EyeOutlined)" title="浏览" />
          </Tooltip>
          <Tooltip
            v-if="props.simulation"
            :title="simulationStatus ? '退出模拟' : '开启模拟'"
          >
            <Button
-              :icon="ApiOutlined"
+              :icon="h(ApiOutlined)"
              title="模拟"
              @click="processSimulation"
            />
@@ -568,42 +569,42 @@ onBeforeUnmount(() => {
        <ButtonGroup key="align-control">
          <Tooltip title="向左对齐">
            <Button
-              :icon="AlignLeftOutlined"
+              :icon="h(AlignLeftOutlined)"
              class="align align-bottom"
              @click="elementsAlign('left')"
            />
          </Tooltip>
          <Tooltip title="向右对齐">
            <Button
-              :icon="AlignLeftOutlined"
+              :icon="h(AlignLeftOutlined)"
              class="align align-top"
              @click="elementsAlign('right')"
            />
          </Tooltip>
          <Tooltip title="向上对齐">
            <Button
-              :icon="AlignLeftOutlined"
+              :icon="h(AlignLeftOutlined)"
              class="align align-left"
              @click="elementsAlign('top')"
            />
          </Tooltip>
          <Tooltip title="向下对齐">
            <Button
-              :icon="AlignLeftOutlined"
+              :icon="h(AlignLeftOutlined)"
              class="align align-right"
              @click="elementsAlign('bottom')"
            />
          </Tooltip>
          <Tooltip title="水平居中">
            <Button
-              :icon="AlignLeftOutlined"
+              :icon="h(AlignLeftOutlined)"
              class="align align-center"
              @click="elementsAlign('center')"
            />
          </Tooltip>
          <Tooltip title="垂直居中">
            <Button
-              :icon="AlignLeftOutlined"
+              :icon="h(AlignLeftOutlined)"
              class="align align-middle"
              @click="elementsAlign('middle')"
            />
@@ -612,7 +613,7 @@ onBeforeUnmount(() => {
        <ButtonGroup key="scale-control">
          <Tooltip title="缩小视图">
            <Button
-              :icon="ZoomOutOutlined"
+              :icon="h(ZoomOutOutlined)"
              @click="processZoomOut()"
              :disabled="defaultZoom < 0.2"
            />
@@ -620,32 +621,32 @@ onBeforeUnmount(() => {
          <Button>{{ `${Math.floor(defaultZoom * 10 * 10)}%` }}</Button>
          <Tooltip title="放大视图">
            <Button
-              :icon="ZoomInOutlined"
+              :icon="h(ZoomInOutlined)"
              @click="processZoomIn()"
              :disabled="defaultZoom > 4"
            />
          </Tooltip>
          <Tooltip title="重置视图并居中">
-            <Button :icon="ReloadOutlined" @click="processReZoom()" />
+            <Button :icon="h(ReloadOutlined)" @click="processReZoom()" />
          </Tooltip>
        </ButtonGroup>
        <ButtonGroup key="stack-control">
          <Tooltip title="撤销">
            <Button
-              :icon="UndoOutlined"
+              :icon="h(UndoOutlined)"
              @click="processUndo()"
              :disabled="!revocable"
            />
          </Tooltip>
          <Tooltip title="恢复">
            <Button
-              :icon="RedoOutlined"
+              :icon="h(RedoOutlined)"
              @click="processRedo()"
              :disabled="!recoverable"
            />
          </Tooltip>
          <Tooltip title="重新绘制">
-            <Button :icon="ReloadOutlined" @click="processRestart()" />
+            <Button :icon="h(ReloadOutlined)" @click="processRestart()" />
          </Tooltip>
        </ButtonGroup>
      </template>
--- a/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessViewer.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessViewer.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { defineProps, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { defineProps, h, onBeforeUnmount, onMounted, ref, watch } from 'vue';

 import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
 import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons';
@@ -398,7 +398,7 @@ onBeforeUnmount(() => {
        <ButtonGroup key="scale-control">
          <Button
            :disabled="defaultZoom <= 0.3"
-            :icon="ZoomOutOutlined"
+            :icon="h(ZoomOutOutlined)"
            @click="processZoomOut()"
          />
          <Button style="width: 90px">
@@ -406,10 +406,10 @@ onBeforeUnmount(() => {
          </Button>
          <Button
            :disabled="defaultZoom >= 3.9"
-            :icon="ZoomInOutlined"
+            :icon="h(ZoomInOutlined)"
            @click="processZoomIn()"
          />
-          <Button :icon="UndoOutlined" @click="processReZoom()" />
+          <Button :icon="h(UndoOutlined)" @click="processReZoom()" />
        </ButtonGroup>
      </Row>
    </div>
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue
@@ -56,10 +56,7 @@ const resetBaseInfo = () => {
  // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
  // console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
 };
-const handleKeyUpdate = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  const value = target.value;
-
+const handleKeyUpdate = (value: any) => {
  // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
  if (!value) {
    return;
@@ -71,22 +68,23 @@ const handleKeyUpdate = (event: Event) => {
  // console.log('key 满足 XML NCName 规则，所以进行赋值');

  // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
-  elementBaseInfo.value.id = value;
+  if (elementBaseInfo.value) {
+    elementBaseInfo.value.id = value;
+  }

  setTimeout(() => {
    updateBaseInfo('id');
  }, 100);
 };

-const handleNameUpdate = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  const value = target.value;
-
+const handleNameUpdate = (value: any) => {
  // console.log(elementBaseInfo, 'elementBaseInfo');
  if (!value) {
    return;
  }
-  elementBaseInfo.value.name = value;
+  if (elementBaseInfo.value) {
+    elementBaseInfo.value.name = value;
+  }

  setTimeout(() => {
    updateBaseInfo('name');
@@ -101,6 +99,12 @@ const updateBaseInfo = (key: string) => {
  // console.log(key, 'key');
  // 触发 elementBaseInfo 对应的字段
  const attrObj: Record<string, any> = Object.create(null);
+
+  // 安全检查
+  if (!elementBaseInfo.value || !bpmnElement.value) {
+    return;
+  }
+
  // console.log(attrObj, 'attrObj')
  attrObj[key] = elementBaseInfo.value[key];
  // console.log(attrObj, 'attrObj111')
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, nextTick, ref, toRaw, watch } from 'vue';
+import { h, inject, nextTick, ref, toRaw, watch } from 'vue';

 import { alert } from '@vben/common-ui';
 import { PlusOutlined } from '@vben/icons';
@@ -230,7 +230,7 @@ watch(
          <Button
            class="ml-auto"
            type="primary"
-            :icon="PlusOutlined"
+            :icon="h(PlusOutlined)"
            title="添加参数"
            size="small"
            @click="openVariableForm('in', null, -1)"
@@ -284,7 +284,7 @@ watch(
          <Button
            class="ml-auto"
            type="primary"
-            :icon="PlusOutlined"
+            :icon="h(PlusOutlined)"
            title="添加参数"
            size="small"
            @click="openVariableForm('out', null, -1)"