diff --git a/README.md b/README.md index 7a26beb..4e6fa74 100644 --- a/README.md +++ b/README.md @@ -75,8 +75,230 @@ cl install yarn serve ``` -## 分析包内容 +## 极速 CRUD -```shell -yarn report +1. `vscode` 编辑器下输入关键字 `cl-crud`,会生成对应的模板代码: + +```html + + + ``` + +2. 编辑数据表格 `cl-table`: + +```js +{ + table: { + // 参数与 el-table-column 一致,并支持许多骚操作 + columns: [ + // 多选列 + { + type: "selection", + width: 60 + }, + // 自定义列 + { + label: "昵称", + prop: "name" + }, + { + label: "账户", + prop: "price", + sortable: "custom" // 是否添加排序 + }, + { + label: "状态", + prop: "status", + // 字典匹配,使用 el-tag 展示 + dict: [ + { + label: "启用", + value: 1, + type: "primary" + }, + { + label: "禁用", + value: 0, + type: "danger" + } + ] + }, + { + label: "创建时间", + prop: "createTime" + }, + // 操作按钮列,默认包含:编辑、删除 + { + type: "op" + } + ]; + } +} +``` + +3. 编辑新增、编辑表单 `cl-upsert`: + +```js +{ + upsert: { + items: [ + { + label: "昵称", + prop: "name", + // 参数与 el-form-item 一致 + props: {}, + value: "神仙都没用", // 昵称默认值 + // 渲染参数,支持 slot, 组件实例,jsx + component: { + name: "el-input", // 可以是任意已注册的组件名 + props: {}, // 组件的参数 + on: {} // 组件的回调事件 + }, + // 验证规则,与 el-form 一致 + rules: { + required: true, + message: "昵称不呢为空" + } + }, + { + label: "存款", + prop: "price", + component: { + name: "el-input-number", + props: { + min: 0, + max: 10000 + } + } + }, + { + label: "状态", + prop: "status", + value: 1, + component: { + name: "el-radio-group", + options: [ + { + label: "启用", + value: 1 + }, + { + label: "禁用", + value: 0 + } + ] + } + } + ]; + } +} +``` + +4. 绑定 `service`。在 `src/service/` 下新建文件 `test.js`,并编辑: + +```js +// src/service/test.js +import { BaseService, Service, Permission } from "cl-admin"; + +// 请求接口的路径 +@Service("test") +class Test extends BaseService { + // 继承 BaseService 后,拥有 page, list, add, delete, update, info 6个基本接口 + + // 自定义其他接口 + @Permission("product") // 权限装饰器,可选 + product(id) { + // this.request() 参数与 axios 一致 + return this.request({ + url: "/product", + method: "POST", + data: { + id + } + }); + } +} + +export default Test; +``` + +在 `src/service/` 下的文件,框架会自动根据 `目录结构` 和 `文件名称` 格式化成对应的 `$service` 对象。你现在可以这么使用它: + +```js +this.$service.test.page({ page: 1 }); +this.$service.test.product(1); +``` + +`service` 编写好后,我们把它绑定在 `crud` 上: + +```js +export default { + methods: { + onLoad({ ctx, app }) { + // 绑定 service,这边指定到 test 即可 + ctx.service(this.$service.test).done(); + + // 发起 page 请求 + app.refresh({ + // 请求默认参数 + }); + } + } +}; +``` + +5. 效果预览 + +![](https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/crud.png)