import TimeSelector from './basicComponent/TimeSelector'
import SelectTree from './basicComponent/SelectTree'
import StaffSelectPopedit from './businessComponent/StaffSelectPopedit'
export default {
name: "FormGenerator",
components: { SelectList, TextInput, TimeSelector, SelectTree, StaffSelectPopedit},
props: ["config", "value"],
data() {
return {
formData: this.value,
onSubmitText: this.config.buttons.onSubmitText || '提交',
onResetText: this.config.buttons.onResetText || '重置'
}
},
methods: {
updateForm(fieldName, value) {
this.formData[fieldName] = value;
},
submit() {
this.$emit("submit");
},
reset() {
for(var name in this.formData) {
if(typeof this.formData === "String") {
this.formData[name] = "";
} else {
this.formData[name] = null;
}
}
}
}
}
</script>
业务使用的地方
像下拉框的选择数据，这些应该是后台渲染的，所以我们暂时用setTimeout模拟一下。感觉这里this.config.fieldsConfig[4].options写的不太优雅，依赖于配置数据的顺序肯定不是啥好事情。求大神指点。
<template>
<div>
<form-generator :config="config"
@submit="getFormData"
v-model="formData"
>
</form-generator>
</div>
</template>
<script>
import FormGenerator from '../components/form/FormGenerator'
export default {
name: "FormGeneratorDemo",
components: { FormGenerator },
created () {
this.queryOrderType();
this.queryAreaTree();
},
data() {
return {
formData: {
orderCode: "",
orderType: "",
beginTime: "",
endTime: "",
area: [],
staff:""
},
config: {
fieldsConfig: [
{
name: 'orderCode',
label: '定单编码',
fieldType: 'TextInput',
cols: 8
},
{
name: 'orderType',
label: '定单类型',
fieldType: 'SelectList',
options: [],
cols: 8
},
{
name: 'beginTime',
label: '开始时间',
fieldType: 'TimeSelector',
cols: 8
},
{
name: 'endTime',
label: '结束时间',
fieldType: 'TimeSelector',
cols: 8
},
{
name: 'area',
label: '区域',
fieldType: 'selectTree',
options: [],
multiple: true,
cols: 8
},
{
name: 'staff',
label: '人员选择',
fieldType: 'StaffSelectPopedit',
