diff --git a/src/views/modules/ecss/del_upload_excel.vue b/src/views/modules/ecss/del_upload_excel.vue index ecbd053..b274476 100644 --- a/src/views/modules/ecss/del_upload_excel.vue +++ b/src/views/modules/ecss/del_upload_excel.vue @@ -1,7 +1,7 @@ @@ -75,7 +77,9 @@ placeholder="请选择客户地址" @dblclick.native="selectLocalAddressForRow(scope.row)" size="small" - style="cursor: pointer;"> + style="cursor: pointer;" + readonly> + @@ -86,7 +90,9 @@ placeholder="请选择收货单位" @dblclick.native="selectOverseasShipperForRow(scope.row)" size="small" - style="cursor: pointer;"> + style="cursor: pointer;" + readonly> + @@ -97,18 +103,34 @@ placeholder="请选择收货单位地址" @dblclick.native="selectOverseasAddressForRow(scope.row)" size="small" - style="cursor: pointer;"> + style="cursor: pointer;" + readonly> + @@ -123,7 +145,7 @@ + @close="templateFlag = false; currentRow = null" :visible.sync="templateFlag" width="1200px" v-drag> 关闭 + + + +
+ 提示:您可以在此编辑较长的文本内容,支持多行输入 +
+ + + + + + + + 取消 + 保存 + +
@@ -337,6 +388,17 @@ cacheKey: '', // 缓存键 cacheTimer: null, // 缓存定时器 currentRow: null, // 当前编辑的行 + cachedFileInfo: null, // 缓存的文件信息 + cachedFileList: [], // 缓存的文件列表 + // 大输入框编辑弹窗相关数据 + editDialog: { + visible: false, + title: '', + label: '', + value: '', + fieldName: '', // 要编辑的字段名 + row: null // 当前编辑的行数据 + } } }, watch: { @@ -349,6 +411,16 @@ } }, deep: true + }, + // 深度监听previewData的变化,保存用户的编辑 + previewData: { + handler: function(newVal, oldVal) { + // 只有在组件已初始化且对话框可见时才保存缓存 + if (this.visible && this.cacheKey && newVal && newVal.length > 0) { + this.saveToCache(); + } + }, + deep: true } }, beforeDestroy() { @@ -383,7 +455,21 @@ overseasAddress: this.pageData.overseasAddress, cnative: this.pageData.cnative, salesArea: this.pageData.salesArea, - } + }, + // 保存文件和预览相关数据 + fileInfo: this.selectedFile ? { + name: this.selectedFile.name, + size: this.selectedFile.size, + lastModified: this.selectedFile.lastModified + } : null, + showPreview: this.showPreview, + previewData: this.previewData, + fileList: this.fileList.map(file => ({ + name: file.name, + size: file.size, + lastModified: file.lastModified, + uid: file.uid + })) }; localStorage.setItem(this.cacheKey, JSON.stringify(cacheData)); } catch (error) { @@ -399,8 +485,22 @@ if (cachedData) { const parsedData = JSON.parse(cachedData); if (parsedData.pageData) { - // 恢复缓存的数据(不包括文件) + // 恢复基础表单数据 Object.assign(this.pageData, parsedData.pageData); + + // 恢复预览数据和文件状态 + if (parsedData.previewData && parsedData.previewData.length > 0) { + this.previewData = parsedData.previewData; + this.showPreview = parsedData.showPreview || false; + } + + // 恢复文件列表信息(用于界面显示) + if (parsedData.fileList && parsedData.fileList.length > 0) { + // 记录缓存的文件信息,用于后续比对 + this.cachedFileInfo = parsedData.fileInfo; + this.cachedFileList = parsedData.fileList; + } + return true; } } @@ -419,14 +519,51 @@ } }, + // 检查并恢复文件状态 + checkAndRestoreFileState() { + // 检查上传组件中是否有文件 + const uploadFiles = this.$refs.uploadFile.uploadFiles; + + if (this.cachedFileInfo && this.cachedFileList.length > 0) { + // 如果有缓存的文件信息,检查当前上传组件中的文件 + if (uploadFiles && uploadFiles.length > 0) { + const currentFile = uploadFiles[0]; + const isSameFile = currentFile.name === this.cachedFileInfo.name && + currentFile.size === this.cachedFileInfo.size && + currentFile.lastModified === this.cachedFileInfo.lastModified; + + if (isSameFile) { + // 是同一个文件,恢复文件相关状态 + this.selectedFile = currentFile; + this.fileList = [currentFile]; + console.log('恢复文件状态:', currentFile.name); + } else { + // 文件不匹配,清除预览状态但保留表单数据 + this.showPreview = false; + this.previewData = []; + this.selectedFile = null; + this.fileList = []; + console.log('文件不匹配,清除预览状态'); + } + } else { + // 没有文件但有缓存,说明文件可能被清除了 + this.showPreview = false; + this.previewData = []; + this.selectedFile = null; + this.fileList = []; + console.log('没有找到文件,清除预览状态'); + } + } + + // 保存当前状态 + this.saveToCache(); + }, + // 初始化组件的参数 init () { - this.fileList = [] - this.previewData = [] - this.showPreview = false - this.selectedFile = null - this.previewLoading = false + // 初始化缓存键,但不清除任何现有数据 this.cacheKey = this.generateCacheKey(); + this.previewLoading = false let tempData = { username: this.$store.state.user.name, @@ -440,6 +577,11 @@ } // 在获取BU列表后尝试加载缓存 this.loadFromCache(); + + // 检查并恢复文件状态 + this.$nextTick(() => { + this.checkAndRestoreFileState(); + }); }) getCustomerList({}).then(({data}) => { @@ -449,8 +591,13 @@ } }); - // 如果没有缓存数据,则初始化为空 - if (!this.loadFromCache()) { + // 只有在完全没有缓存数据时才初始化为空 + const hasCache = this.loadFromCache(); + if (!hasCache) { + this.fileList = [] + this.previewData = [] + this.showPreview = false + this.selectedFile = null this.pageData.customerName='' this.pageData.cnative='' this.pageData.localShipAddress='', @@ -586,22 +733,32 @@ this.fileList.push(file) this.selectedFile = file this.previewFile(file) + // 保存文件信息到缓存 + this.saveToCache() }, // 关闭modal closeDialog () { - this.deleteFile() + // 保存当前状态到缓存 + this.saveToCache() // 关闭当前的页面 this.visible = false - // 注意:这里不清除缓存,让数据保留到下次打开 + // 注意:这里不清除任何数据,让数据保留到下次打开 }, deleteFile(){ + // 只有在明确需要清除数据时才调用此方法 this.fileList = [] + this.previewData = [] + this.showPreview = false + this.selectedFile = null + this.cachedFileInfo = null + this.cachedFileList = [] // 清空文件上传记录 this.$refs.uploadFile.clearFiles() + // 清除缓存 + this.clearCache() // 刷新报工的页面 this.$emit('refreshTable') - }, // 保修当前的数据 @@ -692,9 +849,9 @@ callback: () => { if (successList.length > 0){ this.clearCache(); + this.clearPreviewData(); + this.closeDialog(); } - this.clearPreviewData(); - this.closeDialog(); } }); } else { @@ -741,6 +898,8 @@ this.$set(item, 'selectedCnative', '') this.$set(item, 'selectedSalesArea','') }) + // 预览成功后立即保存缓存 + this.saveToCache() } else { this.$message.error(data.msg || '文件预览失败') } @@ -857,7 +1016,12 @@ this.showPreview = false this.previewData = [] this.fileList = [] + this.selectedFile = null + this.cachedFileInfo = null + this.cachedFileList = [] this.$refs.uploadFile.clearFiles() + // 更新缓存 + this.saveToCache() }, // 清除预览数据 @@ -867,7 +1031,11 @@ this.selectedFile = null this.fileList = [] this.previewLoading = false + this.cachedFileInfo = null + this.cachedFileList = [] this.$refs.uploadFile.clearFiles() + // 更新缓存 + this.saveToCache() }, // 为行选择客户模板 @@ -949,6 +1117,35 @@ }); }, + // 打开大输入框编辑弹窗 + openEditDialog(row, fieldName, label, title) { + this.editDialog.visible = true + this.editDialog.title = title + this.editDialog.label = label + this.editDialog.fieldName = fieldName + this.editDialog.row = row + this.editDialog.value = row[fieldName] || '' + this.$nextTick(() => this.$refs.editTextarea.focus()); + }, + + // 关闭大输入框编辑弹窗 + closeEditDialog() { + this.editDialog.visible = false + this.editDialog.title = '' + this.editDialog.label = '' + this.editDialog.fieldName = '' + this.editDialog.row = null + this.editDialog.value = '' + }, + + // 确认编辑 + confirmEdit() { + if (this.editDialog.row && this.editDialog.fieldName) { + this.editDialog.row[this.editDialog.fieldName] = this.editDialog.value + } + this.closeEditDialog() + }, + // 下载 async downloadFile () { let file = { @@ -997,4 +1194,127 @@ /deep/ .customer-upload .el-upload .el-upload-dragger { width: 580px; } + +/* 输入框样式优化 */ +.el-input.is-readonly { + cursor: pointer !important; +} + +.el-input.is-readonly .el-input__inner { + cursor: pointer !important; + background-color: #f8f9fa; +} + +.el-input.is-readonly .el-input__inner:hover { + background-color: #e9ecef; + border-color: #409EFF; +} + +/* 编辑图标样式 */ +.el-input__suffix .el-icon-edit { + color: #409EFF; + transition: all 0.3s; + font-size: 14px; + padding: 2px; + border-radius: 3px; +} + +.el-input__suffix .el-icon-edit:hover { + color: #ffffff; + background-color: #409EFF; + transform: scale(1.1); +} + +/* 编辑弹窗整体样式 */ +.edit-dialog .el-dialog__body { + padding: 20px 20px 0; +} + +.edit-dialog-tip { + margin-bottom: 15px; + color: #909399; + font-size: 12px; + background-color: #f4f4f5; + padding: 8px 12px; + border-radius: 4px; + border-left: 3px solid #409EFF; +} + +.edit-dialog-tip .el-icon-info { + margin-right: 5px; + color: #409EFF; +} + +/* 大输入框样式 */ +.edit-textarea .el-textarea__inner { + resize: vertical !important; + min-height: 120px !important; + border: 1px solid #dcdfe6 !important; + border-radius: 4px !important; + padding: 8px 12px !important; + font-size: 14px !important; + line-height: 1.5 !important; + color: #606266 !important; + background-color: #fff !important; + transition: border-color 0.2s cubic-bezier(.645,.045,.355,1) !important; + box-sizing: border-box !important; +} + +.edit-textarea .el-textarea__inner:focus { + outline: none !important; + border-color: #409EFF !important; + box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important; +} + +.edit-textarea .el-input__count { + color: #909399 !important; + background: #fff !important; + position: absolute !important; + font-size: 12px !important; + bottom: 5px !important; + right: 10px !important; +} + +/* 修复弹窗中的表单项样式 */ +.edit-dialog .el-form-item { + margin-bottom: 18px !important; +} + +.edit-dialog .el-form-item__label { + color: #606266 !important; + font-weight: 500 !important; + line-height: 1.5 !important; + padding: 0 0 8px 0 !important; + box-sizing: border-box !important; + font-size: 14px !important; +} + +/* 编辑弹窗按钮样式 */ +.edit-dialog .dialog-footer { + text-align: right !important; + padding: 15px 20px 20px !important; +} + +.edit-dialog .dialog-footer .el-button { + margin-left: 10px !important; +} + +/* 确保弹窗内容不会溢出 */ +.edit-dialog .el-dialog__wrapper { + overflow: hidden; +} + +.edit-dialog .el-dialog { + margin-top: 5vh !important; + margin-bottom: 50px !important; +} + +/* 表格输入框提示文字 */ +.el-table .el-input__inner::placeholder { + font-size: 12px; + color: #c0c4cc; +} + + +