# crud-vue **Repository Path**: huhl_fork/crud-vue ## Basic Information - **Project Name**: crud-vue - **Description**: 基于vue的CRUD通用视图模型库 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 4 - **Created**: 2023-03-27 - **Last Updated**: 2023-03-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README > # !!! 该库已迁移至 [Cruda](https://github.com/holyhigh2/cruda),本仓库不再维护 !!! # ~~CRUD-vue~~   基于 Vue 的通用 CRUD 视图模型库;提供对常用 CRUD 场景的视图与操作托管,通过不同适配器可以实现对主流 UI 库的自动适配。 ## 概念图 ![CRUD-vue](./assets/crud-vue.png) ## 介绍   在所有存在列表展示的业务系统中,无论使用何种 UI 库都存在大量 CRUD 场景。CRUD-vue 为使用者抽象通用行为并内建数据模型统一调度相关操作。通过标准 REST 接口对接服务端,并通过适配器对接不同 UI 库,实现低成本、配置化的界面托管。 ## 基本特性 - 数据托管 ```html ``` - 操作托管 ```js $crud.submit(formEl) //提交表单 $crud.reload() //刷新列表数据 $crud.cancel() //设置表单状态为取消 ``` - 状态托管 ```html ``` - 过程封装 ```js /*调用查询方法时,系统会执行 1. 设置表单与查询按钮的loading状态为true 2. 自动封装查询参数(query、分页、排序、...) 3. 触发钩子 4. 异常捕获 5. ... */ $crud.toQuery() ``` - RESTful HTTP Method ```js $crud.toQuery() //GET $crud.toDelete() //DELETE $crud.doUpdate() //PUT ``` ## 安装   从 NPM 安装 ``` npm i @holyhigh/crud-vue ```   然后选择对应 ui 库并安装适配器 ## 如何使用 ### 1. 安装适配器 - **element-ui** ```js // 安装CRUD import request from 'axios' import CRUD from '@holyhigh/crud-vue/element-ui' //通常request总是会使用封装后的axios实例 Vue.use(CRUD, { request: request }) ``` - **element-plus** ```js // 安装CRUD import request from 'axios' import CRUD from '@holyhigh/crud-vue/element-plus' //通常request总是会使用封装后的axios实例 createApp(App).use(CRUD, { request: request }) ``` ### 2. 激活 - **element-ui** ```js //在vue对象的根属性中标记crud/cruds(多实例)属性 export default { crud: 'auth/users', // crud: {url:'auth/users'} 对象方式 mounted() { // 激活后业务组件会被注入一个名为“$crud”的CRUD实例 this.$crud.reload() // 以及一个入口标识。标识可以用于区分入口或自定义组件 this.$isCrudEntry } ... } ``` 通过对象方式激活 CRUD 时,可以传递除 url 外的其他自定义参数。比如 ```js export default { crud: {url:'auth/users',permission:'a_b_c'} ... } ``` 之后可通过 VM 属性`params`(read only)来获取激活参数 ```js this.$crud.params.permission ``` params 参数在创建自定义 CRUD 组件时非常有用,比如通过 permission 参数可以实现组件自动权限管理,控制组件视图展示 > **v1.1+** > > ```js > //element-ui 也可以使用useCrud动态创建crud实例 > const $crud = useCrud(vm, restURLMap) > ``` - **element-plus** ```html ``` ### 3. 多实例 - **element-ui** ```js //在一个页面上需要同时处理多CRUD业务时可以通过修改激活方式来处理 export default { cruds: {//注意,激活标识与单实例不同,多了一个 "s" user: '/api/users',// user: {url:'/api/users'} 对象方式 log: '/api/logs' }, mounted() { // 多实例激活时注入变量会变成“$cruds”,且必须通过明确的实例标识来调用API this.$cruds.user.reload() } ... } ``` > **v1.1+** > > ```js > //element-ui 也可以使用userCruds动态创建cruds实例 > const $cruds = useCruds(vm, restURL) > ``` - **element-plus** ```html ``` ### 4. HOOK - **element-ui** ```js //CRUD提供多种回调钩子以满足不同的业务场景 import CRUD from '@holyhigh/crud-vue' export default { crud: '/api/users', methods:{ [CRUD.HOOK.AFTER_QUERY](crud, rs) { //根据查询结果设置分页值与表格数据 crud.pagination.total = rs.data.total crud.table.data = rs.data.records || [] } } ... } ``` - **element-plus** ```html ``` ### 5. 自定义组件 - **element-ui**   自定义组件的核心逻辑是封装 crud 页面的数据及操作,比如 crudTable,而前提就是获取$crud实例。通过`lookUpCrud`方法可以拿到页面入口的$crud 实例。下面以一个查询框为例展示自定义组件需要关注的几个方面 ```html ``` - **element-plus** ```html ``` ### 6. URL 参数 - **element-ui**   CRUD 激活时,REST 地址支持 URL 参数来动态构建。通过 **`:varName`** 来声明变量,如下例 ```js //user实例的地址使用了orgId参数 export default { cruds: { org: '/api/orgs', user: '/api/orgs/:orgId/users' }, ... methods:{ //切换org时调用该方法 setOrg(orgId){ this.$cruds.user.setURLParams({orgId}) this.$cruds.user.toQuery() } } } ``` 如你所见,动态 URL 最典型的使用场景就是关联业务(_当然,非动态 URL 也可实现相同功能_)。通过`setURLParams`方法可以动态修改请求地址,之后进行 C/R/U/D 操作 - **element-plus** 逻辑与 element-ui 相同 ### 7. defaults 可以为 CRUD 指定全局 defaults 属性 ```js // 如果项目返回值统一格式就可以设置全局HOOK实现查询结果赋值 CRUD.defaults[CRUD.HOOK.AFTER_QUERY] = function (crud, rs) { crud.pagination.total = rs.data.total crud.table.data = rs.data.records || [] } // 可以设置默认的全局分页数 CRUD.defaults.pagination.pageSize = 10 // 可以设置默认的按钮显示状态 CRUD.defaults.view.queryReset = true // 可以设置默认的列表数据主键key CRUD.defaults.table.rowKey = 'id' ``` 支持默认值设置的属性可在 VM 中查看 ### 8. RESTAPI RESTAPI 用来构建资源请求地址。默认 C/R/U/D 的资源标识符都为空,如果服务器有不同模式可以修改 API 地址。 ```js CRUD.RESTAPI = { QUERY: '', //R EXPORT: '/export', ADD: '', //C UPDATE: '', //U DELETE: '', //D IMPORT: '/import', } ``` **注意**,C/R/U/D 对应的 HTTP Method 不会变更 ## VM - view ✅ > 业务组件通过 view 来控制 UI > > - queryShow 查询框显示开关 > - queryReset 查询框重置按钮显示开关 > - opAdd 新增按钮显示开关 > - opEdit 编辑按钮显示开关 > - opDel 删除按钮显示开关 > - opExport 导出按钮显示开关 - loading > 通过 loading 控制锁定状态 > > - query 查询按钮锁定开关 > - table 表格锁定开关 > - del 删除按钮锁定开关 > - export 导出按钮锁定开关 > - submit 提交按钮锁定开关 > - form 表单加载锁定开关 - query > 托管查询条件的容器 - table > 表格容器托管当前 crud 实例的列表/tree 数据及显示状态 > > - data 表格数据 > - selection 当前选中行 > - allColumns 表格所有列,用于动态展示 > - orders 排序列表,会传递给 GET 请求 > - rowKey✅ 表格行的 id key,默认为'id'。通常由适配器自动设置 - pagination > 分页容器托管当前 crud 实例的列表分页状态 > > - pageSize✅ 每页记录数 > - currentPage 当前页号 > - total 总记录数 - form > 表单容器托管当前 crud 实例的表单数据 - formStatus > 表单当前状态 0:默认;1:新增;2:编辑;3:查看 - vm > crud 的入口 vue 实例 - params > crud 激活参数,通过对象方式构造 crud 时可以注入。可用于自定义组件中进行附加操作,比如附加 CRUD 权限控制 - error > crud 错误信息{name,message,status}。可以用于监控并作出合适的反馈,比如网络超时提示 ✅ **_表示支持全局默认值_** ## APIs - toQuery() : Promise > 启动 crud 实例的查询。向指定 REST 地址发送 GET 请求 - toDelete(rows) : Promise > 启动 crud 实例的删除。向指定 REST 地址发送 DELETE 请求 - toExport() : Promise > 启动 crud 实例的导出。向指定 REST 地址发送 GET 请求 - toImport(file/s) : Promise > 启动 crud 实例的导入。向指定 REST 地址发送 POST 请求 - toAdd(...args) > 设置 form 状态为新增。 - toEdit(row) : Promise > 设置 form 状态为编辑。向指定 REST 地址发送 GET 请求 - toView(row) : Promise > 设置 form 状态为查看。向指定 REST 地址发送 GET 请求 - cancel() > 设置 form 状态为取消。 - submit(formEl) : Promise > 会调用 formEl 的 validate 方法,并在成功后执行 doAdd(POST)/doEdit(PUT)操作。对于验证错误,catch 中会返回 invalidFields - reload() : Promise > 重置分页信息并执行一次 toQuery() - getRestURL() > 获取 crud 实例的服务地址。通常用于 crud 内部 - setURLParams(paramObj) > 设置服务地址中的参数表 - getDetails(rowId) > 获取行信息。通常用于 crud 内部 - changeSelection(selection: Record[]) > 用在 table 的 selection-change 事件中,记录 table 当前已选记录 - changeSort(sortData: { column: Record prop: string order: string | null }) > 用在 table 的 sort-change 事件,会自动管理排序信息并触发查询 ## HOOKs - BEFORE_QUERY(crud,params,orders,cancel) > 查询前回调,可以修改请求参数(params),比如分页名称等,可取消。取消后不会触发 AFTER_QUERY > **注意** ,params 为提交接口的实际对象(包含 query、pagination),此处修改 crud.query/pagination 的内容不会提交到接口 - AFTER_QUERY(crud,rs) > 查询后回调,可以获取查询结果,设置表格 - BEFORE_DELETE(crud,rows,cancel) > 删除前调用,可取消。取消后不会触发 AFTER_DELETE - AFTER_DELETE(crud,rs) > 删除后调用 - BEFORE_ADD(crud,...args) > 新增前调用,可以用来清空表单或产生 uuid 等 - BEFORE_EDIT_QUERY(crud,params,cancel) > 发出编辑查询前调用,可取消。取消后不会触发 BEFORE_EDIT - BEFORE_EDIT(crud,rs) > 编辑前调用,可以用来锁定某些字段 - BEFORE_VIEW_QUERY(crud,params,cancel) > 发出查看查询前调用,可取消。取消后不会触发 BEFORE_VIEW - BEFORE_VIEW(crud,rs) > 查看查询结果返回后调用 - BEFORE_SUBMIT(crud,cancel) > 提交前调用,可对 form 进行最后加工,可取消。取消后不会触发 AFTER_SUBMIT - AFTER_SUBMIT(crud,rs) > 提交后调用,可以用来刷新页面、发送通知或其他操作 - BEFORE_EXPORT(crud,params,orders,cancel) > 导出前调用,同 BEFORE_QUERY,可取消。取消后不会触发 AFTER_EXPORT - AFTER_EXPORT(crud,rs) > 获取导出数据后调用 - ON_ERROR(crud,error) > 操作发生错误时调用 - ON_CANCEL(crud) > 表单取消编辑时触发(调用 cancel 后) - BEFORE_IMPORT(crud,params,cancel) > 导入文件上传前调用,可在 params 中添加额外参数,可取消。取消后不会触发 AFTER_IMPORT - AFTER_IMPORT(crud,rs) > 导入上传完成后调用 ## 可导出 ```js import CRUD,{...} from '@holyhigh/crud-vue/element-ui' import CRUD,{...} from '@holyhigh/crud-vue/element-plus' ``` - CRUD crud 命名空间,可设置全局默认值、调用钩子等 **element-ui** - useCrud(vm,restURL) : CRUD > 创建一个 crud 单实例入口并绑定指定的 vm(vue 组件) - useCruds(vm,restURLMap) : Record > 创建一个 crud 多实例入口并绑定指定的 vm(vue 组件) - lookUpCrud(vm,crudName?) : CRUD | null > 向上查找最近的 crud 实例 **element-plus** - useCrud(restURL) : CRUD > 创建一个 crud 单实例入口并返回 - useCruds(restURLMap) : Record > 创建一个 crud 多实例入口并返回 - lookUpCrud(crudName?) : CRUD | null > 向上查找最近的 crud 实例 - onHook(hookName,hook) : void > 用于注册钩子 ## 错误信息 - Must specify 'crudName' when multiple instances detected > 多实例时调用 lookUpCrud 方法未指定 crud 标识。解决方法见【6. 自定义组件】 - form validation Xxx > 表单提交时验证错误信息 - Cannot find [request] in the installation options > 安装时未指定请求器。解决方法见【1. 安装】 - table.rowKey is a blank value 'Xxx', it may cause an error - toDelete/Edit/View() > 进行删除/编辑/查看操作时未指定 table.rowKey。可以设置默认/$crud 实例的对应属性