chore: 优化类别管理拖拽

src/components/base/AppList.vue

@@ -70,25 +70,27 @@ const fetchList = (isReset = false) => {
   //   }
   // }
   loading.value = true
-  httpRequest(requestParams)
-    .then((res: any) => {
-      const { list = [], total = 0 } = callback ? callback(res.data) : res.data || {}
-      page.total = total
-      dataList.value = list
-    })
-    // .catch(() => {
-    //   page.total = 0
-    //   dataList.value = []
-    // })
-    .finally(() => {
-      loading.value = false
-    })
+  return (
+    httpRequest(requestParams)
+      .then((res: any) => {
+        const { list = [], total = 0 } = callback ? callback(res.data) : res.data || {}
+        page.total = total
+        dataList.value = list
+      })
+      // .catch(() => {
+      //   page.total = 0
+      //   dataList.value = []
+      // })
+      .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,25 +93,28 @@ const handleUpdate = () => {
 // 扁平列表数据
 let tableDataList = $ref<ICategory[]>([])
 // 列表配置
-const listOptions = {
-  remote: {
-    httpRequest: getCategoryList,
-    params: { type: 'tree', category_name: '' },
-    callback(data: ICategory[]) {
-      tableData = data
-      tableDataList = flatten(data)
-      return { list: data }
-    }
-  },
-  filters: [{ type: 'input', prop: 'name', label: '类别名称:' }],
-  columns: [
-    { align: 'center', slots: 'table-drag' },
-    { label: '类别名称', prop: 'category_name', align: 'center' },
-    { label: '层级', prop: 'depth', align: 'center' },
-    { label: '状态', prop: 'status_name', align: 'center' },
-    { label: '操作', slots: 'table-operate', width: 230, align: 'center' }
-  ]
-}
+const listOptions = computed(() => {
+  return {
+    remote: {
+      httpRequest: getCategoryList,
+      params: { type: 'tree', category_name: '' },
+      callback(data: ICategory[]) {
+        tableData = data
+        tableDataList = flatten(data)
+        return { list: data }
+      }
+    },
+    filters: [{ type: 'input', prop: 'name', label: '类别名称:' }],
+    columns: [
+      { align: 'center', slots: 'table-drag' },
+      { label: '类别名称', prop: 'category_name', align: 'center' },
+      { 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>