BPM：新增流程分类表，替代现有的 bpm_category 数据字典

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

@@ -1,35 +1,49 @@
 <template>
   <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
-  <ContentWrap v-if="!selectProcessInstance">
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="流程名称" align="center" prop="name" />
-      <el-table-column label="流程分类" align="center" prop="category">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
-        </template>
-      </el-table-column>
-      <el-table-column label="流程版本" align="center" prop="version">
-        <template #default="scope">
-          <el-tag>v{{ scope.row.version }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="流程描述" align="center" prop="description" />
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button link type="primary" @click="handleSelect(scope.row)">
-            <Icon icon="ep:plus" /> 选择
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+  <ContentWrap v-if="!selectProcessDefinition" v-loading="loading">
+    <el-tabs tab-position="left" v-model="categoryActive">
+      <el-tab-pane
+        :label="category.name"
+        :name="category.code"
+        :key="category.code"
+        v-for="category in categoryList"
+      >
+        <el-row :gutter="20">
+          <el-col
+            :lg="6"
+            :sm="12"
+            :xs="24"
+            v-for="definition in categoryProcessDefinitionList"
+            :key="definition.id"
+          >
+            <el-card
+              shadow="hover"
+              class="mb-20px cursor-pointer"
+              @click="handleSelect(definition)"
+            >
+              <template #default>
+                <div class="flex">
+                  <!-- TODO 芋艿：流程图，增加 icon -->
+                  <el-image
+                    src="http://test.yudao.iocoder.cn/96c787a2ce88bf6d0ce3cd8b6cf5314e80e7703cd41bf4af8cd2e2909dbd6b6d.png"
+                    class="w-32px h-32px"
+                  />
+                  <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+                </div>
+              </template>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
   </ContentWrap>
 
   <!-- 第二步，填写表单，进行流程的提交 -->
   <ContentWrap v-else>
     <el-card class="box-card">
       <div class="clearfix">
-        <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
-        <el-button style="float: right" type="primary" @click="selectProcessInstance = undefined">
+        <span class="el-icon-document">申请信息【{{ selectProcessDefinition.name }}】</span>
+        <el-button style="float: right" type="primary" @click="selectProcessDefinition = undefined">
           <Icon icon="ep:delete" /> 选择其它流程
         </el-button>
       </div>
@@ -47,35 +61,46 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { DICT_TYPE } from '@/utils/dict'
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import { CategoryApi } from '@/api/bpm/category'
 
 defineOptions({ name: 'BpmProcessInstanceCreate' })
 
 const router = useRouter() // 路由
 const message = useMessage() // 消息
 
-// ========== 列表相关 ==========
-const loading = ref(true) // 列表的加载中
-const list = ref([]) // 列表的数据
-const queryParams = reactive({
-  suspensionState: 1
-})
+const loading = ref(true) // 加载中
+const categoryList = ref([]) // 分类的列表
+const categoryActive = ref('') // 选中的分类
+const processDefinitionList = ref([]) // 流程定义的列表
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    list.value = await DefinitionApi.getProcessDefinitionList(queryParams)
+    // 流程分类
+    categoryList.value = await CategoryApi.getCategorySimpleList()
+    if (categoryList.value.length > 0) {
+      categoryActive.value = categoryList.value[0].code
+    }
+    // 流程定义
+    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
+      suspensionState: 1
+    })
   } finally {
     loading.value = false
   }
 }
 
+/** 选中分类对应的流程定义列表 */
+const categoryProcessDefinitionList = computed(() => {
+  return processDefinitionList.value.filter((item) => item.category == categoryActive.value)
+})
+
 // ========== 表单相关 ==========
 const bpmnXML = ref(null) // BPMN 数据
 const fApi = ref<ApiAttrs>()
@@ -84,12 +109,12 @@ const detailForm = ref({
   rule: [],
   option: {}
 })
-const selectProcessInstance = ref() // 选择的流程实例
+const selectProcessDefinition = ref() // 选择的流程定义
 
 /** 处理选择流程的按钮操作 **/
 const handleSelect = async (row) => {
   // 设置选择的流程
-  selectProcessInstance.value = row
+  selectProcessDefinition.value = row
 
   // 情况一：流程表单
   if (row.formType == 10) {
@@ -108,14 +133,14 @@ const handleSelect = async (row) => {
 
 /** 提交按钮 */
 const submitForm = async (formData) => {
-  if (!fApi.value || !selectProcessInstance.value) {
+  if (!fApi.value || !selectProcessDefinition.value) {
     return
   }
   // 提交请求
   fApi.value.btn.loading(true)
   try {
     await ProcessInstanceApi.createProcessInstance({
-      processDefinitionId: selectProcessInstance.value.id,
+      processDefinitionId: selectProcessDefinition.value.id,
       variables: formData
     })
     // 提示

src/views/bpm/processInstance/index.vue

@@ -36,10 +36,10 @@
           class="!w-240px"
         >
           <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
           />
         </el-select>
       </el-form-item>
@@ -89,11 +89,7 @@
     <el-table v-loading="loading" :data="list">
       <el-table-column label="流程编号" align="center" prop="id" width="300px" />
       <el-table-column label="流程名称" align="center" prop="name" />
-      <el-table-column label="流程分类" align="center" prop="category">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
-        </template>
-      </el-table-column>
+      <el-table-column label="流程分类" align="center" prop="categoryName" />
       <el-table-column label="当前审批任务" align="center" prop="tasks">
         <template #default="scope">
           <el-button type="primary" v-for="task in scope.row.tasks" :key="task.id" link>
@@ -156,6 +152,7 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import { ElMessageBox } from 'element-plus'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { CategoryApi } from '@/api/bpm/category'
 
 defineOptions({ name: 'BpmProcessInstance' })
 
@@ -176,6 +173,7 @@ const queryParams = reactive({
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
+const categoryList = ref([]) // 流程分类列表
 
 /** 查询列表 */
 const getList = async () => {
@@ -240,7 +238,8 @@ onActivated(() => {
 })
 
 /** 初始化 **/
-onMounted(() => {
-  getList()
+onMounted(async () => {
+  await getList()
+  categoryList.value = await CategoryApi.getCategorySimpleList()
 })
 </script>