|
|
|
@ -4,8 +4,7 @@ |
|
|
|
<el-scrollbar class="left-scrollbar"> |
|
|
|
<div class="components-list"> |
|
|
|
<div v-for="(item, listIndex) in leftComponents" |
|
|
|
:key="listIndex" |
|
|
|
> |
|
|
|
:key="listIndex"> |
|
|
|
<div class="components-title"> |
|
|
|
<svg-icon name="component" /> |
|
|
|
{{ item.title }} |
|
|
|
@ -16,13 +15,11 @@ |
|
|
|
:sort="false" |
|
|
|
class="components-draggable" |
|
|
|
draggable=".components-item" |
|
|
|
@end="onEnd" |
|
|
|
> |
|
|
|
@end="onEnd"> |
|
|
|
<div v-for="(element, index) in item.list" |
|
|
|
:key="index" |
|
|
|
class="components-item" |
|
|
|
@click="addComponent(element)" |
|
|
|
> |
|
|
|
@click="addComponent(element)"> |
|
|
|
<div class="components-body"> |
|
|
|
<svg-icon :name="element.__config__.tagIcon" /> |
|
|
|
{{ element.__config__.label }} |
|
|
|
@ -37,39 +34,33 @@ |
|
|
|
<el-scrollbar class="center-scrollbar"> |
|
|
|
<el-row v-if="formConf" |
|
|
|
:gutter="formConf.gutter" |
|
|
|
class="center-board-row" |
|
|
|
> |
|
|
|
class="center-board-row"> |
|
|
|
<el-row align="middle" |
|
|
|
justify="center" |
|
|
|
type="flex" |
|
|
|
> |
|
|
|
type="flex"> |
|
|
|
<el-col class="form-head-title"> |
|
|
|
<h4 class="form-name-text" |
|
|
|
contenteditable="true" |
|
|
|
@blur="(event)=>{ |
|
|
|
this.formConf.title=event.target.innerText; |
|
|
|
this.saveProjectInfo()}" |
|
|
|
> |
|
|
|
this.saveProjectInfo()}"> |
|
|
|
{{ formConf.title }} |
|
|
|
</h4> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row align="middle" |
|
|
|
justify="center" |
|
|
|
type="flex" |
|
|
|
> |
|
|
|
type="flex"> |
|
|
|
<el-col class="form-head-desc"> |
|
|
|
<Tinymce v-if="editDescription" |
|
|
|
v-model="formConf.description" |
|
|
|
placeholder="请输入表单描述" |
|
|
|
@blur="editDescription=false" |
|
|
|
@input="saveProjectInfo" |
|
|
|
/> |
|
|
|
@input="saveProjectInfo" /> |
|
|
|
<div v-else |
|
|
|
class="form-name-text" |
|
|
|
@click="editDescription=true" |
|
|
|
v-html="formConf.description" |
|
|
|
/> |
|
|
|
v-html="formConf.description" /> |
|
|
|
<!-- <p class="form-name-text" contenteditable="true"--> |
|
|
|
<!-- @blur="(event)=>{--> |
|
|
|
<!-- formConf.description=event.target.innerText;--> |
|
|
|
@ -82,14 +73,12 @@ |
|
|
|
<el-form :disabled="formConf.disabled" |
|
|
|
:label-position="formConf.labelPosition" |
|
|
|
:label-width="formConf.labelWidth + 'px'" |
|
|
|
:size="formConf.size" |
|
|
|
> |
|
|
|
:size="formConf.size"> |
|
|
|
<draggable :animation="340" |
|
|
|
:list="drawingList" |
|
|
|
class="drawing-board" |
|
|
|
group="componentsGroup" |
|
|
|
@end="onItemEnd" |
|
|
|
> |
|
|
|
@end="onItemEnd"> |
|
|
|
<draggable-item v-for="(item, index) in drawingList" |
|
|
|
:key="item.renderKey" |
|
|
|
:active-id="activeId" |
|
|
|
@ -100,15 +89,12 @@ |
|
|
|
@activeItem="activeFormItem" |
|
|
|
@changeLabel="changeLabel" |
|
|
|
@copyItem="drawingItemCopy" |
|
|
|
@deleteItem="drawingItemDelete" |
|
|
|
/> |
|
|
|
@deleteItem="drawingItemDelete" /> |
|
|
|
</draggable> |
|
|
|
<div v-show="!drawingList.length" |
|
|
|
class="empty-info" |
|
|
|
> |
|
|
|
class="empty-info"> |
|
|
|
<img style="width: 20%" |
|
|
|
src="@/assets/images/form-bg.png" |
|
|
|
> |
|
|
|
src="@/assets/images/form-bg.png"> |
|
|
|
<p>从左侧拖入或点选组件进行表单设计</p> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
@ -120,8 +106,7 @@ |
|
|
|
:form-conf="formConf" |
|
|
|
:show-field="!!drawingList.length" |
|
|
|
@tag-change="tagChange" |
|
|
|
@data-change="updateProjectItemInfo" |
|
|
|
/> |
|
|
|
@data-change="updateProjectItemInfo" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -277,6 +262,7 @@ export default { |
|
|
|
async saveProjectItemInfo (item) { |
|
|
|
let isSuccess = false |
|
|
|
let params = formItemConvertData(item, this.projectKey) |
|
|
|
console.log(params) |
|
|
|
let pItem = item |
|
|
|
await this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/create`, params).then(res => { |
|
|
|
pItem.sort = res.data.sort |
|
|
|
|
jiangyy
4 years ago