From 3c28ba67ef1ea8434ed605697a9fa1f26f13bb0b Mon Sep 17 00:00:00 2001
From: xuliangzhan <xu_liangzhan@163.com>
Date: Sun, 8 May 2022 14:04:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=91/=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/views/table/tree/Sort.vue | 76 ++++--------------------------
 package.json                       |  2 +-
 packages/table/src/body.ts         | 15 +++++-
 packages/table/src/emits.ts        |  2 +
 types/plugins/pro.d.ts             | 30 +++++++++++-
 5 files changed, 54 insertions(+), 71 deletions(-)

diff --git a/examples/views/table/tree/Sort.vue b/examples/views/table/tree/Sort.vue
index eaf7de607..380d07e18 100644
--- a/examples/views/table/tree/Sort.vue
+++ b/examples/views/table/tree/Sort.vue
@@ -1,16 +1,14 @@
 <template>
   <div>
     <p class="tip">
-      实现树结构深层排序<br>
+      树结构排序<br>
     </p>
 
     <vxe-table
-      max-height="600"
+      height="600"
       :loading="demo1.loading"
       :data="demo1.tableData"
-      :sort-config="{remote: true}"
-      :tree-config="{children: 'children'}"
-      @sort-change="sortChangeEvent">
+      :tree-config="{transform: true, rowField: 'id', parentField: 'parentId'}">
       <vxe-column field="id" title="ID" width="80"></vxe-column>
       <vxe-column field="name" title="名称" tree-node></vxe-column>
       <vxe-column field="size" title="大小" width="140"></vxe-column>
@@ -29,15 +27,12 @@
 
 <script lang="ts">
 import { defineComponent, reactive } from 'vue'
-import { VxeTablePropTypes, VxeTableEvents } from '../../../../types/index'
-import XEUtils from 'xe-utils'
 
 export default defineComponent({
   setup () {
     const demo1 = reactive({
-      filterName: '',
       loading: false,
-      originData: [
+      tableData: [
         { id: 1000, parentId: null, name: 'test abc1', type: 'mp3', size: 1024, date: '2020-08-01' },
         { id: 1005, parentId: 1000, name: 'Test2', type: 'mp4', size: null, date: '2021-04-01' },
         { id: 24300, parentId: 1000, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
@@ -48,44 +43,18 @@ export default defineComponent({
         { id: 22200, parentId: 20045, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
         { id: 23666, parentId: null, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
         { id: 24555, parentId: null, name: 'test abc9', type: 'avi', size: 224, date: '2020-10-01' }
-      ],
-      tableData: [] as any[]
+      ]
     })
 
-    // 模拟后台接口
-    const findList = (order?: VxeTablePropTypes.SortOrder) => {
-      demo1.loading = true
-      setTimeout(() => {
-        demo1.loading = false
-        // 将有关联的列表转成树结构
-        if (order === 'asc') {
-          demo1.tableData = XEUtils.toArrayTree(demo1.originData, { key: 'id', parentKey: 'parentId', sortKey: 'date', reverse: false })
-        } else if (order === 'desc') {
-          demo1.tableData = XEUtils.toArrayTree(demo1.originData, { key: 'id', parentKey: 'parentId', sortKey: 'date', reverse: true })
-        } else {
-          demo1.tableData = XEUtils.toArrayTree(demo1.originData, { key: 'id', parentKey: 'parentId' })
-        }
-      }, 300)
-    }
-
-    const sortChangeEvent: VxeTableEvents.SortChange = ({ order }) => {
-      findList(order)
-    }
-
-    findList()
-
     return {
       demo1,
-      sortChangeEvent,
       demoCodes: [
         `
         <vxe-table
-          max-height="600"
+          height="600"
           :loading="demo1.loading"
           :data="demo1.tableData"
-          :sort-config="{remote: true}"
-          :tree-config="{children: 'children'}"
-          @sort-change="sortChangeEvent">
+          :tree-config="{transform: true, rowField: 'id', parentField: 'parentId'}">
           <vxe-column field="id" title="ID" width="80"></vxe-column>
           <vxe-column field="name" title="名称" tree-node></vxe-column>
           <vxe-column field="size" title="大小" width="140"></vxe-column>
@@ -95,15 +64,12 @@ export default defineComponent({
         `,
         `
         import { defineComponent, reactive } from 'vue'
-        import { VxeTablePropTypes, VxeTableEvents } from 'vxe-table'
-        import XEUtils from 'xe-utils'
 
         export default defineComponent({
           setup () {
             const demo1 = reactive({
-              filterName: '',
               loading: false,
-              originData: [
+              tableData: [
                 { id: 1000, parentId: null, name: 'test abc1', type: 'mp3', size: 1024, date: '2020-08-01' },
                 { id: 1005, parentId: 1000, name: 'Test2', type: 'mp4', size: null, date: '2021-04-01' },
                 { id: 24300, parentId: 1000, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
@@ -115,34 +81,10 @@ export default defineComponent({
                 { id: 23666, parentId: null, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
                 { id: 24555, parentId: null, name: 'test abc9', type: 'avi', size: 224, date: '2020-10-01' }
               ],
-              tableData: [] as any[]
             })
 
-            // 模拟后台接口
-            const findList = (order?: VxeTablePropTypes.SortOrder) => {
-              demo1.loading = true
-              setTimeout(() => {
-                demo1.loading = false
-                // 将有关联的列表转成树结构
-                if (order === 'asc') {
-                  demo1.tableData = XEUtils.toArrayTree(demo1.originData, { key: 'id', parentKey: 'parentId', sortKey: 'date', reverse: false })
-                } else if (order === 'desc') {
-                  demo1.tableData = XEUtils.toArrayTree(demo1.originData, { key: 'id', parentKey: 'parentId', sortKey: 'date', reverse: true })
-                } else {
-                  demo1.tableData = XEUtils.toArrayTree(demo1.originData, { key: 'id', parentKey: 'parentId' })
-                }
-              }, 300)
-            }
-
-            const sortChangeEvent: VxeTableEvents.SortChange = ({ order }) => {
-              findList(order)
-            }
-
-            findList()
-
             return {
-              demo1,
-              sortChangeEvent
+              demo1
             }
           }
         })
diff --git a/package.json b/package.json
index f895ccd40..4b9dcdacf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.2.3",
+  "version": "4.2.4-beta.1",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/packages/table/src/body.ts b/packages/table/src/body.ts
index 93aa203ee..cfc1c8627 100644
--- a/packages/table/src/body.ts
+++ b/packages/table/src/body.ts
@@ -347,16 +347,27 @@ export default defineComponent({
           _rowIndex = rest._index
         }
         const params = { $table: $xetable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
+        // 行是否被展开
+        const isExpandRow = expandColumn && rowExpandeds.length && $xetable.findRowIndexOf(rowExpandeds, row) > -1
+        // 树节点是否被展开
+        let isExpandTree = false
+        let rowChildren = []
         // 处理新增状态
         let isNewRow = false
         if (editConfig) {
           isNewRow = $xetable.findRowIndexOf(editStore.insertList, row) > -1
         }
+        if (treeConfig && !scrollYLoad && !transform && treeExpandeds.length) {
+          rowChildren = row[treeOpts.children]
+          isExpandTree = rowChildren && rowChildren.length && $xetable.findRowIndexOf(treeExpandeds, row) > -1
+        }
         rows.push(
           h('tr', {
-            class: ['vxe-body--row', {
+            class: ['vxe-body--row', treeConfig ? `row--level-${rowLevel}` : '', {
               'row--stripe': stripe && ($xetable.getVTRowIndex(row) + 1) % 2 === 0,
               'is--new': isNewRow,
+              'is--expand-row': isExpandRow,
+              'is--expand-tree': isExpandTree,
               'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
               'row--radio': radioOpts.highlight && selectRow === row,
               'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row)
@@ -370,7 +381,7 @@ export default defineComponent({
           }))
         )
         // 如果行被展开了
-        if (expandColumn && rowExpandeds.length && $xetable.findRowIndexOf(rowExpandeds, row) > -1) {
+        if (isExpandRow) {
           let cellStyle
           if (treeConfig) {
             cellStyle = {
diff --git a/packages/table/src/emits.ts b/packages/table/src/emits.ts
index 6d589aaf6..8a60aa4cf 100644
--- a/packages/table/src/emits.ts
+++ b/packages/table/src/emits.ts
@@ -59,8 +59,10 @@ export default [
   'clear-cell-area-merge',
   'header-cell-area-selection',
   'cell-area-selection-start',
+  'cell-area-selection-drag',
   'cell-area-selection-end',
   'cell-area-extension-start',
+  'cell-area-extension-drag',
   'cell-area-extension-end',
   'cell-area-arrows-start',
   'cell-area-arrows-end',
diff --git a/types/plugins/pro.d.ts b/types/plugins/pro.d.ts
index eab6134e2..779b9c72d 100644
--- a/types/plugins/pro.d.ts
+++ b/types/plugins/pro.d.ts
@@ -281,6 +281,12 @@ export namespace VxeTableProDefines {
   }
   export interface CellAreaSelectionStartEventParams extends EventParams, CellAreaSelectionStartParams { }
 
+  export interface CellAreaSelectionDragParams {
+    rows: any[]
+    cols: VxeTableDefines.ColumnInfo[]
+  }
+  export interface CellAreaSelectionDragEventParams extends EventParams, CellAreaSelectionDragParams { }
+
   export interface CellAreaSelectionEndParams {
     rows: any[]
     cols: VxeTableDefines.ColumnInfo[]
@@ -290,6 +296,14 @@ export namespace VxeTableProDefines {
   export interface CellAreaExtensionStartParams extends CellAreaSelectionStartParams {}
   export interface CellAreaExtensionStartEventParams extends EventParams, CellAreaExtensionStartParams { }
 
+  export interface CellAreaExtensionDragParams {
+    rows: any[]
+    cols: VxeTableDefines.ColumnInfo[]
+    targetRows: any[]
+    targetCols: VxeTableDefines.ColumnInfo[]
+  }
+  export interface CellAreaExtensionDragEventParams extends EventParams, CellAreaExtensionDragParams { }
+
   export interface CellAreaExtensionEndParams {
     rows: any[]
     cols: VxeTableDefines.ColumnInfo[]
@@ -349,8 +363,10 @@ export type VxeTableProEmits = [
   'clear-cell-area-merge',
   'header-cell-area-selection',
   'cell-area-selection-start',
+  'cell-area-selection-drag',
   'cell-area-selection-end',
   'cell-area-extension-start',
+  'cell-area-extension-drag',
   'cell-area-extension-end',
   'cell-area-arrows-start',
   'cell-area-arrows-end',
@@ -373,8 +389,10 @@ declare module '../table' {
     onClearCellAreaMerge?: VxeTableEvents.ClearCellAreaMerge
     onHeaderCellAreaSelection?: VxeTableEvents.HeaderCellAreaSelection
     onCellAreaSelectionStart?: VxeTableEvents.CellAreaSelectionStart
+    onCellAreaSelectionDrag?: VxeTableEvents.CellAreaSelectionDrag
     onCellAreaSelectionEnd?: VxeTableEvents.CellAreaSelectionEnd
     onCellAreaExtensionStart?: VxeTableEvents.CellAreaExtensionStart
+    onCellAreaExtensionDrag?: VxeTableEvents.CellAreaExtensionDrag
     onCellAreaExtensionEnd?: VxeTableEvents.CellAreaExtensionEnd
     onCellAreaArrowsStart?: VxeTableEvents.CellAreaArrowsStart
     onCellAreaArrowsEnd?: VxeTableEvents.CellAreaArrowsEnd
@@ -395,8 +413,10 @@ declare module '../table' {
     clearCellAreaMerge?: VxeTableEvents.ClearCellAreaMerge
     headerCellAreaSelection?: VxeTableEvents.HeaderCellAreaSelection
     cellAreaSelectionStart?: VxeTableEvents.CellAreaSelectionStart
+    cellAreaSelectionDrag?: VxeTableEvents.CellAreaSelectionDrag
     cellAreaSelectionEnd?: VxeTableEvents.CellAreaSelectionEnd
     cellAreaExtensionStart?: VxeTableEvents.CellAreaExtensionStart
+    cellAreaExtensionDrag?: VxeTableEvents.CellAreaExtensionDrag
     cellAreaExtensionEnd?: VxeTableEvents.CellAreaExtensionEnd
     cellAreaArrowsStart?: VxeTableEvents.CellAreaArrowsStart
     cellAreaArrowsEnd?: VxeTableEvents.CellAreaArrowsEnd
@@ -417,8 +437,10 @@ declare module '../table' {
     export type ClearCellAreaMerge = (params: VxeTableProDefines.ClearCellAreaMergeEventParams) => void
     export type HeaderCellAreaSelection = (params: VxeTableProDefines.HeaderCellAreaSelectionEventParams) => void
     export type CellAreaSelectionStart = (params: VxeTableProDefines.CellAreaSelectionStartEventParams) => void
+    export type CellAreaSelectionDrag = (params: VxeTableProDefines.CellAreaSelectionDragEventParams) => void
     export type CellAreaSelectionEnd = (params: VxeTableProDefines.CellAreaSelectionEndEventParams) => void
     export type CellAreaExtensionStart = (params: VxeTableProDefines.CellAreaExtensionStartEventParams) => void
+    export type CellAreaExtensionDrag = (params: VxeTableProDefines.CellAreaExtensionDragEventParams) => void
     export type CellAreaExtensionEnd = (params: VxeTableProDefines.CellAreaExtensionEndEventParams) => void
     export type CellAreaArrowsStart = (params: VxeTableProDefines.CellAreaArrowsStartEventParams) => void
     export type CellAreaArrowsEnd = (params: VxeTableProDefines.CellAreaArrowsEndEventParams) => void
@@ -442,8 +464,10 @@ declare module '../grid' {
     onClearCellAreaMerge?: VxeGridEvents.ClearCellAreaMerge
     onHeaderCellAreaSelection?: VxeGridEvents.HeaderCellAreaSelection
     onCellAreaSelectionStart?: VxeGridEvents.CellAreaSelectionStart
+    onCellAreaSelectionDrag?: VxeGridEvents.CellAreaSelectionDrag
     onCellAreaSelectionEnd?: VxeGridEvents.CellAreaSelectionEnd
     onCellAreaExtensionStart?: VxeGridEvents.CellAreaExtensionStart
+    onCellAreaExtensionDrag?: VxeGridEvents.CellAreaExtensionDrag
     onCellAreaExtensionEnd?: VxeGridEvents.CellAreaExtensionEnd
     onCellAreaArrowsStart?: VxeGridEvents.CellAreaArrowsStart
     onCellAreaArrowsEnd?: VxeGridEvents.CellAreaArrowsEnd
@@ -463,8 +487,10 @@ declare module '../grid' {
     clearCellAreaMerge?: VxeGridEvents.ClearCellAreaMerge
     headerCellAreaSelection?: VxeGridEvents.HeaderCellAreaSelection
     cellAreaSelectionStart?: VxeGridEvents.CellAreaSelectionStart
-    cellAreaSelectionEnd?: VxeGridEvents.CellAreaSelectionEnd
+    cellAreaSelectionDrag?: VxeGridEvents.CellAreaSelectionEnd
+    cellAreaSelectionEnd?: VxeGridEvents.CellAreaSelectionDrag
     cellAreaExtensionStart?: VxeGridEvents.CellAreaExtensionStart
+    cellAreaExtensionDrag?: VxeGridEvents.CellAreaExtensionDrag
     cellAreaExtensionEnd?: VxeGridEvents.CellAreaExtensionEnd
     cellAreaArrowsStart?: VxeGridEvents.CellAreaArrowsStart
     cellAreaArrowsEnd?: VxeGridEvents.CellAreaArrowsEnd
@@ -485,8 +511,10 @@ declare module '../grid' {
     export type ClearCellAreaMerge = (params: VxeTableProDefines.ClearCellAreaMergeParams) => void
     export type HeaderCellAreaSelection = (params: VxeTableProDefines.HeaderCellAreaSelectionParams) => void
     export type CellAreaSelectionStart = (params: VxeTableProDefines.CellAreaSelectionStartEventParams) => void
+    export type CellAreaSelectionDrag = (params: VxeTableProDefines.CellAreaSelectionDragEventParams) => void
     export type CellAreaSelectionEnd = (params: VxeTableProDefines.CellAreaSelectionEndEventParams) => void
     export type CellAreaExtensionStart = (params: VxeTableProDefines.CellAreaExtensionStartEventParams) => void
+    export type CellAreaExtensionDrag = (params: VxeTableProDefines.CellAreaExtensionDragEventParams) => void
     export type CellAreaExtensionEnd = (params: VxeTableProDefines.CellAreaExtensionEndEventParams) => void
     export type CellAreaArrowsStart = (params: VxeTableProDefines.CellAreaArrowsStartEventParams) => void
     export type CellAreaArrowsEnd = (params: VxeTableProDefines.CellAreaArrowsEndEventParams) => void