yzf-vue-comps v0.3.76
yzf-vue-comps(云之方前端Vue组件库)
基于antdv
- yzf-vue-comps(云之方前端Vue组件库)
快速安装
npm install yzf-vue-comps
组件列表
组件 | 是否依赖注入ajax |
---|---|
DynamicForm | - x |
FormBuilder | - x |
ConfirmDelButton | - |
FlexPanel | - |
MoneyInput | - |
DateRangePicker | - |
Usage
插件引入
!!!重要!!! 1. 服务端需提供实体、数据源、表单设计器相关接口
import YZFUI from 'yzf-vue-comps'
Vue.use(YZFUI, options);
### options配置
#### ajax
> 由于组件库内置了部分ajax请求, 因此引入时需注入项目通用的ajax方法, 以便于直接使用项目中的自定义token, Content-Type等请求参数
类型:
```javascript
Function:(axiosConfigObject, data) => ajaxPromise
modals
配置表单在部分场景下需要使用脚本调用项目中已经存在的弹框组件, 因此引入时需将这些弹框组件注册进配置表单组件, 待注册的弹框组件需提供open方法和name选项
类型: Object
脚本调用弹框:
API.modal.local("ModalName", modalProps)
向组件库贡献组件
组件开发原则
组件文档规范
版本号相关说明
DynamicForm、FormBuilder组件使用说明
DynamicForm以下简称DF、FormBuilder以下简称FB
配置表单的基本使用
<template> <DynamicForm :describe="describe" :funcs="funcs" /> </template>
- describe属性, 必传, 用以描述表单的基本参数
- funcs属性, 可选, 当表单拥有自定义脚本逻辑时使用
一个典型的表单描述JSON示例
[{
id: 'uuid-xxx-xxx',
comptype: "FormContainer",
config: {
layout: "horizontal",
labelCol: {xs: 24,sm: 8,md: 7,lg: 6,xl: 5,xxl: 4},
wrapperCol: {xs: 24,sm: 16,md: 17,lg: 18,xl: 19,xxl: 20,},
labelAlign: "left",
labelWidth: 100,
labelLayout: "flex",
hideRequiredMark: false,
},
children: [
{
id: "uuid-xxx-xxx",
comptype: "FTextInput",
cname: "输入框",
category: "FormItem",
config: {
label: "文本框",
help: "提示信息",
style: "",
disabled: false,
hidden: false,
rules: {
"required": false,
"requiredInfo": "此项必填",
"regulars": "[]"
},
entity: {},
field: "7af1a404-78fa-4505-a658-3e0692d9f850",
scripts: "[{\"desc\":\"尾部按钮点击\",\"scriptname\":\"footeraction\"},{\"desc\":\"失去焦点\",\"scriptname\":\"blur\"},{\"desc\":\"值变更\",\"scriptname\":\"change\"}]",
size: "small",
placeholder: "请输入内容",
maxLength: 20,
footerAction: {
enabled: false,
icon: "search",
label: "搜索"
}
},
}
],
}]
配置表单基本规则:
- 表单配置为树形结构, FormContainer必须作为表单配置的根节点
- 树节点的id字段为控件唯一标识, 不可重复
控件属性:
属性名 | 用途 | DF | FB |
---|---|---|---|
id | 控件唯一标识, 不可重复 | x | x |
comptype | 控件类型, 指定使用哪个控件 | x | x |
cname | 控件中文名称, 显示在表单设计器的控件面板中 | - | x |
category | 控件类别, 目前拥有FormItem,Layout,Custom三个类别 | x | x |
children | 子组件组 | - | - |
config | 控件配置项 | - | - |
控件通用/常用配置:
配置项名 | 用途 |
---|---|
label | 控件标签, 常用于表单控件的title |
help | 帮助信息, 常用于鼠标悬浮时的提示 |
style | 控件样式, 使用标准的CSS语法为控件添加样式 |
disabled | 禁用标志, 设置为true可以禁用控件 |
hidden | 隐藏标志, 设置为true可以隐藏控件 |
rules | 校验规则, 参考async-validator |
entity | 实体属性配置, 记录控件关联的实体和属性 |
field | 控件在表单数据中的key, 同时用于大部分表单高级功能中, 不可重复 |
scripts | 控件事件脚本描述, 定义了该控件可以抛出的所有事件 |
除以上配置外, 每个表单控件都会自带其自身的配置属性, 参见控件详细描述。
配置表常见使用模式时序图
表单加载过程
服务端加载
DF高级控制
fieldBus控制总线
配置表单中的控件不论层级均会被挂载至fieldBus上,并以各控件的field属性为索引提供访问
// 在表单引用处
$refs.df.fieldBus[compfield]
// 在脚本中
form.fieldBus[compfield]
originData, originEntityData原始数据引用
配置表单在使用setValues|EntityValues填充数据时, 将自动保存原始数据备份, 备份数据常用于 1. 使用过程中的数据核对 2. 表单本身不承载的数据保存
get|set+values|entityValues数据填充与获取
配置表单提供两种模式的数据填充和获取方法 1. 普通Object模式, 按照普通field组合 2. 实体模式, 按照配置表单中关联的实体属性组合
doValidate数据校验
所有FormItem类型的组件均提供doValidate方法, 按照组件的rules属性进行验证
组件的验证规范参考async-validator
单个组件的校验方法返回:
{
field, //组件field
success,
err //当success为false时返回
}
DF的doValidate方法返回:
{
success,
errs //表单按树结构顺序校验, 当校验至结果为false的组件时将错误信息填充至errs中并返回
}
event向配置表单上下文抛出事件
此方法仅用于向配置表单的父组件抛出事件信息
- 该方法不支持代码主动调用
- 主要用于脚本调用
example:
form.event('gotoDetail', record) // 调用上下文中的gotoDetail方法, 并传入record参数
生命周期方法
- inited-表单加载完成回调
脚本详解
脚本参数
form
配置表单实例
提供配置表单实例以索引所有配置表单属性及通过控件总线索引
API
内置API
主要提供以下选项: 1. utils, 工具方法, 目前包含lodash库 2. remote, 访问远程服务的接口 3. modal, 弹框相关功能, 主要包含本地弹框方法modal.local(modalname, props), 动态弹框modal.dynamicObjectEditModal(props), modal.modal(props), modal.drawer(props),
extraParams
自定义参数
部分控件在抛出脚本事件时, 会带出一些自定义的参数,例如 1. 表格操作列点击事件, 带出行列信息 2. Select、InputModalSelect值改变事件, 带出值信息
脚本上下文
脚本的执行上下文与项目内组件不同, 如需使用配置表单上下文的变量和方法, 可直接使用form.$parent获取
YLedger配置式台账组件
包含一个可折叠的搜索区域,一个Tabs筛选栏,一个数据表格
特殊控件说明
FVTable
刷新策略
参数传递
FSelect
获取label
数据源配置
含有子控件的Layout控件
内置子控件包含逻辑
开发(添加组件,集成自定义组件)
- 向DF注册
- 向FB注册
- 添加组件属性配置项
- 自定义属性配置控件(当前不满足时)
4 months ago
4 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago