|
@@ -1,40 +1,29 @@
|
|
<template>
|
|
<template>
|
|
<left-skeleton @save="save" @deleteFunc="deleteFunc">
|
|
<left-skeleton @save="save" @deleteFunc="deleteFunc">
|
|
- <el-form :model="form" v-if="defaultForm">
|
|
|
|
- <el-form-item label="组件名称">
|
|
|
|
|
|
+ <el-form :model="form" label-width="55px">
|
|
|
|
+ <el-form-item label="名称">
|
|
<el-input v-model="form.label" />
|
|
<el-input v-model="form.label" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="默认提示">
|
|
|
|
|
|
+ <el-form-item v-if="defaultForm" label="提示">
|
|
<el-input v-model="form.placeholder" />
|
|
<el-input v-model="form.placeholder" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="是否必填">
|
|
|
|
|
|
+ <el-form-item label="必填">
|
|
<el-switch v-model="form.isRequired" />
|
|
<el-switch v-model="form.isRequired" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="参数key值">
|
|
|
|
|
|
+ <el-form-item label="key">
|
|
<el-input v-model="form.key" />
|
|
<el-input v-model="form.key" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+ <el-form-item v-if="!defaultForm" label="子属性">
|
|
|
|
+ <component
|
|
|
|
+ v-for="(item, index) in form.child_list"
|
|
|
|
+ :key="index"
|
|
|
|
+ :is="H5EditorObj[item.type]"
|
|
|
|
+ :item="item"
|
|
|
|
+ :index="index + ''"
|
|
|
|
+ @change="seacechange"
|
|
|
|
+ ></component>
|
|
|
|
+ </el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
- <div v-else>
|
|
|
|
- <el-form :model="form">
|
|
|
|
- <el-form-item label="组件名称">
|
|
|
|
- <el-input v-model="form.label" />
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="是否必填">
|
|
|
|
- <el-switch v-model="form.isRequired" />
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="参数key值">
|
|
|
|
- <el-input v-model="form.key" />
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-form>
|
|
|
|
- <component
|
|
|
|
- v-for="(item, index) in form.child_list"
|
|
|
|
- :key="index"
|
|
|
|
- :is="H5EditorObj[item.type]"
|
|
|
|
- :item="item"
|
|
|
|
- :index="index + ''"
|
|
|
|
- @change="seacechange"
|
|
|
|
- ></component>
|
|
|
|
- </div>
|
|
|
|
</left-skeleton>
|
|
</left-skeleton>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -66,18 +55,19 @@ if (!item.child_list || !item.child_list.length) {
|
|
formSele.label = item.attr.label;
|
|
formSele.label = item.attr.label;
|
|
formSele.placeholder = item.attr.placeholder;
|
|
formSele.placeholder = item.attr.placeholder;
|
|
formSele.isRequired = item.attr.isRequired;
|
|
formSele.isRequired = item.attr.isRequired;
|
|
|
|
+ formSele.key = item.attr.key;
|
|
} else {
|
|
} else {
|
|
defaultForm.value = false;
|
|
defaultForm.value = false;
|
|
formSele.child_list = item.child_list;
|
|
formSele.child_list = item.child_list;
|
|
formSele.label = item.attr.label;
|
|
formSele.label = item.attr.label;
|
|
formSele.isRequired = item.attr.isRequired;
|
|
formSele.isRequired = item.attr.isRequired;
|
|
|
|
+ formSele.key = item.attr.key;
|
|
}
|
|
}
|
|
|
|
|
|
const form = ref(formSele);
|
|
const form = ref(formSele);
|
|
|
|
|
|
// 获取子组件内更新的数据
|
|
// 获取子组件内更新的数据
|
|
const seacechange = (item, index) => {
|
|
const seacechange = (item, index) => {
|
|
- console.log(item, index, form.value.child_list);
|
|
|
|
form.value.child_list[index] = item;
|
|
form.value.child_list[index] = item;
|
|
};
|
|
};
|
|
|
|
|
|
@@ -86,10 +76,12 @@ const save = () => {
|
|
item.attr.label = form.value.label;
|
|
item.attr.label = form.value.label;
|
|
item.attr.placeholder = form.value.placeholder;
|
|
item.attr.placeholder = form.value.placeholder;
|
|
item.attr.isRequired = form.value.isRequired;
|
|
item.attr.isRequired = form.value.isRequired;
|
|
|
|
+ item.attr.key = form.value.key;
|
|
} else {
|
|
} else {
|
|
item.child_list = form.value.child_list;
|
|
item.child_list = form.value.child_list;
|
|
item.attr.label = form.value.label;
|
|
item.attr.label = form.value.label;
|
|
item.attr.isRequired = form.value.isRequired;
|
|
item.attr.isRequired = form.value.isRequired;
|
|
|
|
+ item.attr.key = form.value.key;
|
|
}
|
|
}
|
|
saveComponents({ item, index: props.index });
|
|
saveComponents({ item, index: props.index });
|
|
};
|
|
};
|