cloudnet-ui v1.0.22

Cloudnet-UI组件使用手册

BasicFormItems

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

items配置

注：表单项类型取值
hidden：表示在表单中隐藏
text: 文本框
number: 数字框
select: 下拉选择框
radio: 单选框
checkbox: 多选框
textarea: 文本域
password: 密码框
date: 日期选择框
datetime: 日期时间选择框
date-range: 日期范围选择框
time: 时间选择框
version: 版本框

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

BizFormItems

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

items配置

BizFormModal

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

注：
1.当为编辑业务表单时，后台需要提供地址 /url/view/{id} 的GET接口，查询当前的业务表单内容；
2.后台需要提供地址为 /url/save 的POST接口，保存表单内容。

事件

QueryListModal

业务表单项，query-list

QueryList

查询列表

注：
1.后台需要提供地址为 /url/view 的POST接口，用来查询表格数据；
2.后台需要提供地址为 /url/save 的POST接口，用来保存业务表单数据（当使用通用的新增、编辑功能）
3.后台需要提供地址为 /url/delete/{id} 的DELETE接口，用来删除表格数据（当使用通用删除功能）
4.后台需要提供地址为 /url/view/init 的GET接口，用来查询组件需要的字典数据和按钮权限

items配置

actions配置

注：fn处理函数接收一个参数，当前选中记录的主键
示例：打开一个分配角色权限的模态框
handlerRolePermission(roleId) {
  this.axios.get("/role/permission/" + roleId).then((data) => {
	  this.permissionData = data.permissions;
	  this.checkedKeys = data.rolePermissionIds;
	  this.visible = true;
  })
}

operations配置

注：fn处理函数接收一个参数，当前选中记录
示例：打印当前数据
handleOperation(record) {
  console.log(JSON.stringify(record));
}