@@ -0,0 +1,50 @@
|
||||
import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
|
||||
import type { HqListColumnKey, HqListColumnPref, HqListColumnPrefsMap } from '@dukang/shared-types';
|
||||
import { request } from './api';
|
||||
|
||||
type Ctx = {
|
||||
prefs: HqListColumnPrefsMap;
|
||||
ready: boolean;
|
||||
setPrefs: (next: HqListColumnPrefsMap) => void;
|
||||
save: (listKey: HqListColumnKey, next: HqListColumnPref | null) => Promise<void>;
|
||||
};
|
||||
|
||||
const ListColumnPrefsContext = createContext<Ctx>({
|
||||
prefs: {},
|
||||
ready: false,
|
||||
setPrefs: () => {},
|
||||
save: async () => {},
|
||||
});
|
||||
|
||||
export function ListColumnPrefsProvider({
|
||||
initial,
|
||||
children,
|
||||
}: {
|
||||
initial?: HqListColumnPrefsMap;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const [prefs, setPrefs] = useState<HqListColumnPrefsMap>(initial ?? {});
|
||||
const [ready] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (initial) setPrefs(initial);
|
||||
}, [initial]);
|
||||
|
||||
const save = useCallback(async (listKey: HqListColumnKey, next: HqListColumnPref | null) => {
|
||||
const res = await request<{ listColumnPrefs: HqListColumnPrefsMap }>(
|
||||
`/admin/me/list-columns/${listKey}`,
|
||||
{
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(next ? { order: next.order, hidden: next.hidden } : { reset: true }),
|
||||
},
|
||||
);
|
||||
setPrefs(res.listColumnPrefs ?? {});
|
||||
}, []);
|
||||
|
||||
const value = useMemo(() => ({ prefs, ready, setPrefs, save }), [prefs, ready, save]);
|
||||
return <ListColumnPrefsContext.Provider value={value}>{children}</ListColumnPrefsContext.Provider>;
|
||||
}
|
||||
|
||||
export function useListColumnPrefs() {
|
||||
return useContext(ListColumnPrefsContext);
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
import type { HqListColumnPrefsMap } from '@dukang/shared-types';
|
||||
|
||||
export const apiBase = '/api/v1';
|
||||
export const CLIENT_APP = 'HQ_WEB';
|
||||
|
||||
@@ -8,6 +10,9 @@ export type HqProfile = {
|
||||
adminRole: string;
|
||||
status: string;
|
||||
permissionKeys?: string[];
|
||||
cityIds?: string[];
|
||||
cityScoped?: boolean;
|
||||
listColumnPrefs?: HqListColumnPrefsMap;
|
||||
};
|
||||
|
||||
export function getToken() {
|
||||
@@ -87,6 +92,9 @@ export type DashboardStats = {
|
||||
openTickets?: number;
|
||||
pendingStoreWithdrawals?: number;
|
||||
overdueStoreWithdrawals?: number;
|
||||
pendingStoreOnboard?: number;
|
||||
pendingStorePackageAudits?: number;
|
||||
pendingStoreInfoChanges?: number;
|
||||
ordersByStatus: Array<{ status: string; count: number }>;
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
import type { ColumnType } from 'antd/es/table';
|
||||
import type { HqListColumnKey, HqListColumnPref } from '@dukang/shared-types';
|
||||
|
||||
export const SERIAL_COLUMN_KEY = '__serial';
|
||||
export const ACTIONS_COLUMN_KEY = '__actions';
|
||||
|
||||
export function columnKey<T>(col: ColumnType<T>, index: number): string {
|
||||
if (col.key != null && String(col.key).length) return String(col.key);
|
||||
const dataIndex = col.dataIndex;
|
||||
if (typeof dataIndex === 'string' && dataIndex) return dataIndex;
|
||||
if (Array.isArray(dataIndex) && dataIndex.length) return dataIndex.map(String).join('.');
|
||||
if (typeof col.title === 'string' && col.title) return col.title;
|
||||
return `col-${index}`;
|
||||
}
|
||||
|
||||
export function isActionsColumn<T>(col: ColumnType<T>, key: string): boolean {
|
||||
if (key === ACTIONS_COLUMN_KEY || key === 'actions' || key === 'action') return true;
|
||||
return col.title === '操作';
|
||||
}
|
||||
|
||||
export function mergeColumnOrder(defaultKeys: string[], pref?: HqListColumnPref): string[] {
|
||||
const known = new Set(defaultKeys);
|
||||
const ordered = (pref?.order ?? []).filter((k) => known.has(k));
|
||||
for (const key of defaultKeys) {
|
||||
if (ordered.includes(key)) continue;
|
||||
const defaultIdx = defaultKeys.indexOf(key);
|
||||
let insertAt = ordered.length;
|
||||
for (let i = 0; i < ordered.length; i += 1) {
|
||||
if (defaultKeys.indexOf(ordered[i]) > defaultIdx) {
|
||||
insertAt = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
ordered.splice(insertAt, 0, key);
|
||||
}
|
||||
return ordered;
|
||||
}
|
||||
|
||||
export function visibleColumnKeys(defaultKeys: string[], pref?: HqListColumnPref): string[] {
|
||||
const hidden = new Set(pref?.hidden ?? []);
|
||||
return mergeColumnOrder(defaultKeys, pref).filter((k) => !hidden.has(k));
|
||||
}
|
||||
|
||||
export function applyColumnPrefs<T>(
|
||||
columns: ColumnType<T>[],
|
||||
pref: HqListColumnPref | undefined,
|
||||
): ColumnType<T>[] {
|
||||
const keyed = columns.map((col, i) => {
|
||||
const key = columnKey(col, i);
|
||||
return { col: { ...col, key }, key, actions: isActionsColumn(col, key) };
|
||||
});
|
||||
const configurable = keyed.filter((c) => !c.actions);
|
||||
const actions = keyed.filter((c) => c.actions);
|
||||
const defaultKeys = configurable.map((c) => c.key);
|
||||
const visible = new Set(visibleColumnKeys(defaultKeys, pref));
|
||||
const orderedKeys = mergeColumnOrder(defaultKeys, pref).filter((k) => visible.has(k));
|
||||
const byKey = new Map(configurable.map((c) => [c.key, c.col]));
|
||||
return [...orderedKeys.map((k) => byKey.get(k)!).filter(Boolean), ...actions.map((c) => c.col)];
|
||||
}
|
||||
|
||||
export type ListColumnSettingItem = {
|
||||
key: string;
|
||||
title: string;
|
||||
visible: boolean;
|
||||
};
|
||||
|
||||
export function settingItems<T>(
|
||||
columns: ColumnType<T>[],
|
||||
pref?: HqListColumnPref,
|
||||
): ListColumnSettingItem[] {
|
||||
const keyed = columns
|
||||
.map((col, i) => ({ col, key: columnKey(col, i) }))
|
||||
.filter(({ col, key }) => !isActionsColumn(col, key));
|
||||
const hidden = new Set(pref?.hidden ?? []);
|
||||
const order = mergeColumnOrder(keyed.map((c) => c.key), pref);
|
||||
const byKey = new Map(keyed.map((c) => [c.key, c.col]));
|
||||
return order.map((key) => {
|
||||
const col = byKey.get(key);
|
||||
const title = typeof col?.title === 'string' ? col.title : key;
|
||||
return { key, title, visible: !hidden.has(key) };
|
||||
});
|
||||
}
|
||||
|
||||
export type { HqListColumnKey };
|
||||
@@ -0,0 +1,103 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { Button, message } from 'antd';
|
||||
import { SettingOutlined } from '@ant-design/icons';
|
||||
import type { ColumnsType, ColumnType } from 'antd/es/table';
|
||||
import type { HqListColumnKey } from '@dukang/shared-types';
|
||||
import { AdminListColumnsModal } from '../components/AdminListColumnsModal';
|
||||
import { useListColumnPrefs } from './ListColumnPrefsContext';
|
||||
import {
|
||||
ACTIONS_COLUMN_KEY,
|
||||
SERIAL_COLUMN_KEY,
|
||||
applyColumnPrefs,
|
||||
settingItems,
|
||||
type ListColumnSettingItem,
|
||||
} from './list-column-prefs';
|
||||
|
||||
type Options = {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
};
|
||||
|
||||
export function useAdminListColumns<T>(
|
||||
listKey: HqListColumnKey,
|
||||
allColumns: ColumnsType<T>,
|
||||
options: Options = {},
|
||||
) {
|
||||
const { page = 1, pageSize = 20 } = options;
|
||||
const { prefs, save } = useListColumnPrefs();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const pref = prefs[listKey];
|
||||
|
||||
const configured = useMemo(
|
||||
() => applyColumnPrefs(allColumns as ColumnType<T>[], pref),
|
||||
[allColumns, pref],
|
||||
);
|
||||
|
||||
const items = useMemo(
|
||||
() => settingItems(allColumns as ColumnType<T>[], pref),
|
||||
[allColumns, pref],
|
||||
);
|
||||
|
||||
const serialCol: ColumnType<T> = useMemo(
|
||||
() => ({
|
||||
key: SERIAL_COLUMN_KEY,
|
||||
title: '序号',
|
||||
width: 64,
|
||||
fixed: 'left' as const,
|
||||
render: (_: unknown, __: T, index: number) => (page - 1) * pageSize + index + 1,
|
||||
}),
|
||||
[page, pageSize],
|
||||
);
|
||||
|
||||
const columns = useMemo<ColumnsType<T>>(
|
||||
() => [
|
||||
serialCol,
|
||||
...configured.map((col) =>
|
||||
col.title === '操作' || col.key === ACTIONS_COLUMN_KEY || col.key === 'actions'
|
||||
? { ...col, key: col.key ?? ACTIONS_COLUMN_KEY }
|
||||
: col,
|
||||
),
|
||||
],
|
||||
[configured, serialCol],
|
||||
);
|
||||
|
||||
async function persist(next: ListColumnSettingItem[] | null) {
|
||||
setSaving(true);
|
||||
try {
|
||||
if (!next) {
|
||||
await save(listKey, null);
|
||||
} else {
|
||||
await save(listKey, {
|
||||
order: next.map((i) => i.key),
|
||||
hidden: next.filter((i) => !i.visible).map((i) => i.key),
|
||||
});
|
||||
}
|
||||
setOpen(false);
|
||||
message.success(next ? '列设置已保存' : '已恢复默认列');
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '保存失败');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
const settingsButton = (
|
||||
<Button icon={<SettingOutlined />} onClick={() => setOpen(true)}>
|
||||
列设置
|
||||
</Button>
|
||||
);
|
||||
|
||||
const settingsModal = (
|
||||
<AdminListColumnsModal
|
||||
open={open}
|
||||
items={items}
|
||||
saving={saving}
|
||||
onCancel={() => setOpen(false)}
|
||||
onReset={() => void persist(null)}
|
||||
onSave={(draft) => void persist(draft)}
|
||||
/>
|
||||
);
|
||||
|
||||
return { columns, settingsButton, settingsModal };
|
||||
}
|
||||
Reference in New Issue
Block a user