feat(规则管理): 添加只读模式支持并优化编辑控制逻辑

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

@@ -50,6 +50,7 @@
               @editShow="editShowFn"
               @calculation="calculation"
               :edit="edit"
+              :readonly="readonly"
             ></customText>
             <customTable
               :ref="'customTextRef' + item.id"
@@ -60,6 +61,7 @@
               :valueObj="item.valueObj"
               @calculation="calculation"
               @editShow="editShowFn"
+              :readonly="readonly"
               :edit="edit"
             ></customTable>
           </div>
@@ -242,8 +244,8 @@
 </template>
 
 <script>
-  import customText from './templateDiv/customText.vue';
-  import customTable from './templateDiv/customTable.vue';
+  import customText from './customText.vue';
+  import customTable from './customTable.vue';
   import VueDraggable from 'vuedraggable';
   import { generateRandomString } from '@/utils/util';
 
@@ -257,6 +259,10 @@
       edit: {
         default: true,
         type: Boolean
+      },
+      readonly: {
+        default: false,
+        type: Boolean
       }
     },
     computed: {},
@@ -454,6 +460,7 @@
 
       init(list) {
         this.list = JSON.parse(list);
+        this.editShow = false;
         if (this.list.length) {
           this.$nextTick(() => {
             this.list.forEach((item) => {
@@ -468,6 +475,9 @@
         }
       },
       editShowFn({ templateDivRef, domObj }) {
+        if (!this.edit) {
+          return;
+        }
         this.templateDivRef = templateDivRef;
         this.$set(this, 'domObj', domObj);
         this.editShow = true;

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

@@ -8,7 +8,9 @@
     <el-button type="primary" @click="addRow(columns[0].length)" v-if="edit"
       >新增行</el-button
     >
-    <el-checkbox v-model="isMerge" style="margin-left: 10px">合并单元格</el-checkbox>
+    <el-checkbox v-model="isMerge" style="margin-left: 10px" v-if="edit"
+      >合并单元格</el-checkbox
+    >
     <div class="table" style="margin-top: 10px" :id="id">
       <div
         class="table-body"
@@ -66,7 +68,7 @@
               <i
                 class="el-icon-delete delete"
                 style="display: none"
-                @click="removeColumn(item,index)"
+                @click="removeColumn(item, index)"
                 v-if="edit && rowIndex == 0"
               ></i>
               <i
@@ -92,7 +94,7 @@
                 class="templateInput"
                 :id="item.id"
                 :ref="item.id + 'ref'"
-                :readonly="item.readonly == 2 || !edit"
+                :readonly="item.readonly == 2 || readonly"
                 @click="inputClick(item)"
                 @input="calculation"
                 autocomplete="off"
@@ -104,7 +106,7 @@
                 class="templateInput"
                 :id="item.id"
                 :ref="item.id + 'ref'"
-                :readonly="item.readonly == 2 || !edit"
+                :readonly="item.readonly == 2 || readonly"
                 @click="inputClick(item, rowIndex == 0 ? 'columns' : null)"
                 @input="calculation"
                 type="text"
@@ -130,6 +132,10 @@
       edit: {
         default: true,
         type: Boolean
+      },
+      readonly: {
+        default: false,
+        type: Boolean
       }
     },
     data() {
@@ -169,8 +175,8 @@
     },
     methods: {
       startSelecting(event) {
-        if(!this.isMerge){
-           return
+        if (!this.isMerge) {
+          return;
         }
         this.isSelecting = true;
         this.startX = event.clientX;
@@ -307,8 +313,7 @@
       },
 
       // 方法：删除指定列
-      removeColumn(item,index) {
-      
+      removeColumn(item, index) {
         this.columns.splice(index, 1);
         this.columns.forEach((row, columnIndex) => {
           row.forEach((cell, index) => {

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

@@ -36,6 +36,10 @@
       edit: {
         default: true,
         type: Boolean
+      },
+      readonly: {
+        default: false,
+        type: Boolean
       }
     },
     data() {
@@ -133,7 +137,7 @@
         this.equation = equation || {};
         this.units = units || {};
         this.$nextTick(() => {
-          if (!this.edit) {
+          if (this.readonly) {
             let inputs = document.querySelectorAll('.templateInput');
             inputs.forEach((item) => {
               item.setAttribute('readonly', 'readonly');
@@ -192,7 +196,7 @@
               id: event.target.id,
               readonly: event.target.readOnly ? 2 : 1,
               equation: this.equation[this.domId],
-              units: this.units[this.domId]||{}
+              units: this.units[this.domId] || {}
             }
           });
         }