145 lines
4.5 KiB
TypeScript
145 lines
4.5 KiB
TypeScript
/**
|
|
* TableColumnControl 集成辅助函数
|
|
* 提供通用的列配置加载和保存逻辑
|
|
*/
|
|
|
|
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;
|
|
}
|
|
|
|
/**
|
|
* 创建列显隐控制相关的响应式数据和方法
|
|
* @param tableColumns 表格列配置数组
|
|
* @returns 返回 visibleColumns、columnOrder、loadSavedConfig、handleColumnChange、handleColumnOrderChange 等
|
|
*/
|
|
export function useTableColumnControl(tableColumns: ColumnConfig[]) {
|
|
const route = useRoute();
|
|
|
|
// 当前显示的列
|
|
const visibleColumns = ref<string[]>([]);
|
|
// 列排序顺序
|
|
const columnOrder = ref<string[]>([]);
|
|
|
|
// 根据路由生成 storageKey
|
|
const getStorageKey = (suffix: string = '') => {
|
|
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-');
|
|
return `table-columns-${routePath}${suffix ? `-${suffix}` : ''}`;
|
|
};
|
|
|
|
// 立即从 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);
|
|
}
|
|
};
|
|
|
|
// 排序后的表格列
|
|
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;
|
|
});
|
|
|
|
// 列显示控制函数
|
|
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,
|
|
};
|
|
}
|