feat: 优化交互细节、删除流程分类接口联调

Author: GoldenZqqq

src/views/bpm/model/CategoryDraggableModel.vue

@@ -1,10 +1,11 @@
 <template>
   <!-- 默认使其全部展开 -->
   <el-collapse v-model="activeCollapse">
-    <el-collapse-item :name="categoryInfo.id">
+    <el-collapse-item :name="categoryInfo.id" :disabled="categoryInfo.modelList.length === 0">
       <template #icon="{ isActive }">
         <div class="flex-1 flex" v-if="!isCategorySorting">
           <div
+            v-if="categoryInfo.modelList.length > 0"
             class="ml-20px flex items-center"
             :class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
           >
@@ -230,6 +231,7 @@
 </template>
 
 <script lang="ts" setup>
+import { CategoryApi } from '@/api/bpm/category'
 import Sortable from 'sortablejs'
 import { propTypes } from '@/utils/propTypes'
 import { formatDate } from '@/utils/formatTime'
@@ -409,8 +411,7 @@ const handleSort = () => {
 }
 
 const saveSort = () => {
-  // 接口调用
-  console.log(tableData.value)
+  // TODO 芋艿：这里需要一个保存分类下模型排序接口
   // 刷新列表
   emit('success')
   isModelSorting.value = false
@@ -451,6 +452,9 @@ const initSort = () => {
 // 更新表格数据
 const updateTableData = () => {
   tableData.value = cloneDeep(props.categoryInfo.modelList)
+  if (props.categoryInfo.modelList.length > 0) {
+    activeCollapse.value = [props.categoryInfo.id]
+  }
 }
 
 const renameVal = ref('')
@@ -463,15 +467,27 @@ const handleRenameConfirm = () => {
 
 // 删除分类
 const handleDeleteGroup = async () => {
-  if (props.categoryInfo.modelList.length > 0) {
-    return message.warning('该分类下仍有流程定义,不允许删除')
-  }
-  await message.confirm('确认删除分类吗?')
-  // 实际调用接口删除
+  try {
+    if (props.categoryInfo.modelList.length > 0) {
+      return message.warning('该分类下仍有流程定义,不允许删除')
+    }
+    await message.confirm('确认删除分类吗?')
+    // 发起删除
+    await CategoryApi.deleteCategory(props.categoryInfo.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    emit('success')
+  } catch {}
 }
 
 watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true })
-
+watch(
+  () => props.isCategorySorting,
+  (val) => {
+    if (val) activeCollapse.value = []
+  },
+  { immediate: true }
+)
 defineExpose({
   activeCollapse
 })

src/views/bpm/model/index_new.vue

@@ -67,7 +67,7 @@
               ref="categoryDraggableModelRef"
               :isCategorySorting="isCategorySorting"
               :categoryInfo="element"
-              @success="getAllModel"
+              @success="getList"
             />
           </ContentWrap>
         </template>
@@ -76,7 +76,7 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改流程 -->
-  <ModelForm ref="formRef" @success="getAllModel" />
+  <ModelForm ref="formRef" @success="getList" />
   <!-- 表单弹窗：添加/修改分类 -->
   <CategoryForm ref="categoryFormRef" @success="getList" />
   <!-- 弹窗：表单详情 -->
@@ -133,7 +133,7 @@ const getAllModel = async () => {
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
-  getAllModel()
+  getList()
 }
 
 /** 添加/修改操作 */
@@ -171,9 +171,6 @@ const handleSort = () => {
   // 保存初始数据
   originalData.value = cloneDeep(categoryGroup.value)
   isCategorySorting.value = true
-  categoryDraggableModelRef.value?.forEach((element) => {
-    element.activeCollapse = []
-  })
 }
 // 取消排序
 const cancelSort = () => {
@@ -182,7 +179,9 @@ const cancelSort = () => {
   isCategorySorting.value = false
 }
 // 保存排序
-const saveSort = () => {}
+const saveSort = () => {
+  // TODO 芋艿：这里需要一个保存分类排序接口
+}
 
 const getList = async () => {
   loading.value = true