添加 crud 说明

2024-11-01 14:10:27 +08:00 · 2021-03-02 16:03:43 +08:00 · 2021-03-02 16:03:43 +08:00 · 2f5761349b
commit 2f5761349b
parent 75a3f626de
1 changed files with 225 additions and 3 deletions
--- a/README.md
+++ b/README.md
@ -75,8 +75,230 @@ cl install
 yarn serve
 ```

-## 分析包内容
+## 极速 CRUD

-```shell
-yarn report
+1. `vscode` 编辑器下输入关键字 `cl-crud`，会生成对应的模板代码：
+
+```html
+<template>
+	<cl-crud ref="crud" @load="onLoad">
+		<el-row type="flex" align="middle">
+			<!-- 刷新按钮 -->
+			<cl-refresh-btn />
+			<!-- 新增按钮 -->
+			<cl-add-btn />
+			<!-- 删除按钮 -->
+			<cl-multi-delete-btn />
+			<cl-flex1 />
+			<!-- 关键字搜索 -->
+			<cl-search-key />
+		</el-row>
+
+		<el-row>
+			<!-- 数据表格 -->
+			<cl-table v-bind="table"></cl-table>
+		</el-row>
+
+		<el-row type="flex">
+			<cl-flex1 />
+			<!-- 分页控件 -->
+			<cl-pagination />
+		</el-row>
+
+		<!-- 新增、编辑 -->
+		<cl-upsert ref="upsert" v-bind="upsert"></cl-upsert>
+	</cl-crud>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 新增、编辑配置
+				upsert: {
+					items: []
+				},
+				// 表格配置
+				table: {
+					columns: []
+				}
+			};
+		},
+		methods: {
+			onLoad({ ctx, app }) {
+				// crud 配置
+				ctx.service().done();
+				// 发送 page 接口请求
+				app.refresh();
+			}
+		}
+	};
+</script>
 ```
+
+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)