Explorar o código

refactor(规则管理): 优化自定义表格组件代码格式,修复单元格宽度更新逻辑

yusheng hai 5 meses
pai
achega
23bfcddb22

+ 21 - 17
src/views/rulesManagement/releaseRules/components/templateDiv/customTable.vue

@@ -320,8 +320,8 @@
           rowspan: 1,
           colspan: 1,
           colspanKey: [],
-          width: width||100,
-          style: { width: width||100 },
+          width: width || 100,
+          style: { width: width || 100 },
           id: generateRandomString(5)
         };
       },
@@ -360,7 +360,6 @@
         if (item?.colspanKey.length) {
           item.colspanKey.forEach((id) => {
             let { columnIndex } = this.getIndex(id);
-        
 
             this.columns[columnIndex].forEach((cell, rowIndex) => {
               if (cell.colspanKey.length) {
@@ -402,8 +401,11 @@
         }
 
         this.columns.forEach((item, index) => {
-
-          this.columns[index].splice(_rowIndex + 1, 0, this.getInput(this.columns[index][_rowIndex-1]?.style.width));
+          this.columns[index].splice(
+            _rowIndex + 1,
+            0,
+            this.getInput(this.columns[index][_rowIndex - 1]?.style.width)
+          );
         });
 
         // }
@@ -491,25 +493,28 @@
         console.log(domObj, 'domObj');
         let data = JSON.parse(JSON.stringify(domObj));
         if (data.equation) {
-          this.equation[this.domId] = data.equation;
+          this.equation[data.id] = data.equation;
         }
         if (data.units) {
-          this.units[this.domId] = data.units;
+          this.units[data.id] = data.units;
         }
         let dom = document.getElementById(data.id);
 
         this.columns.forEach((item, index) => {
           let rowsIndex = item.findIndex((cells) => cells.id == this.domId);
-
-          if (rowsIndex >= 0) {
-            let width = data.width - dom.parentElement.offsetWidth;
-            let newWidth = this.columns[index][rowsIndex].style.width + width;
-            this.columns[index][0].width = newWidth;
+          if (!dom) {
             this.$set(this.columns[index], rowsIndex, data);
-            item.forEach((cell, _index) => {
-              this.$set(this.columns[index][_index].style, 'width', newWidth);
-              this.$set(this.columns[index][_index], 'width', newWidth);
-            });
+          } else {
+            if (rowsIndex >= 0) {
+              let width = data.width - dom.parentElement.offsetWidth;
+              let newWidth = this.columns[index][rowsIndex].style.width + width;
+              this.columns[index][0].width = newWidth;
+              this.$set(this.columns[index], rowsIndex, data);
+              item.forEach((cell, _index) => {
+                this.$set(this.columns[index][_index].style, 'width', newWidth);
+                this.$set(this.columns[index][_index], 'width', newWidth);
+              });
+            }
           }
         });
       },
@@ -561,7 +566,6 @@
     background-color: #fff;
   }
 
-
   .table-body {
     white-space: nowrap;
     .column {