custom-components/src/components/Form/index.vue

<template>
	<div class="form-com">
		<el-form ref="form" :rules="rules" :model="form" :label-width="configs.labelWidth||'80px'" :label-position="configs.labelPosition||'right'">
			<el-collapse v-if="isGroup" v-model="activeNames">
				<el-collapse-item v-for="(item, i) in configs.fields" :key="i" :title="item.groupTitle" :name="i">
					<Form :form.sync="form" :fields.sync="item.children" :columnNum="configs.columnNum">
						<template v-for="(item, i) in $scopedSlots" :slot="i" slot-scope="scope">
							<!-- <template v-if="hasSlot(item.children, i)" > -->
							<slot :name="i" :scope="scope"/>
							<!-- </template> -->
						</template>
					</Form>
				</el-collapse-item>
			</el-collapse>
			<template v-else>
				<Form :form.sync="form" :fields.sync="configs.fields" :columnNum="configs.columnNum">
					<template v-for="(item, i) in $scopedSlots" :slot="i" slot-scope="scope">
						<!-- <template v-if="hasSlot(item.children, i)" > -->
						<slot :name="i" :scope="scope"/>
						<!-- </template> -->
					</template>
				</Form>
			</template>
		</el-form>
		<div class="pt50 tc">
			<slot name="footer"></slot>
		</div>
		<!-- <div class="tc pt50">
			<el-button >取消</el-button>
        	<el-button type="primary" @click="submit()">保存</el-button>
		</div> -->
	</div>
</template>

<script>
import Form from './form'
import {isIdcard} from '../../utils/validate'
import validateForm from '../../utils/validateForm'
var validateMobile = (rule, value, callback) => {
    if(!(/^1[3456789]\d{9}$/.test(value))){
        return callback(new Error('号码有误，请重填'));
    } 
    return callback()
};
var validateIdCard = (rule, value, callback) => {
	if(!value){
		return callback();
	}
	var idcard = value
	var idcardLen = idcard.length,
		xchar = idcard.charAt(idcardLen-1);
	if (xchar === 'x') {
		idcard = idcard.substr(0, idcardLen-1) + 'X';
	}
	if(!isIdcard(idcard)){
		return callback(new Error('号码有误，请重填'));
	}
	return callback() 
};
export default {
	name: 'CustomForm',
	props: {
		'configs':{},
	},
	components:{
		Form
	},
	computed:{
		isGroup(){
			return !!this.configs.fields[0].groupTitle
		}
	},
	watch:{
		form:{
			handler(n){
				this.$emit('input', this.form)
			},
			deep: true
		}
	},
	data(){
		return {
			activeNames: [],
			form: "",
			rules: ""
		}
	},
	created(){
		if(this.isGroup){
			var activeNames = []
			this.configs.fields.forEach((v, i) => {
				activeNames.push(i)
			});
			this.activeNames = activeNames
		}
		var form = {}
		var rules = {}
		this.configs.fields.forEach((v, i) => {
			if(v.groupTitle){
				v.children.forEach((m, n)=>{
					form[m.id] = m.value||m.value===0||m.value===false? m.value : m.type=='checkbox'? [] :""
					rules[m.id] = this.setRule(m)
				})
			} else {
				form[v.id] = v.value||v.value===0||v.value===false? v.value :  v.type=='checkbox'? [] :""
				rules[v.id] = this.setRule(v)
			}
		});
		this.form = form
		this.rules = rules
		console.log(this.rules)
	},
	mounted() {
		
	},
	methods: {
		resetRule(item){
			this.rules[item.id] = this.setRule(item)
		},
		resetRules(){
			var rules = {}
			this.configs.fields.forEach((v, i) => {
				if(v.groupTitle){
					v.children.forEach((m, n)=>{
						rules[m.id] = this.setRule(m)
					})
				} else {
					rules[v.id] = this.setRule(v)
				}
			});
			this.rules = rules
		},
		setRule(item){
			if(item.rules){
				return item.rules
			}
			var r = []
			if(item.required){
				r.push({
					required: true,
					message: "该项必填",
					trigger: "blur"
				})
			}
			if(item.regTel){
				//手机号码
				r.push({
					validator: validateMobile, 
					trigger: 'blur'
				})
			}
			if(item.regIdcard){
				//身份证
				r.push({
					validator: validateIdCard, 
					trigger: 'blur'
				})
			}
			if(item.type == 'digit'){
				r.push({
					validator: validateForm['digit'], 
					trigger: 'blur'
				})
			}

			if(item.regularType && validateForm[item.regularType]){
				r.push({
					validator: validateForm[item.regularType], 
					trigger: 'blur'
				})
			}
			return r
		},
		submit() {
			var vm = this;
			return new Promise((resolve, reject)=>{
				this.$refs['form'].validate(valid => {
					if(valid){
						resolve(this.form)
					} else {
						resolve(valid)
					}
				});
			})
		},
		setValues(model){
			for(var k in model){
				this.form[k] = model[k]
			}
		},
		setValue(id, value){
			this.form[id] = value
		},
		hasSlot(list, key){
			for(var i=0; i<list.length; i++){
				if(list[i].id == key){
					return true
				}
			}
			return false
		},
		setOptions(configs, key, options){
			configs.fields.forEach(v=>{
				if(v.children){
					v.children.forEach(m=>{
						if(m.id == key){
							m.optionList = options
						}
					})
				} else {
					if(v.id == key){
						v.optionList = options
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.form-com{
	.el-collapse-item__header{
		font-size: 16px;
	}
	.el-collapse-item__content{
		padding-bottom: 0;
		padding-top: 10px;
	}
}
</style>