【功能新增】工作流：流程分类增加批量修改 sort 界面

Author: YunaiV

src/api/bpm/category/index.ts

@@ -36,6 +36,16 @@ export const CategoryApi = {
     return await request.put({ url: `/bpm/category/update`, data })
   },
 
+  // 批量修改流程分类的排序
+  updateCategorySortBatch: async (ids: number[]) => {
+    return await request.put({
+      url: `/bpm/category/update-sort-batch`,
+      params: {
+        ids: ids.join(',')
+      }
+    })
+  },
+
   // 删除流程分类
   deleteCategory: async (id: number) => {
     return await request.delete({ url: `/bpm/category/delete?id=` + id })

src/views/bpm/model/CategoryDraggableModel.vue

@@ -465,13 +465,13 @@ const handleRenameConfirm = async () => {
   }
   // 发起修改
   await CategoryApi.updateCategory(renameCategoryForm.value as CategoryVO)
-  message.success('修改成功')
+  message.success('重命名成功')
   // 刷新列表
   renameCategoryVisible.value = false
   emit('success')
 }
 
-// 删除分类
+/** 删除分类 */
 const handleDeleteCategory = async () => {
   try {
     if (props.categoryInfo.modelList.length > 0) {
@@ -486,7 +486,7 @@ const handleDeleteCategory = async () => {
   } catch {}
 }
 
-// 添加流程模型弹窗
+/** 添加流程模型弹窗 */
 const modelFormRef = ref()
 const openModelForm = (type: string, id?: number) => {
   modelFormRef.value.open(type, id)

src/views/bpm/model/index.vue

@@ -52,8 +52,8 @@
         </el-form-item>
       </el-form>
       <div class="mr-20px" v-else>
-        <el-button @click="cancelSort"> 取 消 </el-button>
-        <el-button type="primary" @click="saveSort"> 保存排序 </el-button>
+        <el-button @click="handleCategorySortCancel"> 取 消 </el-button>
+        <el-button type="primary" @click="handleCategorySortSubmit"> 保存排序 </el-button>
       </div>
     </div>
 
@@ -106,7 +106,7 @@ import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
 
-const categoryFormRef = ref()
+const message = useMessage() // 消息弹窗
 const loading = ref(true) // 列表的加载中
 const isCategorySorting = ref(false) // 是否 category 正处于排序状态
 const queryParams = reactive({
@@ -161,37 +161,42 @@ const handleCommand = (command: string) => {
       handleAddCategory()
       break
     case 'handleSort':
-      handleSort()
+      handleCategorySort()
       break
     default:
       break
   }
 }
 
 /** 新建分类 */
+const categoryFormRef = ref()
 const handleAddCategory = () => {
   categoryFormRef.value.open('create')
 }
 
-// TODO 芋艿：需要实现
-/** 分类排序 */
-const handleSort = () => {
+/** 分类排序的提交 */
+const handleCategorySort = () => {
   // 保存初始数据
   originalData.value = cloneDeep(categoryGroup.value)
   isCategorySorting.value = true
 }
 
-// TODO 芋艿：需要实现
-/** 取消排序 */
-const cancelSort = () => {
+/** 分类排序的取消 */
+const handleCategorySortCancel = () => {
   // 恢复初始数据
   categoryGroup.value = cloneDeep(originalData.value)
   isCategorySorting.value = false
 }
 
 /** 保存排序 */
-const saveSort = () => {
-  // TODO 芋艿：这里需要一个保存分类排序接口
+const handleCategorySortSubmit = async () => {
+  // 保存排序
+  const ids = categoryGroup.value.map((item: any) => item.id)
+  await CategoryApi.updateCategorySortBatch(ids)
+  // 刷新列表
+  isCategorySorting.value = false
+  message.success('排序分类成功')
+  await getList()
 }
 
 /** 加载数据 */