cloudnet-ui

包含基本组件的表单项集合
3,381
Install
npm install cloudnet-ui
Latest Version:1.0.22
Vue:2
Last Updated:Dec 31, 2020
Links: npm
Maintainer: xueagleman

Cloudnet-UI组件使用手册

BasicFormItems

包含基本组件的表单项集合

参数 说明 类型 是否必选 默认值
items 表单项集合，具体见items配置 Array 是
itemLayout 表单项样式 Object 否 {}
defaultData 表单默认值 Object 否 {}

items配置

参数 说明 类型 是否必选 默认值
type 表单项类型 String 是
label 表单项名称 String 是
key 表单项标识 String 是
isAllRow 表单项是否占据整行 Boolean 否
options 选择类表单项的选项 Array 否 
注：表单项类型取值
hidden：表示在表单中隐藏
text: 文本框
number: 数字框
select: 下拉选择框
radio: 单选框
checkbox: 多选框
textarea: 文本域
password: 密码框
date: 日期选择框
datetime: 日期时间选择框
date-range: 日期范围选择框
time: 时间选择框
version: 版本框

options选项示例
[{label: "男", key: "male"}, {label: "女", key: "female"}]

BizFormItems

包含基础表单项和业务表单项的集合

参数 说明 类型 是否必选 默认值
items 表单项集合，具体见items配置 Array 是
itemLayout 表单项样式 Object 否 {}
defaultData 表单默认值 Object 否 {}

items配置

参数 说明 类型 是否必选 默认值
type 表单项类型 String 是
label 表单项名称 String 是
key 表单项标识 String 是
isAllRow 表单项是否占据整行 Boolean 否
options 选择类表单项的选项 Array 否
url type=query-list，参照QueryList组件 String 否
items type=query-list，参照BasicFormItems String 否

BizFormModal

通用新增、编辑业务表单模态框

参数 说明 类型 是否必选 默认值
title 标题 String 是
width 宽度 Number 是
items 表单项集合，参见BasicFormItems Array 是
url 表单交互地址 String 是 
注：
1.当为编辑业务表单时，后台需要提供地址 /url/view/{id} 的GET接口，查询当前的业务表单内容；
2.后台需要提供地址为 /url/save 的POST接口，保存表单内容。

事件

事件名称 说明 回调参数
ok 表单保存成功后的回调事件

QueryListModal

业务表单项，query-list

参数 说明 类型 是否必选 默认值
title 标题 String 是
width 宽度 Number 否
defaultValue 默认值 Number 否 null
items 参照QueryList组件 Array 是
url 参照QueryList组件 String 是

QueryList

查询列表

参数 说明 类型 是否必选 默认值
items 查询列表配置项，具体参见items配置 Array 是
url 后台交互地址 String 是
actions 动作按钮集合，位于表格上方 Array 否 []
operations 操作按钮集合，位于表格操作列内 Array 否 []
isAuth 动作按钮和操作按钮是否需要权限管理 Boolean 否 false
globalParams 全局参数，在查询、编辑时会自动带上全局参数，当参数改变时，表格会动态刷新 Object 否 {} 
注：
1.后台需要提供地址为 /url/view 的POST接口，用来查询表格数据；
2.后台需要提供地址为 /url/save 的POST接口，用来保存业务表单数据（当使用通用的新增、编辑功能）
3.后台需要提供地址为 /url/delete/{id} 的DELETE接口，用来删除表格数据（当使用通用删除功能）
4.后台需要提供地址为 /url/view/init 的GET接口，用来查询组件需要的字典数据和按钮权限

items配置

参数 说明 类型 是否必选 默认值
type item类型，在业务表单或查询表单中使用，参照BizFormItems String 是
label item名称 String 是
key item标识 String 是
isColumn item是否作为表格列，当为String类型时表示展示翻译后的值 Boolean/String 否 true
isQuery item是否作为查询条件 Boolean 否 false
isAllRow item在业务表单是否占据整行 Boolean 否
options item为选择类时，包含的选项 Array 否
url type=query-list，参照QueryList组件 String 否
items type=query-list，参照BasicFormItems String 否

actions配置

参数 说明 类型 是否必选 默认值
key 按钮标识，key='A'表示通用新增按钮 String 是
label 按钮名称，当自定义按钮时必选 String 否
fn 按钮处理函数，当自定义按钮时必选 String 否 
注：fn处理函数接收一个参数，当前选中记录的主键
示例：打开一个分配角色权限的模态框
handlerRolePermission(roleId) {
  this.axios.get("/role/permission/" + roleId).then((data) => {
	  this.permissionData = data.permissions;
	  this.checkedKeys = data.rolePermissionIds;
	  this.visible = true;
  })
}

operations配置

参数 说明 类型 是否必选 默认值
key 按钮标识，key='E'表示通用编辑按钮，key='D'表示通用删除按钮 String 是
icon 按钮图标，表格操作列中只显示图标，当自定义按钮时必选 String 否
fn 按钮处理函数，当自定义按钮时必选 String 否 
注：fn处理函数接收一个参数，当前选中记录
示例：打印当前数据
handleOperation(record) {
  console.log(JSON.stringify(record));
}

Version History

Version Released Vue License
1.0.22 ^2.6.11
1.0.21 ^2.6.11
1.0.20 ^2.6.11
1.0.19 ^2.6.11
1.0.18 ^2.6.11