106 lines
2.4 KiB
Vue
106 lines
2.4 KiB
Vue
<template>
|
|
<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" v-else :perm="item.perm" v-model="_value" mode="PC" :config="item"/>
|
|
</div>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script>
|
|
import FormDesignRender from '@/views/admin/layout/form/FormDesignRender'
|
|
|
|
export default {
|
|
name: "FormRenderView",
|
|
components: {FormDesignRender},
|
|
props: {
|
|
formItems: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
model:{
|
|
type: String,
|
|
default:() => {
|
|
return "R"
|
|
}
|
|
},
|
|
isPreview:{
|
|
type: Boolean,
|
|
default:() => {
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
rules: {},
|
|
}
|
|
},
|
|
computed: {
|
|
_value: {
|
|
get() {
|
|
return this.value
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadFormConfig(this.formItems)
|
|
},
|
|
methods: {
|
|
loadFormConfig(formItems) {
|
|
formItems.forEach(item => {
|
|
if (item.name === 'SpanLayout') {
|
|
this.loadFormConfig(item.props.items)
|
|
} else {
|
|
this.$set(this._value, item.id, this.value[item.id])
|
|
if (this.isPreview){
|
|
this.$set(item, 'perm', this.model)
|
|
}
|
|
if (item.props.required && this.model === "E") {
|
|
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>
|