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));
}