From 27ab8eab0ac366621dc7a8b63a5508858f87f792 Mon Sep 17 00:00:00 2001 From: vdpAdmin Date: Wed, 20 Jul 2022 17:51:10 +0800 Subject: [PATCH] =?UTF-8?q?2022.07.20=E6=9B=B4=E6=96=B0=EF=BC=9A=201.=20?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87=E3=80=81=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6=E4=BA=A4=E4=BA=92=E9=80=BB?= =?UTF-8?q?=E8=BE=91=EF=BC=9B=202.=20=E5=9B=BE=E7=89=87=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/form-designer/designer.js | 2 +- .../field-widget/file-upload-widget.vue | 77 ++++++++++++------- .../field-widget/form-item-wrapper.vue | 4 +- .../field-widget/picture-upload-widget.vue | 74 +++++++++++++----- .../property-editor/defaultValue-editor.vue | 4 +- .../container-item/sub-form-item.vue | 4 +- src/extension/samples/alert/alert-widget.vue | 4 +- 7 files changed, 114 insertions(+), 55 deletions(-) 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)