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: "暂无数据"
    }
}

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

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

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

• selection 表格选中行的集合
• next(params) 继续执行删除

默认 params 取 selection 中的 id:

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

如需修改成根据其他字段删除数据（需后台接口配合），如下：

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

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(app: ClCrud.Ref)

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

使用

<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>

方法

方法名	说明	参数
getPermission	获取 add, update, delele 的权限
getParams	获取请求参数
rowAdd	以新增方式打开表单	function()
rowAppend	以新增方式打开表单，并追加一些数据	function(data)
rowInfo	以禁用表单的方式打开	function(data)
rowEdit	以编辑方法打开表单	function(data)
rowClose	关闭表单	function()
rowDelete	删除请求	function(selection)
refresh	refresh	function(params)

示例