缓存记录，弹框修改

src/views/modules/ecss/del_upload_excel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="customer-css">
     <el-dialog :title="titleCon" :close-on-click-modal="false" :visible.sync="visible"
-               :width="showPreview ? '1200px' : '600px'" class="customer-dialog" @close="deleteFile">
+               :width="showPreview ? '1200px' : '600px'" class="customer-dialog" >
       <el-form label-position="top">
         <el-row :gutter="16">
           <el-col :span="12">
@@ -64,7 +64,9 @@
                 placeholder="请选择客户"
                 @dblclick.native="selectCustomerForRow(scope.row)"
                 size="small"
-                style="cursor: pointer;">
+                style="cursor: pointer;"
+                readonly>
+                <i slot="suffix" class="el-icon-edit" style="cursor: pointer;" @click.stop="openEditDialog(scope.row, 'selectedCustomer', '客户', '编辑客户信息')"></i>
               </el-input>
             </template>
           </el-table-column>
@@ -75,7 +77,9 @@
                 placeholder="请选择客户地址"
                 @dblclick.native="selectLocalAddressForRow(scope.row)"
                 size="small"
-                style="cursor: pointer;">
+                style="cursor: pointer;"
+                readonly>
+                <i slot="suffix" class="el-icon-edit" style="cursor: pointer;" @click.stop="openEditDialog(scope.row, 'selectedLocalAddress', '客户地址', '编辑客户地址')"></i>
               </el-input>
             </template>
           </el-table-column>
@@ -86,7 +90,9 @@
                 placeholder="请选择收货单位"
                 @dblclick.native="selectOverseasShipperForRow(scope.row)"
                 size="small"
-                style="cursor: pointer;">
+                style="cursor: pointer;"
+                readonly>
+                <i slot="suffix" class="el-icon-edit" style="cursor: pointer;" @click.stop="openEditDialog(scope.row, 'selectedOverseasShipper', '收货单位', '编辑收货单位')"></i>
               </el-input>
             </template>
           </el-table-column>
@@ -97,18 +103,34 @@
                 placeholder="请选择收货单位地址"
                 @dblclick.native="selectOverseasAddressForRow(scope.row)"
                 size="small"
-                style="cursor: pointer;">
+                style="cursor: pointer;"
+                readonly>
+                <i slot="suffix" class="el-icon-edit" style="cursor: pointer;" @click.stop="openEditDialog(scope.row, 'selectedOverseasAddress', '收货单位地址', '编辑收货单位地址')"></i>
               </el-input>
             </template>
           </el-table-column>
           <el-table-column label="运抵国" width="90">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.selectedCnative" placeholder="运抵国" size="small"></el-input>
+              <el-input
+                v-model="scope.row.selectedCnative"
+                placeholder="运抵国"
+                size="small"
+                style="cursor: pointer;"
+                readonly>
+                <i slot="suffix" class="el-icon-edit" style="cursor: pointer;" @click.stop="openEditDialog(scope.row, 'selectedCnative', '运抵国', '编辑运抵国')"></i>
+              </el-input>
             </template>
           </el-table-column>
           <el-table-column label="贸易国" min-width="90">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.selectedSalesArea" placeholder="贸易国" size="small"></el-input>
+              <el-input
+                v-model="scope.row.selectedSalesArea"
+                placeholder="贸易国"
+                size="small"
+                style="cursor: pointer;"
+                readonly>
+                <i slot="suffix" class="el-icon-edit" style="cursor: pointer;" @click.stop="openEditDialog(scope.row, 'selectedSalesArea', '贸易国', '编辑贸易国')"></i>
+              </el-input>
             </template>
           </el-table-column>
         </el-table>
@@ -123,7 +145,7 @@
     </el-dialog>
 
     <el-dialog :title="currentRow ? `为发票号 ${currentRow.cmcInvoice} 选择客户模板` : '客户模板'"
-               @close="templateFlag = false; currentRow = null" :visible.sync="templateFlag" width="850px" v-drag>
+               @close="templateFlag = false; currentRow = null" :visible.sync="templateFlag" width="1200px" v-drag>
       <el-table
         :height="400"
         :data="customerTemplateList"
@@ -143,28 +165,28 @@
           prop="ccusname"
           header-align="center"
           align="left"
-          width="150"
+          width="200"
           label="客户名称">
         </el-table-column>
         <el-table-column
           prop="localShipAddress"
           header-align="center"
           align="left"
-          width="120"
+          width="300"
           label="客户地址">
         </el-table-column>
         <el-table-column
           prop="overseasShipper"
           header-align="center"
           align="left"
-          width="120"
+          width="200"
           label="收货单位">
         </el-table-column>
         <el-table-column
           prop="overseasAddress"
           header-align="center"
           align="left"
-          width="120"
+          width="300"
           label="收货地址">
         </el-table-column>
         <el-table-column
@@ -292,6 +314,35 @@
         <el-button @click="overseasShipperFlag = false; currentRow = null">关闭</el-button>
       </el-footer>
     </el-dialog>
+
+    <!-- 大输入框编辑弹窗 -->
+    <el-dialog
+      :title="editDialog.title"
+      :visible.sync="editDialog.visible"
+      width="600px"
+      class="edit-dialog"
+      @close="closeEditDialog">
+      <div class="edit-dialog-tip">
+        <i class="el-icon-info"></i> 提示：您可以在此编辑较长的文本内容，支持多行输入
+      </div>
+      <el-form label-position="top" style="margin-bottom: 120px">
+        <el-form-item :label="editDialog.label">
+          <el-input ref="editTextarea"
+            v-model="editDialog.value"
+            type="textarea"
+            :rows="6"
+            placeholder="请输入内容，支持多行文本..."
+            maxlength="500"
+            show-word-limit
+            class="edit-textarea">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeEditDialog">取消</el-button>
+        <el-button type="primary" @click="confirmEdit">保存</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -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;
+}
+
+
+
 </style>