165 lines
4.0 KiB
Vue
165 lines
4.0 KiB
Vue
<!--
|
|
* @Descripttion: 动态表单渲染器
|
|
-->
|
|
<template>
|
|
<el-skeleton v-if="renderLoading || Object.keys(form).length==0" animated />
|
|
<el-form v-else ref="form" :model="form" :label-width="config.labelWidth" :label-position="config.labelPosition" v-loading="loading" element-loading-text="Loading...">
|
|
<el-row :gutter="15">
|
|
<template v-for="(item, index) in config.column" :key="index">
|
|
<el-col :span="item.span || 24" v-if="!hideHandle(item)">
|
|
<x-title v-if="item.component=='title'" :title="item.label"></x-title>
|
|
<el-form-item v-else-if="item.component" :prop="item.name" :rules="rulesHandle(item)">
|
|
<template #label>
|
|
{{item.label}}
|
|
<el-tooltip v-if="item.tips" :content="item.tips">
|
|
<el-icon><el-icon-question-filled /></el-icon>
|
|
</el-tooltip>
|
|
</template>
|
|
<x-item :item="item" v-model="form"></x-item>
|
|
</el-form-item>
|
|
</el-col>
|
|
</template>
|
|
</el-row>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script>
|
|
import http from "@/utils/request"
|
|
export default {
|
|
props: {
|
|
modelValue: { type: Object, default: () => {} },
|
|
config: { type: Object, default: () => {} },
|
|
loading: { type: Boolean, default: false },
|
|
},
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
form: {},
|
|
renderLoading: false
|
|
}
|
|
},
|
|
watch:{
|
|
modelValue(){
|
|
if(this.hasConfig){
|
|
this.deepMerge(this.form, this.modelValue)
|
|
}
|
|
},
|
|
config(){
|
|
this.render()
|
|
},
|
|
form:{
|
|
handler(val){
|
|
this.$emit("update:modelValue", val)
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
computed: {
|
|
hasConfig(){
|
|
return Object.keys(this.config).length>0
|
|
},
|
|
hasValue(){
|
|
return Object.keys(this.modelValue).length>0
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
if(this.hasConfig){
|
|
this.render()
|
|
}
|
|
},
|
|
methods: {
|
|
//构建form对象
|
|
render() {
|
|
this.config.column.forEach((item) => {
|
|
item.options = item.options?item.options:[];
|
|
if(item.component == 'checkbox'){
|
|
if(item.name){
|
|
const value = {}
|
|
item.options.items.forEach((option) => {
|
|
value[option.name] = option.value
|
|
})
|
|
this.form[item.name] = value
|
|
}else{
|
|
item.options.items.forEach((option) => {
|
|
this.form[option.name] = option.value
|
|
})
|
|
}
|
|
}else{
|
|
this.form[item.name] = item.value
|
|
}
|
|
})
|
|
|
|
|
|
if(this.hasValue){
|
|
this.form = this.deepMerge(this.form, this.modelValue)
|
|
}
|
|
this.getData()
|
|
},
|
|
//处理远程选项数据
|
|
getData() {
|
|
this.renderLoading = true
|
|
var remoteData = []
|
|
this.config.column.forEach((item) => {
|
|
if(item.options && item.options.remote){
|
|
var req = http.get(item.options.remote.api, item.options.remote.data).then(res=>{
|
|
item.options.items = res.data
|
|
})
|
|
remoteData.push(req)
|
|
}
|
|
})
|
|
Promise.all(remoteData).then(()=>{
|
|
this.renderLoading = false
|
|
})
|
|
},
|
|
//合并深结构对象
|
|
deepMerge(obj1, obj2) {
|
|
let key;
|
|
for (key in obj2) {
|
|
obj1[key] = obj1[key] && obj1[key].toString() === "[object Object]" && (obj2[key] && obj2[key].toString() === "[object Object]") ? this.deepMerge(obj1[key], obj2[key]) : (obj1[key] = obj2[key])
|
|
}
|
|
return obj1
|
|
//return JSON.parse(JSON.stringify(obj1))
|
|
},
|
|
//数据验证
|
|
validate(valid, obj){
|
|
return this.$refs.form.validate(valid, obj)
|
|
},
|
|
scrollToField(prop){
|
|
return this.$refs.form.scrollToField(prop)
|
|
},
|
|
resetFields(){
|
|
return this.$refs.form.resetFields()
|
|
},
|
|
//提交
|
|
submit(){
|
|
this.$emit("submit", this.form)
|
|
},
|
|
//处理动态必填
|
|
rulesHandle(item){
|
|
if(item.requiredHandle){
|
|
const exp = eval(item.requiredHandle.replace(/\$/g,"this.form"))
|
|
var requiredRule = item.rules.find(t => 'required' in t)
|
|
requiredRule.required = exp
|
|
}
|
|
return item.rules
|
|
},
|
|
|
|
//处理动态隐藏
|
|
hideHandle(item){
|
|
if(item.hideHandle){
|
|
const exp = eval(item.hideHandle.replace(/\$/g,"this.form"))
|
|
return exp
|
|
}
|
|
return false
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|