[TOC]
huibur-antd-vue是天津汇柏科技有限公司基于Ant Design Vue 框架进行开发,旨在简化开发过程中大量无意义的重复代码工作。该组件是根据公司项目场景中出现的各类问题,进行统一规范化封装处理,以减少非必要的一些编码及BUG修改工作。如果不能满足现有需求的话,可以关注公众号进行留言以便于进行组件扩展。
演示demo地址:http://antd.vue.huibur.com
demo源码地址:https://github.com/huiburtech/huibur_ant_vue_demo.git
数据驱动页面, 即所有页面的渲染均是通过数据参数的配置完成,几乎不需要写html、css以及一些紧要且耽误功夫的重复性逻辑校验代码
- 组件包下载方式:npm i huibur-antd-vue
- npm导入方式:import {hSearch, hList} from 'huibur-antd-vue' Vue.use(hSearch); Vue.use(hList);
- 禁止外部组件直接操作组件中data的属性值,所有data属性均通过方法进行驱动
- 外部组件仅可调用props的属性,以及公共部分的方法,禁止调用非公共部分的方法。
- 所有的公共方法均以 “” 开头,即父组件禁止调用非 “” 开头的方法
- 组件统一入口为@/components/HB/index.js
- const.js 中放置组件中使用的常量数据
- 该组件的构建文件中,未进行Ant Design of Vue组件的引入操作,需自行引入
组件中控件的枚举值
参数 |
说明 |
版本 |
INPUT |
输入框 |
1.0 |
INPUT_NUMBER |
数字输入框 |
1.0 |
INPUT_TEXT_AREA |
输入框 |
1.0 |
SELECT |
选择框 |
1.0 |
SELECT_FILTER |
选择框—本地过滤 |
1.0 |
SELECT_SEARCH |
选择框—搜索 |
1.0 |
DATEPICKER |
日期 |
1.0 |
MONTHPICKER |
月度日期 |
1.0.16 |
LINK |
超链接,即a标签 |
1.0 |
TEXT |
文本 |
1.0 |
CHECKBOX |
CHECKBOX |
1.0 |
CHECKBOX_GROUP |
CHECKBOX_GROUP |
1.1.0 |
CHANGE |
需要转换的数据 |
1.0 |
OPERATION |
操作 |
1.0 |
IMG |
单图片 |
1.0 |
IMG_MULTI |
多图片 |
1.2.14 |
FILE |
文件 |
1.2.14 |
FILE_MULTI |
多文件 |
1.2.14 |
BUTTON |
按钮 |
1.0.14 |
BUTTONGROUP |
按钮组 |
1.0.14 |
DROPDOWN |
下拉框 |
1.0.14 |
ACTION |
组合操作: selectItems: [{ value: OPERATION_ENUM.DETAIL, label: '查看详情 ' }, { value: 1, label: ' 操作', selectItems: [{ value: OPERATION_ENUM.MILK_STATION, label: '分配' }, { value: OPERATION_ENUM.REFUND, label: '退款 ' }]}], |
1.0.14 |
RADIO |
单选 |
1.1.0 |
SWITCH |
开关 |
1.1.8 |
TIMESTAMP |
时间戳 |
1.3.9 |
DATERANGEPICKER |
日期区间选择 |
1.3.9 |
事件名称 |
说明 |
参数 |
版本 |
_show |
显示 |
(title, content, cb);title:标题,content:描述内容, cb:点确认的回调函数 |
1.0 |
Header
参数 |
说明 |
类型 |
默认值 |
必须 |
版本 |
items |
控件组 |
[Form-Item] |
|
是 |
1.0 |
columnNum |
列的数量 |
Number |
1 |
|
1.0.19 |
buttonItems |
按钮组 |
[Form-Button-Item] |
|
|
1.0.20 |
form |
数据源对象 |
Object |
|
|
1.2 |
参数 |
说明 |
类型 |
默认值 |
必须 |
版本 |
title |
标题 |
String |
- |
|
1.0 |
key |
唯一标识,字段键值 |
String |
- |
是 |
1.0 |
defaultValue |
默认值 |
String |
'请选择' |
|
1.0 |
placeholder |
默认文字 |
String |
'请选择' |
|
1.0 |
type |
控件类型 |
TYPE_ENUM |
- |
是 |
1.0 |
dataType |
页面对应表格配置列;不填写时,默认为type |
TYPE_ENUM |
- |
否 |
1.0 |
sort |
表单排序 |
Number |
- |
0 |
1.0 |
required |
是否必须 |
Boolean |
false |
|
1.0 |
disabled |
是否禁用 |
Boolean |
false |
|
1.0 |
format |
日期格式 |
String |
"YYYY-MM-DD HH:mm:ss" |
|
1.0 |
selectItems |
选择项 |
[SelectItem] |
|
|
1.0 |
linkageApi |
下级联动接口API |
[DictApiItem] |
|
|
1.0 |
allowClear |
允许被清空 |
Boolean |
false |
|
1.0.15 |
labelCol |
标题列宽 |
Number |
8 |
|
1.0.16 |
wrapperCol |
内容列宽 |
Number |
12 |
|
1.0.16 |
before |
前置标签(INPUT有效) |
Input-Label-Item |
|
|
1.1.0 |
after |
后置标签(INPUT有效) |
Input-Label-Item |
|
|
1.1.0 |
hidden |
详情页隐藏该字段 |
Boolean |
false |
|
1.3.12 |
tableHidden |
table中隐藏该字段 |
Boolean |
false |
|
1.3.12 |
... |
文件上传部分的参数(注:upload中的参数与以上参数同级追加即可) Upload |
Object |
|
|
1.2.13 |
参数 |
说明 |
类型 |
默认值 |
版本 |
icon |
图标 |
String |
- |
1.0 |
label |
显示内容 |
String | Number |
- |
1.0 |
value |
唯一标识 |
String | Number |
- |
1.0 |
disabled |
是否禁用 |
String |
- |
1.0 |
color |
字体颜色 |
String |
- |
1.0.21 |
background |
背景色 |
String |
- |
1.0.21 |
参数 |
说明 |
类型 |
默认值 |
版本 |
title |
标题 |
String |
- |
1.0.20 |
icon |
图标 |
String |
- |
1.0.20 |
value |
唯一标识,字段键值 |
String |
- |
1.0.20 |
background |
背景色 |
String |
- |
1.0.20 |
color |
字体颜色 |
String |
- |
1.0.20 |
参数 |
说明 |
类型 |
默认值 |
版本 |
title |
标题 |
String |
- |
1.1.0 |
icon |
图标 |
String |
- |
1.1.0 |
width |
宽度(px) |
String |
- |
1.1.0 |
key |
唯一标识,字段键值 |
String |
- |
1.1.0 |
selectItems |
选择项 |
[SelectItem] |
- |
1.1.0 |
事件名称 |
说明 |
回调参数 |
版本 |
selectSearch |
选择框Search事件 |
Function(info); info:{kw, item, form}; kw:关键字,item: 被执行的控件信息;form:设置的表单模型数据 |
1.0 |
selectChange |
选择框Change事件 |
Function(info); info:{item, text}; item: 被执行的控件信息;text:被选中的value |
1.0 |
selectSelect |
选择框Select事件 |
Function(info); info:{item, text}; item: 被执行的控件信息;text:被选中的value |
1.0 |
btnClick |
按钮点击回调 |
Function(info); info:{item, val}; item: 被执行的控件信息;val:设置的表单模型数据 |
1.0 |
inputChange |
input的Change事件 |
Function(info); info:{item, text}; item: 被执行的控件信息;text:value数据 |
1.0 |
inputNumChange |
inputNumber的Change事件 |
Function(info); info:{item, text}; item: 被执行的控件信息;text:value数据 |
1.0 |
dateChange |
date的Change事件 |
Function(info); info:{item, text}; item: 被执行的控件信息;text:value数据 |
1.0 |
checkboxChange |
checkbox的Change事件 |
Function(info); info:{item, text}; item: 被执行的控件信息;text:value数据 |
1.0 |
textareaChange |
textarea的Change事件 |
Function(info); info:{item, text}; item: 被执行的控件信息;text:value数据 |
1.0 |
radioChange |
radio的Change事件 |
Function(info); info:{item, text}; item: 被执行的控件信息;text:被选中的value |
1.0 |
switchChange |
switch的Change事件 |
Function(info); info:{item, text}; item: 被执行的控件信息;text:被选中的value |
1.0 |
btnClick |
按钮点击回调 |
Function(info); info: 被执行的控件信息;form:设置的表单模型数据 |
1.1.0 |
事件名称 |
说明 |
参数 |
版本 |
_validate |
校验/数据获取 |
res:(valid: 是否校验通过,form:表单模型数据) |
1.0.20 |
_setFormItem |
设置form中的键值 |
(key, value);key:需要被设置的键,value:需要被设置的值 |
1.0 |
_refresh |
刷新表单 |
|
1.2.2 |
_assignSelectItems |
为selectItems赋值(针对items) |
(target, key, selectItems) ; target即items, key, 被设置的项的key,selectItems:选项 |
1.2.8 |
参数 |
说明 |
类型 |
默认值 |
版本 |
columns |
表格列的配置描述,具体项见下表 |
[column] |
- |
1.0 |
pageSize |
页大小 |
Number |
10 |
1.0 |
total |
数据总数 |
Number |
10 |
1.0 |
isPagination |
是否需要分页 |
Boolean |
true |
1.0 |
list |
数据数组 |
Array |
- |
1.0 |
rowSelection |
列表项是否可选择,配置项 |
Object |
null |
1.0.19 |
expandedRowItems |
扩展行操作项 |
[SelectItem] |
null |
1.1.5 |
事件名称 |
说明 |
回调参数 |
版本 |
pageChange |
分页事件触发 |
Function(current) ;current:被选中的页码 |
1.0 |
事件名称 |
说明 |
参数 |
版本 |
_startLoading |
开始页面加载中动画 |
- |
1.0 |
_stopLoading |
停止页面加载中动画 |
- |
1.0 |
参数 |
说明 |
类型 |
默认值 |
版本 |
title |
标题 |
array |
- |
1.0 |
dataIndex |
列数据在数据项中对应的 key,支持 a.b.c 的嵌套写法 |
string |
- |
1.0 |
align |
设置列内容的对齐方式 |
'left' | 'right' | 'center' |
'left' |
1.0 |
customRender |
生成复杂数据的渲染函数,同AntDesign,dataIndex='index',时, 该值默认为index + 1 |
Function(text, record, index) {}|slot-scope |
- |
1.0 |
dataType |
数据展示类型 |
TYPE_ENUM |
TEXT |
1.0 |
selectItems |
选择项数据 |
[SelectItem] |
- |
1.0 |
format |
日期格式 |
String |
|
|
imgW |
图片宽度 |
String |
60px |
|
参数 |
说明 |
类型 |
默认值 |
版本 |
fileData |
文件数据 |
[String, Object, Array] |
- |
1.2.14 |
fileNum |
文件数量(0: 表示不限制) |
Number |
1 |
1.2.14 |
multiple |
是否支持多选文件,开启后按住 ctrl 可选择多个文件。fileNum != 1时有效 |
Boolean |
false |
1.2.14 |
listType |
上传列表的内建样式,支持三种基本样式 text, picture 和 picture-card |
String |
text |
1.2.14 |
action |
上传的地址 |
String |
'https://upload.qiniup.com'' |
1.2.14 |
accept |
接受上传的文件类型 |
String |
|
1.2.14 |
formData |
上传所需参数或返回上传参数的方法 |
Object |
{token: '', domain: '', region: '', uploadURL: ''} |
1.2.14 |
qnTokenApi |
七牛云请求的API。 |
Object |
{method: 'GET',url: 'qnToken', params: {}, data: {}} |
1.2.14 |
title |
上传按钮的标题 |
String |
上传 |
1.2.14 |
icon |
上传按钮的图标 |
String |
upload |
1.2.14 |
事件名称 |
说明 |
回调参数 |
版本 |
change |
文件上传事件回调处理:返回文件列表 |
|
1.2.14 |
ok |
确认事件 |
|
1.0 |
该组件封装了中后台页面基本的常规操作,主要由表头、搜索、列表、详情组件构成,该组件涵盖列表的网络请求,增、删、改、查等基本操作。在此之上也开放了一些回调事件,来支持一些组件无法支持的一些操作。支持:(add、edit、copy)操作
参数 |
说明 |
类型 |
默认值 |
必须 |
版本 |
header |
请求头 |
Object |
|
|
1.2.16 |
apiName |
基于ResetFul 接口风格的统一资源名称(若没有对网络请求进行封装处理,此处为接口全路径);(该字段为空则需要自己手动处理API接口请求及逻辑) |
String |
- |
不建议为空 |
1.2.10 |
extParams |
API请求时的扩展参数 |
Object |
|
|
1.2.10 |
succCode |
接口返回的成功状态码 |
String |
"200" |
|
1.2.10 |
idKey |
模型对象对应的唯一标识字段 |
String |
"id" |
|
1.2.10 |
headerButtonItems |
header组件中按钮组 |
[BtnItem] |
|
|
1.2.10 |
searchItems |
搜索控件组(为空,不显示搜索组件) |
[Form-Item] |
|
|
1.2.10 |
searchBtnItems |
搜索按钮组 |
[BtnItem] |
[{title: '查询',icon: 'search',value: 'search'},{title: '重置',icon: 'reload',value: 'reset'}] |
|
1.2.10 |
searchColumnNum |
搜索组件中每行显示的组件数 |
Number |
4 |
|
1.2.10 |
columns |
table上列的配置项 |
[column]; 为空时与detailItems数据一致 |
|
否 |
1.2.10 |
isPagination |
table是否支持分页 |
Boolean |
false |
|
1.2.10 |
pagination |
table分页配置(isPagination=true 时有效) |
Object |
{pageNum: 1, pageSize: 10, total: 10} |
|
1.2.10 |
rowSelected |
table是否支持行选择 |
Boolean |
false |
|
1.2.10 |
detailItems |
详情页控件配置项目 |
[DetailItem] |
|
是 |
1.2.10 |
dividerOrientation |
详情页一级控件组所在分割线 enum:left righ center ;为空不显示分割头 |
|
|
|
|
String |
null |
是 |
1.2.10 |
|
|
requestDetail |
详情页面是否需要请求详情接口获取数据 |
Boolean |
false |
|
1.2.10 |
dictApi |
需要通过接口获取的选择项数据或者字典数据接口(用于下拉框,列表反显等) |
[DictApiItem] |
|
|
1.2.10 |
参数 |
说明 |
类型 |
默认值 |
版本 |
title |
显示的名称 |
String |
- |
1.2.0 |
icon |
显示的图标 |
String |
- |
1.2.0 |
value |
唯一标识项 |
String |
- |
1.2.0 |
参数 |
说明 |
类型 |
默认值 |
版本 |
title |
当前组的名称 |
String |
- |
1.2.0 |
children |
该组下对应的子项 |
[Form-Item] |
- |
1.2.0 |
参数 |
说明 |
类型 |
默认值 |
版本 |
header |
请求头 |
Object |
|
|
key |
需要进行结果数据渲染的配置项中的KEY |
String |
- |
1.2.0 |
url |
URL地址 |
String |
- |
1.2.0 |
method |
请求方式 enum: GET POST |
String |
- |
1.2.0 |
params |
params参数 |
Object |
- |
1.2.0 |
valueKey |
选项数据中的唯一标识字段 |
String |
- |
1.2.0 |
labelKey |
选项中用来显示的标识字段 |
String |
- |
1.2.0 |
kwKey |
关键字搜索时,关键字对应的标识字段 |
String |
- |
1.2.0 |
事件名称 |
说明 |
回调参数 |
版本 |
tableRowChange |
table的行选中事件 |
|
1.0 |
tableBtnClick |
table的按钮点击事件 |
|
1.0 |
searchBtnClick |
搜索框的按钮点击事件 |
|
1.0 |
delete |
被删除时间(api为空的情况下) |
|
1.0 |
detailOk |
详情确认事件 |
|
1.0 |
封装了常用的接口接口方式,基于resetFul。
import { h_getList, h_getDetail, h_add, h_edit, h_delete, h_request } from 'huibur-antd-vue'
方法名 |
描述 |
h_add (url, data, header) |
增加 |
h_edit (url, data, id, header) |
修改 |
h_delete (url, id, header) |
删除 |
h_getList (url, params, header) |
获取列表 |
h_getDetail (url, id, header) |
获取数据详情 |
h_request (method, url, params, data, header, id) |
其他通用网络请求 |
h_download (method, url, params, data, header, filename, id) |
下载 |
名称 |
参数类型 |
描述 |
method |
String |
请求方式(POST、GET、PUT、DETETE) |
url |
String |
网络请求地址全路径(注:可以拼接参数,效果与params、id参数相同) |
params |
Object |
添加到url的请求字符串中的,用于get请求 |
data |
Object |
添加到请求体(body)中的, 用于post请求 |
header |
Object |
请求头 |
id |
String |
拼接在路径之后的参数,即restful中的/{id} |
filename |
String |
下载的文件名称 |
所有接口规范需严格遵循resetFul风格规范,即面向资源。列表、详情、新增、编辑等模型必须保持一致。
以User为例
名称 |
说明 |
参数 |
版本 |
url |
/users |
- |
1.2.10 |
method |
GET |
- |
1.2.10 |
参数 |
params {pageNum: 1, pageSize: 10} |
- |
1.2.10 |
返回数据 |
{total: 10, pageNum: 1, list: [User]} 或 [User] |
- |
1.2.10 |
名称 |
说明 |
版本 |
url |
/users/{id} |
1.2.10 |
method |
GET |
1.2.10 |
参数 |
path |
1.2.10 |
返回数据 |
User |
1.2.10 |
名称 |
说明 |
版本 |
url |
/users |
1.2.10 |
method |
POST |
1.2.10 |
参数 |
body (User) |
1.2.10 |
返回数据 |
User |
1.2.10 |
名称 |
说明 |
版本 |
url |
/users |
1.2.10 |
method |
PUT |
1.2.10 |
参数 |
body(User ) |
1.2.10 |
返回数据 |
User |
1.2.10 |
名称 |
说明 |
版本 |
url |
/users/{id} |
1.2.10 |
method |
DELETE |
1.2.10 |
参数 |
path |
1.2.10 |