feat: 发起流程页面-增加搜索框、前端搜索功能完成；右侧展示所有流程，通过滚动或者点击，可以切换分类；鼠标hover时，展示描述

src/views/bpm/processInstance/create/index.vue

@@ -1,46 +1,74 @@
 <template>
   <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
-  <ContentWrap
+  <template v-if="!selectProcessDefinition">
-    class="process-definition-container position-relative pb-20px"
+    <el-input
-    v-if="!selectProcessDefinition"
+      v-model="currentSearchKey"
-    v-loading="loading"
+      class="!w-50% mb-15px"
-  >
+      placeholder="请输入流程名称"
-    <el-row :gutter="20" class="!flex-nowrap">
+      clearable
-      <el-col :span="5">
+      @keyup.enter="handleQuery"
-        <div class="flex flex-col">
+      @clear="handleClear"
-          <div
+    >
-            v-for="category in categoryList"
+      <template #prefix>
-            :key="category.code"
+        <Icon icon="ep:search" />
-            class="flex items-center p-10px cursor-pointer text-14px rounded-md"
+      </template>
-            :class="categoryActive.code === category.code ? 'text-#3e7bff bg-#e8eeff' : ''"
+    </el-input>
-            @click="handleCategoryClick(category)"
+    <ContentWrap
-          >
+      :class="{ 'process-definition-container': filteredProcessDefinitionList?.length }"
-            {{ category.name }}
+      class="position-relative pb-20px h-700px"
+      v-loading="loading"
+    >
+      <el-row v-if="filteredProcessDefinitionList?.length" :gutter="20" class="!flex-nowrap">
+        <el-col :span="5">
+          <div class="flex flex-col">
+            <div
+              v-for="category in categoryList"
+              :key="category.code"
+              class="flex items-center p-10px cursor-pointer text-14px rounded-md"
+              :class="categoryActive.code === category.code ? 'text-#3e7bff bg-#e8eeff' : ''"
+              @click="handleCategoryClick(category)"
+            >
+              {{ category.name }}
+            </div>
           </div>
-        </div>
+        </el-col>
-      </el-col>
+        <el-col :span="19">
-      <el-col :span="19">
+          <el-scrollbar ref="scrollWrapper" height="700">
-        <h3 class="text-16px font-bold mb-10px mt-5px">{{ categoryActive.name }}</h3>
+            <div
-        <div class="grid grid-cols-3 gap3" v-if="categoryProcessDefinitionList.length">
+              class="mb-20px pl-10px"
-          <el-card
+              v-for="(definitions, title) in processDefinitionGroup"
-            v-for="definition in categoryProcessDefinitionList"
+              :key="title"
-            :key="definition.id"
+              :ref="`category-${title}`"
-            shadow="hover"
+            >
-            class="cursor-pointer definition-item-card"
+              <h3 class="text-18px font-bold mb-10px mt-5px">{{ title }}</h3>
-            @click="handleSelect(definition)"
+              <div class="grid grid-cols-3 gap3">
-          >
+                <el-tooltip
-            <template #default>
+                  v-for="definition in definitions"
-              <div class="flex">
+                  :key="definition.id"
-                <el-image :src="definition.icon" class="w-32px h-32px" />
+                  :content="definition.description"
-                <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+                  placement="top"
+                >
+                  <el-card
+                    shadow="hover"
+                    class="cursor-pointer definition-item-card"
+                    @click="handleSelect(definition)"
+                  >
+                    <template #default>
+                      <div class="flex">
+                        <el-image :src="definition.icon" class="w-32px h-32px" />
+                        <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+                      </div>
+                    </template>
+                  </el-card>
+                </el-tooltip>
               </div>
-            </template>
+            </div>
-          </el-card>
+          </el-scrollbar>
-        </div>
+        </el-col>
-        <el-empty v-else />
+      </el-row>
-      </el-col>
+      <el-empty class="!py-200px" :image-size="200" description="没有找到搜索结果" v-else />
-    </el-row>
+    </ContentWrap>
-  </ContentWrap>
+  </template>
 
   <!-- 第二步，填写表单，进行流程的提交 -->
   <ProcessDefinitionDetail
@@ -56,12 +84,14 @@ import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { CategoryApi } from '@/api/bpm/category'
 import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
+import { groupBy } from 'lodash-es'
 
 defineOptions({ name: 'BpmProcessInstanceCreate' })
 
+const { proxy } = getCurrentInstance() as any
 const route = useRoute() // 路由
 const message = useMessage() // 消息
-
+const currentSearchKey = ref('') // 当前搜索关键字
 const processInstanceId: any = route.query.processInstanceId
 const loading = ref(true) // 加载中
 const categoryList: any = ref([]) // 分类的列表
@@ -71,15 +101,10 @@ const processDefinitionList = ref([]) // 流程定义的列表
 const getList = async () => {
   loading.value = true
   try {
-    // 流程分类
+    // 所有流程分类数据
-    categoryList.value = await CategoryApi.getCategorySimpleList()
+    await getCategoryList()
-    if (categoryList.value.length > 0) {
+    // 所有流程定义数据
-      categoryActive.value = categoryList.value[0]
+    await getDefinitionList()
-    }
-    // 流程定义
-    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
-      suspensionState: 1
-    })
 
     // 如果 processInstanceId 非空，说明是重新发起
     if (processInstanceId?.length > 0) {
@@ -102,11 +127,149 @@ const getList = async () => {
   }
 }
 
-/** 选中分类对应的流程定义列表 */
+// 获取所有流程分类数据
-const categoryProcessDefinitionList: any = computed(() => {
+const getCategoryList = async () => {
-  return processDefinitionList.value.filter(
+  try {
-    (item: any) => item.category == categoryActive.value.code
+    // 流程分类
-  )
+    categoryList.value = await CategoryApi.getCategorySimpleList()
+    if (categoryList.value.length > 0) {
+      categoryActive.value = categoryList.value[0]
+    }
+  } finally {
+  }
+}
+
+// 获取所有流程定义数据
+const getDefinitionList = async () => {
+  try {
+    // 流程定义
+    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
+      suspensionState: 1
+    })
+    /* 测试数据 */
+    // processDefinitionList.value = [
+    //   {
+    //     id: 'business:3:fab1dceb-95be-11ef-8c7d-00a6181404fd',
+    //     version: 3,
+    //     name: '商务管理',
+    //     key: 'business',
+    //     icon: 'https://picsum.photos/200?r=2',
+    //     description: '商务管理',
+    //     category: 'test0',
+    //     categoryName: '分类0',
+    //     formType: 10,
+    //     formId: 27,
+    //     formName: null,
+    //     formConf:
+    //       '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":false,"innerText":"提交"}}',
+    //     formFields: [
+    //       '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
+    //       '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}',
+    //       '{"type":"datePicker","field":"Finom2tsbwbpadc","title":"请假时间段","info":"","$required":false,"props":{"type":"datetimerange"},"_fc_id":"id_F028m2tsbwbpaec","name":"ref_F0okm2tsbwbpafc","display":true,"hidden":false,"_fc_drag_tag":"dateRange"}'
+    //     ],
+    //     formCustomCreatePath: '',
+    //     formCustomViewPath: '',
+    //     suspensionState: 1,
+    //     deploymentTime: null,
+    //     bpmnXml: null,
+    //     startUserSelectTasks: null
+    //   },
+    //   {
+    //     id: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
+    //     version: 1,
+    //     name: 'oa_leave',
+    //     key: 'oa_leave',
+    //     icon: null,
+    //     description: 'oa_leave',
+    //     category: 'etst',
+    //     categoryName: '分类1',
+    //     formType: 20,
+    //     formId: null,
+    //     formName: null,
+    //     formConf: null,
+    //     formFields: null,
+    //     formCustomCreatePath: '/bpm/oa/leave/create',
+    //     formCustomViewPath: '/bpm/oa/leave/detail',
+    //     suspensionState: 1,
+    //     deploymentTime: null,
+    //     bpmnXml: null,
+    //     startUserSelectTasks: null
+    //   },
+    //   {
+    //     id: 'oa_leave:3:c9d06889-94fd-11ef-bf08-00a6181404fd',
+    //     version: 3,
+    //     name: '请假流程',
+    //     key: 'oa_leave',
+    //     icon: 'https://picsum.photos/200?r=1',
+    //     description: '请假流程',
+    //     category: 'test3',
+    //     categoryName: '分类3',
+    //     formType: 10,
+    //     formId: 27,
+    //     formName: null,
+    //     formConf:
+    //       '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
+    //     formFields: [
+    //       '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
+    //       '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
+    //     ],
+    //     formCustomCreatePath: 'bpm/oa/leave/create',
+    //     formCustomViewPath: 'bpm/oa/leave/create',
+    //     suspensionState: 1,
+    //     deploymentTime: null,
+    //     bpmnXml: null,
+    //     startUserSelectTasks: null
+    //   }
+    // ]
+    /* 测试数据 */
+    // processDefinitionList.value = [
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value
+    // ]
+    // 初始化过滤列表为全部流程定义
+    filteredProcessDefinitionList.value = processDefinitionList.value
+  } finally {
+  }
+}
+
+const filteredProcessDefinitionList = ref([]) // 用于存储搜索过滤后的流程定义
+// 直接进行前端搜索
+const handleQuery = () => {
+  if (currentSearchKey.value.trim()) {
+    // 如果有搜索关键字，进行过滤
+    filteredProcessDefinitionList.value = processDefinitionList.value.filter(
+      (definition: any) =>
+        definition.name.toLowerCase().includes(currentSearchKey.value.toLowerCase()) // 假设搜索依据是流程定义的名称
+    )
+  } else {
+    // 如果没有搜索关键字，恢复所有数据
+    filteredProcessDefinitionList.value = processDefinitionList.value
+  }
+}
+
+// 监听input `clearable` 事件
+const handleClear = () => {
+  filteredProcessDefinitionList.value = processDefinitionList.value
+}
+
+// 流程定义的分组
+const processDefinitionGroup: any = computed(() => {
+  if (!processDefinitionList.value?.length) return {}
+  return groupBy(filteredProcessDefinitionList.value, 'categoryName')
 })
 
 // ========== 表单相关 ==========
@@ -122,8 +285,16 @@ const handleSelect = async (row, formVariables?) => {
   processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
 }
 // 左侧分类切换
-const handleCategoryClick = (val: number) => {
+const handleCategoryClick = (category) => {
-  categoryActive.value = val
+  categoryActive.value = category
+  const categoryRef = proxy.$refs[`category-${category.name}`] // 获取点击分类对应的 DOM 元素
+  if (categoryRef?.length) {
+    const scrollWrapper = proxy.$refs.scrollWrapper // 获取右侧滚动容器
+    const categoryOffsetTop = categoryRef[0].offsetTop
+
+    // 滚动到对应位置
+    scrollWrapper.scrollTo({ top: categoryOffsetTop, behavior: 'smooth' })
+  }
 }
 
 /** 初始化 */