105 lines
2.3 KiB
TypeScript
105 lines
2.3 KiB
TypeScript
import { FormModalUseOptions, useFormModal } from '../../AnForm/hooks/useFormModal';
|
|
import { AnTable, TableProps } from '../components/Table';
|
|
import { ModifyForm } from './useModiyForm';
|
|
import { SearchForm, useSearchForm } from './useSearchForm';
|
|
import { TableColumn, useTableColumns } from './useTableColumn';
|
|
import { AnTablePlugin, PluginContainer } from './useTablePlugin';
|
|
|
|
export interface TableUseOptions extends Pick<TableProps, 'data' | 'tableProps' | 'paging'> {
|
|
/**
|
|
* 唯一ID
|
|
* @example
|
|
* ```ts
|
|
* 'UserTable'
|
|
* ```
|
|
*/
|
|
id?: string;
|
|
/**
|
|
* 插件列表
|
|
* @example
|
|
* ```ts
|
|
* [useRefresh()]
|
|
* ```
|
|
*/
|
|
plugins?: AnTablePlugin[];
|
|
/**
|
|
* 表格列
|
|
* @example
|
|
* ```ts
|
|
* [{
|
|
* dataIndex: 'title',
|
|
* title: '标题'
|
|
* }]
|
|
* ```
|
|
*/
|
|
columns?: TableColumn[];
|
|
/**
|
|
* 搜索表单
|
|
* @example
|
|
* ```ts
|
|
* [{
|
|
* field: 'name',
|
|
* label: '用户名称',
|
|
* setter: 'input'
|
|
* }]
|
|
* ```
|
|
*/
|
|
search?: SearchForm;
|
|
/**
|
|
* 新建弹窗
|
|
* @example
|
|
* ```ts
|
|
* {
|
|
* title: '添加用户',
|
|
* items: [],
|
|
* submit: (model) => {}
|
|
* }
|
|
* ```
|
|
*/
|
|
create?: FormModalUseOptions;
|
|
/**
|
|
* 修改弹窗
|
|
* @example
|
|
* ```ts
|
|
* {
|
|
* extend: true, // 基于新建弹窗扩展
|
|
* title: '修改用户',
|
|
* submit: (model) => {}
|
|
* }
|
|
* ```
|
|
*/
|
|
modify?: ModifyForm;
|
|
}
|
|
|
|
export function useTable(options: TableUseOptions) {
|
|
const pluginer = new PluginContainer(options.plugins ?? []);
|
|
|
|
options = pluginer.callOptionsHook(options);
|
|
|
|
const { columns } = useTableColumns(options.columns ?? []);
|
|
const data = ref(options.data);
|
|
const pagination = ref({ hide: false, showTotal: true, showPageSize: true, ...(options.paging ?? {}) });
|
|
const tableProps = ref(options.tableProps ?? {});
|
|
const tableRef = ref<InstanceType<typeof AnTable> | null>(null);
|
|
const searchProps = useSearchForm(options.search);
|
|
// const create = options.create && useFormModal(options.create);
|
|
|
|
const AnTabler = () => (
|
|
<AnTable
|
|
ref={(el: any) => (tableRef.value = el)}
|
|
columns={columns.value}
|
|
data={data.value}
|
|
paging={pagination.value}
|
|
tableProps={tableProps.value}
|
|
search={searchProps.value}
|
|
pluginer={pluginer}
|
|
></AnTable>
|
|
);
|
|
|
|
return {
|
|
component: AnTabler,
|
|
columns,
|
|
tableRef,
|
|
};
|
|
}
|