Quellcode durchsuchen

fix(规则管理): 优化自定义表格组件代码结构,提取重复逻辑为getInput方法并修复随机字符串生成错误

yusheng vor 6 Monaten
Ursprung
Commit
e91ea3e9dd

+ 1 - 1
src/utils/util.js

@@ -58,7 +58,7 @@ export function generateRandomString(num = 5) {
   }
   for (let j = 0; j < 3; j++) {
     result += charactersNum.charAt(
-      Math.floor(Math.random() * charactersLength)
+      Math.floor(Math.random() * charactersNum.length)
     );
   }
   return result;

+ 19 - 45
src/views/rulesManagement/releaseRules/components/templateDiv/customTable.vue

@@ -108,26 +108,24 @@
             0,
             Array(length)
               .fill(null)
-              .map(() => ({
-                readonly: 1,
-                value: '',
-                rowspan: 1,
-                id: generateRandomString(5)
-              }))
+              .map(() => this.getInput())
           );
         } else {
           this.columns.push(
             Array(length)
               .fill(null)
-              .map(() => ({
-                readonly: 1,
-                value: '',
-                rowspan: 1,
-                id: generateRandomString(5)
-              }))
+              .map(() => this.getInput())
           );
         }
       },
+      getInput() {
+        return {
+          readonly: 1,
+          value: '',
+          rowspan: 1,
+          id: generateRandomString(5)
+        };
+      },
 
       // 方法:删除指定列
       removeColumn(index) {
@@ -136,21 +134,15 @@
 
       // 方法:添加新行
       addRow(rowIndex, columnIndex) {
-        if (columnIndex > 0) {
+        if (columnIndex > 0) { //不是第一列则需要合并单元格
           this.columns.forEach((item, newColumnIndex) => {
-            let newRow = {
-              readonly: 1,
-              value: '',
-              rowspan: 1,
-              id: generateRandomString(5)
-            };
+            let newRow = this.getInput();
             if (newColumnIndex < columnIndex) {
               newRow.rowspan = 0;
               let _rowIndex = null;
               if (item[rowIndex].rowspan == 0) {
                 _rowIndex = this.getPreventRowspan(newColumnIndex, rowIndex);
               }
-              console.log(_rowIndex, '_rowIndex');
               let rowspan =
                 this.columns[newColumnIndex][_rowIndex || rowIndex].rowspan ||
                 1;
@@ -163,27 +155,21 @@
             }
             this.columns[newColumnIndex].splice(rowIndex + 1, 0, newRow);
           });
-        } else {
+        } else { 
           this.columns.forEach((item, index) => {
             let _rowIndex = rowIndex;
             if (item[rowIndex]?.rowspan > 1) {
               _rowIndex += Number(item[rowIndex].rowspan);
             }
-            this.columns[index].splice(_rowIndex + 1, 0, {
-              readonly: 1,
-              value: '',
-              rowspan: 1,
-              id: generateRandomString(5)
-            });
+            this.columns[index].splice(_rowIndex + 1, 0, this.getInput());
           });
-          console.log(this.columns, 'this.columns');
         }
       },
       //找到真正需要改变rowspan的行
       getPreventRowspan(columnIndex, rowIndex) {
         let preventRowspan = null;
         this.columns[columnIndex].forEach((item, newRowIndex) => {
-          if (newRowIndex < rowIndex && item.rowspan > 1) {
+          if (newRowIndex < rowIndex && item.rowspan > 1) { //向上找到当前列合并过单元格的行
             preventRowspan = newRowIndex;
           }
         });
@@ -193,7 +179,7 @@
       // 方法:删除指定行
       removeRow(rowIndex) {
         this.columns.forEach((item, columnIndex) => {
-          if (item[rowIndex].rowspan == 0) {
+          if (item[rowIndex].rowspan == 0) { // 如果当前列,删除的这一行rowspan为0,则需要找到真正需要改变rowspan的行
             let preventRowspanIndex = this.getPreventRowspan(
               columnIndex,
               rowIndex
@@ -205,26 +191,17 @@
                 this.columns[columnIndex][preventRowspanIndex].rowspan - 1
               );
             }
-          } else if (item[rowIndex].rowspan > 1) {
+          } else if (item[rowIndex].rowspan > 1) { //rowspan大于1,代表合并过单元格,需要吧值继承给下一行
             let data = item[rowIndex];
             data.rowspan--;
-            this.$set(this.columns[columnIndex], [rowIndex + 1], data);
+            this.$set(this.columns[columnIndex], [rowIndex + 1], data); 
           }
 
           item.splice(rowIndex, 1);
         });
       },
 
-      objInit() {
-        if (Object.keys(this.valueObj).length) {
-          for (let key in this.valueObj) {
-            this.$nextTick(() => {
-              let dom = document.getElementById(key);
-              dom.value = this.valueObj[key];
-            });
-          }
-        }
-      },
+
       calculation() {
         this.$emit('calculation');
       },
@@ -248,17 +225,14 @@
       init({ form, valueObj, equation }) {
         this.form = form;
         this.columns = valueObj.columns;
-
         this.equation = equation || {};
       },
       editInputChange(domObj) {
         if (domObj.equation) {
           this.equation[this.domId] = domObj.equation;
         }
-
         this.columns.forEach((item, index) => {
           let rowsIndex = item.findIndex((cells) => cells.id == this.domId);
-
           if (rowsIndex >= 0) {
             this.$set(this.columns[index], rowsIndex, domObj);
           }