refactor[element-plus]: refactor table-pro

packages/element-plus/components/table-pro/drag-sort-icon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M6 20q-.825 0-1.413-.588T4 18q0-.825.588-1.413T6 16q.825 0 1.413.588T8 18q0 .825-.588 1.413T6 20Zm6 0q-.825 0-1.413-.588T10 18q0-.825.588-1.413T12 16q.825 0 1.413.588T14 18q0 .825-.588 1.413T12 20Zm6 0q-.825 0-1.413-.588T16 18q0-.825.588-1.413T18 16q.825 0 1.413.588T20 18q0 .825-.588 1.413T18 20ZM6 14q-.825 0-1.413-.588T4 12q0-.825.588-1.413T6 10q.825 0 1.413.588T8 12q0 .825-.588 1.413T6 14Zm6 0q-.825 0-1.413-.588T10 12q0-.825.588-1.413T12 10q.825 0 1.413.588T14 12q0 .825-.588 1.413T12 14Zm6 0q-.825 0-1.413-.588T16 12q0-.825.588-1.413T18 10q.825 0 1.413.588T20 12q0 .825-.588 1.413T18 14ZM6 8q-.825 0-1.413-.588T4 6q0-.825.588-1.413T6 4q.825 0 1.413.588T8 6q0 .825-.588 1.413T6 8Zm6 0q-.825 0-1.413-.588T10 6q0-.825.588-1.413T12 4q.825 0 1.413.588T14 6q0 .825-.588 1.413T12 8Zm6 0q-.825 0-1.413-.588T16 6q0-.825.588-1.413T18 4q.825 0 1.413.588T20 6q0 .825-.588 1.413T18 8Z"
+    ></path>
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'DragSortIcon',
+}
+</script>

packages/element-plus/components/table-pro/helper.ts

@@ -2,7 +2,7 @@ import type { ElTable } from 'element-plus'
 import { Props } from '@packages/helpers/table-pro/index.ts'
 import { Ref, ref } from 'vue'
 
-export interface TableProProps extends Props<typeof ElTable> {}
+export interface TableProProps extends Props {}
 export type {
   RowSelectionOptions,
   SelectNodes,

packages/element-plus/components/table-pro/table-columns-action.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts" name="ColumnsOperation">
+import { noop } from '@cc-heart/utils'
+import { ComputedRef, PropType, Ref, computed, unref } from 'vue'
+import draggable from 'vuedraggable'
+import DragSortIcon from './drag-sort-icon.vue'
+import {
+  ElIcon,
+  ElPopover,
+  ElCheckbox,
+  ElButton,
+  ElCheckboxGroup,
+  ElDivider,
+} from 'element-plus'
+
+const props = defineProps({
+  sortedColumns: {
+    type: [Array, Object] as PropType<
+      Array<Record<string, any>> | Ref<Array<Record<string, any>>>
+    >,
+    default: () => [],
+  },
+  columnsField: {
+    type: Array as PropType<Array<string> | Ref<Array<string>>>,
+    default: () => [],
+  },
+  rowKey: {
+    type: String as PropType<ComputedRef<string> | string>,
+    default: 'key',
+  },
+  onUpdateSortedColumns: {
+    type: Function as PropType<(val: Record<string, any>[]) => void>,
+    default: noop,
+  },
+  onUpdateColumnsField: {
+    type: Function as PropType<(val: (string | number)[]) => void>,
+    default: noop,
+  },
+  onReset: {
+    type: Function as PropType<() => void>,
+    default: noop,
+  },
+})
+
+let tempColumnSettings = [] as any[]
+const handleChangeColumns = (val: any[]) => {
+  tempColumnSettings = val
+}
+
+const emitChangeColumn = () => {
+  props.onUpdateSortedColumns(tempColumnSettings)
+}
+
+const handleChangeCheckbox = (columnIds: Array<any>) => {
+  props.onUpdateColumnsField(columnIds)
+}
+const isAllSelected = computed(() => {
+  return unref(props.columnsField).length === unref(props.sortedColumns).length
+})
+
+const toggleShowColumns = () => {
+  if (isAllSelected.value) {
+    props.onUpdateColumnsField([])
+  } else {
+    props.onUpdateColumnsField(
+      unref(props.sortedColumns).map(
+        (item: Record<string, any>) =>
+          Reflect.get(item, unref(props.rowKey) as string)!
+      )
+    )
+  }
+}
+const handleReset = () => {
+  props.onReset()
+}
+</script>
+<template>
+  <ElPopover trigger="click">
+    <template #reference>
+      <slot />
+    </template>
+    <div class="flex items-center">
+      <ElCheckbox :checked="isAllSelected" @update:checked="toggleShowColumns"
+        >列展示</ElCheckbox
+      >
+      <ElButton link @click="handleReset"> 重置 </ElButton>
+    </div>
+    <ElDivider />
+
+    <ElCheckboxGroup
+      :modelValue="unref(columnsField)"
+      @change="handleChangeCheckbox"
+    >
+      <draggable
+        :model-value="unref(sortedColumns)"
+        @update:model-value="handleChangeColumns"
+        @end="emitChangeColumn"
+        group="description"
+        animation="300"
+        class="flex flex-col"
+        handle=".drag-handle"
+        item-key="prop"
+      >
+        <template #item="{ element }">
+          <ElCheckbox
+            :key="element.prop"
+            :value="element.prop"
+            :label="element.label"
+          >
+            <div class="drag-handle m-r-1">
+              <DragSortIcon />
+            </div>
+            {{ element.label }}
+          </ElCheckbox>
+        </template>
+      </draggable>
+    </ElCheckboxGroup>
+  </ElPopover>
+</template>
+<style lang="scss">
+.drag-handle {
+  display: inline-flex;
+}
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center {
+  align-items: center;
+}
+</style>

packages/element-plus/components/table-pro/table-pro.scss

@@ -1,5 +1,6 @@
 @include ns('table-pro') {
   --table-pro-padding: 12px 0;
+  --table-pro-primary-color: var(--el-color-primary);
 
   @include b('action') {
     padding: var(--table-pro-padding);
@@ -18,4 +19,37 @@
     font-size: 14px;
     margin-bottom: 12px;
   }
+
+  @include b('action-panel') {
+    margin-bottom: 16px;
+  }
+
+  @include b('pagination') {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+  }
+
+  @include b('header') {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    &-action {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      svg {
+        cursor: pointer;
+        width: 16px;
+        height: 16px;
+        transition: all 0.28s;
+        &:hover {
+          color: var(--table-pro-primary-color);
+        }
+      }
+    }
+  }
 }