|
|
|
@ -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> |
|
|
|
|
|
|
|
@ -154,7 +139,7 @@ export default { |
|
|
|
RightPanel, |
|
|
|
DraggableItem |
|
|
|
}, |
|
|
|
data() { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
idGlobal, |
|
|
|
formConf: null, |
|
|
|
@ -200,7 +185,7 @@ export default { |
|
|
|
computed: {}, |
|
|
|
watch: { |
|
|
|
// eslint-disable-next-line func-names |
|
|
|
'activeData.__config__.label': function(val, oldVal) { |
|
|
|
'activeData.__config__.label': function (val, oldVal) { |
|
|
|
if ( |
|
|
|
this.activeData.placeholder === undefined |
|
|
|
|| !this.activeData.__config__.tag |
|
|
|
@ -211,20 +196,20 @@ export default { |
|
|
|
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val |
|
|
|
}, |
|
|
|
activeId: { |
|
|
|
handler(val) { |
|
|
|
handler (val) { |
|
|
|
oldActiveId = val |
|
|
|
}, |
|
|
|
immediate: true |
|
|
|
}, |
|
|
|
drawingList: { |
|
|
|
handler(val) { |
|
|
|
handler (val) { |
|
|
|
this.saveDrawingListDebounce(val, this.projectKey) |
|
|
|
if (val.length === 0) this.idGlobal = 100 |
|
|
|
}, |
|
|
|
deep: true |
|
|
|
}, |
|
|
|
idGlobal: { |
|
|
|
handler(val) { |
|
|
|
handler (val) { |
|
|
|
if (val) { |
|
|
|
this.saveIdGlobalDebounce(val, this.projectKey) |
|
|
|
} |
|
|
|
@ -232,7 +217,7 @@ export default { |
|
|
|
immediate: true |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted () { |
|
|
|
|
|
|
|
// 复制对象 避免修改改变原始对象 |
|
|
|
this.formConf = JSON.parse(JSON.stringify(formConf)) |
|
|
|
@ -253,7 +238,7 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
saveProjectInfo: debounce(430, true, function() { |
|
|
|
saveProjectInfo: debounce(430, true, function () { |
|
|
|
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/update`, { |
|
|
|
'key': this.projectKey, |
|
|
|
'name': this.formConf.title, |
|
|
|
@ -262,21 +247,22 @@ export default { |
|
|
|
|
|
|
|
}) |
|
|
|
}), |
|
|
|
updateProjectItemInfo(val) { |
|
|
|
updateProjectItemInfo (val) { |
|
|
|
let data = formItemConvertData(val, this.projectKey) |
|
|
|
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/update`, data).then(() => { |
|
|
|
|
|
|
|
}) |
|
|
|
}, |
|
|
|
deleteProjectItemInfo(val) { |
|
|
|
deleteProjectItemInfo (val) { |
|
|
|
let data = formItemConvertData(val, this.projectKey) |
|
|
|
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/delete`, data).then(() => { |
|
|
|
|
|
|
|
}) |
|
|
|
}, |
|
|
|
async saveProjectItemInfo(item) { |
|
|
|
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 |
|
|
|
@ -288,7 +274,7 @@ export default { |
|
|
|
} |
|
|
|
return isSuccess |
|
|
|
}, |
|
|
|
updatePaginationList() { |
|
|
|
updatePaginationList () { |
|
|
|
// 页总数 |
|
|
|
const length = this.drawingList.filter(item => item.typeId === 'PAGINATION').length |
|
|
|
let curr = 1 |
|
|
|
@ -300,22 +286,22 @@ export default { |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
queryProjectItems() { |
|
|
|
queryProjectItems () { |
|
|
|
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/list`, { params: { key: this.projectKey } }).then(res => { |
|
|
|
this.drawingList = res.data.map(item => dbDataConvertForItemJson(item)) |
|
|
|
// 更新分页 |
|
|
|
this.updatePaginationList() |
|
|
|
}) |
|
|
|
}, |
|
|
|
activeFormItem(currentItem) { |
|
|
|
activeFormItem (currentItem) { |
|
|
|
this.activeData = currentItem |
|
|
|
this.activeId = currentItem.__config__.formId |
|
|
|
}, |
|
|
|
changeLabel(currentItem, value) { |
|
|
|
changeLabel (currentItem, value) { |
|
|
|
console.log(currentItem) |
|
|
|
console.log(value) |
|
|
|
}, |
|
|
|
onEnd(obj) { |
|
|
|
onEnd (obj) { |
|
|
|
if (obj.from !== obj.to) { |
|
|
|
this.activeData = tempActiveData |
|
|
|
this.activeId = this.idGlobal |
|
|
|
@ -324,7 +310,7 @@ export default { |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
onItemEnd(obj) { |
|
|
|
onItemEnd (obj) { |
|
|
|
let params = { 'projectKey': this.projectKey } |
|
|
|
if (this.drawingList[obj.newIndex - 1]) { |
|
|
|
let sort1 = this.drawingList[obj.newIndex - 1].sort |
|
|
|
@ -341,13 +327,13 @@ export default { |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
addComponent(item) { |
|
|
|
addComponent (item) { |
|
|
|
const clone = this.cloneComponent(item) |
|
|
|
this.saveProjectItemInfo(clone) |
|
|
|
this.drawingList.push(clone) |
|
|
|
this.activeFormItem(clone) |
|
|
|
}, |
|
|
|
cloneComponent(origin) { |
|
|
|
cloneComponent (origin) { |
|
|
|
const clone = deepClone(origin) |
|
|
|
const config = clone.__config__ |
|
|
|
config.span = this.formConf.span // 生成代码时，会根据span做精简判断 |
|
|
|
@ -356,7 +342,7 @@ export default { |
|
|
|
tempActiveData = clone |
|
|
|
return tempActiveData |
|
|
|
}, |
|
|
|
createIdAndKey(item) { |
|
|
|
createIdAndKey (item) { |
|
|
|
const config = item.__config__ |
|
|
|
config.formId = ++this.idGlobal |
|
|
|
config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件 |
|
|
|
@ -372,7 +358,7 @@ export default { |
|
|
|
} |
|
|
|
return item |
|
|
|
}, |
|
|
|
empty() { |
|
|
|
empty () { |
|
|
|
this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }) |
|
|
|
.then( |
|
|
|
() => { |
|
|
|
@ -381,14 +367,14 @@ export default { |
|
|
|
} |
|
|
|
) |
|
|
|
}, |
|
|
|
drawingItemCopy(item, list) { |
|
|
|
drawingItemCopy (item, list) { |
|
|
|
let clone = deepClone(item) |
|
|
|
clone = this.createIdAndKey(clone) |
|
|
|
list.push(clone) |
|
|
|
this.activeFormItem(clone) |
|
|
|
this.saveProjectItemInfo(clone) |
|
|
|
}, |
|
|
|
drawingItemDelete(index, list) { |
|
|
|
drawingItemDelete (index, list) { |
|
|
|
let item = list[index] |
|
|
|
list.splice(index, 1) |
|
|
|
this.$nextTick(() => { |
|
|
|
@ -399,7 +385,7 @@ export default { |
|
|
|
}) |
|
|
|
this.deleteProjectItemInfo(item) |
|
|
|
}, |
|
|
|
tagChange(newTag) { |
|
|
|
tagChange (newTag) { |
|
|
|
newTag = this.cloneComponent(newTag) |
|
|
|
const config = newTag.__config__ |
|
|
|
newTag.__vModel__ = this.activeData.__vModel__ |
|
|
|
@ -423,7 +409,7 @@ export default { |
|
|
|
this.updateProjectItemInfo(newTag) |
|
|
|
this.updateDrawingList(newTag, this.drawingList) |
|
|
|
}, |
|
|
|
updateDrawingList(newTag, list) { |
|
|
|
updateDrawingList (newTag, list) { |
|
|
|
const index = list.findIndex(item => item.__config__.formId === this.activeId) |
|
|
|
if (index > -1) { |
|
|
|
list.splice(index, 1, newTag) |
|
|
|
|
jiangyy
4 years ago