RISE/school-developer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
吴红兵
2026-03-07 01:34:48 +08:00
parent adc511cfdc
commit 94c3473958
1211 changed files with 599405 additions and 322105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
src/utils/tableColumnControlHelper.ts
View File

@@ -3,17 +3,17 @@
* 提供通用的列配置加载和保存逻辑
*/
import { ref, Ref, computed, ComputedRef } from 'vue'
import { useRoute } from 'vue-router'
import { ref, Ref, computed, ComputedRef } from 'vue';
import { useRoute } from 'vue-router';
export interface ColumnConfig {
prop?: string
label: string
alwaysShow?: boolean
fixed?: boolean | 'left' | 'right'
minWidth?: number | string
width?: number | string
[key: string]: any
prop?: string;
label: string;
alwaysShow?: boolean;
fixed?: boolean | 'left' | 'right';
minWidth?: number | string;
width?: number | string;
[key: string]: any;
}
/**
@@ -22,136 +22,123 @@ export interface ColumnConfig {
* @returns 返回 visibleColumns、columnOrder、loadSavedConfig、handleColumnChange、handleColumnOrderChange 等
*/
export function useTableColumnControl(tableColumns: ColumnConfig[]) {
const route = useRoute()
// 当前显示的列
const visibleColumns = ref<string[]>([])
// 列排序顺序
const columnOrder = ref<string[]>([])
const route = useRoute();
// 根据路由生成 storageKey
const getStorageKey = (suffix: string = '') => {
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
return `table-columns-${routePath}${suffix ? `-${suffix}` : ''}`
}
// 当前显示的列
const visibleColumns = ref<string[]>([]);
// 列排序顺序
const columnOrder = ref<string[]>([]);
// 立即从 localStorage 加载配置
const loadSavedConfig = () => {
const storageKey = getStorageKey()
const saved = localStorage.getItem(storageKey)
if (saved) {
try {
const savedColumns = JSON.parse(saved)
const validColumns = tableColumns
.filter(col => !col.alwaysShow && !col.fixed)
.map(col => col.prop || col.label)
const filteredSaved = savedColumns.filter((col: string) => validColumns.includes(col))
visibleColumns.value = filteredSaved.length > 0 ? filteredSaved : validColumns
} catch (e) {
console.error('解析列配置失败:', e)
visibleColumns.value = tableColumns
.filter(col => !col.alwaysShow && !col.fixed)
.map(col => col.prop || col.label)
}
} else {
visibleColumns.value = tableColumns
.filter(col => !col.alwaysShow && !col.fixed)
.map(col => col.prop || col.label)
}
// 加载列排序配置
const orderKey = getStorageKey('order')
const savedOrder = localStorage.getItem(orderKey)
if (savedOrder) {
try {
const parsedOrder = JSON.parse(savedOrder)
const validColumns = tableColumns
.filter(col => !col.alwaysShow && !col.fixed)
.map(col => col.prop || col.label)
columnOrder.value = parsedOrder.filter((key: string) => validColumns.includes(key))
validColumns.forEach(key => {
if (!columnOrder.value.includes(key)) {
columnOrder.value.push(key)
}
})
} catch (e) {
console.error('解析列排序失败:', e)
columnOrder.value = tableColumns
.filter(col => !col.alwaysShow && !col.fixed)
.map(col => col.prop || col.label)
}
} else {
columnOrder.value = tableColumns
.filter(col => !col.alwaysShow && !col.fixed)
.map(col => col.prop || col.label)
}
}
// 根据路由生成 storageKey
const getStorageKey = (suffix: string = '') => {
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-');
return `table-columns-${routePath}${suffix ? `-${suffix}` : ''}`;
};
// 排序后的表格列
const sortedTableColumns = computed(() => {
const columns = tableColumns.filter(col => {
const key = col.prop || col.label
return col.alwaysShow || col.fixed || visibleColumns.value.includes(key)
})
if (columnOrder.value.length > 0) {
const orderedColumns: ColumnConfig[] = []
const unorderedColumns: ColumnConfig[] = []
columnOrder.value.forEach(key => {
const col = columns.find(c => (c.prop || c.label) === key)
if (col) {
orderedColumns.push(col)
}
})
columns.forEach(col => {
const key = col.prop || col.label
if (!columnOrder.value.includes(key)) {
unorderedColumns.push(col)
}
})
return [...orderedColumns, ...unorderedColumns]
}
return columns
})
// 立即从 localStorage 加载配置
const loadSavedConfig = () => {
const storageKey = getStorageKey();
const saved = localStorage.getItem(storageKey);
if (saved) {
try {
const savedColumns = JSON.parse(saved);
const validColumns = tableColumns.filter((col) => !col.alwaysShow && !col.fixed).map((col) => col.prop || col.label);
const filteredSaved = savedColumns.filter((col: string) => validColumns.includes(col));
visibleColumns.value = filteredSaved.length > 0 ? filteredSaved : validColumns;
} catch (e) {
console.error('解析列配置失败:', e);
visibleColumns.value = tableColumns.filter((col) => !col.alwaysShow && !col.fixed).map((col) => col.prop || col.label);
}
} else {
visibleColumns.value = tableColumns.filter((col) => !col.alwaysShow && !col.fixed).map((col) => col.prop || col.label);
}
// 列显示控制函数
const checkColumnVisible = (prop: string): boolean => {
if (visibleColumns.value.length === 0) {
return true
}
return visibleColumns.value.includes(prop)
}
// 加载列排序配置
const orderKey = getStorageKey('order');
const savedOrder = localStorage.getItem(orderKey);
if (savedOrder) {
try {
const parsedOrder = JSON.parse(savedOrder);
const validColumns = tableColumns.filter((col) => !col.alwaysShow && !col.fixed).map((col) => col.prop || col.label);
columnOrder.value = parsedOrder.filter((key: string) => validColumns.includes(key));
validColumns.forEach((key) => {
if (!columnOrder.value.includes(key)) {
columnOrder.value.push(key);
}
});
} catch (e) {
console.error('解析列排序失败:', e);
columnOrder.value = tableColumns.filter((col) => !col.alwaysShow && !col.fixed).map((col) => col.prop || col.label);
}
} else {
columnOrder.value = tableColumns.filter((col) => !col.alwaysShow && !col.fixed).map((col) => col.prop || col.label);
}
};
// 监听列变化
const handleColumnChange = (columns: string[]) => {
visibleColumns.value = columns
const storageKey = getStorageKey()
const selectableColumns = columns.filter(col => {
const column = tableColumns.find(c => (c.prop || c.label) === col)
return column && !column.alwaysShow && !column.fixed
})
localStorage.setItem(storageKey, JSON.stringify(selectableColumns))
}
// 排序后的表格列
const sortedTableColumns = computed(() => {
const columns = tableColumns.filter((col) => {
const key = col.prop || col.label;
return col.alwaysShow || col.fixed || visibleColumns.value.includes(key);
});
// 监听列排序变化
const handleColumnOrderChange = (order: string[]) => {
columnOrder.value = order
const storageKey = getStorageKey('order')
localStorage.setItem(storageKey, JSON.stringify(order))
}
if (columnOrder.value.length > 0) {
const orderedColumns: ColumnConfig[] = [];
const unorderedColumns: ColumnConfig[] = [];
return {
visibleColumns,
columnOrder,
sortedTableColumns,
checkColumnVisible,
loadSavedConfig,
handleColumnChange,
handleColumnOrderChange
}
columnOrder.value.forEach((key) => {
const col = columns.find((c) => (c.prop || c.label) === key);
if (col) {
orderedColumns.push(col);
}
});
columns.forEach((col) => {
const key = col.prop || col.label;
if (!columnOrder.value.includes(key)) {
unorderedColumns.push(col);
}
});
return [...orderedColumns, ...unorderedColumns];
}
return columns;
});
// 列显示控制函数
const checkColumnVisible = (prop: string): boolean => {
if (visibleColumns.value.length === 0) {
return true;
}
return visibleColumns.value.includes(prop);
};
// 监听列变化
const handleColumnChange = (columns: string[]) => {
visibleColumns.value = columns;
const storageKey = getStorageKey();
const selectableColumns = columns.filter((col) => {
const column = tableColumns.find((c) => (c.prop || c.label) === col);
return column && !column.alwaysShow && !column.fixed;
});
localStorage.setItem(storageKey, JSON.stringify(selectableColumns));
};
// 监听列排序变化
const handleColumnOrderChange = (order: string[]) => {
columnOrder.value = order;
const storageKey = getStorageKey('order');
localStorage.setItem(storageKey, JSON.stringify(order));
};
return {
visibleColumns,
columnOrder,
sortedTableColumns,
checkColumnVisible,
loadSavedConfig,
handleColumnChange,
handleColumnOrderChange,
};
}