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| 分页参数绑定的配置 |