{"id":19071798,"url":"https://github.com/yunsii/antd-curd","last_synced_at":"2025-04-28T15:51:17.330Z","repository":{"id":57142077,"uuid":"200833298","full_name":"yunsii/antd-curd","owner":"yunsii","description":"📦 基于 ant design 、 dva 、 antd-form-mate 的增删改查页面组件。","archived":false,"fork":false,"pushed_at":"2020-08-19T15:04:50.000Z","size":2157,"stargazers_count":26,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-18T18:32:43.682Z","etag":null,"topics":["antd","crud","curd"],"latest_commit_sha":null,"homepage":"https://yunsii.github.io/antd-curd","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yunsii.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-06T10:55:32.000Z","updated_at":"2022-03-28T15:35:31.000Z","dependencies_parsed_at":"2022-09-05T07:50:37.687Z","dependency_job_id":null,"html_url":"https://github.com/yunsii/antd-curd","commit_stats":null,"previous_names":["theprimone/antd-curd"],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Fantd-curd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Fantd-curd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Fantd-curd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Fantd-curd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yunsii","download_url":"https://codeload.github.com/yunsii/antd-curd/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251342700,"owners_count":21574242,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd","crud","curd"],"created_at":"2024-11-09T01:31:07.286Z","updated_at":"2025-04-28T15:51:17.312Z","avatar_url":"https://github.com/yunsii.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eantd-curd\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n基于 ant design 、 dva、 [antd-form-mate](https://github.com/theprimone/antd-form-mate) 的增删改查页面组件。\n\n[![GitHub license](https://img.shields.io/github/license/theprimone/antd-curd.svg)](https://github.com/theprimone/antd-curd/blob/master/LICENSE)\n[![npm Version](https://img.shields.io/npm/v/antd-curd.svg)](https://www.npmjs.com/package/antd-curd)\n[![GitHub stars](https://img.shields.io/github/stars/theprimone/antd-curd.svg)](https://github.com/theprimone/antd-curd/stargazers)\n[![GitHub issues](https://img.shields.io/github/issues/theprimone/antd-curd.svg)](https://github.com/theprimone/antd-curd/issues)\n[![GitHub commit activity](https://img.shields.io/github/commit-activity/m/theprimone/antd-curd.svg)](https://github.com/theprimone/antd-curd/commits/master)\n\n\u003c/div\u003e\n\n**[在线预览 -\u003e](https://zpr1g.github.io/antd-curd)**\n\n由于没有打包发布的经验，所以在 2.0.0 之前的版本除了一些未知的 bug 外，可能会存在一些兼容性问题。此次重构到 2.0.0 后，移除了依赖 `antd-form-mate` 。后续发包当慎重起见。\n\n## 结合 dva 的使用说明\n\n组件内部调用以下 `effect` 函数:\n\n* `fetch`  获取数据列表\n* `detail`  获取对象详情\n* `create`  创建对象\n* `update`  更新对象\n* `delete`  删除对象\n\n以下 `reducer` 函数：\n\n* `_saveDetail`  关闭弹窗时，清空对象详情\n\n并注入以下数据字段：\n\n* `data`  形如 `{ list: any[], pagination: any }`， 分页器属性参考 `Pagination` 组件\n* `detail`  [可选]对象详情字段\n\n基于此封装了 [dva-base-models](https://github.com/theprimone/dva-base-models)，配置相关请求函数即可使用。参考 [Demo](https://github.com/zpr1g/ant-design-pro-plus/blob/v2/src/pages/Enhance/models/curdPage.ts) 。\n\n## 关于表单\n\n通过 `ConfigProvider` 组件配置 `createFormItemsFn` ，组件内部关于创建表单的地方都会调用该方法，可直接从 [antd-form-mate](https://github.com/theprimone/antd-form-mate) 导出 `createFormItems` 传入即可。\n\n## [StandardTable](/src/components/StandardTable/index.tsx)\n\n基于 ant-deisgn-pro-v2 中的 [StandardTable](https://github.com/ant-design/ant-design-pro/blob/v2/src/components/StandardTable/index.js) 组件。\n\n* 默认开启 `hideOnSinglePage`\n* 间隔行着色\n* 多选功能可选，通过 `checkable` 控制\n\n## [StandardList](/src/components/StandardList/index.tsx)\n\n与 StandardTable 类似，只是将容器从 [Table](https://ant.design/components/table-cn/) 替换为 [List](https://ant.design/components/list-cn/) ，并自定义组件（比如 [Card](https://ant.design/components/card-cn/) ）渲染每条记录。支持多选。\n\n### API\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| `renderItem` | 用于自定义渲染组件 | `({ record, actions, recordSelection, checkable }) =\u003e React.ReactNode` | - |\n\n## [DetailDrawer](/src/components/DetailDrawer/index.tsx) 详情抽屉\n\n基于 [antd-form-mate](https://github.com/theprimone/antd-form-mate) 实现的详情表单抽屉，参数定义可参见 [DetailFormDrawer/index.tsx](/src/components/DetailDrawer/index.tsx#L10) 。开启防抖。\n\n## [DetailModal](/src/components/DetailModal/index.tsx) 详情模态框\n\n基于 [antd-form-mate](https://github.com/theprimone/antd-form-mate) 实现的详情模态框，参数定义可参见 [DetailFormModal/index.tsx](/src/components/DetailModal/index.tsx#L28) 。开启防抖。\n\n## [QueryPanel](/src/components/QueryPanel/index.tsx) 查询面板\n\n![K1ousP.png](https://s2.ax1x.com/2019/10/21/K1ousP.png)\n\n基于 antd-form-mate 实现的查询面板组件，具体实现可参考 [QueryPanel/index.tsx](/src/components/QueryPanel/index.tsx) ，只需传入表单配置和 `onSearch` 方法即可使用。同时提供了重置表单后的 `onReset` 函数。\n\n## [Curd](/src/Curd.tsx)\n\n**为包含在 `Curd` 中的子组件注入 `__curd__` 的实例属性**\n\n`state` 中保存了当前页面的查询参数：\n\n* `searchForm` 表单数据\n* `searchParams` 分页器，过滤器，排序器参数\n  \n还有一个 `handleSearch` 方法可供直接（ `innerRef` ）调起当前页面数据查询接口以供**刷新数据**使用。\n\n### API\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| `modelName` | dva 中 model 的名称空间 | `string` | - |\n| `data` | 对象分页数据 | `{ list: T[]; pagination?: any }` | - |\n| `dipatch` | dva 注入的 dispatch 函数 | `Function` | - |\n| `wrapper` | 组件被包裹的容器，默认为无边框 `Card` | `React.ComponentClass \\| null` | - |\n| `createFormItemsFn` | 创建表单项的函数 | `(form: WrappedFormUtils) =\u003e (itemsConfig: ItemConfig[], formLayout?: Layout) =\u003e JSX.Element[]` | `() =\u003e () =\u003e ([])` |\n\n## [Curd.Query](/src/curd-components/CurdQuery/index.tsx)\n\n查询面板组件。\n\n通过 `__curd__` 实例属性为 `Curd` 组件更新 `searchForm` 。\n\n如果需要主动为 `Curd.Query` 组件的表单赋值，通过 `ref` 方法拿到 `Curd.Query` 的实例，再通过 `ref.form` 拿到表单对象即可。\n\n另外，如果需要外部直接调起**新的搜索**，可通过 `ref` 拿到对象实例后调用 `setFieldsValueAndSearch` 并传入查询表单即可调起搜索，自动清空未输入的值。\n\n### API\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| `queryArgsConfig` | 查询参数配置，参考 [index.js](https://github.com/theprimone/ant-design-pro-v2-plus/blob/79d034d339806c2a24c347036cebc219152f6b33/src/pages/Enhance/CurdPage/index.js#L24) | `any[]` | `[]` |\n\n## [CurdBox](/src/curd-components/CurdBox/index.tsx)\n\n**为包含在 `CurdBox` 中的子组件注入 `__curdBox__` 的实例属性**\n\n通过 `__curd__` 实例属性为 `Curd` 组件更新 `searchParams` 。\n\n增删改查容器，为子组件提供对象相关详情的展示和编辑弹窗，以及对象操作相关的增删改等操作（ Actions ）。\n\n### API\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| `createTitle` | 新建窗口名称 | `string` | `'新建对象'` |\n| `detailTitle` | 详情窗口名称 | `string` | `'对象详情'` |\n| `updateTitle` | 编辑窗口名称 | `string` | `'编辑对象'` |\n| `fetchLoading` | 请求列表 loading | `boolean` | - |\n| `createLoading` | 创建 model loading | `boolean` | - |\n| `detailLoading` | 请求 model 详情 loading | `boolean` | - |\n| `updateLoading` | 更新 model loading | `boolean` | - |\n| `deleteLoading` | 删除 model loading | `boolean` | - |\n| `createButtonName` | 新建按钮名称，为空时隐藏按钮 | `string \\| false` | `'新建'` |\n| `popup` | 弹窗类型 | `'modal' \\| 'drawer'` | - |\n| `popupProps` | 弹窗配置，根据 `popup` 配置 | [CustomDetailFormDrawerProps](/src/curd-components/CurdBox/index.tsx#L9) \\| [CustomDetailFormModalProps](/src/curd-components/CurdBox/index.tsx#L23) | - |\n| `setFormItemsConfig` | 配置表单数据 | `(detail: {}, mode: 'create' \\| 'detail' \\| 'update', form) =\u003e any[]` | - |\n| `afterPopupClose` | 关闭弹窗后回调函数 | `() =\u003e void` | - |\n| `interceptors` | 拦截器 | [interceptors](#interceptors) | - |\n| `detail` | model 详情 | `any` | - |\n| `actionsConfig` | 表格配置 | `[actionsConfig](#actionsConfig) \\| false \\| null` | - |\n| `showOperators` | 是否展示操作栏 | `boolean` | - |\n| `extraOperators` | 扩展类似新增按钮的操作栏 | `JSX.Element[]` | - |\n| `dipatch` | dva 注入的 dispatch 函数 | `Function` | - |\n| `autoFetch` | 渲染后是否自动发起请求，如果需要配置额外的查询参数，可置为 false 手动自定义发起初始化请求 | `boolean` | `true` |\n| `reSearchAfterUpdate` | 更新 model 是否自动刷新列表 | `boolean` | `false` |\n| `__curd__` | 控制 Curd 相关属性 | Curd 实例 | - |\n\n#### interceptors\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| `updateFieldsValue` | 表单数据拦截处理，类似时间区间这样的数据，需要单独处理后再提交 | `(fieldsValue: any, mode?: 'create' \\| 'update') =\u003e any` | - |\n| `handleCreateClick` | 新建点击事件拦截 | `() =\u003e boolean \\| undefined` | - |\n| `handleDetailClick` | 详情点击事件拦截，可通过路由跳转到自定义的对象详情页面 | `(record: any) =\u003e boolean \\| undefined` | - |\n| `handleUpdateClick` | 编辑点击事件拦截 | `(record: any) =\u003e boolean \\| undefined` | - |\n| `handleDeleteClick` | 删除点击事件拦截 | `(record: any) =\u003e void` | - |\n| `handleFilterAndSort` | 过滤器和排序器处理，可用于使过滤器和分页器受控 | `(filtersArg: Record\u003ckeyof any, string[]\u003e, sorter: SorterResult\u003cany\u003e, extra?: TableCurrentDataSource\u003cany\u003e) =\u003e any` | - |\n\n#### actionsConfig\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| `showActionsCount` | 除更多外需要展示的操作个数 | `number` | `3` |\n| `extraActions` | 除 **详情（4）**，**编辑（8）**，**删除（12）** 外，可自行配置额外操作。注意，数字是操作的 `key` ，根据 `key` 不同，会按升序排列 | [ActionType](/src/curd-components/CurdBox/actions/index.tsx) | - |\n| `confirmKeys` | 需要弹出确认窗口的 `key` 数组 | `(number \\| [number, (record?: any) =\u003e string])[]` | `[12]` |\n| `confirmProps` | 额外的 Popconfirm 配置 | `PopconfirmProps` | - |\n| `hideActions` | 隐藏操作的 `key` 数组 | `number[] \\| ((record?: any) =\u003e void \\| number[])` | - |\n| `disabledActions` | 禁用操作的 `key` 数组 | `(record?: any) =\u003e void \\| number[]` | - |\n| `detailActionTitle` | 详情 action 名称 | `string` | `'详情'` |\n| `updateActionTitle` | 编辑 action 名称 | `string` | `'编辑'` |\n| `deleteActionTitle` | 删除 action 名称 | `string` | `'删除'` |\n\n#### 注意事项\n\n* `handle**Click` 事件（除 `handleDeleteClick` 事件外， `handleDeleteClick` 直接中断）默认不会中断后续流程，如果需要中断， `return true` 即可。\n* 如果对象详情不需要再请求接口，不注入 `detail` 或者 `detailLoading` 即可。\n\n## [Curd.Table](/src/curd-components/CurdTable/index.tsx)\n\n![K1oKqf.png](https://s2.ax1x.com/2019/10/21/K1oKqf.png)\n\n由 [CurdBox](/src/curd-components/CurdBox/index.tsx) 封装 [StandardTable](/src/components/StandardTable/index.tsx) 而成。\n\n## [Curd.List](/src/curd-components/CurdList/index.tsx)\n\n![K1oldS.png](https://s2.ax1x.com/2019/10/21/K1oldS.png)\n\n由 [CurdBox](/src/curd-components/CurdBox/index.tsx) 封装 [StandardList](/src/components/StandardList/index.tsx) 而成。\n\n[Demo](/stories/index.stories.tsx)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunsii%2Fantd-curd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyunsii%2Fantd-curd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunsii%2Fantd-curd/lists"}