fix(规则管理): 重构自定义表格组件结构，优化行列操作逻辑和样式交互

src/views/factoryModel/station/components/edit.vue

@@ -724,11 +724,16 @@
           if (!valid) {
             return false;
           }
-          // this.form.tMainFactoryWorkstationOperationAddPOList =
-          //   this.$refs.stationMeter.getValue();
-          // if (!this.form.tMainFactoryWorkstationOperationAddPOList.length) {
-          //   return this.$message.error('请添加工序');
-          // }
+          this.form.factoryWorkstationOperations =
+            this.$refs.stationMeter.getValue();
+          if (!this.form.factoryWorkstationOperations.length) {
+            return this.$message.error('请添加工序');
+          } else {
+            this.form.taskIds =
+              this.form.factoryWorkstationOperations.map(
+                (n) => n.operationId
+              );
+          }
           this.loading = true;
 
           if (this.type != 'edit') {
@@ -901,9 +906,9 @@
             // }
           }
           this.$nextTick(() => {
-            console.log(res.tMainFactoryWorkstationOperationAddPOList);
+            // console.log(res.tMainFactoryWorkstationOperationAddPOList);
             this.$refs.stationMeter.setValue(
-              res.tMainFactoryWorkstationOperationAddPOList
+              res.factoryWorkstationOperations
             );
           });
           this.form = Object.assign({}, this.form, res);

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

@@ -300,8 +300,8 @@
           if (item.type == 'customText') {
             data = { ...item.valueObj, ...data };
           } else {
-            item.valueObj.rows.forEach((row) => {
-              row.cells.forEach((cell) => {
+            item.valueObj.columns.forEach((row) => {
+              row.forEach((cell) => {
                 data[cell.id] = cell.value;
               });
             });
@@ -327,8 +327,8 @@
               this.idList.push(key);
             }
           } else {
-            item.valueObj.rows.forEach((row) => {
-              row.cells.forEach((cell) => {
+            item.valueObj.columns.forEach((row) => {
+              row.forEach((cell) => {
                 this.idList.push(cell.id);
               });
             });

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

@@ -104,7 +104,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item :label="qmsReportWorkType.includes(formData.reportWorkType)?'模板编码':'记录规则编码'" prop="code">
+          <el-form-item label="编码" prop="code">
             <el-input
               v-model="formData.code"
               :disabled="true"
@@ -113,7 +113,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item :label="qmsReportWorkType.includes(formData.reportWorkType)?'模板版本':'记录规则版本'">
+          <el-form-item label="版本">
             <el-input
               :value="versionText"
               disabled
@@ -122,7 +122,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item :label="qmsReportWorkType.includes(formData.reportWorkType)?'模板名称':'记录规则名称'"  prop="name">
+          <el-form-item label="名称"  prop="name">
             <el-input
               v-model="formData.name"
               placeholder="请输入"
@@ -1042,7 +1042,7 @@
         formData: JSON.parse(JSON.stringify(formDateBase)),
         formRules: {
           name: [
-            { required: true, message: '请输入规则名称', trigger: 'blur' }
+            { required: true, message: '请输入名称', trigger: 'blur' }
           ],
           frequencyValue: [
             { required: true, message: '请选择周期', trigger: 'blur' },

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

@@ -1,57 +1,74 @@
 <!-- 搜索表单 -->
 <template>
   <div style="margin-top: 10px">
-    <el-button type="primary" @click="addColumn" v-if="edit">新增列</el-button>
-    <el-button type="primary" @click="addRow" v-if="edit">新增行</el-button>
-
-    <table style="margin-top: 10px" :id="id">
-      <thead>
-        <tr>
-          <th
-            v-for="(item, index) in columns"
-            class="tableTh"
-            :style="{ width: item.width + 'px' }"
-          >
-            <i
-              class="el-icon-delete delete"
-              style="display: none"
-              @click="removeColumn(index)"
-              v-if="edit"
-            ></i>
-            <input
-              v-model="item.value"
-              type="text"
-              class="templateInput"
-              :id="item.id"
-              :readonly="item.readonly == 2 || !edit"
-              @click="inputClick(item, 'columns')"
-            />
-          </th>
-          <th v-if="edit"></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(row, rowIndex) in rows">
-          <td v-for="item in row.cells"
-            ><input
-              v-model="item.value"
-              type="text"
-              class="templateInput"
-              :id="item.id"
-              :readonly="item.readonly == 2 || !edit"
-              @click="inputClick(item)"
-              @input="calculation"
-          /></td>
-          <td v-if="edit">
-            <i
-              class="sort-handle el-icon-delete delete"
-              style="color: #f56c6c"
-              @click="removeRow(rowIndex)"
-            ></i
-          ></td>
-        </tr>
-      </tbody>
-    </table>
+    <el-button type="primary" @click="addColumn()" v-if="edit"
+      >新增列</el-button
+    >
+    <el-button type="primary" @click="addRow(columns.length)" v-if="edit"
+      >新增行</el-button
+    >
+    <div class="table" style="margin-top: 10px" :id="id">
+      <div class="table-body" style="display: flex">
+        <template v-for="(row, index) in columns">
+          <div class="column" :style="{ width: row[0].width + 'px' }">
+            <div
+              class="table-body-item tableTd"
+              v-for="(item, rowIndex) in row"
+              :style="{
+                height: item.rowspan * 30 + 'px',
+                display: item.rowspan ? 'block' : 'none'
+              }"
+            >
+              <i
+                class="el-icon-delete delete"
+                style="display: none"
+                @click="removeColumn(index)"
+                v-if="edit && rowIndex == 0"
+              ></i>
+              <i
+                class="el-icon-circle-plus-outline add"
+                style="display: none"
+                @click="addColumn(index)"
+                v-if="edit && rowIndex == 0"
+              ></i>
+              <i
+                class="el-icon-delete deleteRow"
+                @click="removeRow(rowIndex)"
+                v-if="edit && rowIndex != 0"
+              ></i>
+              <i
+                class="el-icon-circle-plus-outline addRow"
+                style="display: none"
+                @click="addRow(rowIndex, index)"
+                v-if="edit && rowIndex != 0 && index != columns.length - 1"
+              ></i>
+              <textarea
+                v-if="item.rowspan > 1"
+                v-model="item.value"
+                class="templateInput"
+                :id="item.id"
+                :readonly="item.readonly == 2 || !edit"
+                @click="inputClick(item)"
+                @input="calculation"
+                autocomplete="off"
+                style="resize: none"
+              ></textarea>
+              <input
+                v-else
+                v-model="item.value"
+                class="templateInput"
+                :id="item.id"
+                :readonly="item.readonly == 2 || !edit"
+                @click="inputClick(item, rowIndex == 0 ? 'columns' : null)"
+                @input="calculation"
+                type="text"
+                autocomplete="off"
+              />
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -76,52 +93,126 @@
         domId: '',
         rightClickShow: false,
         columns: [],
-        rows: [],
+        // rows: [],
         equation: {}
       };
     },
     created() {},
     methods: {
       // 方法：添加新列
-      addColumn() {
-        this.columns.push({
-          value: `列${this.columns.length + 1}`,
-          id: generateRandomString(5),
-          readonly: 1
-        });
-        this.rows.forEach((row) => {
-          row.cells.push({
-            value: '',
-            readonly: 1,
-            id: generateRandomString(5)
-          });
-        });
+      addColumn(index) {
+        let length = this.columns[0]?.length || 1;
+        if (index === 0 || index) {
+          this.columns.splice(
+            index + 1,
+            0,
+            Array(length)
+              .fill(null)
+              .map(() => ({
+                readonly: 1,
+                value: '',
+                rowspan: 1,
+                id: generateRandomString(5)
+              }))
+          );
+        } else {
+          this.columns.push(
+            Array(length)
+              .fill(null)
+              .map(() => ({
+                readonly: 1,
+                value: '',
+                rowspan: 1,
+                id: generateRandomString(5)
+              }))
+          );
+        }
       },
 
       // 方法：删除指定列
       removeColumn(index) {
         this.columns.splice(index, 1);
-        this.rows.forEach((row) => {
-          row.cells.splice(index, 1);
-        });
       },
 
       // 方法：添加新行
-      addRow() {
-        const newRow = {
-          cells: Array(this.columns.length)
-            .fill(null)
-            .map(() => ({
+      addRow(rowIndex, columnIndex) {
+        if (columnIndex > 0) {
+          this.columns.forEach((item, newColumnIndex) => {
+            let newRow = {
               readonly: 1,
               value: '',
+              rowspan: 1,
               id: generateRandomString(5)
-            }))
-        };
-        this.rows.push(newRow);
+            };
+            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;
+
+              this.$set(
+                this.columns[newColumnIndex][_rowIndex || rowIndex],
+                'rowspan',
+                (rowspan += 1)
+              );
+            }
+            this.columns[newColumnIndex].splice(rowIndex + 1, 0, newRow);
+          });
+        } 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)
+            });
+          });
+          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) {
+            preventRowspan = newRowIndex;
+          }
+        });
+
+        return preventRowspan;
       },
       // 方法：删除指定行
-      removeRow(index) {
-        this.rows.splice(index, 1);
+      removeRow(rowIndex) {
+        this.columns.forEach((item, columnIndex) => {
+          if (item[rowIndex].rowspan == 0) {
+            let preventRowspanIndex = this.getPreventRowspan(
+              columnIndex,
+              rowIndex
+            );
+            if (preventRowspanIndex) {
+              this.$set(
+                this.columns[columnIndex][preventRowspanIndex],
+                'rowspan',
+                this.columns[columnIndex][preventRowspanIndex].rowspan - 1
+              );
+            }
+          } else if (item[rowIndex].rowspan > 1) {
+            let data = item[rowIndex];
+            data.rowspan--;
+            this.$set(this.columns[columnIndex], [rowIndex + 1], data);
+          }
+
+          item.splice(rowIndex, 1);
+        });
       },
 
       objInit() {
@@ -136,13 +227,12 @@
       },
       calculation() {
         this.$emit('calculation');
-
       },
       equationValue({ domId, value }) {
-        this.rows.forEach((item, index) => {
-          let cellIndex = item.cells.findIndex((cell) => cell.id == domId);
+        this.columns.forEach((item, index) => {
+          let cellIndex = item.findIndex((cell) => cell.id == domId);
           if (cellIndex != '-1') {
-            this.$set(this.rows[index].cells[cellIndex], 'value', value);
+            this.$set(this.columns[index][cellIndex], 'value', value);
           }
         });
       },
@@ -151,35 +241,26 @@
           form: null,
           equation: this.equation,
           valueObj: {
-            columns: this.columns,
-            rows: this.rows
+            columns: this.columns
           }
         };
       },
       init({ form, valueObj, equation }) {
         this.form = form;
         this.columns = valueObj.columns;
-        this.rows = valueObj.rows;
+
         this.equation = equation || {};
       },
       editInputChange(domObj) {
         if (domObj.equation) {
           this.equation[this.domId] = domObj.equation;
         }
-        let columnsIndex = this.columns.findIndex(
-          (item) => item.id == this.domId
-        );
-        if (columnsIndex >= 0) {
-          this.$set(this.columns, columnsIndex, domObj);
-          return;
-        }
-        this.rows.forEach((item, index) => {
-          let rowsIndex = item.cells.findIndex(
-            (cells) => cells.id == this.domId
-          );
+
+        this.columns.forEach((item, index) => {
+          let rowsIndex = item.findIndex((cells) => cells.id == this.domId);
 
           if (rowsIndex >= 0) {
-            this.$set(this.rows[index].cells, rowsIndex, domObj);
+            this.$set(this.columns[index], rowsIndex, domObj);
           }
         });
       },
@@ -199,6 +280,7 @@
             id: item.id,
             readonly: item.readonly,
             value: item.value,
+            rowspan: item.rowspan,
             equation: this.equation[item.id]
           }
         });
@@ -215,20 +297,51 @@
     text-align: center;
     background-color: #fff;
   }
-  table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-  th,
-  td {
-    border: 1px solid #ddd;
-    padding: 0;
-    text-align: center;
-    height: 30px;
+
+  .table-header {
+    span {
+      display: inline-block;
+      height: 30px;
+      border: 1px solid #ddd;
+      width: 100px;
+      background-color: #f2f2f2 !important;
+    }
+
+    input {
+      background-color: #f2f2f2 !important;
+    }
   }
-  th {
-    background-color: #f2f2f2;
+  .table-body {
+    white-space: nowrap;
+    .column {
+      display: inline-block;
+      width: 100px;
+      > div {
+        height: 30px;
+        border: 1px solid #ddd;
+        width: 100%;
+      }
+      > div:nth-of-type(1) {
+        background-color: #f2f2f2 !important;
+        > input {
+          background-color: #f2f2f2 !important;
+        }
+      }
+    }
   }
+  // th,
+  // td {
+  //   border: 1px solid #ddd;
+  //   padding: 2px;
+  //   text-align: center;
+  //   height: 30px;
+  // }
+  // th {
+  //   background-color: #f2f2f2;
+  //   > input {
+  //     background-color: #f2f2f2 !important;
+  //   }
+  // }
   tr:nth-child(even) {
     background-color: #f9f9f9;
   }
@@ -236,8 +349,17 @@
     border-color: #66afe9; /* 改变边框颜色 */
     outline: none; /* 移除默认的轮廓线 */
   }
-  .tableTh:hover {
+  .tableTd {
     position: relative;
+  }
+  .deleteRow {
+    display: block !important;
+    position: absolute;
+    bottom: 0px;
+    right: -15px;
+    color: #f56c6c;
+  }
+  .tableTd:hover {
     .delete {
       display: block !important;
       position: absolute;
@@ -245,5 +367,20 @@
       top: 0;
       color: #f56c6c;
     }
+
+    .add {
+      display: block !important;
+      position: absolute;
+      right: 20px;
+      top: 0;
+      color: #409eff;
+    }
+    .addRow {
+      display: block !important;
+      position: absolute;
+      bottom: 0px;
+      right: 10px;
+      color: #409eff;
+    }
   }
 </style>

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

@@ -96,6 +96,7 @@
         const inputElement = document.createElement('input');
         inputElement.setAttribute('type', 'text');
         inputElement.setAttribute('class', 'templateInput');
+        inputElement.setAttribute('autocomplete', 'off');
         inputElement.setAttribute('id', id);
         return inputElement;
       },

src/views/rulesManagement/releaseRules/index.vue

@@ -225,7 +225,7 @@
           },
           {
             prop: 'code',
-            label: '记录规则编码',
+            label: '编码',
             align: 'center',
             showOverflowTooltip: true,
             minWidth: 110,
@@ -233,7 +233,7 @@
           },
           {
             prop: 'name',
-            label: '记录规则名称',
+            label: '名称',
             align: 'center',
             showOverflowTooltip: true,
             minWidth: 110