From c9d917b64960c4b4be73e3aaa89ff4834fbc75c8 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 28 Nov 2025 00:26:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20[bpm][ele]=20=E5=8F=91=E8=B5=B7?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/create/index.vue      | 339 ++++++++++++++++
 .../processInstance/create/modules/form.vue   | 372 ++++++++++++++++++
 .../bpm/processInstance/detail/index.vue      |   2 +-
 3 files changed, 712 insertions(+), 1 deletion(-)
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/create/index.vue
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/create/modules/form.vue

diff --git a/apps/web-ele/src/views/bpm/processInstance/create/index.vue b/apps/web-ele/src/views/bpm/processInstance/create/index.vue
new file mode 100644
index 000000000..df5507705
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/create/index.vue
@@ -0,0 +1,339 @@
+<script lang="ts" setup>
+import type { BpmCategoryApi } from '#/api/bpm/category';
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { groupBy } from '@vben/utils';
+
+import {
+  ElCard,
+  ElCol,
+  ElInput,
+  ElMessage,
+  ElRow,
+  ElSpace,
+  ElTabPane,
+  ElTabs,
+  ElTooltip,
+} from 'element-plus';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getProcessDefinitionList } from '#/api/bpm/definition';
+import { getProcessInstance } from '#/api/bpm/processInstance';
+
+import ProcessDefinitionDetail from './modules/form.vue';
+
+defineOptions({ name: 'BpmProcessInstanceCreate' });
+
+const route = useRoute();
+
+const loading = ref(true); // 加载中
+const processInstanceId: any = route.query.processInstanceId; // 流程实例编号。场景：重新发起时
+
+const categoryList: any = ref([]); // 分类的列表
+const activeCategory = ref(''); // 当前选中的分类
+
+const searchName = ref(''); // 当前搜索关键字
+const processDefinitionList = ref<BpmProcessDefinitionApi.ProcessDefinition[]>(
+  [],
+); // 流程定义的列表
+const filteredProcessDefinitionList = ref<
+  BpmProcessDefinitionApi.ProcessDefinition[]
+>([]); // 用于存储搜索过滤后的流程定义
+
+const selectProcessDefinition = ref(); // 选择的流程定义
+const processDefinitionDetailRef = ref();
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    // 1.1 所有流程分类数据
+    await loadCategoryList();
+    // 1.2 所有流程定义数据
+    await loadProcessDefinitionList();
+
+    // 2. 如果 processInstanceId 非空，说明是重新发起
+    if (processInstanceId?.length > 0) {
+      const processInstance = await getProcessInstance(processInstanceId);
+      if (!processInstance) {
+        ElMessage.error('重新发起流程失败，原因：流程实例不存在');
+        return;
+      }
+      const processDefinition = processDefinitionList.value.find(
+        (item: any) => item.key === processInstance.processDefinition?.key,
+      );
+      if (!processDefinition) {
+        ElMessage.error('重新发起流程失败，原因：流程定义不存在');
+        return;
+      }
+      await handleSelect(processDefinition, processInstance.formVariables);
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 获取所有流程分类数据 */
+async function loadCategoryList() {
+  categoryList.value = await getCategorySimpleList();
+}
+
+/** 获取所有流程定义数据 */
+async function loadProcessDefinitionList() {
+  // 流程定义
+  processDefinitionList.value = await getProcessDefinitionList({
+    suspensionState: 1,
+  });
+
+  // 空搜索，初始化相关数据
+  handleQuery();
+}
+
+/** 搜索流程 */
+function handleQuery() {
+  if (searchName.value.trim()) {
+    // 如果有搜索关键字，进行过滤
+    filteredProcessDefinitionList.value = processDefinitionList.value.filter(
+      (definition: any) =>
+        definition.name.toLowerCase().includes(searchName.value.toLowerCase()),
+    );
+    // 如果有匹配，切换到第一个包含匹配结果的分类
+    activeCategory.value = availableCategories.value[0]?.name;
+  } else {
+    // 如果没有搜索关键字，恢复所有数据
+    filteredProcessDefinitionList.value = processDefinitionList.value;
+    // 恢复到第一个可用分类
+    if (availableCategories.value.length > 0) {
+      activeCategory.value = availableCategories.value[0].code;
+    }
+  }
+}
+
+/** 流程定义的分组 */
+const processDefinitionGroup = computed(() => {
+  if (!processDefinitionList.value?.length) {
+    return {};
+  }
+  // 按照 categoryList 的顺序重新组织数据
+  const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
+  const orderedGroup: Record<
+    string,
+    BpmProcessDefinitionApi.ProcessDefinition[]
+  > = {};
+  categoryList.value.forEach((category: BpmCategoryApi.Category) => {
+    if (grouped[category.code]) {
+      orderedGroup[category.code] = grouped[
+        category.code
+      ] as BpmProcessDefinitionApi.ProcessDefinition[];
+    }
+  });
+  return orderedGroup;
+});
+
+/** 处理选择流程的按钮操作 */
+async function handleSelect(
+  row: BpmProcessDefinitionApi.ProcessDefinition,
+  formVariables?: any,
+) {
+  // 设置选择的流程
+  selectProcessDefinition.value = row;
+  // 初始化流程定义详情
+  await nextTick();
+  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables);
+}
+
+/** 过滤出有流程的分类列表。目的：只展示有流程的分类 */
+const availableCategories = computed(() => {
+  if (!categoryList.value?.length || !processDefinitionGroup.value) {
+    return [];
+  }
+  // 获取所有有流程的分类代码
+  const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
+  // 过滤出有流程的分类
+  return categoryList.value.filter((category: BpmCategoryApi.Category) =>
+    availableCategoryCodes.includes(category.code),
+  );
+});
+
+/** 监听可用分类变化，自动设置正确的活动分类 */
+watch(
+  availableCategories,
+  (newCategories) => {
+    if (newCategories.length > 0) {
+      // 如果当前活动分类不在可用分类中，切换到第一个可用分类
+      const currentCategoryExists = newCategories.some(
+        (category: BpmCategoryApi.Category) =>
+          category.code === activeCategory.value,
+      );
+      if (!currentCategoryExists) {
+        activeCategory.value = newCategories[0].code;
+      }
+    }
+  },
+  { immediate: true },
+);
+
+/** 初始化 */
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+    <template v-if="!selectProcessDefinition">
+      <ElCard
+        class="h-full"
+        shadow="never"
+        :class="{
+          'process-definition-container': filteredProcessDefinitionList?.length,
+        }"
+        v-loading="loading"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <span class="text-lg font-medium">全部流程</span>
+            <div class="w-1/3">
+              <ElInput
+                v-model="searchName"
+                placeholder="请输入流程名称检索"
+                clearable
+                @input="handleQuery"
+                @clear="handleQuery"
+              />
+            </div>
+          </div>
+        </template>
+
+        <div v-if="filteredProcessDefinitionList?.length" class="h-full">
+          <ElTabs v-model="activeCategory" tab-position="left" class="h-full">
+            <ElTabPane
+              v-for="category in availableCategories"
+              :key="category.code"
+              :label="category.name"
+              :name="category.code"
+              class="h-full"
+            >
+              <div class="px-4">
+                <ElRow :gutter="16">
+                  <ElCol
+                    v-for="definition in processDefinitionGroup[category.code]"
+                    :key="definition.id"
+                    :xs="24"
+                    :sm="12"
+                    :md="8"
+                    :lg="8"
+                    :xl="6"
+                    class="mb-4"
+                    @click="handleSelect(definition)"
+                  >
+                    <ElCard
+                      shadow="hover"
+                      class="definition-item-card w-full cursor-pointer"
+                      :class="{
+                        'search-match': searchName.trim().length > 0,
+                      }"
+                      :body-style="{
+                        width: '100%',
+                        padding: '16px',
+                      }"
+                    >
+                      <div class="flex items-center">
+                        <img
+                          v-if="definition.icon"
+                          :src="definition.icon"
+                          class="flow-icon-img object-contain"
+                          alt="流程图标"
+                        />
+                        <div v-else class="flow-icon flex-shrink-0">
+                          <span class="text-xs text-white">
+                            {{ definition.name?.slice(0, 2) }}
+                          </span>
+                        </div>
+                        <span class="ml-3 flex-1 truncate text-base">
+                          <ElTooltip
+                            placement="top-start"
+                            :content="definition.description"
+                          >
+                            {{ definition.name }}
+                          </ElTooltip>
+                        </span>
+                      </div>
+                    </ElCard>
+                  </ElCol>
+                </ElRow>
+              </div>
+            </ElTabPane>
+          </ElTabs>
+        </div>
+        <div v-else class="!py-48 text-center">
+          <ElSpace direction="vertical" size="large">
+            <span class="text-gray-500">没有找到搜索结果</span>
+          </ElSpace>
+        </div>
+      </ElCard>
+    </template>
+
+    <!-- 第二步，填写表单，进行流程的提交 -->
+    <ProcessDefinitionDetail
+      v-else
+      ref="processDefinitionDetailRef"
+      :select-process-definition="selectProcessDefinition"
+      @cancel="selectProcessDefinition = undefined"
+    />
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+@keyframes bounce {
+  0%,
+  50% {
+    transform: translateY(-5px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.process-definition-container {
+  .definition-item-card {
+    .flow-icon-img {
+      width: 48px;
+      height: 48px;
+      border-radius: 0.25rem;
+    }
+
+    .flow-icon {
+      @apply bg-primary;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      border-radius: 0.25rem;
+    }
+
+    &.search-match {
+      background-color: rgb(63 115 247 / 10%);
+      border: 1px solid var(--primary);
+      animation: bounce 0.5s ease;
+    }
+  }
+}
+
+:deep(.el-tabs__content) {
+  height: 100%;
+  overflow-y: auto;
+}
+
+:deep(.el-tabs) {
+  height: 100%;
+}
+</style>
diff --git a/apps/web-ele/src/views/bpm/processInstance/create/modules/form.vue b/apps/web-ele/src/views/bpm/processInstance/create/modules/form.vue
new file mode 100644
index 000000000..7ba63b5fa
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/create/modules/form.vue
@@ -0,0 +1,372 @@
+<script lang="ts" setup>
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { computed, nextTick, ref, watch } from 'vue';
+
+import {
+  BpmCandidateStrategyEnum,
+  BpmFieldPermissionType,
+  BpmModelFormType,
+  BpmModelType,
+  BpmNodeIdEnum,
+} from '@vben/constants';
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import FormCreate from '@form-create/element-ui';
+import {
+  ElButton,
+  ElCard,
+  ElCol,
+  ElMessage,
+  ElRow,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+import { getProcessDefinition } from '#/api/bpm/definition';
+import {
+  createProcessInstance,
+  getApprovalDetail as getApprovalDetailApi,
+} from '#/api/bpm/processInstance';
+import { decodeFields, setConfAndFields2 } from '#/components/form-create';
+import { router } from '#/router';
+import ProcessInstanceBpmnViewer from '#/views/bpm/processInstance/detail/modules/bpm-viewer.vue';
+import ProcessInstanceSimpleViewer from '#/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue';
+import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
+
+/** 类型定义 */
+interface ProcessFormData {
+  rule: any[];
+  option: Record<string, any>;
+  value: Record<string, any>;
+}
+
+interface UserTask {
+  id: number;
+  name: string;
+}
+
+defineOptions({ name: 'BpmProcessInstanceCreateForm' });
+
+const props = defineProps({
+  selectProcessDefinition: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['cancel']);
+const { closeCurrentTab } = useTabs();
+
+const getTitle = computed(() => {
+  return `流程表单 - ${props.selectProcessDefinition.name}`;
+});
+
+const detailForm = ref<ProcessFormData>({
+  rule: [],
+  option: {},
+  value: {},
+});
+const fApi = ref<any>();
+
+const startUserSelectTasks = ref<UserTask[]>([]);
+const startUserSelectAssignees = ref<Record<string, string[]>>({});
+const tempStartUserSelectAssignees = ref<Record<string, string[]>>({});
+
+const bpmnXML = ref<string | undefined>(undefined);
+const simpleJson = ref<string | undefined>(undefined);
+
+const timelineRef = ref<any>();
+const activeTab = ref('form');
+const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
+const processInstanceStartLoading = ref(false);
+
+/** 提交按钮 */
+async function submitForm() {
+  if (!fApi.value || !props.selectProcessDefinition) {
+    return;
+  }
+  // 流程表单校验
+  await fApi.value.validate();
+  // 校验指定审批人
+  if (startUserSelectTasks.value?.length > 0) {
+    for (const userTask of startUserSelectTasks.value) {
+      const assignees = startUserSelectAssignees.value[userTask.id];
+      if (Array.isArray(assignees) && assignees.length === 0) {
+        ElMessage.warning(`请选择${userTask.name}的候选人`);
+        return;
+      }
+    }
+  }
+
+  processInstanceStartLoading.value = true;
+  try {
+    // 提交请求
+    await createProcessInstance({
+      processDefinitionId: props.selectProcessDefinition.id,
+      variables: detailForm.value.value,
+      startUserSelectAssignees: startUserSelectAssignees.value,
+    });
+    // 关闭并提示
+    ElMessage.success('发起流程成功');
+    await closeCurrentTab();
+    await router.push({ name: 'BpmTaskMy' });
+  } finally {
+    processInstanceStartLoading.value = false;
+  }
+}
+
+/** 设置表单信息、获取流程图数据 */
+async function initProcessInfo(row: any, formVariables?: any) {
+  // 重置指定审批人
+  startUserSelectTasks.value = [];
+  startUserSelectAssignees.value = {};
+
+  // 情况一：流程表单
+  if (row.formType === BpmModelFormType.NORMAL) {
+    // 设置表单
+    // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
+    // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
+    //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
+
+    // 解析表单字段列表（不创建实例，避免重复渲染）
+    const decodedFields = decodeFields(row.formFields);
+    const allowedFields = new Set(
+      decodedFields.map((field: any) => field.field).filter(Boolean),
+    );
+
+    // 过滤掉不允许的字段
+    if (formVariables) {
+      for (const key in formVariables) {
+        if (!allowedFields.has(key)) {
+          delete formVariables[key];
+        }
+      }
+    }
+
+    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables);
+
+    // 在配置中禁用 form-create 自带的提交和重置按钮
+    detailForm.value.option = {
+      ...detailForm.value.option,
+      submitBtn: false,
+      resetBtn: false,
+    };
+
+    await nextTick();
+
+    // 获取流程审批信息,当再次发起时，流程审批节点要根据原始表单参数预测出来
+    await getApprovalDetail({
+      id: row.id,
+      processVariablesStr: JSON.stringify(formVariables),
+    });
+
+    // 加载流程图
+    const processDefinitionDetail: BpmProcessDefinitionApi.ProcessDefinition =
+      await getProcessDefinition(row.id);
+    if (processDefinitionDetail) {
+      bpmnXML.value = processDefinitionDetail.bpmnXml;
+      simpleJson.value = processDefinitionDetail.simpleModel;
+    }
+    // 情况二：业务表单
+  } else if (row.formCustomCreatePath) {
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+    await router.push({
+      path: row.formCustomCreatePath,
+    });
+    // 返回选择流程
+    emit('cancel');
+  }
+}
+
+/** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
+watch(
+  () => detailForm.value.value,
+  (newValue) => {
+    if (newValue && Object.keys(newValue).length > 0) {
+      // 记录之前的节点审批人
+      tempStartUserSelectAssignees.value = startUserSelectAssignees.value;
+      startUserSelectAssignees.value = {};
+      // 加载最新的审批详情
+      getApprovalDetail({
+        id: props.selectProcessDefinition.id,
+        processVariablesStr: JSON.stringify(newValue), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
+      });
+    }
+  },
+  {
+    deep: true,
+  },
+);
+
+/** 获取审批详情 */
+async function getApprovalDetail(row: {
+  id: string;
+  processVariablesStr: string;
+}) {
+  const data = await getApprovalDetailApi({
+    processDefinitionId: row.id,
+    activityId: BpmNodeIdEnum.START_USER_NODE_ID,
+    processVariablesStr: row.processVariablesStr,
+  });
+  if (!data) {
+    ElMessage.error('查询不到审批详情信息！');
+    return;
+  }
+
+  // 获取审批节点
+  activityNodes.value = data.activityNodes;
+
+  // 获取发起人自选的任务
+  startUserSelectTasks.value = (data.activityNodes?.filter(
+    (node) =>
+      BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
+  ) || []) as unknown as UserTask[];
+
+  // 恢复之前的选择审批人
+  if (startUserSelectTasks.value.length > 0) {
+    for (const node of startUserSelectTasks.value) {
+      const tempAssignees = tempStartUserSelectAssignees.value[node.id];
+      startUserSelectAssignees.value[node.id] = tempAssignees?.length
+        ? tempAssignees
+        : [];
+    }
+  }
+
+  // 设置表单字段权限
+  const formFieldsPermission = data.formFieldsPermission;
+  if (formFieldsPermission) {
+    Object.entries(formFieldsPermission).forEach(([field, permission]) => {
+      setFieldPermission(field, permission as string);
+    });
+  }
+}
+
+/** 设置表单权限 */
+function setFieldPermission(field: string, permission: string) {
+  if (permission === BpmFieldPermissionType.READ) {
+    fApi.value?.disabled(true, field);
+  }
+  if (permission === BpmFieldPermissionType.WRITE) {
+    fApi.value?.disabled(false, field);
+  }
+  if (permission === BpmFieldPermissionType.NONE) {
+    fApi.value?.hidden(true, field);
+  }
+}
+
+/** 取消发起审批 */
+function handleCancel() {
+  emit('cancel');
+}
+
+/** 选择发起人 */
+function selectUserConfirm(activityId: string, userList: any[]) {
+  if (!activityId || !Array.isArray(userList)) return;
+  startUserSelectAssignees.value[activityId] = userList.map((item) => item.id);
+}
+
+defineExpose({ initProcessInfo });
+</script>
+
+<template>
+  <ElCard class="h-full overflow-hidden" shadow="never">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <span class="text-lg font-medium">{{ getTitle }}</span>
+        <ElButton plain type="default" @click="handleCancel">
+          <IconifyIcon icon="lucide:arrow-left" />&nbsp; 返回
+        </ElButton>
+      </div>
+    </template>
+
+    <div class="flex h-full flex-col">
+      <ElTabs v-model="activeTab" class="flex flex-1 flex-col overflow-hidden">
+        <ElTabPane label="表单填写" name="form">
+          <div class="h-full overflow-y-auto p-6">
+            <ElRow :gutter="48">
+              <ElCol :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
+                <FormCreate
+                  :rule="detailForm.rule"
+                  v-model:api="fApi"
+                  v-model="detailForm.value"
+                  :option="detailForm.option"
+                  @submit="submitForm"
+                />
+              </ElCol>
+              <ElCol :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                <ProcessInstanceTimeline
+                  ref="timelineRef"
+                  :activity-nodes="activityNodes"
+                  :show-status-icon="false"
+                  @select-user-confirm="selectUserConfirm"
+                />
+              </ElCol>
+            </ElRow>
+          </div>
+        </ElTabPane>
+        <ElTabPane
+          label="流程图"
+          name="flow"
+          class="flex flex-1 overflow-hidden"
+        >
+          <div class="h-full w-full overflow-y-auto">
+            <!-- BPMN 流程图预览 -->
+            <ProcessInstanceBpmnViewer
+              :bpmn-xml="bpmnXML"
+              v-if="BpmModelType.BPMN === selectProcessDefinition.modelType"
+            />
+            <ProcessInstanceSimpleViewer
+              :simple-json="simpleJson"
+              v-if="BpmModelType.SIMPLE === selectProcessDefinition.modelType"
+            />
+          </div>
+        </ElTabPane>
+      </ElTabs>
+
+      <div v-if="activeTab === 'form'" class="border-t pb-4 pt-2">
+        <div class="flex w-full items-center justify-center">
+          <ElButton
+            plain
+            type="primary"
+            @click="submitForm"
+            :loading="processInstanceStartLoading"
+          >
+            <IconifyIcon icon="lucide:check" />
+            <span class="ml-1">发起</span>
+          </ElButton>
+          <ElButton plain type="default" @click="handleCancel">
+            <IconifyIcon icon="lucide:x" />
+            <span class="ml-1">取消</span>
+          </ElButton>
+        </div>
+      </div>
+    </div>
+  </ElCard>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-card__body) {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 60px); // header height approx
+  padding: 0;
+  overflow: hidden;
+}
+
+:deep(.el-tabs__content) {
+  flex: 1;
+  overflow: hidden;
+}
+
+:deep(.el-tab-pane) {
+  height: 100%;
+}
+
+:deep(.el-tabs__header) {
+  padding: 0 16px;
+  margin-bottom: 0;
+}
+</style>
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/index.vue b/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
index ccc4a5811..fad5ed688 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
@@ -246,7 +246,7 @@ onMounted(async () => {
           <span class="text-gray-500">编号：{{ id || '-' }}</span>
           <IconifyIcon
             icon="lucide:printer"
-            class="hover:text-primary cursor-pointer"
+            class="cursor-pointer hover:text-primary"
             @click="handlePrint"
           />
         </div>