perf(@0.8.8-15): 优化表格布局向下合并逻辑,修复ace初始化bug

BoBoooooo · Mar 8, 2021 · e6e57f2 · e6e57f2
1 parent e883e60
commit e6e57f2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.8.8-14",
+  "version": "0.8.8-15",
   "author": "BoBo<[email protected]>",
   "main": "lib/ProCrud.umd.min.js",
   "files": [

diff --git a/src/component/form-designer/src/WidgetConfig.vue b/src/component/form-designer/src/WidgetConfig.vue
@@ -760,23 +760,27 @@ export default {
       }
     },
     // eslint-disable-next-line func-names
-    'elementConfig.type': function (val) {
-      if (val.includes('chart-')) {
-        const jsonData = val === 'chart-common' ? this.elementConfig.options.option : this.elementConfig.options.data;
-        const jsonString = JSON.stringify(jsonData || '', null, 2);
-        setTimeout(() => {
-          this.jsonEditor = ace.edit('jsoneditor2');
-          this.jsonEditor.session.setMode('ace/mode/json');
-          this.jsonEditor.setValue(jsonString);
-        }, 100);
-      } else if (val === 'html') {
-        const jsonString = JSON.stringify(this.elementConfig.options.html || '', null, 2);
-        setTimeout(() => {
-          this.jsonEditor = ace.edit('jsoneditor2');
-          this.jsonEditor.setValue(jsonString);
-          this.jsonEditor.session.setMode('ace/mode/html');
-        }, 100);
-      }
+    'elementConfig.type': {
+      immediate: true,
+      handler(val) {
+        if (val.includes('chart-')) {
+          const jsonData = val === 'chart-common' ? this.elementConfig.options.option : this.elementConfig.options.data;
+          const jsonString = JSON.stringify(jsonData || '', null, 2);
+          setTimeout(() => {
+            this.jsonEditor = ace.edit('jsoneditor2');
+            this.jsonEditor.session.setMode('ace/mode/json');
+            this.jsonEditor.setValue(jsonString);
+            console.log(val);
+          }, 100);
+        } else if (val === 'html') {
+          const jsonString = JSON.stringify(this.elementConfig.options.html || '', null, 2);
+          setTimeout(() => {
+            this.jsonEditor = ace.edit('jsoneditor2');
+            this.jsonEditor.setValue(jsonString);
+            this.jsonEditor.session.setMode('ace/mode/html');
+          }, 100);
+        }
+      },
     },
     // eslint-disable-next-line func-names
     'elementConfig.options.isRange': function (val) {

diff --git a/src/component/form-designer/src/WidgetForm.vue b/src/component/form-designer/src/WidgetForm.vue
@@ -240,9 +240,9 @@ export default {
     },
     handleTdSplitToRow(table, row, rowIndex, col, colIndex) {
       const { rowspan } = col.options;
-      const newCol = this.generateNewTd();
       const rows = table.rows.slice(rowIndex + 1, rowIndex + rowspan);
       rows.forEach((_) => {
+        const newCol = this.generateNewTd();
         _.columns.splice(colIndex, 0, newCol);
       });
       col.options.rowspan = 1;
@@ -335,9 +335,10 @@ export default {
         const nextRowIndex = rowIndex + col.options.rowspan;
         if (nextRowIndex < length) {
           // 当前td rowspan改为2
-          col.options.rowspan += table.rows[nextRowIndex].columns[colIndex].options.rowspan;
           // 删除下一行当前列元素
-          table.rows[nextRowIndex].columns.splice(colIndex, 1);
+          const removeColumnIndex = table.rows[nextRowIndex].columns.length < table.options.sumColSpan ? 0 : colIndex;
+          col.options.rowspan += table.rows[nextRowIndex].columns[removeColumnIndex].options.rowspan;
+          table.rows[nextRowIndex].columns.splice(removeColumnIndex, 1);
         } else {
           this.$message.error('当前行已是最后一行');
         }