cl-admin-crud-vue3 v0.11.3

Crud

文档地址：https://cool-js.com/front/vue.html

快速完成页面 CRUD 操作的高阶组件

支持功能：

• 条件过滤
• 条件查询
• 关键字搜索
• 高级搜索
• 新增、编辑动态表单配置
• 自定义表单
• 可拖拽、全屏对话框
• 数据表格右键菜单
• 按钮级权限控制
• 多种渲染方式，jsx、函数式、组件实例、组件名

参数

on-refresh 示例

<cl-crud :on-refresh="onRefresh"></cl-crud>

export default {
	methods: {
		async onRefresh(params, { next, done, render }) {
			// params 是每次请求的参数
			// next(params) 是继续往下执行 page 的请求
			// done() 完成请求，关闭loading
			// render(list, pagination) 渲染列表及分页信息

			let { list, pagination } = await next({
				...params,
				...额外的参数
			});

			list.map((e) => {
				e.name += "先生";
			});

			render(list);

			// 也可以不使用 next，用其他 service 代替，但是 render 就要设置分页信息：
			render(list, {
				page: "第几页",
				size: "每页数量",
				total: "总数"
			});
		}
	}
};

on-delete 示例

<cl-crud :on-delete="onDelete"></cl-crud>

export default {
	methods: {
		onDelete(selection， {next}) {
			// selection 行选择列表，默认
			// next(params) 是继续往下执行 delete 的请求

			// 默认根据表id来删除，你也可以修改成其他
			next(selection.map(e => e.id))
		}
	}
};

方法

事件

<template>
	<cl-crud @load="onLoad"></cl-crud>
</template>

<script>
	export default {
		methods: {
			onLoad({ ctx, app }) {
				// 配置方法
				ctx
					// 配置请求，返回必须为 Promise。可直接继承 BaseService，它包含了基本的6个接口
					.service({
						// 分页列表
						page({ page, size, ... }) {
							return Promise.resolve({
								// 数据列表
								list: [],
								// 分页信息
								pagination: {
									total: 8,
									size: 20,
									page: 1
								}
							})
						},
						// 全部列表
						list() {
							return Promise.resolve([ /* 数据列表 */ ])
						},
						// 新增
						add(data) {
							return Promise.resolve()
						},
						// 更新，包含 id
						update(data) {
							return Promise.resolve()
						},
						// 详情，传行 id
						info({ id }) {
							return Promise.resolve({ /* 用户信息 */ })
						},
						// 删除，ids = [1, 2, 3]
						delete({ ids }) {
							return Promise.resolve()
						},
					})
					// 设置按钮权限，新增，编辑，删除。框架默认判断了。当然你也可以自定义
					.permission({
						add: true,
						update: true,
						delete: true
					})
					// 设置参数，例如 dict 字典
					.set('dict', {
						// 字典
						dict: {
							// 请求
							api: {
								list: 'list',   		// 全部数据
								add: 'add', 			// 新增
								update: 'update',   	// 修改
								delete: 'delete',   	// 删除
								info: 'info',   		// 详情
								page: 'page',   		// 分页
							},
							// 分页参数
							pagination: {
								page: 'page',   		// 页数
								size: 'size',   		// 每页显示的条目
							},
							// 搜索
							search: {
								keyWord: 'keyWord', 	// 模糊查询的关键字
								query: 'catecory', 		// 类目
							},
							// 排序
							sort: {
								order: 'sort',  		// 排序方式
								prop: 'order',  		// 排序关键字
							},
							// 标签
							label: {
								add: "新增",
								delete: "删除",
								multiDelete: "删除",
								update: "编辑",
								refresh: "刷新",
								advSearch: "高级搜索",
								saveButtonText: "保存",
								closeButtonText: "关闭"
							}
						},
					})
					// 完成配置，开始渲染
					.done()

				// 加载完组件是否发起 page 请求
				app.refresh({
					// 可以填入请求默认值
				})
			}
		}
	}
</script>

ctx

app