fix: 修复 bpmn-process-designer 图标使用问题,使用 h 函数
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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')
|
||||||
|
|||||||
@@ -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)"
|
||||||
|
|||||||
Reference in New Issue
Block a user