组件联动

# 组件联动

ProForm 组件通过rules传入联动规则,实现表单联动。

目前支持显示/隐藏/添加必填/取消必填

# 组件联动规则

interface rules {
  field: string; // 字段名
  control: controlType[]; // 联动内容
}

interface controlType {
  value: string; // 触发值 (当组件值跟value相等时触发)
  rule: {
    field: string, // 联动的字段key
    operator: 'show' | 'hidden' | 'required' | 'unrequired', // 联动类型
    value: string // 默认值
  };
}

# 示例

# 规则json

以下是一个联动示例,规则如下:

const rules = [
  {
    field: 'sex',
    control: [
      {
        value: '男',
        rule: [
          {
            field: 'education',
            operator: 'hidden'
          },
          {
            field: 'post',
            operator: 'required'
          }
        ]
      },
      {
        value: '女',
        rule: [
          {
            field: 'education',
            operator: 'show',
            value: '本科'
          },
          {
            field: 'post',
            operator: 'unrequired'
          }
        ]
      }
    ]
  }
]

  • 当性别切换为,文化程度隐藏,岗位必填。
  • 当性别切换为,文化程度显示,且默认值为本科,岗位取消必填。
  • 切换性别试试吧!

# 表单 JSON

{
  "list": [
    {
      "type": "grid",
      "name": "栅格布局",
      "icon": "th",
      "columns": [
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "工号",
              "labelWidth": 0,
              "hidden": false,
              "icon": "regular/keyboard",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "请输入工号",
                "remoteFunc": "func_1575516931000_89639"
              },
              "key": "jobno",
              "model": "jobno",
              "rules": [{ "type": "string", "message": "工号格式不正确" }]
            }
          ]
        },
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "姓名",
              "labelWidth": 0,
              "hidden": false,
              "icon": "regular/keyboard",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "",
                "remoteFunc": "func_1575516931000_89639"
              },
              "key": "personname",
              "model": "personname",
              "rules": [{ "type": "string", "message": "姓名1格式不正确" }]
            }
          ]
        }
      ],
      "options": {
        "gutter": 0,
        "justify": "start",
        "align": "top",
        "remoteFunc": "func_1575516929000_36539"
      },
      "key": "1575516931000_0.0578278502302394",
      "model": "1575516929000_36539",
      "rules": []
    },
    {
      "type": "grid",
      "name": "栅格布局",
      "icon": "th",
      "columns": [
        {
          "span": 12,
          "list": [
            {
              "type": "radio",
              "name": "性别",
              "icon": "regular/dot-circle",
              "labelWidth": "",
              "hidden": false,
              "options": {
                "inline": true,
                "defaultValue": "",
                "showLabel": false,
                "options": [
                  { "value": "男", "label": "选项1" },
                  { "value": "女", "label": "选项2" }
                ],
                "required": false,
                "disabled": false,
                "width": "",
                "remote": false,
                "remoteOptions": [],
                "props": { "value": "value", "label": "label" },
                "remoteFunc": "func_1608432399000_10952"
              },
              "key": "1608432399000_10952",
              "model": "sex",
              "rules": [{ "type": "string", "message": "性别格式不正确" }]
            }
          ]
        },
        {
          "span": 12,
          "list": [
            {
              "type": "select",
              "name": "文化程度",
              "labelWidth": 100,
              "hidden": false,
              "icon": "regular/caret-square-down",
              "options": {
                "defaultValue": null,
                "multiple": false,
                "disabled": false,
                "clearable": false,
                "placeholder": "",
                "required": false,
                "showLabel": false,
                "allowCreate": false,
                "width": "100%",
                "options": [
                  { "value": "本科" },
                  { "value": "研究生" },
                  { "value": "博士" }
                ],
                "remote": "static",
                "remoteOptions": [
                  { "value": "本科", "label": "本科" },
                  { "value": "大专及以下", "label": "大专及以下" },
                  { "value": "博士", "label": "博士" },
                  { "value": "研究生", "label": "研究生" },
                  { "value": "博士后", "label": "博士后" }
                ],
                "props": { "value": "value", "label": "label" },
                "remoteFunc": "func_1608433134000_41081",
                "dictType": "962e3a39-928d-4470-a9f3-8efda17f2692"
              },
              "key": "1608433134000_41081",
              "model": "education",
              "rules": []
            }
          ]
        }
      ],
      "options": {
        "gutter": 0,
        "justify": "start",
        "align": "top",
        "remoteFunc": "func_1575516929000_36539"
      },
      "key": "1575516931000_0.4979627182416866",
      "model": "1575516929000_36539",
      "rules": []
    },
    {
      "type": "grid",
      "name": "栅格布局",
      "icon": "th",
      "columns": [
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "所在部门",
              "labelWidth": 100,
              "hidden": false,
              "icon": "regular/keyboard",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "",
                "remoteFunc": "func_1575516931000_89639"
              },
              "key": "deptname",
              "model": "deptname",
              "rules": [{ "type": "string", "message": "所在部门格式不正确" }]
            }
          ]
        },
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "岗位",
              "labelWidth": 100,
              "hidden": false,
              "icon": "regular/keyboard",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "",
                "remoteFunc": "func_1575516931000_89639"
              },
              "key": "post",
              "model": "post",
              "rules": [{ "type": "string", "message": "岗位格式不正确" }]
            }
          ]
        }
      ],
      "options": {
        "gutter": 0,
        "justify": "start",
        "align": "top",
        "remoteFunc": "func_1575516929000_36539"
      },
      "key": "1575516931000_0.6063054944523363",
      "model": "1575516929000_36539",
      "rules": []
    },
    {
      "type": "grid",
      "name": "栅格布局",
      "icon": "th",
      "columns": [
        {
          "span": 12,
          "list": [
            {
              "type": "select",
              "name": "职级",
              "labelWidth": 100,
              "hidden": false,
              "icon": "regular/caret-square-down",
              "options": {
                "defaultValue": null,
                "multiple": false,
                "disabled": false,
                "clearable": false,
                "placeholder": "",
                "required": false,
                "showLabel": false,
                "allowCreate": false,
                "width": "100%",
                "options": [
                  { "value": "P5" },
                  { "value": "P6" },
                  { "value": "P7" },
                  { "value": "P8" }
                ],
                "remote": "static",
                "remoteOptions": [
                  { "value": "P6", "label": "P6" },
                  { "value": "P8", "label": "P8" },
                  { "value": "P5", "label": "P5" },
                  { "value": "P9", "label": "P9" },
                  { "value": "P7", "label": "P7" },
                  { "value": "P10", "label": "P10" }
                ],
                "props": { "value": "value", "label": "label" },
                "remoteFunc": "func_1608433344000_95961",
                "dictType": "ac3f1996-bcec-4604-b465-eaf5d1208e79"
              },
              "key": "1608433344000_95961",
              "model": "level",
              "rules": []
            }
          ]
        },
        {
          "span": 12,
          "list": [
            {
              "type": "date",
              "name": "入职时间",
              "labelWidth": "",
              "hidden": false,
              "icon": "regular/calendar-alt",
              "options": {
                "defaultValue": false,
                "readonly": false,
                "disabled": false,
                "editable": true,
                "clearable": true,
                "placeholder": "",
                "startPlaceholder": "",
                "endPlaceholder": "",
                "type": "date",
                "format": "yyyy-MM-dd",
                "timestamp": false,
                "required": false,
                "width": "100%",
                "remoteFunc": "func_1608432345000_20310"
              },
              "key": "1608432345000_20310",
              "model": "jobtime",
              "rules": [{ "type": "string", "message": "入职时间格式不正确" }]
            }
          ]
        }
      ],
      "options": {
        "gutter": 0,
        "justify": "start",
        "align": "top",
        "remoteFunc": "func_1575516929000_36539"
      },
      "key": "1575516931000_0.9740509729876656",
      "model": "1575516929000_36539",
      "rules": []
    },
    {
      "type": "grid",
      "name": "栅格布局",
      "icon": "th",
      "columns": [
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "薪资",
              "labelWidth": 0,
              "hidden": false,
              "icon": "regular/keyboard",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "",
                "remoteFunc": "func_1575516931000_89639"
              },
              "key": "salary",
              "model": "salary",
              "rules": []
            }
          ]
        },
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "联系方式",
              "labelWidth": 0,
              "hidden": false,
              "icon": "regular/keyboard",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "",
                "remoteFunc": "func_1575516931000_89639"
              },
              "key": "1575516931000_0.7423405755223678",
              "model": "mobile",
              "rules": [{ "type": "string", "message": "单行文本格式不正确" }]
            }
          ]
        }
      ],
      "options": {
        "gutter": 0,
        "justify": "start",
        "align": "top",
        "remoteFunc": "func_1575516929000_36539"
      },
      "key": "1575516931000_0.3680056593272678",
      "model": "1575516929000_36539",
      "rules": []
    },
    {
      "type": "grid",
      "name": "栅格布局",
      "icon": "th",
      "columns": [
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "专业",
              "labelWidth": 0,
              "hidden": false,
              "icon": "regular/keyboard",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "",
                "remoteFunc": "func_1575516931000_89639"
              },
              "key": "major",
              "model": "major",
              "rules": []
            }
          ]
        },
        {
          "span": 12,
          "list": [
            {
              "type": "date",
              "name": "出生年月",
              "labelWidth": "",
              "hidden": false,
              "icon": "regular/calendar-alt",
              "options": {
                "defaultValue": false,
                "readonly": false,
                "disabled": false,
                "editable": true,
                "clearable": true,
                "placeholder": "",
                "startPlaceholder": "",
                "endPlaceholder": "",
                "type": "month",
                "format": "yyyy-MM",
                "timestamp": false,
                "required": false,
                "width": "100%",
                "remoteFunc": "func_1608432438000_26217"
              },
              "key": "1608432438000_26217",
              "model": "birthdate",
              "rules": []
            }
          ]
        }
      ],
      "options": {
        "gutter": 0,
        "justify": "start",
        "align": "top",
        "remoteFunc": "func_1575516929000_36539"
      },
      "key": "1575516931000_0.22046952760726568",
      "model": "1575516929000_36539",
      "rules": []
    }
  ],
  "config": {
    "labelWidth": 100,
    "labelPosition": "right",
    "size": "small",
    "isTableClass": false,
    "name": "person"
  }
}