117 lines
2.9 KiB
Vue
117 lines
2.9 KiB
Vue
<template>
|
|
<!--todo 渲染表单-->
|
|
<el-form ref="form" class="process-form" label-position="top" :rules="rules" :model="_value">
|
|
<div v-for="(item, index) in formItems" :key="item.name + index">
|
|
<el-form-item v-if="item.name !== 'SpanLayout' && item.name !== 'Description'"
|
|
:prop="item.id" :label="item.title">
|
|
<form-design-render :ref="`sub-item_${item.id}`" :perm="item.perm" v-model="_value[item.id]" mode="PC" :config="item"/>
|
|
</el-form-item>
|
|
<form-design-render ref="span-layout" :perm="item.perm" v-else v-model="_value" mode="PC" :config="item"/>
|
|
</div>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script>
|
|
import FormDesignRender from '@/views/admin/layout/form/FormDesignRender'
|
|
|
|
export default {
|
|
name: "FormRender",
|
|
components: {FormDesignRender},
|
|
props:{
|
|
formItems: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
rules: {},
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadFormConfig(this.formItems)
|
|
},
|
|
computed: {
|
|
_value:{
|
|
get(){
|
|
return this.value
|
|
},
|
|
set(val){
|
|
this.$emit('input', val)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
validate(call) {
|
|
let success = true
|
|
this.$refs.form.validate(valid => {
|
|
success = valid
|
|
if(valid){
|
|
//校验成功再校验内部
|
|
for (let i = 0; i < this.formItems.length; i++) {
|
|
if (this.formItems[i].name === 'TableList'){
|
|
let formRef = this.$refs[`sub-item_${this.formItems[i].id}`]
|
|
if (formRef && Array.isArray(formRef) && formRef.length > 0){
|
|
formRef[0].validate(subValid => {
|
|
success = subValid
|
|
})
|
|
if (!success){
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
call(success)
|
|
});
|
|
},
|
|
loadFormConfig(formItems){
|
|
formItems.forEach(item => {
|
|
if (item.name === 'SpanLayout'){
|
|
this.loadFormConfig(item.props.items)
|
|
}else {
|
|
if (!item.perm){
|
|
this.$set(item, 'perm', 'E')
|
|
}
|
|
this.$set(this._value, item.id, this.value[item.id])
|
|
if(item.props.required){
|
|
this.$set(this.rules, item.id, [{
|
|
type: item.valueType === 'Array' ? 'array' : undefined,
|
|
required: true,
|
|
message: `请填写${item.title}`, trigger: 'blur'
|
|
}])
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.process-form {
|
|
//margin: 15px 0;
|
|
padding: 10px 10px 1px 10px;
|
|
background: #fff;
|
|
/deep/ .el-form-item__label {
|
|
padding: 0 0;
|
|
}
|
|
|
|
/deep/ .el-form-item__content {
|
|
padding-left: 5px;
|
|
line-height: 30px;
|
|
}
|
|
/deep/ .el-form-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
</style>
|