Crud-support NPM

CrudSupport

1.介绍

通过配置的方式快速生成后台管理系统中常用的增删改查页面

2.软件架构

基于Element-UI进行二次封装

3.安装教程

npm install crud-support

4.使用说明

引入全局组件(强制)

xxxxx
import Crud from 'crud-support'
import 'crud-support/lib/crud-support.css'
xxxxx
Vue.use(Crud)

引入混入工具类(强制)

//方式一
import  from 'crud-support/packages/crud-mixins'
//方式二
import { crud_mixins } from 'crud-support'

引入请求工具类(非强制)

将tempalte目录下的'request-mixins.js.template'文件拷贝至自己项目中的utils目录下并改名为'request-mixins.js'
将template目录下的'request.js.template'文件拷贝至自己项目中的utils目录下改名为'改名为request.js'
其中request.js需要根据自身情况进行适配
需使用时可自行引入'request-mixins.js'

3.组件使用样例

请参考项目中example目录

4.布局配置

页面布局配置对应的layout()方法已经在混入工具中定义，自行实现layout()方法，在方法内对页面布局进行自定义配置，参考上述样例

attribute

参数	说明	类型	可选值	默认值	备注
search-inputs	查询参数绑定的对象	Object	-	searchInputs	searchInputs在混入工具中已经定义可直接赋值
search-configs	配置查询输入框和按钮的数据	Array	-	searchConfigs	searchConfigs在混入工具中已经定义可直接赋值
button-configs	配置查询下方自定义操作按钮	Array	-	button-configs	button-configs在混入工具中已经定义可直接赋值
column-button	配置表数据中操作列中显示的按钮	Array	'add','edit','delete'	[]	column-button需自行指定不指定则操作列不显示
header-height	配置头部布局高度	String	-	100px	当有下方自定义按钮或者搜索项很多时建议高度>200px
header-size	配置组件大小	String	-	small	建议不用配置或配置small
table-data	配置表中要渲染的数据	Array	-	[]	从后端接口拿来的数据
table-configs	配置表中要显示的列	Array	-	[]	配置列对应绑定的值和名称以及显示样式
page-conf	配置分页组件中对应的页码	Object	-		绑定了分页组件中对应的数据
searchButton	查询按钮开关	Boolean	true/false	true	是否显示查询按钮
resetButton	重置按钮开关	Boolean	true/false	true	是否显示重置按钮
addButton	新增按钮开关	Boolean	true/false	false	是否展示新增按钮
dialogWidth	新增修改dialog的宽度	String	-	800px	可自定义指定dialog的宽度
tableExpandRow	是否开启列展开模式	Boolean	-	false	指定此参数时可开启展开列显示详情模式，根据tableConfigs配置进行显示
tableExpandProp	指定row中要展开显示的字段	String	-	-	当指定了此字段时，会自动从row中获取此字段对应的值然后根据tableConfigs配置进行显示
tableExpandType	指定展开内容的样式	String	table/desc	-	支持el-table和el-el-descriptions两种显示

search-configs

search-configs是数组类型，数组中每一个元素是一个对象代表着一个搜索项，以下为元素对象的可配置项

参数	说明	类型	可选值	默认值	备注
id	当需要使用this.refreshHeaderOptions时id必填且必须唯一	String	-	-	非必填
prop	绑定到searchInput中的字段名称	String	-	-	必填
type	指定搜索项的类型	String	select, input, datetimerange, daterange, monthrange, selectRemote	-	必填
placeholder	搜索项文字占位符	String	-	-	非必填
desc	指定鼠标悬停时要显示的tooltips	String	-	-	非必填
startPlaceholder	时间选择器起始时间选择框文字占位符	String	-	-	type为datetimerange/dateramge/monthrange时必填
endPlaceholder	时间选择器结束时间选择框文字占位符	String	-	-	type为datetimerange/dateramge/monthrange时必填
clearable	是否可清空	Boolean	-	true	输入框或者下拉框是否为可清空
filterable	是否可过滤	Boolean	-	true	下拉框支持前端搜索
options	下拉选择框中的值	Array	-	-	当搜索项为下拉框时需要指定下拉框的内容，其中格式为{label: 'xxx', value: 'xxx'}...
fetch(弃用)	同步下拉框中的数据	Function	-	-	由于很多下拉框需要实时去后台拉去数据所以options就会存在渲染不及时问题，通过fetch将数据实时同步
remoteMethod	type为selectRemote时远程搜索调用的方法	Function	-	-	下拉框设置为远程搜索时用户输入keyword会调用此方法，方法实现可根据keyword调用接口并将最新的数据通过混入工具中的this.refreshHeaderOptions('{id}', value)

table-configs

table-configs是数组类型，数组中每一个元素是一个对象代表着一个列的配置，以下为元素对象的可配置项

参数	说明	类型	可选值	默认值	备注
prop	绑定行数据中的字段	String	-	-	必填
type	列类型	String	tag/switch/select	-	非必填
tagType	指定标签类型(即颜色)	string/function	string/function	-	string类型时直接指定tag颜色;function类型时会传入(index(行号), row(行数据))并要求函数返回计算后的type
label	列名称	String	-	-	非必填
change	列为开关样式时监听开关变化的方法	Function	-	-	type为switch时必填
activeValue	列为开关样式时开关打开时绑定的值	String/Number	-	-	type为switch时必填
inactiveValue	列为开关样式时开关打开时绑定的值	String/Number	-	-	type为switch时必填
convert	当type为tag时可将列值显示的内容改为convert方法转换后的值	Function	-	-	type为tag时可填
columnConvert	根据当前行数据转换为要显示的数据	Function(index(当前行), row(行数据))	-	-	convert只会接收列值，columnConvert会接收航值,可更灵活处理
options	type为select时有效指定下拉框中内容	Array	-	-	数据类型为{value: xxx, label: xxx}...
fetch	type为select时有效指定下拉框中内容	Function	-	-	数据类型为{value: xxx, label: xxx}...，当数据需要主动拉取时可替代options
change	type为select时接收下拉选值变化事件	Function(index(当前行), row(行数据))	-	-	可在此处调用后台接口进行值修改

event

组件中声明了很多事件坚挺用于支撑业务交互

事件名称	说明	参数	返回值	备注
selectionChange	当表格中勾选项产生变化会调用此	value: 勾选的数据	-	必填
load	表格组件渲染时调用的方法	-	-	强制要求在load方法中封装向后台请求表格中要显示的数据
aeConfirm	新增修改表单中点击确认按钮调用的方法用于校验表单中的数据	-	-	混入中已经实现，不要随意修改
addSubmit	aeConfirm执行完成后调用此方法进行数据提交	-	-	混入中已定义，需要自行实现，此方法发起向后端请求
editSubmit	aeConfirm执行完成后调用此方法进行数据提交	-	-	混入中已定义，需要自行实现，此方法发起向后端请求
aeReset	新增修改表单中点击取消或者窗口关闭时调用的方法	-	-	混入中有定义此方法，并将formData重置为空对象（混入中有声明，不要随意修改）
aeResetBefore	aeReset方法执行前调用的方法	-	-	混入中已定义，需要自行实现
aeResetAfter	aeReset方法执行后调用的方法	-	-	混入中已定义，需要自行实现
deleteSubmit	表格中行数据删除确认时调用的方法	row: 行数据	-	混入中有定义，但需自行实现
aeAddOpenBefore	新增窗口打开前调用的方法	如果是行级别的新增会传入行数据和index	-	混入中有定义，但需自行实现
aeEditOpenBefore	修改窗口打开前调用的方法	如果是行级别的新增会传入行数据和index	-	混入中有定义，但需自行实现

slot

名称	说明
dialogForm	当开启dialog时dialog中要显示的内容，一般都是通过插槽的方式插入form表单

method

名称	说明
columnButtonDisable	禁止表格中某一行操作列中某些按钮，入参为二维数组，例如['edit', 'add', 'delete', '自定义按钮的name']，数组中的每一个元素代表表格中从上到下每一行的按钮配置
columnButtonDisableReset	充值表格中所有按钮的disabled状态

5.混入工具类

crud-mixins

method

名称	说明	参数
refreshHeaderOptions	手动刷新header中的options配置	id(search-configs中的id), value(要刷新的值)
selectionChange	表格开启勾选框后调用的方法【不建议覆盖实现】	value(选中的数据)
aeConfirm	新增编辑窗口打开后点击确认触发的方法【不建议覆盖实现】	-
aeOpen	新增编辑按钮出发弹窗打开时调用的方法【不建议覆盖实现】	index(行号),row(行数据),type(打开类型)
aeAddOpenBefore	点击新增按钮触发aeOpen前执行的方法【可以覆盖实现】	index(行号),row(行数据)
aeEditOpenBefore	新增编辑按钮出发弹窗打开时调用的方法【可以覆盖实现】	index(行号),row(行数据)
addSubmit	新增窗口打开时点击确认后触发的方法用于向后段提交数据【可以覆盖实现】	callback(回调方法，通知已执行成功)
editSubmit	编辑窗口打开时点击确认后触发的方法用于向后段提交数据【可以覆盖实现】	callback(回调方法，通知已执行成功)
deleteSubmit	删除窗口打开时点击确认后触发的方法用于向后段提交数据【可以覆盖实现】【可以覆盖实现】	index(行号),row(行数据)
aeResetAfter	新增编辑窗口关闭后触发aeReset方法前调用的方法【可以覆盖实现】	-
aeResetBefore	新增编辑窗口关闭后触发aeReset方法后调用的方法【可以覆盖实现】	-
aeReset	新增编辑窗口关闭后触发的方法【不建议覆盖实现】	-
layout	配置页面布局时调用的方法【可以覆盖实现】	-
openLoading	table显示loading状态【可以覆盖实现】	-
closeLoading	table关闭loading状态【可以覆盖实现】	-
setPageConf	设置分页参数【可以覆盖实现】	{page, conf, size}

data

名称	说明
tableSelected	表格勾选的数据
tableData	表格渲染的数据
searchInputs	查询参数绑定的数据
searchConfigs	查询布局配置绑定的参数
buttonConfigs	自定义按钮绑定的参数
tableConfigs	表格列相关配置的参数
formData	绑定新增修改form表单的数据，绑定在插槽中插入的form表单的数据
formDataRule	绑定新增修改form表单验证的规则，绑定在插槽中插入的form表单验证规则的数据
pageConf	分页参数绑定的配置