wip: 表格列设置

package.json

@@ -51,6 +51,7 @@
     "qs": "^6.11.2",
     "url": "^0.11.3",
     "vue": "3.3.10",
+    "vue-draggable-plus": "^0.3.2",
     "vue-i18n": "9.8.0",
     "vue-json-pretty": "^2.2.4",
     "vue-router": "^4.2.5",

src/components/Table/src/components/ColumnSetting.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ElDrawer } from 'element-plus'
+import { TableColumn } from '../types'
+import { PropType, ref, watch, unref } from 'vue'
+import { cloneDeep } from 'lodash-es'
+
+const modelValue = defineModel<boolean>()
+
+const oldColumns = ref<TableColumn[]>()
+
+const settingColumns = ref<TableColumn[]>()
+
+const props = defineProps({
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    default: () => []
+  }
+})
+
+watch(
+  () => props.columns,
+  (columns) => {
+    if (!unref(oldColumns)) {
+      oldColumns.value = cloneDeep(columns?.filter((item) => item.field !== 'expand'))
+    }
+    if (!unref(settingColumns)) {
+      settingColumns.value = cloneDeep(columns?.filter((item) => item.field !== 'expand'))
+      console.log(settingColumns.value)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<template>
+  <ElDrawer v-model="modelValue" title="列设置"> djdjjddjdjd </ElDrawer>
+</template>

src/components/Table/src/components/TableActions.vue

@@ -1,10 +1,11 @@
 <script lang="tsx">
-import { defineComponent, unref, computed, PropType } from 'vue'
+import { defineComponent, unref, computed, PropType, ref } from 'vue'
-import { ElTooltip, ElDropdown, ElDropdownMenu, ElDropdownItem, ComponentSize } from 'element-plus'
+import { ElDropdown, ElDropdownMenu, ElDropdownItem, ComponentSize } from 'element-plus'
 import { Icon } from '@/components/Icon'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useAppStore } from '@/store/modules/app'
 import { TableColumn } from '../types'
+import ColumnSetting from './ColumnSetting.vue'
 
 const appStore = useAppStore()
 const sizeMap = computed(() => appStore.sizeMap)
@@ -13,6 +14,9 @@ const { t } = useI18n()
 
 export default defineComponent({
   name: 'TableActions',
+  components: {
+    ColumnSetting
+  },
   props: {
     columns: {
       type: Array as PropType<TableColumn[]>,
@@ -20,7 +24,9 @@ export default defineComponent({
     }
   },
   emits: ['refresh', 'changSize'],
-  setup(_, { emit }) {
+  setup(props, { emit }) {
+    const showSetting = ref(false)
+
     const refresh = () => {
       emit('refresh')
     }
@@ -29,31 +35,32 @@ export default defineComponent({
       emit('changSize', size)
     }
 
+    const showColumnSetting = () => {
+      showSetting.value = true
+    }
+
     return () => (
       <>
         <div class="text-right h-28px flex items-center justify-end">
-          <ElTooltip content={t('common.refresh')} placement="top">
+          <div title="刷新" class="w-30px h-20px flex items-center justify-end" onClick={refresh}>
-            <span onClick={refresh}>
             <Icon
               icon="ant-design:sync-outlined"
               class="cursor-pointer"
               hover-color="var(--el-color-primary)"
             />
-            </span>
+          </div>
-          </ElTooltip>
 
-          <ElTooltip content={t('common.size')} placement="top">
           <ElDropdown trigger="click" onCommand={changSize}>
             {{
               default: () => {
                 return (
-                    <span>
+                  <div title="尺寸" class="w-30px h-20px flex items-center justify-end">
                     <Icon
                       icon="ant-design:column-height-outlined"
-                        class="cursor-pointer mr-8px ml-8px"
+                      class="cursor-pointer"
                       hover-color="var(--el-color-primary)"
                     />
-                    </span>
+                  </div>
                 )
               },
               dropdown: () => {
@@ -75,8 +82,20 @@ export default defineComponent({
               }
             }}
           </ElDropdown>
-          </ElTooltip>
+
+          <div
+            title="列设置"
+            class="w-30px h-20px flex items-center justify-end"
+            onClick={showColumnSetting}
+          >
+            <Icon
+              icon="ant-design:setting-outlined"
+              class="cursor-pointer"
+              hover-color="var(--el-color-primary)"
+            />
           </div>
+        </div>
+        <ColumnSetting v-model={showSetting.value} columns={props.columns} />
       </>
     )
   }

src/locales/en.ts

@@ -48,7 +48,9 @@ export default {
     lengthRange: 'The length should be between {min} and {max}',
     notSpace: 'Spaces are not allowed',
     notSpecialCharacters: 'Special characters are not allowed',
-    isEqual: 'The two are not equal'
+    isEqual: 'The two are not equal',
+    // 列设置
+    setting: 'Setting'
   },
   lock: {
     lockScreen: 'Lock screen',

src/locales/zh-CN.ts

@@ -48,7 +48,8 @@ export default {
     lengthRange: '长度在 {min} 到 {max} 个字符',
     notSpace: '不能包含空格',
     notSpecialCharacters: '不能包含特殊字符',
-    isEqual: '两次输入不一致'
+    isEqual: '两次输入不一致',
+    setting: '设置'
   },
   lock: {
     lockScreen: '锁定屏幕',

src/views/Components/Table/UseTableDemo.vue

@@ -58,10 +58,6 @@ const columns = reactive<TableColumn[]>([
     label: t('tableDemo.index'),
     type: 'index'
   },
-  {
-    field: 'content',
-    label: t('tableDemo.header'),
-    children: [
   {
     field: 'title',
     label: t('tableDemo.title')
@@ -92,8 +88,6 @@ const columns = reactive<TableColumn[]>([
   {
     field: 'pageviews',
     label: t('tableDemo.pageviews')
-      }
-    ]
   },
   {
     field: 'action',