diff --git a/src/components/form-designer/designer.js b/src/components/form-designer/designer.js index 998a198..968faee 100644 --- a/src/components/form-designer/designer.js +++ b/src/components/form-designer/designer.js @@ -37,7 +37,7 @@ export function createDesigner(vueInstance) { this.formConfig = deepClone(defaultFormConfig) //输出版本信息和语雀链接 - console.info(`%cVariantForm %cVer${VARIANT_FORM_VERSION} %chttps://www.yuque.com/variantdev/vform`, + console.info(`%cVariantForm %cVer${VARIANT_FORM_VERSION} %chttps://www.yuque.com/visualdev/vform`, "color:#409EFF;font-size: 22px;font-weight:bolder", "color:#999;font-size: 12px", "color:#333" diff --git a/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue b/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue index 5a71699..914f311 100644 --- a/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue +++ b/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue @@ -10,17 +10,17 @@ :multiple="field.options.multipleSelect" :file-list="fileList" :show-file-list="field.options.showFileList" :class="{'hideUploadDiv': uploadBtnHidden}" :limit="field.options.limit" :on-exceed="handleFileExceed" :before-upload="beforeFileUpload" - :on-success="handleFileUpload" :on-error="handelUploadError" :on-remove="handleFileRemove"> + :on-success="handleFileUpload" :on-error="handleUploadError">
{{field.options.uploadTip}}
@@ -73,7 +73,7 @@ data() { return { oldFieldValue: null, //field组件change之前的值 - fieldModel: null, + fieldModel: [], rules: [], uploadHeaders: {}, @@ -120,17 +120,10 @@ methods: { handleFileExceed() { - let uploadLimit = this.field.options.limit /* 此行不能注释,下一行ES6模板字符串需要用到!! */ + let uploadLimit = this.field.options.limit this.$message.warning( this.i18nt('render.hint.uploadExceed').replace('${uploadLimit}', uploadLimit) ) }, - updateUploadFieldModelAndEmitDataChange(fileList) { - let oldValue = deepClone(this.fieldModel) - this.fieldModel = deepClone(fileList) - this.syncUpdateFormModel(this.fieldModel) - this.emitFieldDataChange(this.fieldModel, oldValue) - }, - beforeFileUpload(file) { let fileTypeCheckResult = false let extFileName = file.name.substring(file.name.lastIndexOf('.') + 1) @@ -176,29 +169,57 @@ return true }, + updateFieldModelAndEmitDataChangeForUpload(fileList, customResult, defaultResult) { + let oldValue = deepClone(this.fieldModel) + if (!!customResult && !!customResult.name && !!customResult.url) { + this.fieldModel.push({ + name: customResult.name, + url: customResult.url + }) + } else if (!!defaultResult && !!defaultResult.name && !!defaultResult.url) { + this.fieldModel.push({ + name: defaultResult.name, + url: defaultResult.url + }) + } else { + this.fieldModel = deepClone(fileList) + } + + this.syncUpdateFormModel(this.fieldModel) + this.emitFieldDataChange(this.fieldModel, oldValue) + }, + + handleFileUpload(res, file, 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 - + let customResult = null if (!!this.field.options.onUploadSuccess) { let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess) - mountFunc.call(this, res, file, fileList) + customResult = mountFunc.call(this, res, file, fileList) } + + this.updateFieldModelAndEmitDataChangeForUpload(fileList, customResult, res) + this.fileList = deepClone(fileList) + this.uploadBtnHidden = fileList.length >= this.field.options.limit } }, - handleFileRemove(file, fileList) { - this.fileList = deepClone(fileList) //this.fileList = fileList - this.updateUploadFieldModelAndEmitDataChange(fileList) - this.uploadBtnHidden = fileList.length >= this.field.options.limit + // handleFileRemove(file, fileList) { + // this.fileList = deepClone(fileList) //this.fileList = fileList + // this.updateUploadFieldModelAndEmitDataChange(fileList) + // this.uploadBtnHidden = fileList.length >= this.field.options.limit + // + // if (!!this.field.options.onFileRemove) { + // let customFn = new Function('file', 'fileList', this.field.options.onFileRemove) + // customFn.call(this, file, fileList) + // } + // }, - if (!!this.field.options.onFileRemove) { - let customFn = new Function('file', 'fileList', this.field.options.onFileRemove) - customFn.call(this, file, fileList) - } + updateFieldModelAndEmitDataChangeForRemove(deletedFileIdx, fileList) { + let oldValue = deepClone(this.fieldModel) + this.fieldModel.splice(deletedFileIdx, 1) + this.syncUpdateFormModel(this.fieldModel) + this.emitFieldDataChange(this.fieldModel, oldValue) }, removeUploadFile(fileName) { @@ -213,7 +234,7 @@ if (foundIdx >= 0) { this.fileList.splice(foundIdx, 1) - this.updateUploadFieldModelAndEmitDataChange(this.fileList) + this.updateFieldModelAndEmitDataChangeForRemove(foundIdx, this.fileList) this.uploadBtnHidden = this.fileList.length >= this.field.options.limit if (!!this.field.options.onFileRemove) { @@ -223,7 +244,7 @@ } }, - handelUploadError(err, file, fileList) { + handleUploadError(err, file, fileList) { if (!!this.field.options.onUploadError) { let customFn = new Function('error', 'file', 'fileList', this.field.options.onUploadError) customFn.call(this, err, file, fileList) diff --git a/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue b/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue index f2725f4..d44c5aa 100644 --- a/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue +++ b/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue @@ -10,9 +10,9 @@ @@ -62,7 +69,7 @@ data() { return { oldFieldValue: null, //field组件change之前的值 - fieldModel: null, + fieldModel: [], rules: [], uploadHeaders: {}, @@ -76,6 +83,8 @@ fileList: [], //上传文件列表 uploadBtnHidden: false, + previewUrl: '', + showPreviewDialogFlag: false, } }, computed: { @@ -106,17 +115,10 @@ methods: { handlePictureExceed() { - let uploadLimit = this.field.options.limit /* 此行不能注释,下一行ES6模板字符串需要用到!! */ + let uploadLimit = this.field.options.limit this.$message.warning( this.i18nt('render.hint.uploadExceed').replace('${uploadLimit}', uploadLimit) ) }, - updateUploadFieldModelAndEmitDataChange(fileList) { - let oldValue = deepClone(this.fieldModel) - this.fieldModel = deepClone(fileList) - this.syncUpdateFormModel(this.fieldModel) - this.emitFieldDataChange(this.fieldModel, oldValue) - }, - beforePictureUpload(file) { let fileTypeCheckResult = false if (!!this.field.options && !!this.field.options.fileTypes) { @@ -161,23 +163,59 @@ return true }, + updateFieldModelAndEmitDataChangeForUpload(fileList, customResult, defaultResult) { + let oldValue = deepClone(this.fieldModel) + if (!!customResult && !!customResult.name && !!customResult.url) { + this.fieldModel.push({ + name: customResult.name, + url: customResult.url + }) + } else if (!!defaultResult && !!defaultResult.name && !!defaultResult.url) { + this.fieldModel.push({ + name: defaultResult.name, + url: defaultResult.url + }) + } else { + this.fieldModel = deepClone(fileList) + } + + this.syncUpdateFormModel(this.fieldModel) + this.emitFieldDataChange(this.fieldModel, oldValue) + }, + handlePictureUpload(res, file, 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 - + let customResult = null if (!!this.field.options.onUploadSuccess) { let customFn = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess) - customFn.call(this, res, file, fileList) + customResult = customFn.call(this, res, file, fileList) } + + this.updateFieldModelAndEmitDataChangeForUpload(fileList, customResult, res) + this.fileList = deepClone(fileList) + this.uploadBtnHidden = fileList.length >= this.field.options.limit } }, + updateFieldModelAndEmitDataChangeForRemove(file, fileList) { + let oldValue = deepClone(this.fieldModel) + let foundFileIdx = -1 + this.fileList.map((fi, idx) => { + if ((fi.name === file.name) && ((fi.url === file.url) || (!!fi.uid && fi.uid === file.uid))) { /* 这个判断有问题?? */ + foundFileIdx = idx + } + }) + if (foundFileIdx > -1) { + this.fieldModel.splice(foundFileIdx, 1) + } + + this.syncUpdateFormModel(this.fieldModel) + this.emitFieldDataChange(this.fieldModel, oldValue) + }, + handlePictureRemove(file, fileList) { + this.updateFieldModelAndEmitDataChangeForRemove(file, fileList) this.fileList = deepClone(fileList) //this.fileList = fileList - this.updateUploadFieldModelAndEmitDataChange(fileList) this.uploadBtnHidden = fileList.length >= this.field.options.limit if (!!this.field.options.onFileRemove) { @@ -186,7 +224,7 @@ } }, - handelUploadError(err, file, fileList) { + handleUploadError(err, file, fileList) { if (!!this.field.options.onUploadError) { let customFn = new Function('error', 'file', 'fileList', this.field.options.onUploadError) customFn.call(this, err, file, fileList) diff --git a/src/components/form-designer/setting-panel/property-editor/defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/defaultValue-editor.vue index 2ccda17..3122cf0 100644 --- a/src/components/form-designer/setting-panel/property-editor/defaultValue-editor.vue +++ b/src/components/form-designer/setting-panel/property-editor/defaultValue-editor.vue @@ -1,6 +1,6 @@ diff --git a/src/components/form-render/container-item/sub-form-item.vue b/src/components/form-render/container-item/sub-form-item.vue index 3fa372b..02e1b1f 100644 --- a/src/components/form-render/container-item/sub-form-item.vue +++ b/src/components/form-render/container-item/sub-form-item.vue @@ -269,7 +269,7 @@ this.deleteFromRowIdData(formRowIndex) this.deleteFromFieldSchemaData(formRowIndex) - this.handelSubFormRowDelete(oldSubFormData, deletedDataRow) + this.handleSubFormRowDelete(oldSubFormData, deletedDataRow) this.handleSubFormRowChange(oldSubFormData) }).catch(() => { // @@ -297,7 +297,7 @@ } }, - handelSubFormRowDelete(subFormData, deletedDataRow) { + handleSubFormRowDelete(subFormData, deletedDataRow) { if (!!this.widget.options.onSubFormRowDelete) { let customFunc = new Function('subFormData', 'deletedDataRow', this.widget.options.onSubFormRowDelete) customFunc.call(this, subFormData, deletedDataRow) diff --git a/src/extension/samples/alert/alert-widget.vue b/src/extension/samples/alert/alert-widget.vue index 14a7400..f13eb6e 100644 --- a/src/extension/samples/alert/alert-widget.vue +++ b/src/extension/samples/alert/alert-widget.vue @@ -5,7 +5,7 @@ + :show-icon="field.options.showIcon" :effect="field.options.effect" @close="handleCloseCustomEvent"> @@ -56,7 +56,7 @@ this.unregisterFromRefList() }, methods: { - handelCloseCustomEvent() { + handleCloseCustomEvent() { if (!!this.field.options.onClose) { let changeFn = new Function(this.field.options.onClose) changeFn.call(this)