wip: 表格列设置

src/components/Table/src/Table.vue

@@ -275,6 +275,10 @@ export default defineComponent({
       setProps({ size })
     }
 
+    const confirmSetColumn = (columns: TableColumn[]) => {
+      setProps({ columns })
+    }
+
     expose({
       setProps,
       setColumn,
@@ -434,6 +438,7 @@ export default defineComponent({
               align={v.align || align}
               headerAlign={v.headerAlign || headerAlign}
               label={v.label}
+              fixed={v.fixed}
               width="65px"
             ></ElTableColumn>
           )
@@ -543,11 +548,12 @@ export default defineComponent({
             </div>
           ) : (
             <>
-              {unref(getProps).showAction ? (
+              {unref(getProps).showAction && !unref(getProps).customContent ? (
                 <TableActions
                   columns={unref(getProps).columns}
                   onChangSize={changSize}
                   onRefresh={refresh}
+                  onConfirm={confirmSetColumn}
                 />
               ) : null}
               <ElTable ref={elTableRef} data={unref(getProps).data} {...unref(getBindValue)}>

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

@@ -1,32 +1,100 @@
 <script setup lang="ts">
-import { ElDrawer } from 'element-plus'
+import {
+  ElDrawer,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElText,
+  ElRadioButton,
+  ElRadioGroup
+} from 'element-plus'
 import { TableColumn } from '../types'
 import { PropType, ref, watch, unref } from 'vue'
 import { cloneDeep } from 'lodash-es'
+import { DEFAULT_FILTER_COLUMN } from '@/constants'
 
 const modelValue = defineModel<boolean>()
 
-const oldColumns = ref<TableColumn[]>()
-
-const settingColumns = ref<TableColumn[]>()
-
 const props = defineProps({
   columns: {
     type: Array as PropType<TableColumn[]>,
     default: () => []
   }
 })
 
+const emit = defineEmits(['confirm'])
+
+const oldColumns = ref<TableColumn[]>()
+
+const settingColumns = ref<TableColumn[]>()
+
+// 存储不要的列
+const hiddenColumns = ref<TableColumn[]>([])
+
+const defaultCheckColumns = ref<string[]>([])
+const checkColumns = ref<string[]>([])
+
+const checkAll = ref(false)
+const isIndeterminate = ref(true)
+const handleCheckAllChange = (val: boolean) => {
+  checkColumns.value = val ? unref(defaultCheckColumns) : []
+  isIndeterminate.value = false
+}
+
+const handleCheckedColumnsChange = (value: string[]) => {
+  const checkedCount = value.length
+  checkAll.value = checkedCount === unref(defaultCheckColumns)?.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < unref(defaultCheckColumns)?.length
+}
+
+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
+    return item
+  })
+  emit('confirm', [...unref(hiddenColumns), ...(newColumns || [])])
+  modelValue.value = false
+}
+
+const restore = () => {
+  initColumns([...unref(hiddenColumns), ...(unref(oldColumns) || [])])
+}
+
+const initColumns = (columns: TableColumn[]) => {
+  const newColumns = cloneDeep(
+    columns?.filter((item) => {
+      item.fixed = item.fixed !== void 0 ? item.fixed : undefined
+      return (item.type && !DEFAULT_FILTER_COLUMN.includes(item.type)) || !item.type
+    })
+  )
+  console.log(newColumns)
+  if (!unref(oldColumns)) {
+    oldColumns.value = newColumns
+  }
+  settingColumns.value = newColumns
+
+  hiddenColumns.value = cloneDeep(
+    columns?.filter((item) => item.type && DEFAULT_FILTER_COLUMN.includes(item.type))
+  )
+
+  defaultCheckColumns.value = unref(settingColumns)?.map((item) => item.field) || []
+  checkColumns.value =
+    unref(settingColumns)
+      ?.filter((item) => !item.hidden)
+      ?.map((item) => item.field) || []
+
+  if (unref(checkColumns)?.length === unref(defaultCheckColumns)?.length) {
+    checkAll.value = true
+    isIndeterminate.value = false
+  }
+}
+
 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)
-    }
+    console.log(columns)
+    initColumns(columns)
   },
   {
     immediate: true
@@ -35,5 +103,47 @@ watch(
 </script>
 
 <template>
-  <ElDrawer v-model="modelValue" title="列设置"> djdjjddjdjd </ElDrawer>
+  <ElDrawer v-model="modelValue" title="列设置" size="350px">
+    <div class="flex items-center justify-between">
+      <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>
+      </ElCheckboxGroup>
+    </div>
+    <template #footer>
+      <div>
+        <BaseButton @click="restore">还原</BaseButton>
+        <BaseButton type="primary" @click="confirm">确定</BaseButton>
+      </div>
+    </template>
+  </ElDrawer>
 </template>

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

@@ -23,7 +23,7 @@ export default defineComponent({
       default: () => []
     }
   },
-  emits: ['refresh', 'changSize'],
+  emits: ['refresh', 'changSize', 'confirm'],
   setup(props, { emit }) {
     const showSetting = ref(false)
 
@@ -35,6 +35,10 @@ export default defineComponent({
       emit('changSize', size)
     }
 
+    const confirm = (columns: TableColumn[]) => {
+      emit('confirm', columns)
+    }
+
     const showColumnSetting = () => {
       showSetting.value = true
     }
@@ -95,7 +99,7 @@ export default defineComponent({
             />
           </div>
         </div>
-        <ColumnSetting v-model={showSetting.value} columns={props.columns} />
+        <ColumnSetting v-model={showSetting.value} columns={props.columns} onConfirm={confirm} />
       </>
     )
   }

src/constants/index.ts

@@ -22,3 +22,8 @@ export const NO_REDIRECT_WHITE_LIST = ['/login']
  * 不重置路由白名单
  */
 export const NO_RESET_WHITE_LIST = ['Redirect', 'Login', 'NoFind', 'Root']
+
+/**
+ * 表格默认过滤列设置字段
+ */
+export const DEFAULT_FILTER_COLUMN = ['expand', 'selection']

src/views/Components/Table/UseTableDemo.vue

@@ -56,7 +56,8 @@ const columns = reactive<TableColumn[]>([
   {
     field: 'index',
     label: t('tableDemo.index'),
-    type: 'index'
+    type: 'index',
+    hidden: true
   },
   {
     field: 'title',