From 917e661c5a940ce437ec167ad9c0d20b69a87646 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Tue, 23 Jan 2024 02:46:58 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=B0=81=E8=A3=85=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BpmnDesign/PropertyPanel.vue   |   3 +-
 .../BpmnDesign/hooks/useParseElement.ts       |  19 +-
 src/components/BpmnDesign/index.vue           |  21 +-
 .../BpmnDesign/panel/ProcessPanel.vue         |   3 +-
 src/components/BpmnDesign/panel/TaskPanel.vue |  64 ++++-
 .../panel/property/TaskListener.vue           |   1 +
 src/components/UserSelect/index.vue           | 262 ++++++++++++++++++
 src/enums/bpmn/IndexEnums.ts                  |  17 ++
 src/types/bpmn/design.d.ts                    |   8 +-
 vite.config.ts                                |   2 +
 10 files changed, 363 insertions(+), 37 deletions(-)
 create mode 100644 src/components/UserSelect/index.vue
 create mode 100644 src/enums/bpmn/IndexEnums.ts

diff --git a/src/components/BpmnDesign/PropertyPanel.vue b/src/components/BpmnDesign/PropertyPanel.vue
index f5c9ca3..62d90f5 100644
--- a/src/components/BpmnDesign/PropertyPanel.vue
+++ b/src/components/BpmnDesign/PropertyPanel.vue
@@ -2,7 +2,7 @@
   <div ref="propertyPanel" class="property-panel">
     <div v-if="nodeName">{{ nodeName }}</div>
     <el-divider />
-    <component :is="component" v-if="element" :element="element" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" />
+    <component :is="component" v-if="element" :element="element" :modeler="modeler" :users="users" :groups="groups" />
   </div>
 </template>
 <script setup lang="ts" name="PropertyPanel">
@@ -16,7 +16,6 @@ import { Modeler, Modeling, Element } from 'bpmn';
 interface propsType {
   users: Array<any>;
   groups: Array<any>;
-  categorys: Array<any>;
   modeler: Modeler;
 }
 const props = withDefaults(defineProps<propsType>(), {});
diff --git a/src/components/BpmnDesign/hooks/useParseElement.ts b/src/components/BpmnDesign/hooks/useParseElement.ts
index 3a67ca6..a5fdb4f 100644
--- a/src/components/BpmnDesign/hooks/useParseElement.ts
+++ b/src/components/BpmnDesign/hooks/useParseElement.ts
@@ -1,19 +1,21 @@
 import { Ref } from 'vue';
 import { Element, Modeler } from 'bpmn';
 
-interface Options {
+interface Options<T> {
   modeler: Modeler;
   element: Element;
+  initData: T;
 }
 
 interface Data {
   id: string;
 }
 
-export default <T extends Data>(ops: Options) => {
-  const { modeler, element } = ops;
+export default <T extends Data>(ops: Options<T>) => {
+  const { modeler, element, initData } = ops;
+
+  const formData = ref<T>(initData);
 
-  const formData = ref<any>({});
   const parse = () => {
     const result = {
       ...element.businessObject,
@@ -28,14 +30,7 @@ export default <T extends Data>(ops: Options) => {
         delete result[key];
       }
     }
-    if ('documentation' in result) {
-      let str = '';
-      result.documentation.forEach((item: any) => {
-        str += item.text;
-      });
-      result.documentation = str;
-    }
-    formData.value = result;
+    formData.value = { ...formData.value, ...result };
     return formData;
   };
 
diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index fead65e..5bda3fe 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/src/components/BpmnDesign/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog ref="flowDialogRef" v-model="dialog.visible" :title="dialog.title" width="95%" append-to-body @close="closeDialog">
+  <el-dialog ref="flowDialogRef" v-model="dialog.visible" :title="dialog.title" width="95%" @close="closeDialog">
     <div class="app-containers">
       <el-header style="border-bottom: 1px solid rgb(218 218 218); height: auto">
         <div class="flex pb-3 justify-between">
@@ -62,6 +62,10 @@
 </template>
 
 <script lang="ts" setup name="BpmnDesign">
+import 'bpmn-js/dist/assets/diagram-js.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
 import { Canvas, ElementRegistry, Modeler } from 'bpmn';
 import PropertyPanel from './PropertyPanel.vue';
 import BpmnModeler from 'bpmn-js/lib/Modeler.js';
@@ -312,13 +316,9 @@ const getProcessElement = () => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 /*左边工具栏以及编辑节点的样式*/
 //@import 'bpmn-js/dist/assets/bpmn-js.css';
-@import 'bpmn-js/dist/assets/diagram-js.css';
-@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
-@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
-@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
 
 .app-containers {
   width: 100%;
@@ -342,15 +342,6 @@ const getProcessElement = () => {
   }
 }
 
-.el-overlay {
-  .el-overlay-dialog {
-    .el-dialog {
-      .el-dialog__body {
-        padding-top: 0 !important;
-      }
-    }
-  }
-}
 .bpmn-icon-start-event-none:before {
   //background-color: green;
   //border-radius: 100%;
diff --git a/src/components/BpmnDesign/panel/ProcessPanel.vue b/src/components/BpmnDesign/panel/ProcessPanel.vue
index 3f0622c..0262d41 100644
--- a/src/components/BpmnDesign/panel/ProcessPanel.vue
+++ b/src/components/BpmnDesign/panel/ProcessPanel.vue
@@ -30,7 +30,8 @@ const props = withDefaults(defineProps<PropType>(), {});
 
 const { parse, formData } = useParseElement<ProcessPanel>({
   modeler: props.modeler,
-  element: toRaw(props.element)
+  element: toRaw(props.element),
+  initData: {} as any
 });
 const { idChange, nameChange } = usePanel({
   modeler: props.modeler,
diff --git a/src/components/BpmnDesign/panel/TaskPanel.vue b/src/components/BpmnDesign/panel/TaskPanel.vue
index 0b09b5b..c3ee8b1 100644
--- a/src/components/BpmnDesign/panel/TaskPanel.vue
+++ b/src/components/BpmnDesign/panel/TaskPanel.vue
@@ -1,27 +1,46 @@
 <template>
   <div>
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
       <el-form-item prop="id" label="节点 ID">
         <el-input v-model="formData.id" @change="idChange"> </el-input>
       </el-form-item>
       <el-form-item prop="name" label="节点名称">
         <el-input v-model="formData.name" @change="nameChange"> </el-input>
       </el-form-item>
-      <el-form-item prop="userType" label="人员类型">
-        <el-input v-model="formData.userType"> </el-input>
+      <el-form-item prop="auditUserType" label="人员类型">
+        <el-select v-model="formData.auditUserType">
+          <el-option v-for="item in AuditUserTypeSelect" :key="item.id" :value="item.value" :label="item.label"> </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.USER" style="">
+        <el-button type="primary" @click="openUserSelect">选择人员</el-button>
+      </el-form-item>
+      <el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.SPECIFY" style="">
+        <el-radio-group v-model="formData.specifyDesc" class="ml-4">
+          <el-radio v-for="item in SpecifyDesc" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="多人审批方式">
+        <el-radio-group v-model="formData.multipleUserAuditType" class="ml-4 block-radio">
+          <el-radio v-for="item in MultipleUserAuditType" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio>
+        </el-radio-group>
       </el-form-item>
       <el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
       <ExecutionListener :modeler="modeler" :element="element"></ExecutionListener>
       <el-form-item label="任务监听器" style="margin-bottom: 0"> </el-form-item>
       <TaskListener :modeler="modeler" :element="element"></TaskListener>
     </el-form>
+
+    <UserSelect ref="userSelectRef" v-model="formData.users"></UserSelect>
   </div>
 </template>
 <script setup lang="ts">
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+import UserSelect from '@/components/UserSelect';
 import { Element, Modeler } from 'bpmn';
 import { TaskPanel } from 'bpmnDesign';
+import { AuditUserTypeEnum, MultipleUserAuditTypeEnum } from '@/enums/bpmn/IndexEnums';
 
 interface PropType {
   modeler: Modeler;
@@ -37,14 +56,47 @@ const { nameChange, idChange } = usePanel({
 });
 const { parse, formData } = useParseElement<TaskPanel>({
   modeler: props.modeler,
-  element: toRaw(props.element)
+  element: toRaw(props.element),
+  initData: {
+    multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL,
+    auditUserType: AuditUserTypeEnum.USER,
+    users: []
+  } as any
 });
 
+const userSelectRef = ref<InstanceType<typeof UserSelect>>();
+
 const formRules = ref<ElFormRules>({
-  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
   id: [{ required: true, message: '请输入', trigger: 'blur' }],
   name: [{ required: true, message: '请输入', trigger: 'blur' }]
 });
+
+const AuditUserTypeSelect = [
+  { id: 'b9cdf970-dd91-47c0-819f-42a7010ca2a6', label: '指定人员', value: 'user' },
+  { id: '3f7ccbcd-c464-4602-bb9d-e96649d10585', label: '角色', value: 'role' },
+  { id: 'c49065e0-7f2d-4c09-aedb-ab2d47d9a454', label: '发起人自己', value: 'yourself' },
+  { id: '6ef40a03-7e9a-4898-89b2-c88fe9064542', label: '发起人指定', value: 'specify' }
+];
+const SpecifyDesc = [
+  { id: 'fa253b34-4335-458c-b1bc-b039e2a2b7a6', label: '指定一个人', value: 'specifySingle' },
+  { id: '7365ff54-2e05-4312-9bfb-0b8edd779c5b', label: '指定多个人', value: 'specifyMultiple' }
+];
+
+const MultipleUserAuditType = [
+  { id: 'b5acea7c-b7e5-46b0-8778-390db091bdab', label: '串行（每人依次审批）', value: 'serial' },
+  { id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行（所有人审批通过）', value: 'parallel' },
+  { id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '或签（任意一人审批通过）', value: 'orSign' }
+];
+
+const openUserSelect = () => {
+  userSelectRef.value.open();
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.block-radio {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+}
+</style>
diff --git a/src/components/BpmnDesign/panel/property/TaskListener.vue b/src/components/BpmnDesign/panel/property/TaskListener.vue
index 0bb998e..f59744c 100644
--- a/src/components/BpmnDesign/panel/property/TaskListener.vue
+++ b/src/components/BpmnDesign/panel/property/TaskListener.vue
@@ -18,6 +18,7 @@
       @cell-dblclick="cellDBLClickEvent"
       @menu-click="contextMenuClickEvent"
     >
+      <vxe-column type="checkbox" width="40"></vxe-column>
       <vxe-column type="seq" width="40"></vxe-column>
       <vxe-column field="event" title="事件" min-width="100px">
         <template #default="slotParams">
diff --git a/src/components/UserSelect/index.vue b/src/components/UserSelect/index.vue
new file mode 100644
index 0000000..ca9e7d6
--- /dev/null
+++ b/src/components/UserSelect/index.vue
@@ -0,0 +1,262 @@
+<template>
+  <div>
+    <el-dialog v-model="userDialog.visible.value" :title="userDialog.title.value" width="80%" append-to-body>
+      <div class="p-2">
+        <el-row :gutter="20">
+          <!-- 部门树 -->
+          <el-col :lg="4" :xs="24" style="">
+            <el-card shadow="hover">
+              <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
+              <el-tree
+                ref="deptTreeRef"
+                class="mt-2"
+                node-key="id"
+                :data="deptOptions"
+                :props="{ label: 'label', children: 'children' }"
+                :expand-on-click-node="false"
+                :filter-node-method="filterNode"
+                highlight-current
+                default-expand-all
+                @node-click="handleNodeClick"
+              />
+            </el-card>
+          </el-col>
+          <el-col :lg="20" :xs="24">
+            <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+              <div v-show="showSearch" class="mb-[10px]">
+                <el-card shadow="hover">
+                  <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
+                    <el-form-item label="用户名称" prop="userName">
+                      <el-input
+                        v-model="queryParams.userName"
+                        placeholder="请输入用户名称"
+                        clearable
+                        style="width: 240px"
+                        @keyup.enter="handleQuery"
+                      />
+                    </el-form-item>
+                    <el-form-item label="手机号码" prop="phonenumber">
+                      <el-input
+                        v-model="queryParams.phonenumber"
+                        placeholder="请输入手机号码"
+                        clearable
+                        style="width: 240px"
+                        @keyup.enter="handleQuery"
+                      />
+                    </el-form-item>
+
+                    <el-form-item label="状态" prop="status">
+                      <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
+                        <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="创建时间" style="width: 308px">
+                      <el-date-picker
+                        v-model="dateRange"
+                        value-format="YYYY-MM-DD"
+                        type="daterange"
+                        range-separator="-"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                      ></el-date-picker>
+                    </el-form-item>
+                    <el-form-item>
+                      <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                    </el-form-item>
+                  </el-form>
+                </el-card>
+              </div>
+            </transition>
+
+            <el-card shadow="hover">
+              <template #header>
+                <el-row :gutter="10">
+                  <el-col :span="1.5">
+                    <el-button type="primary" plain icon="Plus">新增</el-button>
+                  </el-col>
+                  <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
+                </el-row>
+              </template>
+
+              <vxe-table
+                ref="tableRef"
+                height="500px"
+                border
+                show-overflow
+                :data="userList"
+                :loading="loading"
+                :row-config="{ keyField: 'userId' }"
+                :checkbox-config="{ reserve: true, checkRowKeys: modelValue }"
+                highlight-current-row
+              >
+                <vxe-column type="checkbox" width="50" align="center" />
+                <vxe-column v-if="columns[0].visible" key="userId" title="用户编号" align="center" field="userId" />
+                <vxe-column v-if="columns[1].visible" key="userName" title="用户名称" align="center" field="userName" :show-overflow-tooltip="true" />
+                <vxe-column v-if="columns[2].visible" key="nickName" title="用户昵称" align="center" field="nickName" :show-overflow-tooltip="true" />
+                <vxe-column v-if="columns[3].visible" key="deptName" title="部门" align="center" field="deptName" :show-overflow-tooltip="true" />
+                <vxe-column v-if="columns[4].visible" key="phonenumber" title="手机号码" align="center" field="phonenumber" width="120" />
+                <vxe-column v-if="columns[5].visible" key="status" title="状态" align="center">
+                  <template #default="scope">
+                    <dict-tag :options="sys_normal_disable" :value="scope.row.status"></dict-tag>
+                  </template>
+                </vxe-column>
+
+                <vxe-column v-if="columns[6].visible" title="创建时间" align="center" width="160">
+                  <template #default="scope">
+                    <span>{{ scope.row.createTime }}</span>
+                  </template>
+                </vxe-column>
+              </vxe-table>
+
+              <pagination
+                v-show="total > 0"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                :total="total"
+                @pagination="getList"
+              />
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+
+      <template #footer>
+        <el-button @click="userDialog.closeDialog">取消</el-button>
+        <el-button type="primary" @click="confirm">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import api from '@/api/system/user';
+import { UserQuery, UserVO } from '@/api/system/user/types';
+import { DeptVO } from '@/api/system/dept/types';
+import { globalHeaders } from '@/utils/request';
+import useDialog from '@/hooks/useDialog';
+import { VxeTableInstance } from 'vxe-table';
+
+interface PropType {
+  modelValue: string[];
+}
+const prop = defineProps<PropType>();
+const emit = defineEmits(['update:modelValue']);
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
+
+const userList = ref<UserVO[]>();
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+const deptName = ref('');
+const deptOptions = ref<DeptVO[]>([]);
+
+// 列显隐信息
+const columns = ref<FieldOption[]>([
+  { key: 0, label: `用户编号`, visible: false, children: [] },
+  { key: 1, label: `用户名称`, visible: true, children: [] },
+  { key: 2, label: `用户昵称`, visible: true, children: [] },
+  { key: 3, label: `部门`, visible: true, children: [] },
+  { key: 4, label: `手机号码`, visible: true, children: [] },
+  { key: 5, label: `状态`, visible: true, children: [] },
+  { key: 6, label: `创建时间`, visible: true, children: [] }
+]);
+
+const deptTreeRef = ref<ElTreeInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const tableRef = ref<VxeTableInstance<UserVO>>();
+
+const userDialog = useDialog({
+  title: '用户选择'
+});
+
+const queryParams = ref<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  userName: '',
+  phonenumber: '',
+  status: '',
+  deptId: '',
+  roleId: ''
+});
+
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    deptTreeRef.value?.filter(deptName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+const confirm = () => {
+  const $table = tableRef.value;
+  if ($table) {
+    // 获取当前列表选中行
+    const checkboxRecords = $table.getCheckboxRecords();
+    // 获取其他列表选中行
+    const checkboxReserveRecords = $table.getCheckboxReserveRecords();
+    const data: UserVO[] = [...checkboxRecords, ...checkboxReserveRecords];
+    const userIds = data.map((item) => item.userId);
+    emit('update:modelValue', userIds);
+    userDialog.closeDialog();
+  }
+};
+
+/** 查询部门下拉树结构 */
+const getTreeSelect = async () => {
+  const res = await api.deptTreeSelect();
+  deptOptions.value = res.data;
+};
+
+/** 查询用户列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await api.listUser(proxy?.addDateRange(queryParams.value, dateRange.value));
+  loading.value = false;
+  userList.value = res.rows;
+  total.value = res.total;
+};
+
+/** 节点单击事件 */
+const handleNodeClick = (data: DeptVO) => {
+  queryParams.value.deptId = data.id;
+  handleQuery();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  dateRange.value = ['', ''];
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.deptId = undefined;
+  deptTreeRef.value?.setCurrentKey(undefined);
+  handleQuery();
+};
+
+onMounted(() => {
+  getTreeSelect(); // 初始化部门数据
+  getList(); // 初始化列表数据
+});
+
+defineExpose({
+  open: userDialog.openDialog,
+  close: userDialog.closeDialog
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/enums/bpmn/IndexEnums.ts b/src/enums/bpmn/IndexEnums.ts
new file mode 100644
index 0000000..7bc078e
--- /dev/null
+++ b/src/enums/bpmn/IndexEnums.ts
@@ -0,0 +1,17 @@
+export enum AuditUserTypeEnum {
+  USER = 'user',
+  ROLE = 'role',
+  YOURSELF = 'yourself',
+  SPECIFY = 'specify'
+}
+
+export enum SpecifyDescEnum {
+  SPECIFY_MULTIPLE = 'specifyMultiple',
+  SPECIFY_SINGLE = 'specifySingle'
+}
+
+export enum MultipleUserAuditTypeEnum {
+  SERIAL = 'serial',
+  PARALLEL = 'parallel',
+  OR_SIGN = 'orSign'
+}
diff --git a/src/types/bpmn/design.d.ts b/src/types/bpmn/design.d.ts
index 4c2e689..1f777eb 100644
--- a/src/types/bpmn/design.d.ts
+++ b/src/types/bpmn/design.d.ts
@@ -1,4 +1,6 @@
 declare module 'bpmnDesign' {
+  import { AuditUserTypeEnum, SpecifyDescEnum, MultipleUserAuditTypeEnum } from '@/enums/bpmn/IndexEnums';
+
   export interface ParamVO {
     type: string;
     name: string;
@@ -30,7 +32,11 @@ declare module 'bpmnDesign' {
 
   export interface TaskPanel extends BasePanel {
     processCategory: string;
-    userType: string;
+    auditUserType: AuditUserTypeEnum;
+    specifyDesc: SpecifyDescEnum;
+    multipleUserAuditType: MultipleUserAuditTypeEnum;
+    users: string[];
+
     assignee: string;
     candidateUsers: string;
     candidateGroups: string;
diff --git a/vite.config.ts b/vite.config.ts
index 166e229..68c1bba 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -70,6 +70,8 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
         'min-dash',
         'bpmn-js/lib/features/palette/PaletteProvider',
         'bpmn-js/lib/features/context-pad/ContextPadProvider',
+        'diagram-js/lib/draw/BaseRenderer',
+        'tiny-svg',
 
         'element-plus/es/components/container/style/css',
         'element-plus/es/components/aside/style/css',