字段

字段配置参考（可直接复制使用）

字段介绍

	"fields": { // 所有字段
  	fieldName: { // 字段标识
    	model: "fieldName", // 字段标识
      type: "input", // 字段在表单中的展示类型
      wrapper: { // 表单中包裹字段的 FormItem 的配置
      	label: "字段名称"
      },
      customize: { // 字段的表单配置，对应文档中字段的 API
      	allowClear: true,
        placeholder: "请输入段名称"
      },
      decorator: { // 装饰器，默认值（initialValue）、校验规则都在这里，对应字段在表单中的 decorator 配置
      	initialValue: undefined,
        rules: [
          { required: true, message: "必填项" }
        ]
      },
      extend: {} // 部分组件封装后的自定义配置项，例如文件上传组件的 limit（上传数量限制） 和 size（文件体积限制，单位 M）
  },

输入框-input

  	fieldName: {  
    	model: "fieldName",  
      type: "input", 
      wrapper: { 
      	label: "字段名称"
      },
      customize: {  
      	allowClear: true,
        placeholder: "请输入段名称"
      },
      decorator: {  
      	initialValue: undefined,
        rules: [
          { required: true, message: "必填项" }
        ]
      },
      extend: {
      	mode: "" // 搜索栏显示搜索图标需要配置mode为search，回车或点击图标会触发搜索
      }  
  },

文本框-textarea

  	fieldName: { 
    	model: "fieldName",  
      type: "textarea",  
      wrapper: { //  
      	label: "字段名称"
      },
      customize: {  
      	allowClear: true,
        placeholder: "请输入段名称"
      },
      decorator: {  
      	initialValue: undefined,
        rules: [
          { required: true, message: "必填项" }
        ]
      },
      extend: {} 
  },

自动补全-autoComplete

  	fieldName: {  
    	model: "fieldName",  
      type: "autoComplete", 
      wrapper: { 
      	label: "字段名称"
      },
      customize: {  
      	allowClear: true,
        placeholder: "请输入段名称",
        filterOption: true,
              dataSource: [
                {
                  value: "健康",
                  text: "健康"
                }
              ]
      },
      decorator: {  
      	initialValue: decorator,
        rules: [
          { required: true, message: "必填项" }
        ]
      },
      extend: {}  
  },

数字输入框-number

  	fieldName: { 
    	model: "fieldName",  
      type: "input",  
      wrapper: { 
      	label: "字段名称"
      },
      customize: {  
      	allowClear: true,
        placeholder: "请输入段名称"
      },
      decorator: {  
      	initialValue: undefined,
        rules: [
          { required: true, message: "必填项" }
        ]
      },
      extend: {}  
  },

静态数据下拉选择器-select

  	fieldName: {  
    	model: "fieldName", 
      type: "select", 
      wrapper: {  
      	label: "字段名称"
      },
      customize: {  
      	allowClear: true,
        placeholder: "请输入段名称"
         options: [
                {
                  value: 1,
                  label: "下拉框1"
                },
                {
                  value: 2,
                  label: "下拉框2"
                }
              ]
      },
      decorator: {  
      	initialValue: undefined,
        rules: [
          { required: true, message: "必填项" }
        ]
      },
      extend: {}  
  },

动态态数据下拉选择器-select

  	fieldName: {  
    	model: "fieldName", 
      type: "select", 
      wrapper: {  
      	label: "字段名称"
      },
      customize: {  
      	allowClear: true,
        placeholder: "请输入段名称"
      },
      decorator: {  
      	initialValue: undefined,
        rules: [
          { required: true, message: "必填项" }
        ]
      },
      extend: {
        dynamic: true, // 是否是动态的
        dynamicKey: "enumOptions2",
        dynamicUrl: `请求url地址`,
        dynamicTail: "data",
        dynamicValueKey: "id",  
        dynamicLabelKey: "name"  
      }  
  },

级联选择器-cascader

  	fieldName: { 
    	model: "fieldName",  
      type: "cascader", 
      wrapper: {  
      	label: "字段名称"
      },
      customize: {  
      	allowClear: true,
        placeholder: "请输入段名称",
        options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
      },
      decorator: {  
      	initialValue: undefined,
        rules: [
          { required: true, message: "必填项" }
        ]
      },
      extend: {} 
  },

多选框-checkbox

配置与 select 基本一致

checkbox: {
  model: "",
  type: "checkbox",
  wrapper: {
    label: ""
  },
  customize: {
    placeholder: "",
    options: []
  },
  decorator: {
    initialValue: undefined,
    rules: [{ required: false, message: "请选择计算方式" }]
  },
  extend: {
    dynamic: false,
    dynamicKey: "lateFeeRuleList",
    dynamicUrl: "/finance/api/v1/formulas/listAll",
    dynamicTail: "data",
    dynamicValueKey: "id",
    dynamicLabelKey: "formula",
    cascade: false,
    cascadeModel: "messageTemplateId",
    cascadeKey: "messageTemplateId"
  }
}

单选框-radio

配置与 select 基本一致

radio: {
  model: "",
  type: "radio",
  wrapper: {
    label: ""
  },
  customize: {
    placeholder: "",
    options: []
  },
  decorator: {
    initialValue: undefined,
    rules: [{ required: false, message: "请选择计算方式" }]
  },
  extend: {
    dynamic: false,
    dynamicKey: "lateFeeRuleList",
    dynamicUrl: "/finance/api/v1/formulas/listAll",
    dynamicTail: "data",
    dynamicValueKey: "id",
    dynamicLabelKey: "formula",
    cascade: false,
    cascadeModel: "messageTemplateId",
    cascadeKey: "messageTemplateId"
  }
}

树选择器-treeSelect

  	fieldName: { 
    	model: "fieldName", 
      type: "treeSelect",   
      wrapper: {  
      	label: "字段名称"
      },
      customize: {  
      	allowClear: true,
        placeholder: "请输入段名称"
      },
      decorator: {  
      	initialValue: undefined,
        rules: [
          { required: true, message: "必填项" }
        ]
      },
      extend: {}  
  },

日期选择框-date

  	fieldName: {  
    	model: "fieldName",  
      type: "date",  
      wrapper: {  
      	label: "字段名称"
      },
      customize: {  
      	allowClear: true,
        placeholder: "请输入段名称",
        format: "YYYY-MM-DD"
      },
      decorator: {  
      	initialValue: undefined,
        rules: [
          { required: true, message: "必填项" }
        ]
      },
      extend: {}  
  },

时间选择框-待开发

上传-upload

  	fieldName: { 
    	model: "fieldName", 
      type: "upload", 
      wrapper: { 
      	label: "上传资料"
      },
      customize: { 
      	action: "/file/api/v1/site/default/uploadImg",
        accept: ".jpg, .jpeg, .png, .bmp, .gif, .mp3, .wav, .wmv, .mp4, .mkv, .avi",
        listType: "picture-card",
        multiple: true
      },
      decorator: {  
      	initialValue: undefined,
        rules: [
          { required: true, message: "必填项" }
        ]
      },
      extend: {
         size: 10,
         limit: 1
      }  
  },

开关-switch

 fieldName: {
      model: "fieldName",
      type: "switch",
      wrapper: {
        label: "是否关闭"
      },
      customize: {},
      decorator: {
        valuePropName: "checked",
        initialValue: false
      }
    },

地区选择-area

area: {
    model: "",
    type: "area",
    wrapper: {
      label: ""
    },
    customize: {
      allowClear: true,
      multiple: true,
      placeholder: "请选择产品地区"
    },
    decorator: {
      initialValue: undefined,
      rules: [{ required: false, message: "必须上传" }]
    },
    extend: {
      level: 3 // 2 为市级，3为县区级
    }
  }

 

 

若有收获，就点个赞吧