| 提交 | 用户 | age | ||
| faf3f4 | 1 | import { BasicColumn, BasicTableProps } from '../types/table'; |
| 陈 | 2 | import { PaginationProps } from '../types/pagination'; |
| 3 | import { unref, ComputedRef, Ref, computed, watch, ref } from 'vue'; | |
| 4 | import { isBoolean, isArray, isObject } from '/@/utils/is'; | |
| 5 | import { PAGE_SIZE } from '../const'; | |
| 6 | import { useProps } from './useProps'; | |
| 7 | ||
| 8 | export function useColumns( | |
| 9 | refProps: ComputedRef<BasicTableProps>, | |
| 10 | getPaginationRef: ComputedRef<false | PaginationProps> | |
| 11 | ) { | |
| 12 | const { propsRef } = useProps(refProps); | |
| 13 | ||
| 14 | const columnsRef = (ref(unref(propsRef).columns) as unknown) as Ref<BasicColumn[]>; | |
| 15 | const cacheColumnsRef = (ref(unref(propsRef).columns) as unknown) as Ref<BasicColumn[]>; | |
| 16 | ||
| 17 | watch( | |
| 18 | () => unref(propsRef).columns, | |
| 19 | (columns) => { | |
| 20 | columnsRef.value = columns; | |
| 21 | cacheColumnsRef.value = columns; | |
| 22 | }, | |
| 23 | { | |
| 24 | immediate: true, | |
| 25 | } | |
| 26 | ); | |
| 27 | const getColumnsRef = computed(() => { | |
| 28 | const props = unref(propsRef); | |
| 29 | const { showIndexColumn, indexColumnProps, ellipsis, actionColumn, isTreeTable } = props; | |
| 30 | ||
| 31 | const columns = unref(columnsRef); | |
| 32 | if (!columns) { | |
| 33 | return []; | |
| 34 | } | |
| 35 | let pushIndexColumns = false; | |
| 36 | columns.forEach((item) => { | |
| 37 | const { key, dataIndex } = item; | |
| 38 | item.align = item.align || 'center'; | |
| 39 | if (ellipsis) { | |
| 40 | if (!key) { | |
| 41 | item.key = dataIndex; | |
| 42 | } | |
| 43 | if (!isBoolean(item.ellipsis)) { | |
| 44 | Object.assign(item, { | |
| 45 | ellipsis, | |
| 46 | }); | |
| 47 | } | |
| 48 | } | |
| 49 | const indIndex = columns.findIndex((column) => column.flag === 'INDEX'); | |
| 50 | if (showIndexColumn && !isTreeTable) { | |
| 51 | pushIndexColumns = indIndex === -1; | |
| 52 | } else if (!showIndexColumn && !isTreeTable && indIndex !== -1) { | |
| 53 | columns.splice(indIndex, 1); | |
| 54 | } | |
| 55 | }); | |
| 56 | ||
| 57 | if (pushIndexColumns) { | |
| 58 | const isFixedLeft = columns.some((item) => item.fixed === 'left'); | |
| 59 | ||
| 60 | columns.unshift({ | |
| 61 | flag: 'INDEX', | |
| 62 | width: 50, | |
| 63 | title: '序号', | |
| 64 | align: 'center', | |
| 65 | customRender: ({ index }) => { | |
| 66 | const getPagination = unref(getPaginationRef); | |
| 67 | if (isBoolean(getPagination)) { | |
| 68 | return `${index + 1}`; | |
| 69 | } | |
| 70 | const { current = 1, pageSize = PAGE_SIZE } = getPagination; | |
| 71 | const currentIndex = (current - 1) * pageSize + index + 1; | |
| 72 | return currentIndex; | |
| 73 | }, | |
| 74 | ...(isFixedLeft | |
| 75 | ? { | |
| 76 | fixed: 'left', | |
| 77 | } | |
| 78 | : {}), | |
| 79 | ...indexColumnProps, | |
| 80 | }); | |
| 81 | } | |
| 82 | if (actionColumn) { | |
| 83 | const hasIndex = columns.findIndex((column) => column.flag === 'ACTION'); | |
| 8b3a4d | 84 | columns.push({ |
| V | 85 | ...(hasIndex === -1 ? columns[hasIndex] : {}), |
| 86 | fixed: 'right', | |
| 87 | ...actionColumn, | |
| 88 | flag: 'ACTION', | |
| 89 | }); | |
| faf3f4 | 90 | } |
| 陈 | 91 | return columns; |
| 92 | }); | |
| 93 | ||
| 94 | function setColumns(columns: BasicColumn[] | string[]) { | |
| 8b3a4d | 95 | if (!isArray(columns)) return; |
| V | 96 | |
| faf3f4 | 97 | if (columns.length <= 0) { |
| 陈 | 98 | columnsRef.value = []; |
| 99 | return; | |
| 100 | } | |
| 101 | ||
| 102 | const firstColumn = columns[0]; | |
| 103 | if (isObject(firstColumn)) { | |
| 104 | columnsRef.value = columns as any; | |
| 105 | } else { | |
| 106 | const newColumns = unref(cacheColumnsRef).filter((item) => | |
| 107 | (columns as string[]).includes(item.key! || item.dataIndex!) | |
| 108 | ); | |
| 109 | columnsRef.value = newColumns; | |
| 110 | } | |
| 111 | } | |
| 112 | ||
| 113 | return { getColumnsRef, setColumns }; | |
| 114 | } | |
