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,54 +35,67 @@ 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
+              icon="ant-design:sync-outlined"
-                icon="ant-design:sync-outlined"
+              class="cursor-pointer"
-                class="cursor-pointer"
+              hover-color="var(--el-color-primary)"
-                hover-color="var(--el-color-primary)"
+            />
-              />
+          </div>
-            </span>
-          </ElTooltip>
 
-          <ElTooltip content={t('common.size')} placement="top">
+          <ElDropdown trigger="click" onCommand={changSize}>
-            <ElDropdown trigger="click" onCommand={changSize}>
+            {{
-              {{
+              default: () => {
-                default: () => {
+                return (
-                  return (
+                  <div title="尺寸" class="w-30px h-20px flex items-center justify-end">
-                    <span>
+                    <Icon
-                      <Icon
+                      icon="ant-design:column-height-outlined"
-                        icon="ant-design:column-height-outlined"
+                      class="cursor-pointer"
-                        class="cursor-pointer mr-8px ml-8px"
+                      hover-color="var(--el-color-primary)"
-                        hover-color="var(--el-color-primary)"
+                    />
-                      />
+                  </div>
-                    </span>
+                )
-                  )
+              },
-                },
+              dropdown: () => {
-                dropdown: () => {
+                return (
-                  return (
+                  <ElDropdownMenu>
-                    <ElDropdownMenu>
+                    {{
-                      {{
+                      default: () => {
-                        default: () => {
+                        return unref(sizeMap).map((v) => {
-                          return unref(sizeMap).map((v) => {
+                          return (
-                            return (
+                            <ElDropdownItem key={v} command={v}>
-                              <ElDropdownItem key={v} command={v}>
+                              {t(`size.${v}`)}
-                                {t(`size.${v}`)}
+                            </ElDropdownItem>
-                              </ElDropdownItem>
+                          )
-                            )
+                        })
-                          })
+                      }
-                        }
+                    }}
-                      }}
+                  </ElDropdownMenu>
-                    </ElDropdownMenu>
+                )
-                  )
+              }
-                }
+            }}
-              }}
+          </ElDropdown>
-            </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

@@ -59,41 +59,35 @@ const columns = reactive<TableColumn[]>([
     type: 'index'
   },
   {
-    field: 'content',
+    field: 'title',
-    label: t('tableDemo.header'),
+    label: t('tableDemo.title')
-    children: [
+  },
-      {
+  {
-        field: 'title',
+    field: 'author',
-        label: t('tableDemo.title')
+    label: t('tableDemo.author')
-      },
+  },
-      {
+  {
-        field: 'author',
+    field: 'display_time',
-        label: t('tableDemo.author')
+    label: t('tableDemo.displayTime')
-      },
+  },
-      {
+  {
-        field: 'display_time',
+    field: 'importance',
-        label: t('tableDemo.displayTime')
+    label: t('tableDemo.importance'),
-      },
+    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
-      {
+      return (
-        field: 'importance',
+        <ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
-        label: t('tableDemo.importance'),
+          {cellValue === 1
-        formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
+            ? t('tableDemo.important')
-          return (
+            : cellValue === 2
-            <ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
+              ? t('tableDemo.good')
-              {cellValue === 1
+              : t('tableDemo.commonly')}
-                ? t('tableDemo.important')
+        </ElTag>
-                : cellValue === 2
+      )
-                  ? t('tableDemo.good')
+    }
-                  : t('tableDemo.commonly')}
+  },
-            </ElTag>
+  {
-          )
+    field: 'pageviews',
-        }
+    label: t('tableDemo.pageviews')
-      },
-      {
-        field: 'pageviews',
-        label: t('tableDemo.pageviews')
-      }
-    ]
   },
   {
     field: 'action',