From 7314065c907f8ef4d184c1f3c724b67c30410ab9 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Tue, 19 Dec 2023 19:57:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=96=B0=E5=A2=9E=E5=88=97?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Table/src/components/ColumnSetting.vue    | 104 ++++++++++--------
 src/views/Components/Table/UseTableDemo.vue   |   3 +-
 2 files changed, 61 insertions(+), 46 deletions(-)

diff --git a/src/components/Table/src/components/ColumnSetting.vue b/src/components/Table/src/components/ColumnSetting.vue
index 8f8f047..5d40b7b 100644
--- a/src/components/Table/src/components/ColumnSetting.vue
+++ b/src/components/Table/src/components/ColumnSetting.vue
@@ -11,6 +11,7 @@ import { TableColumn } from '../types'
 import { PropType, ref, watch, unref } from 'vue'
 import { cloneDeep } from 'lodash-es'
 import { DEFAULT_FILTER_COLUMN } from '@/constants'
+import { VueDraggable } from 'vue-draggable-plus'
 
 const modelValue = defineModel<boolean>()
 
@@ -50,7 +51,7 @@ const confirm = () => {
   const newColumns = cloneDeep(unref(settingColumns))?.map((item) => {
     const fixed = unref(settingColumns)?.find((col) => col.field === item.field)?.fixed
     item.hidden = !!!unref(checkColumns)?.includes(item.field)
-    item.fixed = fixed !== void 0 ? fixed : undefined
+    item.fixed = fixed ? fixed : undefined
     return item
   })
   emit('confirm', [...unref(hiddenColumns), ...(newColumns || [])])
@@ -58,21 +59,20 @@ const confirm = () => {
 }
 
 const restore = () => {
-  initColumns([...unref(hiddenColumns), ...(unref(oldColumns) || [])])
+  initColumns([...unref(hiddenColumns), ...(unref(oldColumns) || [])], true)
 }
 
-const initColumns = (columns: TableColumn[]) => {
-  const newColumns = cloneDeep(
-    columns?.filter((item) => {
+const initColumns = (columns: TableColumn[], isReStore = false) => {
+  const newColumns = columns?.filter((item) => {
+    if (!isReStore) {
       item.fixed = item.fixed !== void 0 ? item.fixed : undefined
-      return (item.type && !DEFAULT_FILTER_COLUMN.includes(item.type)) || !item.type
-    })
-  )
-  console.log(newColumns)
+    }
+    return (item.type && !DEFAULT_FILTER_COLUMN.includes(item.type)) || !item.type
+  })
   if (!unref(oldColumns)) {
-    oldColumns.value = newColumns
+    oldColumns.value = cloneDeep(newColumns)
   }
-  settingColumns.value = newColumns
+  settingColumns.value = cloneDeep(newColumns)
 
   hiddenColumns.value = cloneDeep(
     columns?.filter((item) => item.type && DEFAULT_FILTER_COLUMN.includes(item.type))
@@ -93,7 +93,6 @@ const initColumns = (columns: TableColumn[]) => {
 watch(
   () => props.columns,
   (columns) => {
-    console.log(columns)
     initColumns(columns)
   },
   {
@@ -104,40 +103,57 @@ watch(
 
 <template>
   <ElDrawer v-model="modelValue" title="列设置" size="350px">
-    <div class="flex items-center justify-between">
+    <div>
       <div class="flex items-center justify-between">
-        <ElCheckbox
-          v-model="checkAll"
-          :indeterminate="isIndeterminate"
-          @change="handleCheckAllChange"
-        />
-        <ElText class="ml-8px!">{{ checkColumns.length }} / {{ settingColumns?.length }}</ElText>
-      </div>
-      <ElText>固定 / 排序</ElText>
-    </div>
-    <div v-if="settingColumns?.length">
-      <ElCheckboxGroup v-model="checkColumns" @change="handleCheckedColumnsChange">
-        <div
-          v-for="item in settingColumns"
-          :key="item.field"
-          class="flex items-center justify-between mt-12px"
-        >
-          <ElCheckbox :label="item.field">
-            {{ item.label }}
-          </ElCheckbox>
-          <ElRadioGroup size="small" v-model="item.fixed">
-            <ElRadioButton label="left">
-              <Icon icon="ep:arrow-left" />
-            </ElRadioButton>
-            <ElRadioButton :label="undefined">
-              <Icon icon="ep:close" />
-            </ElRadioButton>
-            <ElRadioButton label="right">
-              <Icon icon="ep:arrow-right" />
-            </ElRadioButton>
-          </ElRadioGroup>
+        <div class="flex items-center justify-between">
+          <ElCheckbox
+            v-model="checkAll"
+            :indeterminate="isIndeterminate"
+            @change="handleCheckAllChange"
+          />
+          <ElText class="ml-8px!">{{ checkColumns.length }} / {{ settingColumns?.length }}</ElText>
         </div>
-      </ElCheckboxGroup>
+        <ElText>固定 / 排序</ElText>
+      </div>
+      <div v-if="settingColumns?.length">
+        <VueDraggable
+          v-model="settingColumns"
+          target=".el-checkbox-group"
+          handle=".handle"
+          :animation="150"
+        >
+          <ElCheckboxGroup
+            ref="draggableWrap"
+            v-model="checkColumns"
+            @change="handleCheckedColumnsChange"
+          >
+            <div
+              v-for="item in settingColumns"
+              :key="item.field"
+              class="flex items-center justify-between mt-12px"
+            >
+              <ElCheckbox :label="item.field">
+                {{ item.label }}
+              </ElCheckbox>
+              <div class="flex items-center">
+                <ElRadioGroup size="small" v-model="item.fixed">
+                  <ElRadioButton label="left">
+                    <Icon icon="ep:arrow-left" />
+                  </ElRadioButton>
+                  <ElRadioButton :label="undefined">
+                    <Icon icon="ep:close" />
+                  </ElRadioButton>
+                  <ElRadioButton label="right">
+                    <Icon icon="ep:arrow-right" />
+                  </ElRadioButton>
+                </ElRadioGroup>
+
+                <div class="ml-12px cursor-move handle"><Icon icon="ep:rank" /></div>
+              </div>
+            </div>
+          </ElCheckboxGroup>
+        </VueDraggable>
+      </div>
     </div>
     <template #footer>
       <div>
diff --git a/src/views/Components/Table/UseTableDemo.vue b/src/views/Components/Table/UseTableDemo.vue
index 7bcfb16..da1a754 100644
--- a/src/views/Components/Table/UseTableDemo.vue
+++ b/src/views/Components/Table/UseTableDemo.vue
@@ -56,8 +56,7 @@ const columns = reactive<TableColumn[]>([
   {
     field: 'index',
     label: t('tableDemo.index'),
-    type: 'index',
-    hidden: true
+    type: 'index'
   },
   {
     field: 'title',