fix: bpmn style

This commit is contained in:
xingyu4j
2025-11-07 14:29:18 +08:00
parent aa13d2a67c
commit 5f071c20f3
2 changed files with 20 additions and 35 deletions

View File

@@ -660,16 +660,15 @@ onBeforeUnmount(() => {
<!-- <div id="js-properties-panel" class="panel"></div> --> <!-- <div id="js-properties-panel" class="panel"></div> -->
<!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> --> <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
</div> </div>
<Dialog <Modal
title="预览" title="预览"
v-model:open="previewModelVisible" v-model:open="previewModelVisible"
width="80%" class="max-h-[600px] w-4/5"
:scroll="true" :scroll="true"
style="max-height: 600px"
> >
<div> <div>
<pre><code v-dompurify-html="highlightedCode(previewResult)" class="hljs"></code></pre> <pre><code v-dompurify-html="highlightedCode(previewResult)" class="hljs"></code></pre>
</div> </div>
</Dialog> </Modal>
</div> </div>
</template> </template>

View File

@@ -248,9 +248,8 @@ defineExpose({ validate });
:rules="rules" :rules="rules"
:label-col="{ span: 4 }" :label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }" :wrapper-col="{ span: 20 }"
class="mt-5"
> >
<Form.Item label="流程标识" name="key" class="mb-5"> <Form.Item label="流程标识" name="key">
<div class="flex items-center"> <div class="flex items-center">
<Input <Input
class="w-full" class="w-full"
@@ -264,14 +263,11 @@ defineExpose({ validate });
" "
placement="top" placement="top"
> >
<IconifyIcon <IconifyIcon icon="lucide:circle-help" class="ml-1 size-5" />
icon="lucide:circle-help"
class="ml-1 size-5 text-gray-900"
/>
</Tooltip> </Tooltip>
</div> </div>
</Form.Item> </Form.Item>
<Form.Item label="流程名称" name="name" class="mb-5"> <Form.Item label="流程名称" name="name">
<Input <Input
v-model:value="modelData.name" v-model:value="modelData.name"
:disabled="!!modelData.id" :disabled="!!modelData.id"
@@ -279,7 +275,7 @@ defineExpose({ validate });
placeholder="请输入流程名称" placeholder="请输入流程名称"
/> />
</Form.Item> </Form.Item>
<Form.Item label="流程分类" name="category" class="mb-5"> <Form.Item label="流程分类" name="category">
<Select <Select
class="w-full" class="w-full"
v-model:value="modelData.category" v-model:value="modelData.category"
@@ -295,13 +291,13 @@ defineExpose({ validate });
</Select.Option> </Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="流程图标" class="mb-5"> <Form.Item label="流程图标">
<ImageUpload v-model:value="modelData.icon" /> <ImageUpload v-model:value="modelData.icon" />
</Form.Item> </Form.Item>
<Form.Item label="流程描述" name="description" class="mb-5"> <Form.Item label="流程描述" name="description">
<Input.TextArea v-model:value="modelData.description" allow-clear /> <Input.TextArea v-model:value="modelData.description" allow-clear />
</Form.Item> </Form.Item>
<Form.Item label="流程类型" name="type" class="mb-5"> <Form.Item label="流程类型" name="type">
<Radio.Group v-model:value="modelData.type"> <Radio.Group v-model:value="modelData.type">
<Radio <Radio
v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_TYPE, 'number')" v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_TYPE, 'number')"
@@ -312,7 +308,7 @@ defineExpose({ validate });
</Radio> </Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item label="是否可见" name="visible" class="mb-5"> <Form.Item label="是否可见" name="visible">
<Radio.Group v-model:value="modelData.visible"> <Radio.Group v-model:value="modelData.visible">
<Radio <Radio
v-for="dict in getDictOptions( v-for="dict in getDictOptions(
@@ -326,7 +322,7 @@ defineExpose({ validate });
</Radio> </Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item label="谁可以发起" name="startUserType" class="mb-5"> <Form.Item label="谁可以发起" name="startUserType">
<Select <Select
v-model:value="modelData.startUserType" v-model:value="modelData.startUserType"
placeholder="请选择谁可以发起" placeholder="请选择谁可以发起"
@@ -343,15 +339,10 @@ defineExpose({ validate });
<div <div
v-for="user in selectedStartUsers" v-for="user in selectedStartUsers"
:key="user.id" :key="user.id"
class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600" class="relative flex h-8 items-center rounded-lg bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
> >
<Avatar <Avatar class="m-1 size-7" v-if="user.avatar" :src="user.avatar" />
class="m-1" <Avatar class="m-1 size-7" v-else>
:size="28"
v-if="user.avatar"
:src="user.avatar"
/>
<Avatar class="m-1" :size="28" v-else>
{{ user.nickname?.substring(0, 1) }} {{ user.nickname?.substring(0, 1) }}
</Avatar> </Avatar>
<span class="text-gray-700 dark:text-gray-200"> <span class="text-gray-700 dark:text-gray-200">
@@ -359,7 +350,7 @@ defineExpose({ validate });
</span> </span>
<IconifyIcon <IconifyIcon
icon="lucide:x" icon="lucide:x"
class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500" class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500 dark:text-gray-200"
@click="handleRemoveStartUser(user)" @click="handleRemoveStartUser(user)"
/> />
</div> </div>
@@ -381,7 +372,7 @@ defineExpose({ validate });
<div <div
v-for="dept in selectedStartDepts" v-for="dept in selectedStartDepts"
:key="dept.id" :key="dept.id"
class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 shadow-sm hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600" class="relative flex h-8 items-center rounded-lg bg-gray-100 pr-2 shadow-sm hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
> >
<IconifyIcon icon="lucide:building" class="size-6 px-1" /> <IconifyIcon icon="lucide:building" class="size-6 px-1" />
<span class="text-gray-700 dark:text-gray-200"> <span class="text-gray-700 dark:text-gray-200">
@@ -405,20 +396,15 @@ defineExpose({ validate });
</Button> </Button>
</div> </div>
</Form.Item> </Form.Item>
<Form.Item label="流程管理员" name="managerUserIds" class="mb-5"> <Form.Item label="流程管理员" name="managerUserIds">
<div class="flex flex-wrap gap-1"> <div class="flex flex-wrap gap-1">
<div <div
v-for="user in selectedManagerUsers" v-for="user in selectedManagerUsers"
:key="user.id" :key="user.id"
class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600" class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
> >
<Avatar <Avatar class="m-1 size-7" v-if="user.avatar" :src="user.avatar" />
class="m-1" <Avatar class="m-1 size-7" v-else>
:size="28"
v-if="user.avatar"
:src="user.avatar"
/>
<Avatar class="m-1" :size="28" v-else>
{{ user.nickname?.substring(0, 1) }} {{ user.nickname?.substring(0, 1) }}
</Avatar> </Avatar>
<span class="text-gray-700 dark:text-gray-200"> <span class="text-gray-700 dark:text-gray-200">