<template>
|
<div>
|
<el-form ref="generateForm" :model="models" :rules="rules" :label-position="data.editorOptions.config.labelPosition" :label-width="data.editorOptions.config.labelWidth">
|
<template v-for="item in data.editorOptions.fields">
|
<template v-if="item.type == 'grid'">
|
<el-row :key="item.key" :gutter="item.options.gutter ? item.options.gutter : 0" :justify="item.options.justify" :align="item.options.align" type="flex">
|
<el-col v-for="(col, colIndex) in item.columns" :key="colIndex" :span="col.span">
|
<template v-for="citem in col.fields">
|
<el-form-item v-if="citem.type=='blank'" :label="citem.label" :prop="citem.model" :key="citem.key">
|
<slot :name="citem.model" :model="models"></slot>
|
</el-form-item>
|
<genetate-form-item v-else :key="citem.key" :models.sync="models" :remote="remote" :rules="rules" :widget="citem"></genetate-form-item>
|
</template>
|
</el-col>
|
</el-row>
|
</template>
|
|
<template v-else-if="item.type == 'blank'">
|
<el-form-item :label="item.name" :prop="item.model" :key="item.key">
|
<slot :name="item.model" :model="models"></slot>
|
</el-form-item>
|
</template>
|
|
<template v-else>
|
<genetate-form-item :key="item.key" :models.sync="models" :rules="rules" :widget="item" :remote="remote"></genetate-form-item>
|
</template>
|
|
</template>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import GenetateFormItem from "./GenerateFormItem";
|
|
export default {
|
name: "fm-generate-form",
|
components: {
|
GenetateFormItem
|
},
|
props: {
|
data: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
remote: {
|
type: Boolean,
|
default: false
|
},
|
value: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
}
|
},
|
data() {
|
return {
|
models: {},
|
rules: {}
|
};
|
},
|
watch: {
|
value: {
|
deep: true,
|
handler(val) {
|
// console.log(JSON.stringify(val))
|
this.models = { ...this.models, ...val };
|
}
|
}
|
},
|
created() {
|
this.generateModle(this.data.editorOptions.fields);
|
},
|
methods: {
|
generateModle(genList) {
|
for (let i = 0; i < genList.length; i++) {
|
if (genList[i].type === "grid") {
|
genList[i].columns.forEach(item => {
|
this.generateModle(item.fields);
|
});
|
} else {
|
if (Object.keys(this.value).indexOf(genList[i].model) >= 0) {
|
this.models[genList[i].model] = this.value[genList[i].model];
|
} else {
|
if (genList[i].type === "blank") {
|
if (genList[i].options.defaultType === "String") {
|
this.models[genList[i].model] = "";
|
} else {
|
this.models[genList[i].model] =
|
genList[i].options.defaultType === "Object" ? {} : [];
|
}
|
} else {
|
this.models[genList[i].model] = genList[i].options.defaultValue;
|
}
|
}
|
|
if (this.rules[genList[i].model]) {
|
this.rules[genList[i].model] = [
|
...this.rules[genList[i].model],
|
...genList[i].rules
|
];
|
} else {
|
this.rules[genList[i].model] = [...genList[i].rules];
|
}
|
}
|
}
|
},
|
getData() {
|
return new Promise((resolve, reject) => {
|
this.$refs.generateForm.validate(valid => {
|
if (valid) {
|
resolve(this.models);
|
} else {
|
reject(new Error("表单数据校验失败").message);
|
}
|
});
|
});
|
},
|
refresh() {}
|
}
|
};
|
</script>
|
