cl-crud

表格的增删改查操作。

示例

useCrud

  • const 定义必须与 ref 一致
<cl-crud ref="Crud"></cl-crud>
const Crud = useCrud(options, callback?)

Options

参数说明类型
service表示当前 crud 要操作的对象Service
dict字典Dict
permission权限Permission
onDelete监听删除事件function(selection, {next})
onRefresh监听刷新事件function(params, {next,done,render})

dict 字典

参数预览:

{
    // 接口
    api: {
        list: "list",
        add: "add",
        update: "update",
        delete: "delete",
        info: "info",
        page: "page"
    },
    // 分页
    pagination: {
        page: "page",
        size: "size"
    },
    // 搜索
    search: {
        keyWord: "keyWord",
        query: "query"
    },
    // 排序字段
    sort: {
        order: "order",
        prop: "prop"
    },
    // 标签
    label: {
	op: "操作",
	add: "新增",
	delete: "删除",
	multiDelete: "删除",
	update: "编辑",
	refresh: "刷新",
	info: "详情",
	search: "搜索",
	reset: "重置",
	clear: "清空",
	save: "保存",
	close: "取消",
	confirm: "确定",
	advSearch: "高级搜索",
	searchKey: "搜索关键字",
	placeholder: "请输入",
	tips: "提示",
	saveSuccess: "保存成功",
	deleteSuccess: "删除成功",
	deleteConfirm: "此操作将永久删除选中数据,是否继续?",
	empty: "暂无数据",
	desc: "降序",
	asc: "升序",
	select: "选择",
	deselect: "取消选择",
	seeMore: "查看更多",
	hideContent: "隐藏内容",
	nonEmpty: "不能为空"
    }
}

将请求 page 的接口替换成 page2,使用方法如下:

const Crud = useCrud({
	dict: {
		api: {
			page: "page2"
		}
	}
});

新增按钮 文本值替换成 "添加",使用方法如下:

const Crud = useCrud({
	dict: {
		label: {
			add: "添加"
		}
	}
});

permission 权限

控制新增、删除、编辑按钮显示隐藏。默认使用 service 中的 permission,当然也能手动配置:

const Crud = useCrud({
	permission: {
		add: true,
		delete: true,
		update: true
	}
});

onDelete 删除事件

onDelete 删除时触发,默认调用 service 中的 delete 方法 :

  • selection 表格选中行的集合
  • next(params) 继续执行删除
const Crud = useCrud({
	service: service.demo.goods,
	onDelete(selection, { next }) {
		ElMessageBox.confirm(`你已选择了${selection.length}人,是否继续?`, "提示", {
			type: "error"
		})
			.then(() => {
				// 继续执行删除请求
				next({
					ids: selection.map((e) => e.id)
				});
			})
			.catch(() => null);
	}
});

如需修改成根据其他字段删除数据(需后台接口配合),如下:

const Crud = useCrud({
	service: service.demo.goods,
	onDelete(selection, { next }) {
		next({
			names: selection.map((e) => e.name)
		});
	}
});

onRefresh 刷新事件

onRefresh 刷新时触发,默认调用 service 中的 page 方法:

  • params 请求参数
  • next(params) 继续执行刷新
  • done() 完成刷新操作
  • render(list, pagination) 渲染列表及分页信息
const Crud = useCrud({
	service: service.demo.goods,
	async onRefresh(params, { next, done, render }) {
		// 1 默认调用
		const { list } = await next(params);

		// 2 使用其他接口,需手动 render
		const { list, pagination } = await service.demo.goods.hotList();
		// 渲染数据
		render(list, pagination);
	}
});

Callback

组件渲染完执行,并返回当前组件实例

<template>
	<cl-crud ref="Crud"></cl-crud>
</template>

<script lang="ts" setup>
	import { useCrud } from "@cool-vue/crud";
	const Crud = useCrud({ service: "test" });
</script>

配置 callback 加载完后调用 app.refresh 刷新页面:

<template>
	<cl-crud ref="Crud"></cl-crud>
</template>

<script lang="ts" setup>
	import { useCrud } from "@cool-vue/crud";
	const Crud = useCrud({ service: "test" }, (app) => {
		// 刷新请求
		app.refresh({
			// 可以带上你要请求的值
		});
	});
</script>

子组件使用

a.vue:

<template>
	<cl-crud>
		<child-component />
	</cl-crud>
</template>

child-component.vue 中也能使用 Crud 的方法:

<template>
	<el-button @click="add">添加成员</el-button>
</template>

<script lang="ts" setup>
	import { useCrud } from "@cool-vue/crud";

	const Crud = useCrud();

	function add() {
		Crud.value?.rowAdd();
	}
</script>

Ref

名称说明类型
getPermission获取 add, update, delele 的权限() => { add: boolean; update: boolean; delete: boolean }
getParams获取请求参数() => { [key: string]: any }
rowAdd以新增方式打开表单() => void
rowAppend以新增方式打开表单,并追加一些数据(data?) => void
rowInfo以禁用表单的方式打开(data) => void
rowEdit以编辑方法打开表单(data) => void
rowClose关闭表单() => void
rowDelete删除请求(selection) => void
refresh刷新请求(params?) => Promise<{list, pagination}>

DANGER

cl-crud 组件调用方法如下,refresh 为例:

// 注册组件
const Crud = useCrud(...)

// 刷新方法
function refresh(params?:any) {
	// 调用
	Crud.value?.refresh(params)
}

// 在 mounted 后的任意地方执行
refresh()
Last Updated: