From 42f2256ea167b62ef87c9160e2a266ab116dd41c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AF=BB=E6=A2=A6?= <w@liubing.me>
Date: Wed, 30 Mar 2022 18:18:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=A1=A8=E6=A0=BC=E5=88=97=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81draggable=E9=85=8D=E7=BD=AE=E6=98=AF=E5=90=A6=E8=83=BD?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/settings/ColumnSetting.vue | 29 +++++++++++++++++--
 src/components/Table/src/types/table.ts       |  2 ++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/src/components/settings/ColumnSetting.vue b/src/components/Table/src/components/settings/ColumnSetting.vue
index 72a521c..293c966 100644
--- a/src/components/Table/src/components/settings/ColumnSetting.vue
+++ b/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -25,13 +25,26 @@
           </template>
           <div class="table-toolbar-inner">
             <n-checkbox-group v-model:value="checkList" @update:value="onChange">
-              <Draggable v-model="columnsList" animation="300" item-key="key" @end="draggableEnd">
+              <Draggable
+                v-model="columnsList"
+                animation="300"
+                item-key="key"
+                filter=".no-draggable"
+                :move="onMove"
+                @end="draggableEnd"
+              >
                 <template #item="{ element }">
                   <div
                     class="table-toolbar-inner-checkbox"
-                    :class="{ 'table-toolbar-inner-checkbox-dark': getDarkTheme === true }"
+                    :class="{
+                      'table-toolbar-inner-checkbox-dark': getDarkTheme === true,
+                      'no-draggable': element.draggable === false,
+                    }"
                   >
-                    <span class="drag-icon">
+                    <span
+                      class="drag-icon"
+                      :class="{ 'drag-icon-hidden': element.draggable === false }"
+                    >
                       <n-icon size="18">
                         <DragOutlined />
                       </n-icon>
@@ -211,6 +224,11 @@
         }
       }
 
+      function onMove(e) {
+        if (e.draggedContext.element.draggable === false) return false;
+        return true;
+      }
+
       //固定
       function fixedColumn(item, fixed) {
         if (!state.checkList.includes(item.key)) return;
@@ -232,6 +250,7 @@
         onChange,
         onCheckAll,
         onSelection,
+        onMove,
         resetColumns,
         fixedColumn,
         draggableEnd,
@@ -275,6 +294,10 @@
         display: inline-flex;
         margin-right: 8px;
         cursor: move;
+        &-hidden {
+          visibility: hidden;
+          cursor: default;
+        }
       }
 
       .fixed-item {
diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
index e9ab591..96e4d68 100644
--- a/src/components/Table/src/types/table.ts
+++ b/src/components/Table/src/types/table.ts
@@ -14,6 +14,8 @@ export interface BasicColumn extends TableBaseColumn {
   auth?: string[];
   // 业务控制是否显示
   ifShow?: boolean | ((column: BasicColumn) => boolean);
+  // 控制是否支持拖拽，默认支持
+  draggable?: boolean;
 }
 
 export interface TableActionType {