import { ref, Ref, onMounted, nextTick, unref } from 'vue';
import _ from 'lodash';
import * as DbCacheUtils from '@/utils/DbCacheUtils';
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
import { setup as useRx } from './RxBusMixins';
interface MyProps {
table: Ref<any>;
/** 是否自动加载配置 */
auto?: boolean;
cacheKey?: string;
}
interface MyOption {
label: string;
prop: string;
is_check: boolean;
}
interface TableStore {
commit(name: string, ...args);
states: {
_columns: Ref<TableColumnCtx<any>[]>;
};
updateColumns();
}
function SaveData(key: string, options: MyOption[]) {
return DbCacheUtils.SetValue(key, JSON.stringify(options));
}
async function GetData(key: string): Promise<MyOption[]> {
const json = await DbCacheUtils.GetValue<string>(key);
if (!json) return null;
return JSON.parse(json);
}
/**
* @param props
* @returns
*/
export function useTableColumns<T = any>(props: MyProps) {
const options = ref<MyOption[]>([]);
const rxHub = useRx();
function GetCacheKey() {
return props.cacheKey || 'table';
}
let storeColumns: TableColumnCtx<T>[];
/**
* 根据配置初始化列
*/
async function InitShowColumns() {
const table = props.table.value;
const store: TableStore = table.store;
const array = unref(store.states._columns);
storeColumns = _.clone(array);
const list = await GetData(GetCacheKey());
const soureList = storeColumns
.filter(t => t.property != null)
.map(t => ({
prop: t.property,
label: t.label,
is_check: true,
}));
if (list != null && list.length > 0) {
// 这里需要对比2个数组 因为前端的列可能被修改过
soureList.forEach(col => {
const item = list.find(t => t.prop === col.prop);
if (item != null) {
col.is_check = item.is_check;
}
});
options.value = soureList;
InitConfig();
}
else {
options.value = soureList;
}
}
onMounted(async () => {
await nextTick();
if (props.auto !== false) {
InitShowColumns();
}
});
/**
* 弹出列设置
*/
function ShowColumnsConfig() {
rxHub.emit('ShowTableColumnDialog', {
options: options.value,
callback: async (list) => {
options.value = list;
InitConfig();
}
});
}
async function InitConfig() {
const table = props.table.value;
const store: TableStore = table.store;
const array = unref(store.states._columns);
options.value.forEach(option => {
if (option.is_check === false) {
const col = array.find(t => t.property === option.prop);
if (col != null) {
store.commit('removeColumn', col, null);
}
}
else {
const col = storeColumns.find(t => t.property === option.prop);
if (!array.some(t => t.property === option.prop)) {
store.commit('insertColumn', col, null);
}
}
});
await nextTick();
store.updateColumns();
await SaveData(GetCacheKey(), options.value);
}
return {
InitShowColumns,
ShowColumnsConfig,
};
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。