官方文档

# cl-crud 增删改查

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

# Attributes

参数 说明 类型 可选值 默认值
on-refresh 刷新表格的钩子 function(params, { next, done, render })
on-delete 删除时的钩子 function(selection, { next })

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))
		}
	}
};

# Methods

方法名 说明 参数
getPermission 获取 add, edit, update, delele 的权限 key
rowAdd 以新增方式打开表单
rowAppend 以新增方式打开表单，并追加一些数据 data
rowEdit 以编辑方法打开表单 data
rowClose 关闭表单
rowDelete 删除请求 selection
openAdvSearch 打开高级搜索
closeAdvSearch 关闭高级搜索
refresh 刷新请求

# Events

事件名 说明 回调参数
load 组件加载完事件 { app, ctx }
# 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
# 示例
<cl-crud @load="onLoad"></cl-crud>

{
	methods: {
		onLoad({ ctx, app }) {
			// 配置方法
			ctx
				// 配置请求，可直接使用 this.$service.xx，它包含了基本的6个接口
				.service({
					page,
					list,
					update,
					info,
					add,
					delete,
				})
				// 设置按钮权限，新增，编辑，删除。默认在 main.js 全局判断了。当然你也可以局部覆盖
				.permission({
					add: true,
					update: true,
					delete: true
				})
				// 设置参数，例如 dict 字典
				.set('dict', {
					sort: {
						order: 'sort',  // 排序方式
						prop: 'order',  // 排序关键字
					},
				})
				// 完成配置，开始渲染
				.done()

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

# cl-refresh-btn 刷新按钮

CRUD 组件下的刷新按钮组件,点击调用 refresh()

# Attributes

参数 说明 类型 可选值 默认值
props 原 el-button attributes 参数 object

# Slot

name 说明
default 按钮文本内容

示例

<cl-refresh-btn />

<cl-refresh-btn>更新数据</cl-refresh-btn>

# cl-add-btn 新增按钮

CRUD 组件下的新增按钮组件,点击弹出新增窗口(upsert)

# Attributes

参数 说明 类型 可选值 默认值
props 原 el-button attributes 参数 object

# Slot

name 说明
default 按钮文本内容

示例

<cl-add-btn />

<cl-add-btn>添加员工</cl-add-btn>

# cl-multi-delete-btn 批量删除按钮

CRUD 组件下的多选删除按钮组件

# Attributes

参数 说明 类型 可选值 默认值
props 原 el-button attributes 参数 object

# Slot

name 说明
default 按钮文本内容

示例

<cl-multi-delete-btn />

<cl-multi-delete-btn>移除员工</cl-multi-delete-btn>

# cl-query 条件筛选

CRUD 组件下的条件筛选组件

# Attributes

参数 说明 类型 可选值 默认值
value 默认值 array / string
multiple 是否多选 boolean true / false false
list 条件列表，必填 array
callback 搜索回调,需要手动调用 refresh function
# 示例
<cl-query
	:list="[
	{
		label: '天猫',
		value: 0
	},
	{
		label: '淘宝',
		value: 1
	}
]"
></cl-query>

# cl-search-key 关键字搜索

CRUD 组件下的关键字搜索组件

# Attributes

参数 说明 类型 可选值 默认值
v-model / value 绑定值 array / string
field 选中字段 string keyWord
field-list 可选字段列表 Array
on-search 搜索时的钩子 function(params, { next })
placeholder 输入框占位内容 string 请输入关键字

# Events

事件名 说明 参数
field-change 选择字段时触发 field
change 绑定值改变时触发 value
# 示例
<cl-search-key
	field="name"
	:field-list="[
	{
		label: '昵称',
		value: 'name'
	},
	{
		label: '手机号',
		value: 'phone'
	}
]"
></cl-search-key>

# cl-adv-btn 高级搜索按钮

CRUD 组件下的高级搜索按钮组件

# Attribute

参数 说明 类型 可选值 默认值
props 原 el-button attributes 参数 object

# Slot

name 说明
default 按钮文本内容

示例

<cl-adv-btn />

<cl-adv-btn>高级查询</cl-adv-btn>

# cl-table 数据表格

CRUD 组件下的表格组件

# Attributes

参数 说明 类型 可选值 默认值
columns 表格项 el-table-item array
on 原 el-table event 事件 object
props 原 el-table attributes 参数 object

# Methods

方法名 说明 参数
clearSelection 用于多选表格，清空用户的选择
toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中 row, selected
toggleAllSelection 用于多选表格，切换所有行的选中状态
toggleRowExpansion 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） row, expanded
setCurrentRow 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态 row
clearSort 用于清空排序条件，数据会恢复成未排序的状态
clearFilter 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由 columnKey 组成的数组以清除指定列的过滤条件 columnKey
doLayout 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
sort 手动对 Table 进行排序。参数 prop 属性指定排序列，order 指定排序顺序。 prop, order

# Slot

name 说明
append 插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。
column-{prop} 自定义列的内容，参数为 { scope: { row, column, $index } }
header-{prop} 自定义表头的内容. 参数为 { scope: { row, column, $index } }
# 示例
<cl-table
	:on="{
		'selection-change': (selection) => {
			// 获取选中行
		}
	}"
	:props="{
		'default-prop': {
			prop: 'createTime',
			order: 'descending'
		}
	}"
	:columns="[
		{
			type: 'selection',
			align: 'center',
			width: 60
		},
		{
			label: '昵称',
			prop: 'name',
			align: 'center'
		},
		{
			label: '创建时间',
			prop: 'createTime',
			align: 'center',
			sortable: 'custom'
		},
		{
			// 操作栏
			type: 'op',
			align: 'center',
			layout: ['edit', 'delete'], // edit = 编辑, delete = 删除
		}
	]"
></cl-table>

# cl-pagination 分页器

CRUD 组件下的分页组件

# Attributes

参数 说明 类型 可选值 默认值
on 原 el-pagination event 事件 object
props 原 el-pagination attributes 参数 object
# 示例
<cl-pagination
	:props="{
	background: false
}"
></cl-pagination>

# cl-upsert 新增/编辑

CRUD 组件下的新增、编辑组件

# Attributes

参数 说明 类型 可选值 默认值
v-model / value 绑定值 object
items 表单项 array
props 原 el-dialog attributes 参数
sync 是否同步打开 boolean true / false false
op-list 操作按钮 array ['close', 'save']
save-button-text 保存按钮文本内容 string 保存
cancel-button-text 关闭按钮文本内容 string 关闭
on-open 打开时的钩子 function(data, { submit, done, close })
on-close 关闭时的钩子 function(action, done)
on-submit 表单提交时的钩子 function(isEdit, data, { next, done, close })
on-info 编辑获取详情时的钩子 function(data, { next, done, close })

# Events

name 说明 回调参数
open 弹窗打开时触发 false, data
close 弹窗关闭时触发

# Methods

参照 cl-form Methods

# cl-dialog 对话框

自定义对话框组件

# Attributes

参数 说明 类型 可选值 默认值
visible 是否显示 boolean false
title 标题 string 对话框
drag 是否拖拽，内容超出屏幕可视区域会关闭拖拽 boolean true
props 原 el-dialog attributes object
on 原 el-dialog on object
opList 顶部操作按钮 array ["fullscreen", "close"]
# 示例
<cl-dialog :visible.sync="visible">
	<p>内容</p>
</cl-dialog>

# cl-adv-search 高级搜索弹窗

自定义表单组件

# Attributes

参数 说明 类型 可选值 默认值
v-model / value 绑定值 object
items 表单项 array
props 原 el-dialog attributes 参数
op-list 操作按钮 array ['search', 'reset', 'clear', 'close']
on-open 打开时的钩子 function(data, { next })
on-close 关闭时的钩子 function(done)
on-search 确定搜索时的钩子 function(data, { next, close })

# Methods

方法名 说明 参数
open 打开表单 { props, on, op, items }
close 关闭表单
clear 清空表单值
setData 根据对象层级设置参数 path, value
setOptions 设置下拉列表 prop, value
getForm 获取表单值 prop?
setForm 设置表单值 prop, value
toggleItem 切换 hidden 值 prop, flag
hiddenItem 隐藏 props
showItem 显示 props

# Events

name 说明 回调参数
open 弹窗打开时触发 data
close 弹窗关闭时触发
clear 清空表单值触发
reset 重置表单值触发

# cl-form 自定义表单

自定义表单组件

# Attributes

参数 说明 类型 可选值 默认值
v-model / value 绑定值 object

# Methods

方法名 说明 参数
open 打开表单 { props, on, op, items }
close 关闭表单
done 关闭 saving 状态
clear 清空表单值
showLoading 显示加载框
hiddenLoading 隐藏加载框
setData 根据对象层级设置参数 path, value
setOptions 设置下拉列表 prop, value
getForm 获取表单值 prop?
setForm 设置表单值 prop, value
toggleItem 切换 hidden 值 prop, flag?
hiddenItem 隐藏 props
showItem 显示 props
# on 有效值
参数 说明 类型 可选值 默认值
load 窗口加载时触发 function(data, { close, done, submit })
close 关闭窗口时触发 function(action, done)
submit 打开表单 function(data, { close, done, $refs })
# op 有效值
参数 说明 类型 可选值 默认值
hidden 是否显示操作按钮 boolean false
confirmButtonText 确认按钮文本内容 string 保存
cancelButtonText 取消按钮文本内容 string 取消
layout 按钮布局 array ['array', 'confirm']
# props 有效值

参照 el-dialog attributes

# items 有效值
参数 说明 类型 可选值 默认值
prop 字段 string
label 标签文本 string
component 组件，见示例 object
prepend 组件前，同 component object
append 组件后，同 component object
collapse 是否折叠 boolean false
rules 验证规则 array, object
hidden 是否显示 boolean, string, function false
span 栅格占据的列数 number 24
# hidden 用法
// 默认填入 boolean
{
	label: "姓名",
	prop: "name",
	hidden: false
}

// 与指定 prop 绑定，hidden随着绑定值的变化而改变
{
	label: "姓名",
	prop: "name",
	hidden: "@showName",
}

// scope 为表单数据，自定义返回值
{
	label: "姓名",
	prop: "name",
	hidden: ({ scope }) => {
		return !scope.showName
	}
}
# 基本用法

WARNING

name 避免重复

this.$refs["form"].open({
	props: {
		title: "自定义表单"
	},

	items: [
		{
			label: "昵称",
			prop: "name",
			component: {
				name: "el-input"
			},
			rules: {
				required: true,
				message: "昵称不能为空"
			}
		}
	],

	on: {
		load(data, { close, done, submit }) {
			console.log("窗口打开事件");
		},
		submit(data, { close, done }) {
			// 调用更新用户信息接口
			this.$service.system.user
				.update(data)
				.then(res => {
					console.log("保存成功");
					// 关闭弹窗
					close();
				})
				.catch(err => {
					console.error(err);
					// 结束loading
					done();
				});
		},
		close() {
			console.log("窗口关闭事件");
		}
	}
});

# cl-upload 文件上传

文件上传，该组件基于 el-upload， 所有的方法和操作保持一致

# 安装

yarn add cl-crud-upload

原注册文件在 src/cool/components/index.js，替换为：

import { Upload, UploadSpace, UploadNext, UploadSpaceNext } from "cl-crud-upload";

// vue2.x
Vue.component("cl-upload", Upload);
Vue.component("cl-upload-space", UploadSpace);

// vue3.x
Vue.component("cl-upload", UploadNext);
Vue.component("cl-upload-space", UploadSpaceNext);

# 全局配置

在 src/config/env.js 下添加代码：

// 上传配置
export const upload = {
	// 上传的地址
	action: "",
	// 上传的文件类型
	accept: "",
	// 上传的文件字段名
	name: "file",
	// 尺寸
	size: "128px",
	// 显示图标
	icon: "el-icon-upload",
	// 显示文案
	text: "选择文件"
};

# Attributes

参数 说明 类型 可选值 默认值
v-model / value 绑定值 string / array
action 上传的地址 string
size 图片大小 array / string / number 128px
icon 图标 string el-icon-upload
text 文本 string 选择文件
accept 接受上传的文件类型 string
multiple 是否支持多选文件 boolean
limit 最大允许上传个数 number
...other (opens new window) 最大允许上传个数 number

WARNING

上传方式

  1. 默认上传是 oss 签名上传
  2. action="comm" 调用 ${baseUrl}/comm/upload 为上传到本地服务器（发生跨域时，请配置代理地址 vue.config.js 下的 /oss-upload 或者排查 oss 控制台参数）
  3. action="http://xxxx" 自定义上传

# cl-upload-space 文件空间

# Attributes

参数 说明 类型 可选值 默认值
action 上传的地址，同 cl-upload.action string
limit 选择图片的长度 number 8
disabled 是否禁用 boolean
headers 设置上传的请求头部 object
data 上传时附带的额外参数 object
accept 上传的文件类型 string
detailData 是否返回详细数据 boolean
showButton 是否显示按钮 boolean true
# 示例

单图上传

<cl-upload></cl-upload>

多图上传

<cl-upload multiple :limit="3" listType="picture-card"></cl-upload>

文件上传

<cl-upload accept="*" list-type="file"></cl-upload>

文件空间

<cl-upload-space v-model="urls"></cl-upload-space>

# cl-context-menu 右键菜单

右键菜单，支持多层自定义

# Item 选项值

参数 说明 类型 可选值 默认值
label 本文 string
prefix-icon 前缀图标 string
suffix-icon 后缀图标 string
ellipsis 是否超出省略 boolean
disabled 是否禁用 boolean
hidden 是否隐藏 boolean
children 子集 array
callback 点击回调 function(item, done) 
<cl-context-menu ref="context-menu"> </cl-context-menu>

<p @contextmenu.stop.prevent="open">右键点击</p>

export default {
	methods: {
		open(event) {
			this.$refs["context-menu"].open(event, {
				list: [
					{
						label: "新增",
						"suffix-icon": "el-icon-plus",
						callback: () => {
							this.$message.info("点击了新增");
						}
					},
					{
						label: "编辑",
						"suffix-icon": "el-icon-edit",
						callback: (item, done) => {
							this.$message.info("点击了编辑");
							done();
						}
					},
					{
						label: "删除",
						"suffix-icon": "el-icon-delete"
					},
					{
						label: "二级",
						"suffix-icon": "el-icon-right",
						children: [
							{
								label: "文本超出隐藏，有一天晚上",
								ellipsis: true
							},
							{
								label: "禁用",
								disabled: true
							},
							{
								label: "更多",
								callback: (item, done) => {
									this.$message.warning("开发中");
									done();
								}
							}
						]
					}
				]
			});
		}
	}
};

# cl-crud-export 导出按钮

基于 export2excel 的 导出 excel 按钮，安装依赖：

yarn add cl-crud-export

# Props

参数 说明 类型 可选值 默认值
filename 文件名 string 报表（yyyy-MM-dd hh_mm_ss）
autoWidth 自动设置宽度 boolean true
bookType 类型 string xlsx
header 表头 array
columns 表格数据 (cl-crud2 专用) array
data 数据列表，不传使用当前 service 下的 page 接口 function / array
maxExportLimit 最大导出条数，不传或者小于等于 0 为不限制 number 0
type 按钮类型 string primary / success/ warning / danger / text
disabled 是否禁用 boolean false
plain 是否镂空 boolean false
round 是否圆角 boolean false
circle 是否圆形 boolean false
icon 是否图标 boolean false

# Columns

参数 说明 类型 可选值 默认值
prop 内容字段名 string
label 表头文本 string

# Slots

插槽名称 说明 默认值
default 内容文本 导出

cl-crud 示例

// main.js
import ExportBtn from "cl-crud-export";

const conf = {
	["cl-crud"]: {
		// 此处新增组件
		components: {
			ExportBtn
		}
	}
};

注册 export-btn 组件后，就可以在 layout 中使用：

// 方式一
ctx.set('layout', [
    ['export-btn'],
])

// 方式二
ctx.set('layout', [
    [({h}) => {
        return h('export-btn', {
            props: {
                maxExportLimit: 100
            }
        })
    }],
])

// 方式三
ctx.set('layout', [
    [<export-btn maxExportLimit={100}>],
])

cl-crud2 示例

import { ExportBtn2 } from "cl-crud-export";

export default {
	components {
		ExportBtn2
	}
}

TIP

参数 columns 可以直接使用 table.columns , 因为他们都是同一个格式。

<cl-crud>
	<export-btn2 :columns="table.columns" />
</cl-crud>

← CRUD配置 →