feat(规则管理): 支持插入勾选框类型并优化表格单元格样式处理

src/views/rulesManagement/releaseRules/components/permitAdd.vue

@@ -597,6 +597,8 @@
       </header-title>
       <experimentationProcess
         :edit="type != 'detail'"
+        :readonly="type == 'detail'"
+
         v-if="qmsReportWorkType.includes(formData.reportWorkType)"
         ref="experimentationProcess"
       ></experimentationProcess>

src/views/rulesManagement/releaseRules/components/templateDiv/customTable.vue

@@ -227,6 +227,7 @@
         if (this.verify(_colspan, rowspan, this.selectedItems, _rowIndex)) {
           return;
         }
+        console.log(this.selectedItems, 'this.selectedItems');
         for (let index = 0; index < this.selectedItems.length; index++) {
           let item = this.selectedItems[index];
           if (index != 0) {
@@ -250,12 +251,19 @@
             }
 
             item.colspan = 0;
-            item.style = {
-              border: 'none'
-            };
+            if (item.style) {
+              item.style.border = 'none';
+            } else {
+              item.style = {
+                width: 100,
+                border: 'none'
+              };
+            }
+
             this.$set(this.columns[item.columnIndex], item.rowIndex, item);
           }
         }
+        console.log(this.selectedItems[0], 'this.selectedItems[0]');
         this.$set(this.columns[_columnIndex], _rowIndex, this.selectedItems[0]);
       },
       colspanSum(rowIndex) {
@@ -305,15 +313,15 @@
           );
         }
       },
-      getInput() {
+      getInput(width) {
         return {
           readonly: 1,
           value: '',
           rowspan: 1,
           colspan: 1,
           colspanKey: [],
-          width: 100,
-          style: { width: 100 },
+          width: width||100,
+          style: { width: width||100 },
           id: generateRandomString(5)
         };
       },
@@ -394,7 +402,8 @@
         }
 
         this.columns.forEach((item, index) => {
-          this.columns[index].splice(_rowIndex + 1, 0, this.getInput());
+
+          this.columns[index].splice(_rowIndex + 1, 0, this.getInput(this.columns[index][_rowIndex-1]?.style.width));
         });
 
         // }
@@ -438,12 +447,12 @@
         });
       },
       getWidth(item) {
-        let width = Number(item.style.width) || 100;
+        let width = Number(item.style.width);
         if (item.colspanKey.length) {
           this.columns.forEach((cell) => {
             cell.forEach((row) => {
               if (item.colspanKey.includes(row.id)) {
-                width += Number(row.style.width || 100);
+                width += Number(row.style.width);
               }
             });
           });
@@ -479,22 +488,24 @@
         this.units = units || {};
       },
       editInputChange(domObj) {
-        if (domObj.equation) {
-          this.equation[this.domId] = domObj.equation;
+        console.log(domObj, 'domObj');
+        let data = JSON.parse(JSON.stringify(domObj));
+        if (data.equation) {
+          this.equation[this.domId] = data.equation;
         }
-        if (domObj.units) {
-          this.units[this.domId] = domObj.units;
+        if (data.units) {
+          this.units[this.domId] = data.units;
         }
-        let dom = document.getElementById(domObj.id);
+        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 = domObj.width - dom.parentElement.offsetWidth;
+            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, domObj);
+            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);

src/views/rulesManagement/releaseRules/components/templateDiv/customText.vue

@@ -3,13 +3,16 @@
   <div>
     <el-popover
       style="position: fixed; z-index: 2000"
-      width="130"
+      
       ref="popoverRef"
       v-model="rightClickShow"
       @click.native="rightClickShow = false"
     >
-      <div>
+      <div style="display: flex;">
         <el-button type="primary" @click="addHtml">插入输入框</el-button>
+        <el-button style="margin-left: 10px;"type="primary" @click="addHtml('checkbox')"
+          >插入勾选框</el-button
+        >
       </div>
     </el-popover>
     <div
@@ -53,8 +56,8 @@
       };
     },
     methods: {
-      addHtml() {
-        this.insertInput();
+      addHtml(type) {
+        this.insertInput(type);
       },
       objInit() {
         if (Object.keys(this.valueObj).length) {
@@ -62,11 +65,17 @@
             this.$nextTick(() => {
               let dom = document.getElementById(key);
               dom.value = this.valueObj[key];
+              if (dom.type == 'checkbox') {
+                console.log(this.valueObj[key]);
+                dom.checked = this.valueObj[key];
+              } else {
+                dom.value = this.valueObj[key];
+              }
             });
           }
         }
       },
-      insertInput() {
+      insertInput(type) {
         const selection = window.getSelection();
         if (selection.rangeCount > 0) {
           const range = selection.getRangeAt(0);
@@ -76,9 +85,9 @@
             range.setStart(selection.anchorNode, selection.anchorOffset);
             range.setEnd(selection.focusNode, selection.focusOffset);
             range.deleteContents(); // 删除选中的内容（如果需要）
-            range.insertNode(this.getInput()); // 插入input元素
+            range.insertNode(this.getInput(type)); // 插入input元素
             // 可以设置光标位置在input之后
-            range.selectNodeContents(this.getInput());
+            range.selectNodeContents(this.getInput(type));
             range.collapse(false); // 光标放在input之后
             selection.removeAllRanges();
             selection.addRange(range);
@@ -96,10 +105,10 @@
         }
       },
 
-      getInput() {
+      getInput(type) {
         let id = generateRandomString();
         const inputElement = document.createElement('input');
-        inputElement.setAttribute('type', 'text');
+        inputElement.setAttribute('type', type || 'text');
         inputElement.setAttribute('class', 'templateInput');
         inputElement.setAttribute('autocomplete', 'off');
         inputElement.setAttribute('id', id);
@@ -112,7 +121,11 @@
         let data = {};
         if (inputs.length) {
           inputs.forEach((item) => {
-            data[item.id] = item.value;
+            if (item.type == 'checkbox') {
+              data[item.id] = item.checked;
+            } else {
+              data[item.id] = item.value;
+            }
           });
         }
         return {
@@ -178,7 +191,11 @@
       },
       inputChange(event) {
         if (event.target && event.target.className == 'templateInput') {
-          this.valueObj[event.target.id] = event.target.value;
+          if (event.target.type == 'checkbox') {
+            this.valueObj[event.target.id] = event.target.checked
+          } else {
+            this.valueObj[event.target.id] = event.target.value;
+          }
 
           this.$emit('calculation');
         }
@@ -225,6 +242,9 @@
     margin-left: 3px;
     text-align: center;
   }
+  :deep(.templateInput[type='checkbox']) {
+    width: auto;
+  }
   .contenteditable {
     // padding: 5px;
     width: 100%;

vue.config.js

@@ -37,7 +37,7 @@ module.exports = {
         // target: 'http://192.168.1.176:18086',
         // target: 'http://192.168.1.125:18086',
         // target: 'http://192.168.1.251:18186',
-        target: 'http://192.168.1.125:18086',
+        target: 'http://192.168.1.251:18086',
         // target: 'http://192.168.1.251:18186',
         // target: 'http://192.168.1.125:18086',
         // target: 'http://192.168.1.251:18186', // 测试环境