import { CrudMethods, CrudSchema } from '.' import Crud from './crud.vue' /** * * 防止未来重构影响 * 通过统一的 useCrud 钩子封装,即使内部实现发生重构,外部调用方也不会受到影响 * 提供稳定的API接口,隔离底层实现细节的变化 * @param crudSchema * @returns */ export function useCrud(crudSchema: CrudSchema) { const crudRef = ref(null) const register = (crudInstance: any) => { crudRef.value = crudInstance } const crudMethods: CrudMethods = { // 获取表格实例 getCrudRef() { return crudRef.value }, // 设置组件状态(props) setState(state: any) { return crudRef.value?.setState(state) }, // 获取组件状态 getState() { return crudRef.value?.getState() }, getRowSelection() { return crudRef.value?.getRowSelection() }, // 刷新表格数据,保留当前表单搜索条件 reload(params?: Record) { return crudRef.value?.reload(params) }, // 获取只读状态信息 getReadonlyState() { return crudRef.value?.getReadonlyState() || { selection: [] } }, // 通过接口删除行 removeByApi(row) { return crudRef.value?.removeByApi(row) }, // 获取art表格实例,可通过该方法来操作原生的art-table组件 // 个人建议,可以在该文件上包装一层再暴露给外部使用,如上述的reload方法一样 getArtTableInstance() { return crudRef.value?.getArtTableInstance() }, exportData() { return crudRef.value?.exportData() }, getVxeTableInstance() { return crudRef.value?.getVxeTableInstance() }, // 刷新策略 /** 全量刷新:清空所有缓存,重新获取数据(适用于手动刷新按钮) */ refreshData() { if (crudSchema.useVxeTable) { return this.getVxeTableInstance()?.commitProxy('reload', {}) } return this.getArtTableInstance()?.refreshData() }, /** 轻量刷新:仅清空当前搜索条件的缓存,保持分页状态(适用于定时刷新) */ refreshSoft() { if (crudSchema.useVxeTable) { return this.getVxeTableInstance()?.commitProxy('query', {}) } return this.getArtTableInstance()?.refreshSoft() }, /** 新增后刷新:回到第一页并清空分页缓存(适用于新增数据后) */ refreshCreate() { if (crudSchema.useVxeTable) { return this.getVxeTableInstance()?.commitProxy('reload', {}) } return this.getArtTableInstance()?.refreshCreate() }, /** 更新后刷新:保持当前页,仅清空当前搜索缓存(适用于更新数据后) */ refreshUpdate() { if (crudSchema.useVxeTable) { return this.getVxeTableInstance()?.commitProxy('query', {}) } return this.getArtTableInstance()?.refreshUpdate() }, /** 删除后刷新:智能处理页码,避免空页面(适用于删除数据后) */ refreshRemove() { if (crudSchema.useVxeTable) { const gridApi = this.getVxeTableInstance() const records = gridApi.getCheckboxRecords() if ( gridApi.getTableData()?.fullData?.length === 1 || gridApi.getTableData()?.fullData?.length === records.length ) { const { pager }: any = gridApi.getProxyInfo() if (pager.currentPage > 1) { pager.currentPage = pager.currentPage - 1 return this.getVxeTableInstance()?.commitProxy('query', {}) } else { if (pager.total >= gridApi.getTableData()?.fullData?.length) { return this.getVxeTableInstance()?.commitProxy('query', {}) } else { return this.getVxeTableInstance()?.commitProxy('reload', {}) } } } else { return this.getVxeTableInstance()?.commitProxy('query', {}) } } return this.getArtTableInstance()?.refreshRemove() }, // 打开内置新增表单 openAddDialog() { return this.getCrudRef()?.openAddDialog() }, // 打开内置修改表单 openEditDialog() { return this.getCrudRef()?.openEditDialog() }, // 打开内置详情表单 openViewDialog() { return this.getCrudRef()?.openViewDialog() }, // 执行内置的删除方法 executeRemove() { return this.getCrudRef()?.executeRemove() }, // 执行内置的批量删除方法 executeBatchRemove() { return this.getCrudRef()?.executeBatchRemove() } } // 创建表单组件的配置 const CrudComponent = defineComponent({ setup(_, { attrs, slots }) { return () => h( Crud, { ...attrs, crudSchema: crudSchema, onRegister: register, crudMethods: crudMethods }, slots ) } }) return [CrudComponent, crudMethods] as const }