Crud
文档地址:https://cool-js.com/front/vue.html
快速完成页面 CRUD 操作的高阶组件
支持功能:
- 条件过滤
- 条件查询
- 关键字搜索
- 高级搜索
- 新增、编辑动态表单配置
- 自定义表单
- 可拖拽、全屏对话框
- 数据表格右键菜单
- 按钮级权限控制
- 多种渲染方式,jsx、函数式、组件实例、组件名
参数
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
on-refresh | 刷新表格的钩子 | function(params, { next, done, render }) | ||
on-delete | 删除时的钩子 | function(selection, { next }) | ||
border | 是否带有边框 | boolean | false |
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))
}
}
};
方法
方法名 | 说明 | 参数 |
---|---|---|
getPermission | 获取 add, update, delele 的权限 | key |
getParams | 获取 请求参数 | |
rowAdd | 以新增方式打开表单 | |
rowAppend | 以新增方式打开表单,并追加一些数据 | data |
rowEdit | 以编辑方法打开表单 | data |
rowClose | 关闭表单 | |
rowDelete | 删除请求 | selection |
openAdvSearch | 打开高级搜索 | |
closeAdvSearch | 关闭高级搜索 | |
refresh | 刷新请求 | params |
事件
事件名 | 说明 | 回调参数 |
---|---|---|
load | 组件加载完事件 | { app, ctx } |
<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
方法名 | 说明 | 参数 |
---|---|---|
service | 设置请求服务 | { page?, list?, update?, info?, add?, delete? } |
permission | 设置权限,默认根据 permmenu 配置 | { add, update, delete } |
set | 设置其他参数 | { dict, } |
on | 监听事件 | { name, callback } |
once | 监听事件(只监听一次) | { name, callback } |
done | 完成配置,开始渲染 |
app
方法名 | 说明 | 参数 |
---|---|---|
refresh | 刷新表格,默认调用 page 接口 | params |