基于uni-app的动态表单

一、应用场景和意义

可以通过配置字段和校验规则，快速完成页面开发、提升开发效率

二、应用前提

形成ui/业务规范，最好是应用在问卷调查之类的业务

三、动态表单的功能

字段报错、快速滚动定位报错信息、支持字段值和字段规则拆分，便于实现复杂的表单交互

四、动态表单支持的组件类型

1、input-text 文本输入框类型

支持正常的输入校验 和 不可编辑的样式和提示

2、single-select 单选

支持正常的单选和不可编辑以及未匹配到的提示

3、dependent-computing 依赖别的字段计算

依赖计算不可编辑、做显示

4、switch 开关

5、单选日期 single-calendar

支持正常的单选和不可编辑

6、upload-images 上传图片

这个图片上传耦合了接口上传 和禁止编辑

五、入参

formData 表单校验规则

valueForm 表单字段值

六、使用示例

form: {

ownerName: '',

idNumbe: '',

phoneNumber: "",

proAddres: "",

projectDetailedAddress: "",

},

allFormData: [

{

title: '客户信息',

showTitle: true,

list: [{

id: "ownerName",

placeholder: "请输入",

label: "姓名",

type: "input-text",

redTip: false,

readonly: true,

rules: [

{

type: 'string',

required: true,

message: '请输入',

trigger: ['change', 'blur']

}

]

},

{

id: "idNumbe",

placeholder: "请输入",

label: "证件号码",

type: "input-text",

redTip: false,

readonly: true,

rules: [

{

type: 'string',

required: true,

message: '请输入',

trigger: ['change', 'blur']

}

]

},

{

id: "phoneNumber",

placeholder: "请输入",

label: "联系电话",

type: "input-text",

redTip: false,

readonly: true,

rules: [

{

type: 'string',

required: true,

message: '请输入',

trigger: ['change', 'blur']

}

]

},

]

},

{

title: '项目地址',

showTitle: true,

list: [{

id: "proAddres",

placeholder: "请输入",

label: "项目地址",

type: "input-text",

redTip: false,

readonly: true,

rules: [

{

type: 'string',

required: true,

message: '请输入',

trigger: ['change', 'blur']

}

]

}, {

id: "projectDetailedAddress",

placeholder: "请输入",

label: "详细地址",

type: "input-text",

redTip: false,

readonly: true,

rules: [

{

type: 'string',

required: true,

message: '请输入',

trigger: ['change', 'blur']

}

]

}]

},

{

title: '电站基本情况',

showTitle: true,

list: [{

id: "zuKuai",

placeholder: "请输入",

label: "板块数",

type: "input-text",

redTip: false,

readonly: false,

rules: [

{

type: 'string',

required: true,

message: '请输入',

trigger: ['change', 'blur']

}, {

validator: (rule, value, callback) => {

const pattern = /^[1-9]\d{0,3}$|^[1-9]\d{0,3}$|^\d{1,4}$/

if (!pattern.test(value)) {

callback(new Error('请输入大于0小于10000的正整数'));

} else {

callback();

}

},

trigger: ['change', 'blur'],

}

]

},

{

id: "zuPower",

placeholder: "请选择",

label: "功率",

type: "single-select",

redTip: false,

readonly: false,

showSelect: false,

selectTitle: "请选择",

list: [],

listMap: {},

rules: [

{

type: 'string',

required: true,

message: '请选择',

trigger: ['change', 'blur']

}

]

},

{

id: "totalZuPower",

placeholder: "计算带出，不得修改",

label: "系统容量",

type: "dependent-computing",

redTip: false,

readonly: false,

rules: [{

type: 'string',

required: true,

message: '请完善版块数和功率',

trigger: ['change', 'blur']

}, {

validator: (rule, value, callback) => {

if (Number(value) > 120000) {

callback(new Error('系统容量不能大于120000'));

} else {

callback();

}

},

trigger: ['change', 'blur'],

}]

},]

},

{

title: '付款信息',

showTitle: true,

list: [

{

id: "priceType",

placeholder: "请选择",

label: "价格类型",

type: "single-select",

redTip: false,

readonly: false,

showSelect: false,

selectTitle: "请选择",

list: [],

listMap: {},

rules: [

{

type: 'string',

required: true,

message: '请选择',

trigger: ['change', 'blur']

}

],

beferConfirmFun: (confirmFun) => {

uni.showModal({

title: '提示',

content: '修改价格类型后需重新填写付款信息',

success: async (res) => {

if (res.confirm) {

confirmFun()

}

},

});

}

},

{

id: "assemblyAttribute",

placeholder: "请选择",

label: "组件属性",

type: "single-select",

redTip: false,

readonly: false,

showSelect: false,

selectTitle: "请选择",

list: [],

listMap: {},

rules: [

{

type: 'string',

required: true,

message: '请选择',

trigger: ['change', 'blur']

}

]

},

{

id: "applySituation",

placeholder: "请选择",

label: "应用场景",

type: "single-select",

redTip: false,

readonly: false,

showSelect: false,

selectTitle: "请选择",

list: [],

listMap: {},

rules: [

{

type: 'string',

required: true,

message: '请选择',

trigger: ['change', 'blur']

}

]

},

{

id: "singleDoubleSide",

placeholder: "请选择",

label: "单双面",

type: "single-select",

redTip: false,

readonly: false,

showSelect: false,

selectTitle: "请选择",

list: [],

listMap: {},

rules: [

{

type: 'string',

required: true,

message: '请选择',

trigger: ['change', 'blur']

}

]

},

]

},

],

七、案例显示

可以进行复杂的交互和可视区域定位校验