127 lines
3.1 KiB
TypeScript
127 lines
3.1 KiB
TypeScript
import type { Ref } from 'vue';
|
|
import { reactive, ref } from 'vue';
|
|
import type { PaginationProps } from '@arco-design/web-vue';
|
|
import type { CardField, CardFieldConfig, ColResponsiveValue } from '@/types/card';
|
|
import { isNumber } from '@/utils/is';
|
|
import { useAppStore } from '@/store';
|
|
import { CardPageSizeOptions } from '@/types/const';
|
|
|
|
// 卡片显示字段 key
|
|
const CardFieldsKey = 'card-fields';
|
|
|
|
/**
|
|
* 卡片字段配置数据
|
|
*/
|
|
export interface CardFieldConfigData {
|
|
cardFieldConfig: Ref<CardFieldConfig>;
|
|
fieldsHook: CardFieldsHook;
|
|
}
|
|
|
|
/**
|
|
* 卡片字段配置操作
|
|
*/
|
|
export interface CardFieldsHook {
|
|
originFields: Array<CardField>;
|
|
getConfig: () => Array<string>;
|
|
saveConfig: (config: Array<string> | undefined) => void;
|
|
}
|
|
|
|
/**
|
|
* 创建卡片列表列布局
|
|
*/
|
|
export const useCardColLayout = (): ColResponsiveValue => {
|
|
return reactive({
|
|
xs: 24,
|
|
sm: 12,
|
|
md: 8,
|
|
lg: 8,
|
|
xl: 8,
|
|
xxl: 6,
|
|
});
|
|
};
|
|
|
|
/**
|
|
* 创建创建卡片列表分页
|
|
*/
|
|
export const useCardPagination = (): PaginationProps => {
|
|
const appStore = useAppStore();
|
|
return reactive({
|
|
total: 0,
|
|
current: 1,
|
|
pageSize: isNumber(appStore.defaultCardPageSize) ? appStore.defaultCardPageSize : CardPageSizeOptions[0],
|
|
showTotal: true,
|
|
showPageSize: true,
|
|
pageSizeOptions: CardPageSizeOptions
|
|
});
|
|
};
|
|
|
|
/**
|
|
* 使用卡片字段配置
|
|
*/
|
|
export const useCardFieldConfig = (table: string, originFieldConfig: CardFieldConfig): CardFieldConfigData => {
|
|
const cardFieldConfig = ref(originFieldConfig);
|
|
|
|
// 获取配置
|
|
const getConfig = () => {
|
|
// 查询缓存
|
|
let preferConfig: Record<string, string[]> = {};
|
|
const localConfig = localStorage.getItem(CardFieldsKey);
|
|
if (localConfig) {
|
|
try {
|
|
preferConfig = JSON.parse(localConfig as string);
|
|
} catch (e) {
|
|
preferConfig = {};
|
|
}
|
|
}
|
|
// 解析配置
|
|
const preferValue = preferConfig[table];
|
|
if (preferValue?.length) {
|
|
// 配置值
|
|
return preferValue;
|
|
} else {
|
|
// 默认值
|
|
return originFieldConfig.fields.filter(s => s.default).map(s => (s.dataIndex || s.slotName) as string);
|
|
}
|
|
};
|
|
|
|
// 保存配置
|
|
const saveConfig = (config: Array<string> | undefined) => {
|
|
// 查询缓存
|
|
let preferConfig: Record<string, string[] | undefined> = {};
|
|
const localConfig = localStorage.getItem(CardFieldsKey);
|
|
if (localConfig) {
|
|
try {
|
|
preferConfig = JSON.parse(localConfig as string);
|
|
} catch (e) {
|
|
preferConfig = {};
|
|
}
|
|
}
|
|
// 设置缓存
|
|
preferConfig[table] = config;
|
|
localStorage.setItem(CardFieldsKey, JSON.stringify(preferConfig));
|
|
// 刷新
|
|
refresh();
|
|
};
|
|
|
|
// 刷新
|
|
const refresh = () => {
|
|
const preferConfig = getConfig();
|
|
cardFieldConfig.value = {
|
|
...originFieldConfig,
|
|
fields: originFieldConfig.fields.filter(s => preferConfig.includes((s.dataIndex || s.slotName) as string)),
|
|
};
|
|
};
|
|
|
|
// 初始化
|
|
refresh();
|
|
|
|
return {
|
|
cardFieldConfig,
|
|
fieldsHook: {
|
|
originFields: originFieldConfig.fields,
|
|
getConfig,
|
|
saveConfig,
|
|
}
|
|
};
|
|
};
|