# cl-admin-crud

cl-admin-crud 是基于 cool-admin 的 crud 高阶组件

GitHub license GitHub tag GitHub tag

# 项目地址

https://github.com/cool-team-official/cl-admin-crud (opens new window)

# 安装、更新

yarn add cl-admin-crud

然后在 src/cool/index.js 引入,并配置:

import Crud from "cl-admin-crud";

export default {
	component: [
		{
			name: "crud",
			value: Crud,
			// 配置参数
			options: {
				crud: {
					// 默认字典参数
					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: {
							refresh: "刷新",
							add: "新增",
							delete: "删除",
							multiDelete: "删除",
							update: "编辑",
							advSearch: "高级搜索",
							saveButtonText: "保存",
							closeButtonText: "关闭"
						}
					},
					// 样式配置
					style: {
						refreshBtn: {}, // 刷新按钮
						addBtn: {}, // 新增按钮
						multiDeleteBtn: {}, // 批量删除按钮
						advBtn: {}, // 高级搜索按钮
						saveBtn: {
							// 表单保存按钮
							// type: "success"
						},
						closeBtn: {
							// 表单关闭按钮
						},
						table: {
							// 表单
							size: "mini"
						},
						tableOp: {
							// 表格操作栏
							width: "200px",
							label: "操作"
						},
						editBtn: {
							// 表格编辑按钮
							// type: "success"
						},
						deleteBtn: {
							// 表格删除按钮
							// type: "danger"
						},
						filterSearchBtn: {
							// 过滤组搜索按钮
						}
					},
					fn: {
						// 权限校验方法,默认都通过
						permission(that) {
							// 获取所有权限
							const { permission } = that.$store.getters;

							// 获取当前 crud 绑定 service 下的权限
							const { add, delete: del, update } = that.service.permission || {};

							return {
								// 新增权限
								add: permission.includes(add),
								// 编辑权限
								update: permission.includes(update),
								// 删除权限
								delete: permission.includes(del)
							};
						}
					}
				}
			}
		}
	]
};

# 组件

传送门

# $crud

属性 说明 类型 回调参数
emit 触发事件 function(name, callback) data, crud
openForm 打开自定义表单 function(options) 传送门
openContextMenu 右键打开菜单 function(event, options) {close}

# 示例

  • emit

提示

emit('refresh') 触发的事件名称与 event.refresh 一一对应

以下例子是如何刷新所有已打开页面的表格:

// src/cool/index.js

import Crud from "cl-admin-crud";

export default {
	modules: [
		{
			name: "crud",
			value: Crud,
			options: {
				crud: {
					event: {
						refresh(params, { app }) {
							app.refresh(params);
						}
					}
				}
			}
		}
	]
};
this.$crud.emit("refresh", { page: 1, status: 1 });
  • openForm

WARNING

使用该方法打开表单,component 不再享有 slot 渲染方式

WARNING

使用该方法打开表单,不共享 store

this.$crud.openForm({
    props: {
        title: '自定义表单'
    },
    items: {
        {
            label: '昵称',
            props: 'name',
            component: {
                name: 'el-input'
            }
        }
    }
})
  • openContenxtMenu

查阅具体参数,传送门

this.$crud.openContenxtMenu({
	list: [
		{
			label: "编辑",
			callback: (item, done) => {
				done();
			}
		}
	]
});