yzf-vue-comps

v0.3.88

Published

9 months ago

> 基于antdv

Downloads

1,144

0High
0Medium
0Low

foooooops

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

基于antdv

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

快速安装

npm install yzf-vue-comps

组件列表

|组件|是否依赖注入ajax| |:--------------:|:-------:| |DynamicForm| - [x] | |FormBuilder| - [x] | |ConfirmDelButton| - [ ] | |FlexPanel| - [ ] | |MoneyInput| - [ ] | |DateRangePicker| - [ ] |

Usage

插件引入

!!!重要!!!
服务端需提供实体、数据源、表单设计器相关接口

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>

配置表单参数释义:

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|控件配置项|-|-|

控件通用/常用配置:

除以上配置外, 每个表单控件都会自带其自身的配置属性, 参见控件详细描述。

配置表常见使用模式时序图

表单加载过程

服务端加载

DF高级控制

fieldBus控制总线

配置表单中的控件不论层级均会被挂载至fieldBus上，并以各控件的field属性为索引提供访问

// 在表单引用处
$refs.df.fieldBus[compfield]
// 在脚本中
form.fieldBus[compfield]

originData, originEntityData原始数据引用

配置表单在使用set[Values|EntityValues]填充数据时, 将自动保存原始数据备份, 备份数据常用于
使用过程中的数据核对
表单本身不承载的数据保存

get|set+values|entityValues数据填充与获取

配置表单提供两种模式的数据填充和获取方法
普通Object模式, 按照普通field组合
实体模式, 按照配置表单中关联的实体属性组合

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

主要提供以下选项:

utils, 工具方法, 目前包含lodash库
remote, 访问远程服务的接口
modal, 弹框相关功能, 主要包含本地弹框方法modal.local(modalname, props), 动态弹框modal.dynamicObjectEditModal(props), modal.modal(props), modal.drawer(props),

extraParams

自定义参数

部分控件在抛出脚本事件时, 会带出一些自定义的参数,例如

表格操作列点击事件, 带出行列信息
Select、InputModalSelect值改变事件, 带出值信息

脚本上下文

脚本的执行上下文与项目内组件不同, 如需使用配置表单上下文的变量和方法, 可直接使用form.$parent获取

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme