修复图片、文件上传组件onUploadSuccess交互事件的逻辑处理问题。
vdpAdmin
parent
9bf3f4ed1b
commit
00bf062cd5
|
|
@ -148,6 +148,7 @@ export function createDesigner(vueInstance) {
|
|||
checkWidgetMove(evt) { /* Only field widget can be dragged into sub-form */
|
||||
if (!!evt.draggedContext && !!evt.draggedContext.element) {
|
||||
let wgCategory = evt.draggedContext.element.category
|
||||
let wgType = evt.draggedContext.element.type
|
||||
if (!!evt.to) {
|
||||
if ((evt.to.className === 'sub-form-table') && (wgCategory === 'container')) {
|
||||
//this.$message.info(this.vueInstance.i18nt('designer.hint.onlyFieldWidgetAcceptable'))
|
||||
|
|
@ -159,6 +160,22 @@ export function createDesigner(vueInstance) {
|
|||
return true
|
||||
},
|
||||
|
||||
checkFieldMove(evt) {
|
||||
if (!!evt.draggedContext && !!evt.draggedContext.element) {
|
||||
let wgCategory = evt.draggedContext.element.category
|
||||
let wgType = evt.draggedContext.element.type + ''
|
||||
//console.log('wgType======', wgType)
|
||||
if (!!evt.to) {
|
||||
if ((evt.to.className === 'sub-form-table') && (wgType === 'slot')) {
|
||||
//this.$message.info(this.vueInstance.i18nt('designer.hint.onlyFieldWidgetAcceptable'))
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
/**
|
||||
* 追加表格新行
|
||||
* @param widget
|
||||
|
|
|
|||
|
|
@ -177,16 +177,15 @@
|
|||
},
|
||||
|
||||
handleFileUpload(res, file, fileList) {
|
||||
if (!!this.field.options.onUploadSuccess) {
|
||||
let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
|
||||
mountFunc.call(this, res, file, fileList)
|
||||
} else {
|
||||
if (file.status === 'success') {
|
||||
//this.fileList.push(file) /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
|
||||
this.updateUploadFieldModelAndEmitDataChange(fileList)
|
||||
this.fileList = deepClone(fileList)
|
||||
if (file.status === 'success') {
|
||||
//this.fileList.push(file) /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
|
||||
this.updateUploadFieldModelAndEmitDataChange(fileList)
|
||||
this.fileList = deepClone(fileList)
|
||||
this.uploadBtnHidden = fileList.length >= this.field.options.limit
|
||||
|
||||
this.uploadBtnHidden = fileList.length >= this.field.options.limit
|
||||
if (!!this.field.options.onUploadSuccess) {
|
||||
let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
|
||||
mountFunc.call(this, res, file, fileList)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -204,17 +203,23 @@
|
|||
|
||||
removeUploadFile(fileName) {
|
||||
let foundIdx = -1
|
||||
let foundFile = null
|
||||
this.fileList.forEach((file, idx) => {
|
||||
if (file.name === fileName) {
|
||||
foundIdx = idx
|
||||
foundFile = file
|
||||
}
|
||||
})
|
||||
|
||||
if (foundIdx >= 0) {
|
||||
this.fileList.splice(foundIdx, 1)
|
||||
this.updateUploadFieldModelAndEmitDataChange(this.fileList)
|
||||
|
||||
this.uploadBtnHidden = this.fileList.length >= this.field.options.limit
|
||||
|
||||
if (!!this.field.options.onFileRemove) {
|
||||
let customFn = new Function('file', 'fileList', this.field.options.onFileRemove)
|
||||
customFn.call(this, foundFile, this.fileList)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -162,16 +162,15 @@
|
|||
},
|
||||
|
||||
handlePictureUpload(res, file, fileList) {
|
||||
if (!!this.field.options.onUploadSuccess) {
|
||||
let customFn = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
|
||||
customFn.call(this, res, file, fileList)
|
||||
} else {
|
||||
if (file.status === 'success') {
|
||||
//this.fileList.push(file) /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
|
||||
this.updateUploadFieldModelAndEmitDataChange(fileList)
|
||||
this.fileList = deepClone(fileList)
|
||||
if (file.status === 'success') {
|
||||
//this.fileList.push(file) /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
|
||||
this.updateUploadFieldModelAndEmitDataChange(fileList)
|
||||
this.fileList = deepClone(fileList)
|
||||
this.uploadBtnHidden = fileList.length >= this.field.options.limit
|
||||
|
||||
this.uploadBtnHidden = fileList.length >= this.field.options.limit
|
||||
if (!!this.field.options.onUploadSuccess) {
|
||||
let customFn = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
|
||||
customFn.call(this, res, file, fileList)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
|
||||
<el-collapse-item name="2" :title="i18nt('designer.basicFieldTitle')">
|
||||
<draggable tag="ul" :list="basicFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
|
||||
:move="checkFieldMove"
|
||||
:clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
|
||||
<li v-for="(fld, index) in basicFields" :key="index" class="field-widget-item" :title="fld.displayName"
|
||||
@dblclick="addFieldByDbClick(fld)">
|
||||
|
|
@ -30,6 +31,7 @@
|
|||
|
||||
<el-collapse-item name="3" :title="i18nt('designer.advancedFieldTitle')">
|
||||
<draggable tag="ul" :list="advancedFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
|
||||
:move="checkFieldMove"
|
||||
:clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
|
||||
<li v-for="(fld, index) in advancedFields" :key="index" class="field-widget-item" :title="fld.displayName"
|
||||
@dblclick="addFieldByDbClick(fld)">
|
||||
|
|
@ -41,6 +43,7 @@
|
|||
<!-- -->
|
||||
<el-collapse-item name="4" :title="i18nt('designer.customFieldTitle')">
|
||||
<draggable tag="ul" :list="customFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
|
||||
:move="checkFieldMove"
|
||||
:clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
|
||||
<li v-for="(fld, index) in customFields" :key="index" class="field-widget-item" :title="fld.displayName"
|
||||
@dblclick="addFieldByDbClick(fld)">
|
||||
|
|
@ -211,6 +214,10 @@
|
|||
return this.designer.checkWidgetMove(evt)
|
||||
},
|
||||
|
||||
checkFieldMove(evt) {
|
||||
return this.designer.checkFieldMove(evt)
|
||||
},
|
||||
|
||||
onContainerDragEnd(evt) {
|
||||
//console.log('Drag end of container: ')
|
||||
//console.log(evt)
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ function getElAttrs(widget, formConfig) { //获取El组件属性
|
|||
pictureUploadIconChild: `<template #default><i class="el-icon-plus"></i></template>`,
|
||||
fileUploadIconChild: `<template #default><i class="el-icon-plus"></i></template>`,
|
||||
|
||||
buttonType: !!wop.type ? `type="${wop.type}"` : '',
|
||||
buttonType: !!wop.type ? `type="${wop.type}` : '',
|
||||
buttonPlain: !!wop.plain ? `plain` : '',
|
||||
buttonRound: !!wop.round ? `round` : '',
|
||||
buttonCircle: !!wop.circle ? `circle` : '',
|
||||
|
|
@ -260,29 +260,29 @@ const elTemplates = { //字段组件属性
|
|||
'time': (widget, formConfig) => {
|
||||
const {vModel, readonly, disabled, size, placeholder, clearable, format, editable
|
||||
} = getElAttrs(widget, formConfig)
|
||||
return `<el-input ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
|
||||
value-format="HH:mm:ss" ${placeholder} ${clearable} ${editable}></el-input>`
|
||||
return `<el-time-picker ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
|
||||
value-format="HH:mm:ss" ${placeholder} ${clearable} ${editable}></el-time-picker>`
|
||||
},
|
||||
|
||||
'time-range': (widget, formConfig) => {
|
||||
const {vModel, readonly, disabled, size, startPlaceholder, endPlaceholder, clearable, format, editable
|
||||
} = getElAttrs(widget, formConfig)
|
||||
return `<el-input is-range ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
|
||||
value-format="HH:mm:ss" ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-input>`
|
||||
return `<el-time-picker is-range ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
|
||||
value-format="HH:mm:ss" ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-time-picker>`
|
||||
},
|
||||
|
||||
'date': (widget, formConfig) => {
|
||||
const {vModel, readonly, disabled, size, type, placeholder, clearable, format, valueFormat, editable
|
||||
} = getElAttrs(widget, formConfig)
|
||||
return `<el-input ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
|
||||
${valueFormat} ${placeholder} ${clearable} ${editable}></el-input>`
|
||||
return `<el-date-picker ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
|
||||
${valueFormat} ${placeholder} ${clearable} ${editable}></el-date-picker>`
|
||||
},
|
||||
|
||||
'date-range': (widget, formConfig) => {
|
||||
const {vModel, readonly, disabled, size, type, startPlaceholder, endPlaceholder, clearable, format, valueFormat, editable
|
||||
} = getElAttrs(widget, formConfig)
|
||||
return `<el-input is-range ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
|
||||
${valueFormat} ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-input>`
|
||||
return `<el-date-picker is-range ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
|
||||
${valueFormat} ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-date-picker>`
|
||||
},
|
||||
|
||||
'switch': (widget, formConfig) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue