feat(规则管理): 添加公式重置功能并优化表格样式和交互

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

@@ -104,6 +104,7 @@
               disabled
             ></el-input>
             <el-button type="primary" @click="setEquation">配置公式</el-button>
+            <el-button type="primary" @click="delEquation">重置</el-button>
           </el-form-item>
         </el-form>
       </el-card>
@@ -311,8 +312,9 @@
             JSON.stringify(this.domObj.equation)
           );
           this.equationUnit.activeIndex = this.domObj.equation.length;
+        } else {
+          this.equationUnit.equation = [];
         }
-
         this.list.forEach((item) => {
           if (item.type == 'customText') {
             for (let key in item.valueObj) {
@@ -328,6 +330,10 @@
         });
         this.visible = true;
       },
+      delEquation() {
+        this.equationUnit.equation = [];
+        this.editInputChange('equation');
+      },
       tagItemDelete(index) {
         this.equationUnit.equation.splice(index, 1);
       },
@@ -393,6 +399,7 @@
       init(list) {
         this.list = JSON.parse(list);
         if (this.list.length) {
+          // this.list[0].id="ozFSPs"
           this.$nextTick(() => {
             this.list.forEach((item) => {
               this.$refs['customTextRef' + item.id][0].init({

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

@@ -7,7 +7,11 @@
     <table style="margin-top: 10px" :id="id">
       <thead>
         <tr>
-          <th v-for="(item, index) in columns" class="tableTh">
+          <th
+            v-for="(item, index) in columns"
+            class="tableTh"
+            :style="{ width: item.width + 'px' }"
+          >
             <i
               class="el-icon-delete delete"
               style="display: none"
@@ -20,7 +24,7 @@
               class="templateInput"
               :id="item.id"
               :readonly="item.readonly == 2 || !edit"
-              @click="inputClick(item)"
+              @click="inputClick(item, 'columns')"
             />
           </th>
           <th v-if="edit"></th>
@@ -28,7 +32,7 @@
       </thead>
       <tbody>
         <tr v-for="(row, rowIndex) in rows">
-          <td v-for="item in row.cells"
+          <td v-for="item in row.cells" 
             ><input
               v-model="item.value"
               type="text"
@@ -76,6 +80,9 @@
         equation: {}
       };
     },
+    created(){
+         console.log(1)
+    },
     methods: {
       // 方法：添加新列
       addColumn() {
@@ -155,6 +162,8 @@
         this.equation = equation || {};
       },
       editInputChange(domObj) {
+        // let dom = document.getElementById(domObj.id);
+        // dom.parentElement.width = domObj.width;
         if (domObj.equation) {
           this.equation[this.domId] = domObj.equation;
         }
@@ -176,15 +185,18 @@
         });
       },
 
-      inputClick(item) {
+      inputClick(item, type) {
         if (!this.edit) {
           return;
         }
+        let dom = document.getElementById(item.id);
+
         this.domId = item.id;
         this.$emit('editShow', {
           templateDivRef: 'customTextRef' + this.id,
           domObj: {
-            isNoWidth: true,
+            width: dom.parentElement.offsetWidth,
+            isNoWidth: type == 'columns' ? false : true,
             id: item.id,
             readonly: item.readonly,
             value: item.value,
@@ -198,10 +210,9 @@
 <style lang="scss" scoped>
   :deep(.templateInput) {
     width: 100%;
-    border: solid 1px #bfbfbf;
-    padding: 1px;
-    margin: 1px;
-    margin-left: 3px;
+    height: 100%;
+    border: none;
+
     text-align: center;
     background-color: #fff;
   }
@@ -214,6 +225,7 @@
     border: 1px solid #ddd;
     padding: 0;
     text-align: center;
+    height: 30px;
   }
   th {
     background-color: #f2f2f2;