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

This commit is contained in:
puhui999
2025-09-15 10:44:36 +08:00
parent 9af3745670
commit 9e3b4461cf
4 changed files with 38 additions and 33 deletions

View File

@@ -9,6 +9,7 @@ import {
defineEmits, defineEmits,
defineOptions, defineOptions,
defineProps, defineProps,
h,
onBeforeUnmount, onBeforeUnmount,
onMounted, onMounted,
provide, provide,
@@ -524,7 +525,7 @@ onBeforeUnmount(() => {
<template v-if="!$slots['control-header']"> <template v-if="!$slots['control-header']">
<ButtonGroup key="file-control"> <ButtonGroup key="file-control">
<Button <Button
:icon="FolderOpenOutlined" :icon="h(FolderOpenOutlined)"
title="打开文件" title="打开文件"
@click="refFile.click()" @click="refFile.click()"
/> />
@@ -544,7 +545,7 @@ onBeforeUnmount(() => {
</Button> </Button>
</div> </div>
</template> </template>
<Button :icon="DownloadOutlined" title="下载文件" /> <Button :icon="h(DownloadOutlined)" title="下载文件" />
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<template #title> <template #title>
@@ -552,14 +553,14 @@ onBeforeUnmount(() => {
<br /> <br />
<Button type="link" @click="previewProcessJson">预览JSON</Button> <Button type="link" @click="previewProcessJson">预览JSON</Button>
</template> </template>
<Button :icon="EyeOutlined" title="浏览" /> <Button :icon="h(EyeOutlined)" title="浏览" />
</Tooltip> </Tooltip>
<Tooltip <Tooltip
v-if="props.simulation" v-if="props.simulation"
:title="simulationStatus ? '退出模拟' : '开启模拟'" :title="simulationStatus ? '退出模拟' : '开启模拟'"
> >
<Button <Button
:icon="ApiOutlined" :icon="h(ApiOutlined)"
title="模拟" title="模拟"
@click="processSimulation" @click="processSimulation"
/> />
@@ -568,42 +569,42 @@ onBeforeUnmount(() => {
<ButtonGroup key="align-control"> <ButtonGroup key="align-control">
<Tooltip title="向左对齐"> <Tooltip title="向左对齐">
<Button <Button
:icon="AlignLeftOutlined" :icon="h(AlignLeftOutlined)"
class="align align-bottom" class="align align-bottom"
@click="elementsAlign('left')" @click="elementsAlign('left')"
/> />
</Tooltip> </Tooltip>
<Tooltip title="向右对齐"> <Tooltip title="向右对齐">
<Button <Button
:icon="AlignLeftOutlined" :icon="h(AlignLeftOutlined)"
class="align align-top" class="align align-top"
@click="elementsAlign('right')" @click="elementsAlign('right')"
/> />
</Tooltip> </Tooltip>
<Tooltip title="向上对齐"> <Tooltip title="向上对齐">
<Button <Button
:icon="AlignLeftOutlined" :icon="h(AlignLeftOutlined)"
class="align align-left" class="align align-left"
@click="elementsAlign('top')" @click="elementsAlign('top')"
/> />
</Tooltip> </Tooltip>
<Tooltip title="向下对齐"> <Tooltip title="向下对齐">
<Button <Button
:icon="AlignLeftOutlined" :icon="h(AlignLeftOutlined)"
class="align align-right" class="align align-right"
@click="elementsAlign('bottom')" @click="elementsAlign('bottom')"
/> />
</Tooltip> </Tooltip>
<Tooltip title="水平居中"> <Tooltip title="水平居中">
<Button <Button
:icon="AlignLeftOutlined" :icon="h(AlignLeftOutlined)"
class="align align-center" class="align align-center"
@click="elementsAlign('center')" @click="elementsAlign('center')"
/> />
</Tooltip> </Tooltip>
<Tooltip title="垂直居中"> <Tooltip title="垂直居中">
<Button <Button
:icon="AlignLeftOutlined" :icon="h(AlignLeftOutlined)"
class="align align-middle" class="align align-middle"
@click="elementsAlign('middle')" @click="elementsAlign('middle')"
/> />
@@ -612,7 +613,7 @@ onBeforeUnmount(() => {
<ButtonGroup key="scale-control"> <ButtonGroup key="scale-control">
<Tooltip title="缩小视图"> <Tooltip title="缩小视图">
<Button <Button
:icon="ZoomOutOutlined" :icon="h(ZoomOutOutlined)"
@click="processZoomOut()" @click="processZoomOut()"
:disabled="defaultZoom < 0.2" :disabled="defaultZoom < 0.2"
/> />
@@ -620,32 +621,32 @@ onBeforeUnmount(() => {
<Button>{{ `${Math.floor(defaultZoom * 10 * 10)}%` }}</Button> <Button>{{ `${Math.floor(defaultZoom * 10 * 10)}%` }}</Button>
<Tooltip title="放大视图"> <Tooltip title="放大视图">
<Button <Button
:icon="ZoomInOutlined" :icon="h(ZoomInOutlined)"
@click="processZoomIn()" @click="processZoomIn()"
:disabled="defaultZoom > 4" :disabled="defaultZoom > 4"
/> />
</Tooltip> </Tooltip>
<Tooltip title="重置视图并居中"> <Tooltip title="重置视图并居中">
<Button :icon="ReloadOutlined" @click="processReZoom()" /> <Button :icon="h(ReloadOutlined)" @click="processReZoom()" />
</Tooltip> </Tooltip>
</ButtonGroup> </ButtonGroup>
<ButtonGroup key="stack-control"> <ButtonGroup key="stack-control">
<Tooltip title="撤销"> <Tooltip title="撤销">
<Button <Button
:icon="UndoOutlined" :icon="h(UndoOutlined)"
@click="processUndo()" @click="processUndo()"
:disabled="!revocable" :disabled="!revocable"
/> />
</Tooltip> </Tooltip>
<Tooltip title="恢复"> <Tooltip title="恢复">
<Button <Button
:icon="RedoOutlined" :icon="h(RedoOutlined)"
@click="processRedo()" @click="processRedo()"
:disabled="!recoverable" :disabled="!recoverable"
/> />
</Tooltip> </Tooltip>
<Tooltip title="重新绘制"> <Tooltip title="重新绘制">
<Button :icon="ReloadOutlined" @click="processRestart()" /> <Button :icon="h(ReloadOutlined)" @click="processRestart()" />
</Tooltip> </Tooltip>
</ButtonGroup> </ButtonGroup>
</template> </template>

View File

@@ -1,5 +1,5 @@
<script lang="ts" setup> <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 { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons'; import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons';
@@ -398,7 +398,7 @@ onBeforeUnmount(() => {
<ButtonGroup key="scale-control"> <ButtonGroup key="scale-control">
<Button <Button
:disabled="defaultZoom <= 0.3" :disabled="defaultZoom <= 0.3"
:icon="ZoomOutOutlined" :icon="h(ZoomOutOutlined)"
@click="processZoomOut()" @click="processZoomOut()"
/> />
<Button style="width: 90px"> <Button style="width: 90px">
@@ -406,10 +406,10 @@ onBeforeUnmount(() => {
</Button> </Button>
<Button <Button
:disabled="defaultZoom >= 3.9" :disabled="defaultZoom >= 3.9"
:icon="ZoomInOutlined" :icon="h(ZoomInOutlined)"
@click="processZoomIn()" @click="processZoomIn()"
/> />
<Button :icon="UndoOutlined" @click="processReZoom()" /> <Button :icon="h(UndoOutlined)" @click="processReZoom()" />
</ButtonGroup> </ButtonGroup>
</Row> </Row>
</div> </div>

View File

@@ -56,10 +56,7 @@ const resetBaseInfo = () => {
// elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject)) // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
// console.log(elementBaseInfo.value, 'elementBaseInfo22222222222') // console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
}; };
const handleKeyUpdate = (event: Event) => { const handleKeyUpdate = (value: any) => {
const target = event.target as HTMLInputElement;
const value = target.value;
// 校验 value 的值,只有 XML NCName 通过的情况下,才进行赋值。否则,会导致流程图报错,无法绘制的问题 // 校验 value 的值,只有 XML NCName 通过的情况下,才进行赋值。否则,会导致流程图报错,无法绘制的问题
if (!value) { if (!value) {
return; return;
@@ -71,22 +68,23 @@ const handleKeyUpdate = (event: Event) => {
// console.log('key 满足 XML NCName 规则,所以进行赋值'); // console.log('key 满足 XML NCName 规则,所以进行赋值');
// 在 BPMN 的 XML 中,流程标识 key其实对应的是 id 节点 // 在 BPMN 的 XML 中,流程标识 key其实对应的是 id 节点
if (elementBaseInfo.value) {
elementBaseInfo.value.id = value; elementBaseInfo.value.id = value;
}
setTimeout(() => { setTimeout(() => {
updateBaseInfo('id'); updateBaseInfo('id');
}, 100); }, 100);
}; };
const handleNameUpdate = (event: Event) => { const handleNameUpdate = (value: any) => {
const target = event.target as HTMLInputElement;
const value = target.value;
// console.log(elementBaseInfo, 'elementBaseInfo'); // console.log(elementBaseInfo, 'elementBaseInfo');
if (!value) { if (!value) {
return; return;
} }
if (elementBaseInfo.value) {
elementBaseInfo.value.name = value; elementBaseInfo.value.name = value;
}
setTimeout(() => { setTimeout(() => {
updateBaseInfo('name'); updateBaseInfo('name');
@@ -101,6 +99,12 @@ const updateBaseInfo = (key: string) => {
// console.log(key, 'key'); // console.log(key, 'key');
// 触发 elementBaseInfo 对应的字段 // 触发 elementBaseInfo 对应的字段
const attrObj: Record<string, any> = Object.create(null); const attrObj: Record<string, any> = Object.create(null);
// 安全检查
if (!elementBaseInfo.value || !bpmnElement.value) {
return;
}
// console.log(attrObj, 'attrObj') // console.log(attrObj, 'attrObj')
attrObj[key] = elementBaseInfo.value[key]; attrObj[key] = elementBaseInfo.value[key];
// console.log(attrObj, 'attrObj111') // console.log(attrObj, 'attrObj111')

View File

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