From 01700b803000e19dbf12ec1e74aa2b4100249fdb Mon Sep 17 00:00:00 2001 From: zyn Date: Thu, 4 Jan 2024 10:56:10 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hzwlComponents/Import.vue | 99 ++++++++++++++++++- .../hzwlComponents/SelectFormItem.vue | 1 + .../hzwlComponents/UploadFormItem.vue | 8 ++ 3 files changed, 105 insertions(+), 3 deletions(-) diff --git a/src/components/hzwlComponents/Import.vue b/src/components/hzwlComponents/Import.vue index 6ebf1f102..90f457450 100644 --- a/src/components/hzwlComponents/Import.vue +++ b/src/components/hzwlComponents/Import.vue @@ -19,10 +19,16 @@ :action="action" :headers="headers" name="file" + :file-list="fileList" :accept="accept" :auto-upload="autoUpload" + :limit="limit" :before-upload="beforeUpload" :on-success="onSuccess" + :on-remove="onRemove" + :on-preview="onPreview" + :on-exceed="onExceed" + :on-error="onError" :show-file-list="true" > @@ -93,7 +99,21 @@ export default { manualUpload: { type: Boolean, default: false - } + }, + limit: { + type: Number, + default: 8 + }, + ids: { + required: false, + type: String, + default: '' + }, + names: { + required: false, + type: String, + default: '' + }, }, data () { return { @@ -101,10 +121,28 @@ export default { token: JSON.parse(localStorage.getItem('userInfo')).token }, importFailed: false, - importForm: {} + importForm: {}, + fileList: [], } }, + created () { + this.initFileList() + }, methods: { + initFileList () { + if (this.ids && this.ids !== '' && this.names && this.names !== '') { + const fileList = [] + const idArr = this.ids.split(',') + const nameArr = this.names.split(',') + for (let i = 0; i < idArr.length; i++) { + fileList.push({ + id: idArr[i], + name: nameArr[i] + }) + } + this.fileList = fileList + } + }, onClose () { this.$emit('update:visible', false) }, @@ -131,8 +169,25 @@ export default { return true }, // 导入标准数据成功后执行 - onSuccess (response, file) { + onSuccess (response, file, fileList) { if (response.ok) { + const fileObj = { + id: file.response.data.id, + name: file.response.data.name + } + let ids; + let names; + if (this.ids && this.ids.length > 0) { + ids = this.ids + ',' + fileObj.id + names = this.names + ',' + fileObj.name + } else { + ids = fileObj.id + names = fileObj.name + } + this.$set(this.fileList, this.fileList.length, fileObj) + this.$emit('update:ids', ids) + this.$emit('update:names', names) + this.$emit('update:visible', false) this.$emit('onSuccess') this.$message({ @@ -144,6 +199,44 @@ export default { this.importForm.content = response.message } }, + onRemove (file, fileList) { + const ids = fileList + .reduce((init, file) => init + ',' + (file.id || file.response.data.id), '') + .replace(/^,|,$/g, '') + const names = fileList + .reduce((init, file) => init + ',' + (file.name || file.response.data.name), '') + .replace(/^,|,$/g, '') + this.fileList = fileList.map(file => ({ + id: file.id || file.response.data.id, + name: file.name + })) + this.$emit('update:ids', ids) + this.$emit('update:names', names) + this.$emit('onRemove') + }, + onPreview (file) { + const id = file.id || file.response.data.id + this.$preview(id) + }, + onExceed (files, fileList) { + this.$message.warning(`当前限制上传 1 个文件,本次上传了 ${files.length} 个文件,共上传了 ${files.length + fileList.length} 个文件`); + }, + onError (err, file, fileList) { + const ids = fileList + .reduce((init, file) => init + ',' + (file.id || file.response.data.id), '') + .replace(/^,|,$/g, '') + const names = fileList + .reduce((init, file) => init + ',' + (file.name || file.response.data.name), '') + .replace(/^,|,$/g, '') + this.fileList = fileList.map(file => ({ + id: file.id || file.response.data.id, + name: file.name + })) + this.$emit('update:ids', ids) + this.$emit('update:names', names) + this.$emit('onError') + this.$message.error('上传失败') + }, ManualUpload () { this.$refs.importfile.submit(); } diff --git a/src/components/hzwlComponents/SelectFormItem.vue b/src/components/hzwlComponents/SelectFormItem.vue index fd3f0d647..0643bb230 100644 --- a/src/components/hzwlComponents/SelectFormItem.vue +++ b/src/components/hzwlComponents/SelectFormItem.vue @@ -64,6 +64,7 @@ export default { methods: { handleChange (event) { this.$emit('input', event) + this.$emit('change', event) } } } diff --git a/src/components/hzwlComponents/UploadFormItem.vue b/src/components/hzwlComponents/UploadFormItem.vue index 720cea498..d35849758 100644 --- a/src/components/hzwlComponents/UploadFormItem.vue +++ b/src/components/hzwlComponents/UploadFormItem.vue @@ -242,4 +242,12 @@ export default { .fileClass{ line-height: 22px !important; } +.add-form-item /deep/ .el-form-item__content .el-form-item__error { + padding: 3px; + top: 15px; + right: 45px !important; + left: auto; + background: #fff3f3; + z-index: 9; +}