<Form>
<Input :attrs="user" v-model="user.value"></Input>
<Select :attrs="user" v-model="user.value"></Select>
</Form>
<template>
<div class="form-example">
<Titlebar theme="b"
@on-back="onBack">Form</Titlebar>
<Form :select-arrow-style="{color: '#C8C7CC'}"
:input-clear-style="{color: '#C8C7CC'}"
@on-iscompleted="setIsCompleted"
text-position="right"
placeholder="请输入"
ref="form">
<components v-for="item in viewData.firstLevel"
v-model="item.value"
:is="item.componentType"
:attrs="item"
:key="item.id"
ref="cpList" />
<div class="btn-wrap">
<div :class="['btn', isCompleted ? '' : 'disabled']"
@click="doSubmit">
<p>提交({{ isCompleted ? "填写完毕" : "未填完" }})</p>
<p>validate</p>
</div>
<div :class="['btn', isCompleted ? '' : 'disabled']"
@click="doSubmit2">
<p>提交({{ isCompleted ? "填写完毕" : "未填完" }})</p>
<p>validateOneByOne</p>
</div>
<div class="btn"
@click="doReset">重设</div>
</div>
</Form>
<div class="result">
<p v-for="item in viewData.basic"><span>{{item.title}}：</span>{{item.value}}</p>
</div>
</div>
</template>
import _ from 'lodash'
let basicInfo = {
"status": 1,
"data": {
"basic": [{
"rely_policy_id": 0,
"id": "277",
"category_id": "1",
"title": "本人姓名",
"placeholder": "",
"var_name": "bureau_user_name",
"type": "text",
"verify_type": "text",
"data": "",
"unit": "",
"material_type": "100",
"info_property": "1",
"level": 1,
"desc": "",
"value": "",
"readonly": 0,
"maxlength": 800,
"rules": [{
"required": true,
"message": "姓名不能为空",
"trigger": "blur"
}]
}, {
"rely_policy_id": 0,
"id": "372",
"category_id": "1",
"title": "本人身份证号码",
"var_name": "user_id",
"type": "5",
"verify_type": "50",
"data": "",
"unit": "",
"material_type": "100",
"info_property": "1",
"level": 1,
"desc": "",
"value": "",
"readonly": 0
}, {
"rely_policy_id": 0,
"id": "264",
"category_id": "1",
"title": "职业类别",
"var_name": "is_op_type",
"type": "2",
"verify_type": "0",
"data": [{
"value": "1",
"desc": "企业主",
"rely": ["206"]
}, {
"value": "4",
"desc": "上班人群",
"rely": ["59"]
}, {
"value": "5",
"desc": "学生",
"rely": []
}],
"unit": "",
"material_type": "101",
"info_property": "0",
"level": 1,
"desc": "",
"value": "4",
"readonly": 0
}, {
"rely_policy_id": "264",
"id": "59",
"category_id": "1",
"title": "月工资收入（元）",
"var_name": "user_income_by_card",
"type": "9",
"verify_type": "0",
"data": "",
"unit": "元",
"material_type": "101",
"info_property": "1",
"level": 2,
"desc": "",
"value": "7000",
"readonly": 0
}, {
"rely_policy_id": "264",
"id": "206",
"category_id": "1",
"title": "经营流水（对公流水）",
"var_name": "corporate_flow",
"type": "9",
"verify_type": "0",
"data": "",
"unit": "",
"material_type": "102",
"info_property": "0",
"level": 2,
"desc": "",
"readonly": 0
}],
"loan_amount_min": "3000",
"loan_amount_max": "100000",
"is_pop": 1,
"pop_str": "xxxx"
}
}
function componentfactory (type) {
var component = { componentType: 'Input', verifyType: 'text' };
switch (type) {
case "3":
case "4":
case "9":
component = {
componentType: 'Input',
verifyType: 'number'
}
break;
case "email":
component = {
componentType: 'Input',
verifyType: 'email'
}
break;
case "50":
component = {
componentType: 'Input',
verifyType: 'IDCard'
}
break;
case "select":
case "2":
case "1":
component = 'rSelect'
component = {
componentType: 'Select',
verifyType: ''
}
break;
}
return component;
}
export default {
beforeRouteEnter (to, from, next) {
let basic = basicInfo.data.basic,
basicMap = {},
firstLevel = []
_.each(basic, item => {
let type = item.verify_type == 0 ? item.type : item.verify_type
item.componentType = componentfactory(type).componentType
item.type = componentfactory(type).verifyType
// 用户姓名特殊校验
if (item.id == 277) {
item.rules.push({
validator (rule, value, callback) {
if (value.length < 3) {
return new Error('姓名最少三个字')
}
callback()
},
trigger: 'blur'
})
}
// 申请金额不能为0
if (item.id == 692) {
item.rules = [{ required: true, message: '***申请金额不能为空***', trigger: 'blur' }]
item.rules.push({
validator (rule, value, callback) {
if (value == 0) {
return new Error('申请金额不能为零！')
}
callback()
},
trigger: 'blur'
})
}
if (item.id == 836) {
item.componentType = 'Input'
item.type = 'hidden'
item.rules = []
if (window.navigator.geolocation) {
window.navigator.geolocation.getCurrentPosition && window.navigator.geolocation.getCurrentPosition(function (position) {
// coords.latitude十进制数的纬度
// coords.longitude十进制数的经度
item.value = position.coords.longitude + ',' + position.coords.latitude
}, function () { }, {
enableHighAccuracy: true,
timeout: 45000
})
} else {
_.remove(basic, { id: "836" })
item.value = '无法获取gps'
console.log('Your browser does not natively support geolocation.');
}
}
// basic生成map机构，方便数据查找
basicMap[item.id] = item
// 数据分级
if (item.level == 1) firstLevel.push(item)
// 添加name属性
item.name = item.id
item.var_name = ''
})
// 构造rSelect的children数据
_.each(basic, item => {
if (item.componentType == 'Select') {
item.data.forEach(option => {
option.text = option.desc
if (option.rely && option.rely.length) {
option.children = option.rely.map(id => {
return basicMap[id]
})
}
})
}
})
CONST.cache.userbasicinfo = {
basic: basic,
firstLevel: firstLevel
}
next();
},
data () {
return {
viewData: CONST.cache.userbasicinfo,
fields: [],
isCompleted: false,
sourceCode
}
},
// computed: {
// isCompleted () {
// return this.fields.every(field => {
// if (field.fieldRules.length) {
// return field.currentValue != ''
// } else {
// return true
// }
// })
// }
// },
mounted () {
this.fields = this.$refs.form.fields
},
methods: {
doSubmit () {
this.$refs.form.validate((valid, validateMessage) => {
if (valid) {
console.log('getValue', this.$refs.form.getValue())
console.log('getSerializeValue', this.$refs.form.getSerializeValue())
console.log('getObjectValue', this.$refs.form.getObjectValue())
} else {
this.$dialog({
propsData: {
message: validateMessage.map(item => item.replace('不能为空', '')).join('、') + '不能为空'
},
methods: {
onConfirm () {
this.remove()
}
}
})
}
})
},
doSubmit2 () {
this.$refs.form.validateOneByOne((valid, validateMessage) => {
if (valid) {
console.log('getValue', this.$refs.form.getValue())
console.log('getSerializeValue', this.$refs.form.getSerializeValue())
console.log('getObjectValue', this.$refs.form.getObjectValue())
} else {
this.$dialog({
propsData: {
message: validateMessage
},
methods: {
onConfirm () {
this.remove()
}
}
})
}
})
},
setIsCompleted (value) {
this.isCompleted = value
},
doReset () {
this.$refs.form.resetFields()
},
onEnter (e) {
console.log(e.target.value)
},
onBack () {
this.$router.push('/')
}
}
}
