yzf-vue-comps

yzf-vue-comps(云之方前端Vue组件库)

基于antdv

• yzf-vue-comps(云之方前端Vue组件库)
  • 快速安装
  • 组件列表
  • Usage
    • 插件引入
    • options配置
      • ajax
      • modals
  • 向组件库贡献组件
    • 组件开发原则
    • 组件文档规范
    • 版本号相关说明
  • DynamicForm、FormBuilder组件使用说明
    • 配置表单的基本使用
    • 一个典型的表单描述JSON示例
    • 配置表常见使用模式时序图
      • 表单加载过程
      • 服务端加载
    • DF高级控制
      • fieldBus控制总线
      • originData, originEntityData原始数据引用
      • get|set+values|entityValues数据填充与获取
      • doValidate数据校验
      • event向配置表单上下文抛出事件
      • 生命周期方法
    • 脚本详解
      • 脚本参数
        • form
        • API
        • extraParams
      • 脚本上下文
  • YLedger配置式台账组件
  • 特殊控件说明
    • FVTable
      • 刷新策略
      • 参数传递
    • FSelect
      • 获取label
      • 数据源配置
    • 含有子控件的Layout控件
      • 内置子控件包含逻辑
  • 开发(添加组件，集成自定义组件)

---

快速安装

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等请求参数

类型:

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>

<javascript>
export default {
    data() {
        return {
            describe: [],
            funcs: {}
        }
    }
}
</javascript>

配置表单参数释义:

1. describe属性, 必传, 用以描述表单的基本参数
2. 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: "搜索"
				}
			},
		}
	],
}]

配置表单基本规则:

1. 表单配置为树形结构, FormContainer必须作为表单配置的根节点
2. 树节点的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原始数据引用

配置表单在使用set[Values|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向配置表单上下文抛出事件

此方法仅用于向配置表单的父组件抛出事件信息

1. 该方法不支持代码主动调用
2. 主要用于脚本调用

example:

form.event('gotoDetail', record) // 调用上下文中的gotoDetail方法, 并传入record参数

生命周期方法

1. 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控件

内置子控件包含逻辑

开发(添加组件，集成自定义组件)

1. 向DF注册
2. 向FB注册
3. 添加组件属性配置项
4. 自定义属性配置控件(当前不满足时)