From 18597fabd3d193b82d2f05ec3fd7101623fdcb8c Mon Sep 17 00:00:00 2001 From: Ah jung <735878602@qq.com> Date: Tue, 13 Jul 2021 10:01:31 +0800 Subject: [PATCH] =?UTF-8?q?=E6=97=A5=E5=B8=B8=20bugfix=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 142 ++++++++++-------- src/App.vue | 2 +- src/components/ProTable/src/ProTable.vue | 4 +- .../src/components/settings/ColumnSetting.vue | 133 +++++++++------- .../ProTable/src/hooks/useColumns.ts | 8 +- .../ProTable/src/hooks/useDataSource.ts | 50 ++---- src/components/ProTable/src/props.ts | 1 - src/components/ProTable/src/types/table.ts | 22 +++ .../components/Header/ProjectSetting.vue | 2 +- tsconfig.json | 62 ++++---- 10 files changed, 235 insertions(+), 191 deletions(-) create mode 100644 src/components/ProTable/src/types/table.ts diff --git a/index.html b/index.html index aa82b77..7ce45b2 100644 --- a/index.html +++ b/index.html @@ -2,77 +2,91 @@ - - + + + + <%= title %> -
- -
-
-
-
-
+ } + +
+
+
+
- +
+ diff --git a/src/App.vue b/src/App.vue index b24eebf..c1587c6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -12,7 +12,7 @@ - + diff --git a/src/components/ProTable/src/ProTable.vue b/src/components/ProTable/src/ProTable.vue index 8896be7..3a0a61b 100644 --- a/src/components/ProTable/src/ProTable.vue +++ b/src/components/ProTable/src/ProTable.vue @@ -267,7 +267,6 @@ export default defineComponent({ justify-content: flex-start; font-size: 16px; font-weight: 600; - color: rgba(0, 0, 0, .85); } } @@ -280,9 +279,8 @@ export default defineComponent({ height: 18px; margin-left: 12px; font-size: 16px; - color: rgba(0, 0, 0, .75); cursor: pointer; - + color:var(--text-color); :hover { color: #1890ff; } diff --git a/src/components/ProTable/src/components/settings/ColumnSetting.vue b/src/components/ProTable/src/components/settings/ColumnSetting.vue index b7867af..bdba4e7 100644 --- a/src/components/ProTable/src/components/settings/ColumnSetting.vue +++ b/src/components/ProTable/src/components/settings/ColumnSetting.vue @@ -18,42 +18,41 @@
- - + +
@@ -67,6 +66,7 @@ import { ref, defineComponent, reactive, unref, toRaw, computed, toRefs, watchEf import { useTableContext } from '../../hooks/useTableContext'; import { ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, VerticalAlignTopOutlined } from '@vicons/antd' import Draggable from 'vuedraggable/src/vuedraggable' +import { useDesignSetting } from "@/hooks/setting/useDesignSetting"; interface Options { title: string; @@ -81,8 +81,11 @@ export default defineComponent({ VerticalAlignTopOutlined }, setup(props, { emit }) { + const { getDarkTheme } = useDesignSetting() const table = useTableContext(); const columnsList = ref([]); + const cacheColumnsList = ref([]); + const state = reactive({ selection: false, checkAll: true, @@ -108,6 +111,7 @@ export default defineComponent({ state.checkList = checkList state.defaultCheckList = checkList columnsList.value = columns + cacheColumnsList.value = columns } //切换 @@ -125,18 +129,26 @@ export default defineComponent({ //获取 function getColumns() { - const newArr = [] + let newRet = [] table.getColumns().forEach(item => { - newArr.push({ ...item }) + newRet.push({...item }) }) - return newArr + return newRet } //重置 function resetColumns() { state.checkList = [...state.defaultCheckList] state.checkAll = true; - setColumns(table.getCacheColumns(true)); + let cacheColumnsKeys:any[] = table.getCacheColumns() + let newColumns = cacheColumnsKeys.map(item => { + return { + ...item, + fixed:undefined + } + }) + setColumns(newColumns); + columnsList.value = newColumns } //全选 @@ -154,6 +166,8 @@ export default defineComponent({ //拖拽排序 function draggableEnd(e) { const newColumns = toRaw(unref(columnsList)) + console.log(newColumns); + columnsList.value = newColumns setColumns(newColumns); } @@ -170,19 +184,26 @@ export default defineComponent({ } //固定 - function fixedColumn(index, fixed) { - let columnList = getColumns(); - let columnInfo = columnList[index] - const isFixed = columnInfo.fixed === fixed ? undefined : fixed - columnInfo.fixed = isFixed - columnsList.value = columnList - table.setCacheColumnsField(columnInfo.key, { fixed: isFixed }) - setColumns(columnList); + function fixedColumn(item, fixed) { + console.log('item：',item) + if (!state.checkList.includes(item.key)) return; + let columns = getColumns(); + const isFixed = item.fixed === fixed ? undefined : fixed + let index = columns.findIndex(res => res.key === item.key) + console.log('index：',index) + if(index !== -1){ + columns[index].fixed = isFixed; + } + table.setCacheColumnsField(item.key, { fixed: isFixed }) + columnsList.value[index].fixed = isFixed + console.log('columnsList：',columnsList.value) + setColumns(columns); } return { ...toRefs(state), columnsList, + getDarkTheme, onChange, onCheckAll, onSelection, @@ -197,12 +218,15 @@ export default defineComponent({ diff --git a/src/components/ProTable/src/hooks/useColumns.ts b/src/components/ProTable/src/hooks/useColumns.ts index 28ba90d..8936904 100644 --- a/src/components/ProTable/src/hooks/useColumns.ts +++ b/src/components/ProTable/src/hooks/useColumns.ts @@ -22,10 +22,11 @@ export function useColumns(propsRef: ComputedRef) { () => unref(propsRef).columns, (columns) => { columnsRef.value = columns; - cacheColumns = columns?.filter((item) => !item.flag) ?? []; + cacheColumns = columns; } ); + //设置 function setColumns(columnList: string[]) { const columns: any[] = cloneDeep(columnList); @@ -36,7 +37,6 @@ export function useColumns(propsRef: ComputedRef) { return; } const cacheKeys = cacheColumns.map((item) => item.key); - //针对拖拽排序 if (!isString(columns[0])) { columnsRef.value = columns; @@ -60,9 +60,9 @@ export function useColumns(propsRef: ComputedRef) { //获取 function getColumns() { - const columns = toRaw(unref(propsRef).columns); + let columns = toRaw(unref(getColumnsRef)); return columns.map(item => { - return { title: item.title, key: item.key, fixed: item.fixed || undefined } + return { ...item, title: item.title, key: item.key, fixed: item.fixed || undefined } }) } diff --git a/src/components/ProTable/src/hooks/useDataSource.ts b/src/components/ProTable/src/hooks/useDataSource.ts index 7286d22..228acd5 100644 --- a/src/components/ProTable/src/hooks/useDataSource.ts +++ b/src/components/ProTable/src/hooks/useDataSource.ts @@ -1,8 +1,8 @@ -import { ref, ComputedRef, unref, computed, onMounted, onBeforeMount, watchEffect, watch } from 'vue'; +import { ref, ComputedRef, unref, computed, onMounted, watchEffect, watch } from 'vue'; import type { BasicTableProps } from '../types/table'; import type { PaginationProps } from '../types/pagination'; -import { isFunction, isBoolean } from '@/utils/is'; -import { DEFAULTPAGESIZE, APISETTING, PAGESIZES } from '../const'; +import { isBoolean } from '@/utils/is'; +import { APISETTING } from '../const'; export function useDataSource( propsRef: ComputedRef, @@ -10,12 +10,11 @@ export function useDataSource( getPaginationInfo, setPagination, setLoading, - tableData, - getSelection + tableData }, - emit: EmitType + emit ) { - const dataSourceRef = ref([]); + const dataSourceRef = ref([]); watchEffect(() => { tableData.value = unref(dataSourceRef); @@ -33,7 +32,7 @@ export function useDataSource( ); const getRowKey = computed(() => { - const { rowKey } = unref(propsRef); + const { rowKey }:any = unref(propsRef); return rowKey ? rowKey : () => { return 'key' }; @@ -44,25 +43,6 @@ export function useDataSource( if (!dataSource || dataSource.length === 0) { return unref(dataSourceRef); } - // if (unref(getAutoCreateKey)) { - // const firstItem = dataSource[0]; - // const lastItem = dataSource[dataSource.length - 1]; - // - // if (firstItem && lastItem) { - // if (!firstItem[ROW_KEY] || !lastItem[ROW_KEY]) { - // const data = cloneDeep(unref(dataSourceRef)); - // data.forEach((item) => { - // if (!item[ROW_KEY]) { - // item[ROW_KEY] = buildUUID(); - // } - // if (item.children && item.children.length) { - // setTableKey(item.children); - // } - // }); - // dataSourceRef.value = data; - // } - // } - // } return unref(dataSourceRef); }); @@ -77,7 +57,7 @@ export function useDataSource( const totalField = APISETTING.totalField const listField = APISETTING.listField - let pageParams: Recordable = {}; + let pageParams = {}; const { page = 1, pageSize = 10 } = unref(getPaginationInfo) as PaginationProps; if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) { @@ -95,7 +75,7 @@ export function useDataSource( const resultTotal = res[totalField] || 0 const currentPage = res[pageField] - // 假如数据变少，导致总页数变少并小于当前选中页码，通过getPaginationRef获取到的页码是不正确的，需获取正确的页码再次执行 + // 如果数据异常，需获取正确的页码再次执行 if (resultTotal) { const currentTotalPage = Math.ceil(resultTotal / pageSize); if (page > currentTotalPage) { @@ -138,19 +118,15 @@ export function useDataSource( }, 16) }); - // onBeforeMount(()=> { - // fetch() - // }) - - function setTableData(values: T[]) { + function setTableData(values) { dataSourceRef.value = values; } - function getDataSource() { - return getDataSourceRef.value as T[]; + function getDataSource() :any[] { + return getDataSourceRef.value; } - async function reload(opt?: FetchParams) { + async function reload(opt?) { await fetch(opt); } diff --git a/src/components/ProTable/src/props.ts b/src/components/ProTable/src/props.ts index 9055655..eb865ef 100644 --- a/src/components/ProTable/src/props.ts +++ b/src/components/ProTable/src/props.ts @@ -23,7 +23,6 @@ export const basicProps = { type: [Array] as PropType, default: () => [], required: true, - }, request: { type: Function as PropType<(...arg: any[]) => Promise>, diff --git a/src/components/ProTable/src/types/table.ts b/src/components/ProTable/src/types/table.ts new file mode 100644 index 0000000..2e9cc9d --- /dev/null +++ b/src/components/ProTable/src/types/table.ts @@ -0,0 +1,22 @@ +import type { + TableBaseColumn, +} from 'naive-ui/lib/data-table/src/interface'; + +export interface BasicColumn extends TableBaseColumn { + +} + +export interface TableActionType { + reload: (opt) => Promise; + emit?: any; + getColumns: (opt) => BasicColumn[]; + setColumns: (columns: BasicColumn[] | string[]) => void; +} + +export interface BasicTableProps { + title?: string, + dataSource: Function, + columns: any[], + pagination: object, + showPagination: boolean +} diff --git a/src/layout/components/Header/ProjectSetting.vue b/src/layout/components/Header/ProjectSetting.vue index 1baac68..31394c4 100644 --- a/src/layout/components/Header/ProjectSetting.vue +++ b/src/layout/components/Header/ProjectSetting.vue @@ -1,5 +1,5 @@