@schema-plugin-flow/sifo-mplg-form-antdv v1.12.0

AntdVueFormModelPlugin

sifo Form with ant-design-vue.

AntdVueFormModelPlugin 是在 SifoFormCore (@schema-plugin-flow/sifo-mplg-form-core) 基础上封装的UI层. mApi 同 SifoFormCore。

codesandbox.io: sifo-mplg-form-antdv

类实例化参数

使用示例

详细示例与代码请参照github -> examples-vue/src/demos/form-demo

import SifoFormCore from '@schema-plugin-flow/sifo-mplg-form-core';
import AntdVueFormModelPlugin from "@schema-plugin-flow/sifo-mplg-form-antdv";
// 样式： @import "~@schema-plugin-flow/sifo-mplg-form-antdv/index.less";
// sifo plugins
[{
  modelPlugin: {
    plugin: SifoFormCore,
    argsProvider: (mId, info) => {
      return {
        // 字段的key，无返回值认为不是字段，此处用 props.name 作为字段标识
        fieldKey: (attr) => attr.props && attr.props.name,
        fieldChange: {
          // 表单字段change使用的handler
          changeHandler: (context, e) => {
            const { event, mApi } = context;
            // 可根据不同的组件进行值获取
            let val = e;
            if (typeof e === "string" || typeof e === "number") {
              val = e;
            } else if (e && typeof e === "object") {
              val = e.target ? e.target.value : e;
            }
            mApi.setAttributes(event.key, { value: val }, true);
          },
          eventName: "change", // antd-vue的字段组件事件名是 change
        },
      };
    },
  }
},
{
  modelPlugin: AntdVueFormModelPlugin, // 要在SifoFormCore之后注册
},
/*
* 传 formItemProps 参数用法
  modelPlugin: {
    plugin: AntdVueFormModelPlugin,
    argsProvider: (mId, info) => {
      return {
        formItemProps: {
          labelCol: { span: 8 },
          wrapperCol: { span: 16 }
        }
      };
    }
  }
*/
{ pagePlugin, componentPlugin }
]

formItemWrapper

SifoFormCore模型插件只有表单内核，不包含任何UI部分，UI可按各自的情形封装。

• 字段标识： 在字段节点时，在schema节点层和attributes层都将包含属性isField: true；
• vue 的 value, validators, rules, validateDisabled, validateInfo 等放在 attributes.props 上；
• 覆盖了 mApi.getFormItemProps 方法来适配 vue；

schema 格式

• 初始配置可将 value, rules 等放在 attributes 上； 运行时在 attributes.props 上;
• schema 节点 id 应与 fieldKey（此处指字段标识对应的值）一致;
• class 是字段组件的样式；itemClassName 是FormItem层的样式；
• labelCol 控制FormItem标签; wrapperCol 控制FormItem字段组件;

{
  "id": "fieldKey01",
  "component": "Input",
  "attributes": {
    "name": "fieldKey01",
    "label": "字段名",
    "rules": [
      {
        "required": true,
        "message": "你需要填写项目的名称",
        "trigger": [
          "pressEnter",
          "change"
        ]
      }
    ],
    "class": "test-control-class",
    "itemClassName": "test-form-item-class",
    "labelCol": {
      "span": 8
    },
    "wrapperCol": {
      "span": 16,
      "offset": 0
    }
  }
}

FormItem Props

FormItem 事件

校验规则描述

• 内置了必填、整数、最大最小值和长度校验；
• 规则描述的message省略时将使用内置文案；
• trigger 省略时将使用类实例参数 fieldChange 的 eventName，除非设置 notAutoTrigger = true，此时只在调用 validate、validateAll 时触发；
• 调用validate、validateAll 时不区分 trigger；

{
  "rules": [
    {
      "required": true,
      "message": "请填写信息",
      "trigger": [
        "pressEnter",
        "change"
      ]
    },
    {
      "type": "integer"
    },
    {
      "max": 99.9
    },
    {
      "maxLength": 9
    }
  ]
}

扩展的 mApi 模型接口

validatorItem

const validatorItem = {
  validator: (value, callback, opts:{ id, mApi, fieldKey }) => {
    // not passed
    callback({
    passed: false,
    status: 'error',
    message: 'invalidate message',
    });
    // passed
    callback();
  },
  trigger: ['eventName'], // 在何时触发，默认是类实例参数 fieldChange 的 eventName 
}