chore: 优化类别管理拖拽

src/components/base/AppList.vue

@@ -70,6 +70,7 @@ const fetchList = (isReset = false) => {
   //   }
   // }
   loading.value = true
+  return (
     httpRequest(requestParams)
       .then((res: any) => {
         const { list = [], total = 0 } = callback ? callback(res.data) : res.data || {}
@@ -83,12 +84,13 @@ const fetchList = (isReset = false) => {
       .finally(() => {
         loading.value = false
       })
+  )
 }
 
 // 搜索
 const search = () => {
   page.currentPage = 1
-  fetchList()
+  return fetchList()
 }
 
 // 重置
@@ -98,12 +100,12 @@ const reset = () => {
   // 初始化页码
   page.currentPage = 1
   // 刷新列表
-  fetchList(true)
+  return fetchList(true)
 }
 
 // 刷新
 const refetch = (isForce = false) => {
-  isForce ? reset() : fetchList()
+  return isForce ? reset() : fetchList()
 }
 
 // 页数改变
@@ -117,7 +119,7 @@ onMounted(() => {
   fetchList()
 })
 
-defineExpose({ refetch })
+defineExpose({ refetch, tableRef })
 </script>
 
 <template>

src/modules/admin/category/views/List.vue

@@ -93,7 +93,8 @@ const handleUpdate = () => {
 // 扁平列表数据
 let tableDataList = $ref<ICategory[]>([])
 // 列表配置
-const listOptions = {
+const listOptions = computed(() => {
+  return {
     remote: {
       httpRequest: getCategoryList,
       params: { type: 'tree', category_name: '' },
@@ -110,8 +111,10 @@ const listOptions = {
       { label: '层级', prop: 'depth', align: 'center' },
       { label: '状态', prop: 'status_name', align: 'center' },
       { label: '操作', slots: 'table-operate', width: 230, align: 'center' }
-  ]
-}
+    ],
+    data: tableData
+  }
+})
 // 数据扁平化
 function flatten(data: any[], pid = '0') {
   return data.reduce((acc: any[], item: any) => {
@@ -142,23 +145,37 @@ function useSortable() {
     },
     onEnd(evt: SortableEvent) {
       const { oldIndex, newIndex } = evt
-      if (oldIndex === undefined || newIndex === undefined) return
+      if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) return
       const draggedRow = tableDataList[oldIndex]
       const relatedRow = tableDataList[newIndex]
-
-      moveCategory({ id: draggedRow.id, brother_id: relatedRow.id, type: 'before' }).then(() => {
+      moveCategory({ id: draggedRow.id, brother_id: relatedRow.id, type: newIndex > oldIndex ? 'after' : 'before' }).then(() => {
+        // 修复拖拽后数据顺序不对的问题
+        if (oldIndex < newIndex) {
+          tableData = []
+        }
         handleUpdate()
       })
     }
   })
 }
+
+// 展开行
+let expandRowKeys = $ref<string[]>([])
+function onExpandChange(row: ICategory, expanded: boolean) {
+  if (expanded) {
+    expandRowKeys.push(row.id)
+  } else {
+    expandRowKeys = expandRowKeys.filter(id => id !== row.id)
+  }
+}
+
 onMounted(() => {
   useSortable()
 })
 </script>
 <template>
   <AppCard title="类别管理">
-    <AppList v-bind="listOptions" :has-pagination="false" row-key="id" ref="appList">
+    <AppList v-bind="listOptions" :has-pagination="false" row-key="id" ref="appList" :expand-row-keys="expandRowKeys" @expand-change="onExpandChange">
       <el-button type="primary" @click="handleAddCategory">新增类别</el-button>
       <template #table-drag>
         <el-icon><Operation /></el-icon>
@@ -170,13 +187,5 @@ onMounted(() => {
       </template>
     </AppList>
   </AppCard>
-  <AddDialog
-    v-model:dialogVisible="dialogVisible"
-    @updatePage="handleUpdate"
-    :editData="editData"
-    :isEdit="isEdit"
-    :title="title"
-    :prevCategoryName="prevCategoryName"
-    v-if="dialogVisible"
-  />
+  <AddDialog v-model:dialogVisible="dialogVisible" @updatePage="handleUpdate" :editData="editData" :isEdit="isEdit" :title="title" :prevCategoryName="prevCategoryName" v-if="dialogVisible" />
 </template>