【功能实现】工作流：流程模型的分类、模型读取 list 接口

【功能实现】工作流：流程模型的分类名的修改实现

src/api/bpm/model/index.ts

@@ -26,8 +26,8 @@ export type ModelVO = {
   bpmnXml: string
 }
 
-export const getModelPage = async (params) => {
+export const getModelList = async (name: string | undefined) => {
-  return await request.get({ url: '/bpm/model/page', params })
+  return await request.get({ url: '/bpm/model/list', params: { name } })
 }
 
 export const getModel = async (id: string) => {

src/views/bpm/model/CategoryDraggableModel.vue

@@ -39,7 +39,10 @@
             <Icon icon="fa:plus" class="mr-5px" />
             新建
           </el-button>
-          <el-dropdown @command="(command) => handleCategoryCommand(command)" placement="bottom">
+          <el-dropdown
+            @command="(command) => handleCategoryCommand(command, categoryInfo)"
+            placement="bottom"
+          >
             <el-button link type="info">
               <Icon icon="ep:setting" class="mr-5px" />
               分类
@@ -47,7 +50,7 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
-                <el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
+                <el-dropdown-item command="handleDeleteCategory"> 删除该类 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -178,7 +181,7 @@
             </el-button>
             <el-dropdown
               class="!align-middle ml-5px"
-              @command="(command) => handleCommand(command, scope.row)"
+              @command="(command) => handleModelCommand(command, scope.row)"
               v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
             >
               <el-button type="primary" link>更多</el-button>
@@ -215,27 +218,28 @@
   </el-collapse-transition>
 
   <!-- 弹窗：重命名分类 -->
-  <Dialog :fullscreen="false" class="rename-dialog" v-model="renameVisible" width="400">
+  <Dialog :fullscreen="false" class="rename-dialog" v-model="renameCategoryVisible" width="400">
     <template #title>
       <div class="pl-10px font-bold text-18px"> 重命名分类 </div>
     </template>
     <div class="px-30px">
-      <el-input v-model="renameVal" />
+      <el-input v-model="renameCategoryForm.name" />
     </div>
     <template #footer>
       <div class="pr-25px pb-25px">
-        <el-button @click="renameVisible = false">取 消</el-button>
+        <el-button @click="renameCategoryVisible = false">取 消</el-button>
         <el-button type="primary" @click="handleRenameConfirm">确 定</el-button>
       </div>
     </template>
   </Dialog>
+
   <!-- 表单弹窗：添加流程模型 -->
   <ModelForm :categoryId="categoryInfo.code" ref="modelFormRef" @success="emit('success')" />
 </template>
 
 <script lang="ts" setup>
 import ModelForm from './ModelForm.vue'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import Sortable from 'sortablejs'
 import { propTypes } from '@/utils/propTypes'
 import { formatDate } from '@/utils/formatTime'
@@ -250,7 +254,6 @@ import { cloneDeep } from 'lodash-es'
 
 defineOptions({ name: 'BpmModel' })
 
-const renameVisible = ref(false)
 const props = defineProps({
   // 分类后的数据
   categoryInfo: propTypes.object.def([]),
@@ -267,8 +270,9 @@ const isModelSorting = ref(false) // 是否正处于排序状态
 const tableData: any = ref([])
 const originalData: any = ref([]) // 原始数据
 const isExpand = ref(false) // 是否处于展开状态
+
 /** '更多'操作按钮 */
-const handleCommand = (command: string, row: any) => {
+const handleModelCommand = (command: string, row: any) => {
   switch (command) {
     case 'handleDefinitionList':
       handleDefinitionList(row)
@@ -284,15 +288,15 @@ const handleCommand = (command: string, row: any) => {
   }
 }
 
-/* '分类'操作按钮 */
+/** '分类'操作按钮 */
-const handleCategoryCommand = (command: string) => {
+const handleCategoryCommand = async (command: string, row: any) => {
   switch (command) {
     case 'handleRename':
-      renameVal.value = props.categoryInfo.name
+      renameCategoryForm.value = await CategoryApi.getCategory(row.id)
-      renameVisible.value = true
+      renameCategoryVisible.value = true
       break
-    case 'handleDeleteGroup':
+    case 'handleDeleteCategory':
-      handleDeleteGroup()
+      await handleDeleteCategory()
       break
     default:
       break
@@ -364,7 +368,7 @@ const handleDeploy = async (row: any) => {
 }
 
 /** 跳转到指定流程定义列表 */
-const handleDefinitionList = (row) => {
+const handleDefinitionList = (row: any) => {
   push({
     name: 'BpmProcessDefinition',
     query: {
@@ -450,16 +454,25 @@ const updateTableData = () => {
   }
 }
 
-const renameVal = ref('')
+/** 重命名弹窗确定 */
-// 重命名弹窗确定
+const renameCategoryVisible = ref(false)
-const handleRenameConfirm = () => {
+const renameCategoryForm = ref({
-  if (!renameVal.value) {
+  name: ''
+})
+const handleRenameConfirm = async () => {
+  if (renameCategoryForm.value?.name.length === 0) {
     return message.warning('请输入名称')
   }
+  // 发起修改
+  await CategoryApi.updateCategory(renameCategoryForm.value as CategoryVO)
+  message.success('修改成功')
+  // 刷新列表
+  renameCategoryVisible.value = false
+  emit('success')
 }
 
 // 删除分类
-const handleDeleteGroup = async () => {
+const handleDeleteCategory = async () => {
   try {
     if (props.categoryInfo.modelList.length > 0) {
       return message.warning('该分类下仍有流程定义,不允许删除')

src/views/bpm/model/index.vue

@@ -12,9 +12,9 @@
         label-width="68px"
         @submit.prevent
       >
-        <el-form-item align="right" prop="key" class="ml-auto">
+        <el-form-item prop="name" class="ml-auto">
           <el-input
-            v-model="queryParams.key"
+            v-model="queryParams.name"
             placeholder="搜索流程"
             clearable
             @keyup.enter="handleQuery"
@@ -25,12 +25,12 @@
             </template>
           </el-input>
         </el-form-item>
+        <!-- 右上角：新建模型、更多操作 -->
         <el-form-item>
           <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
             <Icon icon="ep:plus" class="mr-5px" /> 新建模型
           </el-button>
         </el-form-item>
-
         <el-form-item>
           <el-dropdown @command="(command) => handleCommand(command)" placement="bottom-end">
             <el-button class="w-30px" plain>
@@ -59,7 +59,7 @@
 
     <el-divider />
 
-    <!-- 分类卡片组 -->
+    <!-- 按照分类，展示其所属的模型列表 -->
     <div class="px-15px">
       <draggable
         :disabled="!isCategorySorting"
@@ -75,7 +75,6 @@
             :key="element.id"
           >
             <CategoryDraggableModel
-              ref="categoryDraggableModelRef"
               :isCategorySorting="isCategorySorting"
               :categoryInfo="element"
               @success="getList"
@@ -88,7 +87,7 @@
 
   <!-- 表单弹窗：添加/修改流程 -->
   <ModelForm ref="formRef" @success="getList" />
-  <!-- 表单弹窗：添加/修改分类 -->
+  <!-- 表单弹窗：添加分类 -->
   <CategoryForm ref="categoryFormRef" @success="getList" />
   <!-- 弹窗：表单详情 -->
   <Dialog title="表单详情" v-model="formDetailVisible" width="800">
@@ -107,34 +106,30 @@ import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
 
-const categoryDraggableModelRef = ref()
 const categoryFormRef = ref()
 const loading = ref(true) // 列表的加载中
-const isCategorySorting = ref(false) // 是否正处于排序状态
+const isCategorySorting = ref(false) // 是否 category 正处于排序状态
 const queryParams = reactive({
-  pageNo: 1,
+  name: undefined
-  pageSize: 10,
-  key: undefined,
-  name: undefined,
-  category: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryGroup: any = ref([]) // 按照category分组的数据
+const categoryGroup: any = ref([]) // 按照 category 分组的数据
-const originalData: any = ref([])
+const originalData: any = ref([]) // 原始数据
-// 查询所有分类数据
+
+/** 查询所有分类 */
 const getAllCategory = async () => {
-  // TODO 芋艿：这里需要一个不分页查全部的流程分类接口
+  const list = await CategoryApi.getCategorySimpleList()
-  const data = await CategoryApi.getCategoryPage(queryParams)
+  categoryGroup.value = list.map((item: any) => ({ ...item, modelList: [] }))
-  categoryGroup.value = data.list.map((item) => ({ ...item, modelList: [] }))
 }
 
 /** 查询所有流程模型接口 */
 const getAllModel = async () => {
-  // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
+  // 查询所有流程模型
-  const data = await ModelApi.getModelPage(queryParams)
+  const list = await ModelApi.getModelList(queryParams.name)
-  const groupedData = groupBy(data.list, 'categoryName')
+  // 按照 categoryName 分组
+  const groupedData = groupBy(list, 'categoryName')
   Object.keys(groupedData).forEach((key) => {
-    const category = categoryGroup.value.find((item) => item.name === key)
+    const category = categoryGroup.value.find((item: any) => item.name === key)
     if (category) {
       category.modelList = groupedData[key]
     }
@@ -143,7 +138,6 @@ const getAllModel = async () => {
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
-  queryParams.pageNo = 1
   getList()
 }
 
@@ -152,6 +146,7 @@ const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
+
 /** 流程表单的详情按钮操作 */
 const formDetailVisible = ref(false)
 const formDetailPreview = ref({
@@ -173,27 +168,33 @@ const handleCommand = (command: string) => {
   }
 }
 
-// 新建分类
+/** 新建分类 */
 const handleAddCategory = () => {
   categoryFormRef.value.open('create')
 }
-// 分类排序
+
+// TODO 芋艿：需要实现
+/** 分类排序 */
 const handleSort = () => {
   // 保存初始数据
   originalData.value = cloneDeep(categoryGroup.value)
   isCategorySorting.value = true
 }
-// 取消排序
+
+// TODO 芋艿：需要实现
+/** 取消排序 */
 const cancelSort = () => {
   // 恢复初始数据
   categoryGroup.value = cloneDeep(originalData.value)
   isCategorySorting.value = false
 }
-// 保存排序
+
+/** 保存排序 */
 const saveSort = () => {
   // TODO 芋艿：这里需要一个保存分类排序接口
 }
 
+/** 加载数据 */
 const getList = async () => {
   loading.value = true
   try {
@@ -205,7 +206,7 @@ const getList = async () => {
 }
 
 /** 初始化 **/
-onMounted(async () => {
+onMounted(() => {
   getList()
 })
 </script>

src/views/bpm/model/index_old.vue

@@ -252,7 +252,7 @@ const categoryList = ref([]) // 流程分类列表
 const getList = async () => {
   loading.value = true
   try {
-    const data = await ModelApi.getModelPage(queryParams)
+    const data = await ModelApi.getModelList(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {