fix(测试跟踪): 功能用例步骤编辑样式优化

--story=1008229 --user=陈建星 功能用例优化 https://www.tapd.cn/55049933/s/1191465

frontend/src/business/components/track/case/components/TestCaseStepItem.vue

@@ -9,35 +9,40 @@
       :default-sort="{prop: 'num', order: 'ascending'}"
       highlight-current-row>
       <el-table-column :label="$t('test_track.case.number')" prop="num" min-width="10%"></el-table-column>
-      <el-table-column :label="$t('test_track.case.step_desc')" prop="desc" min-width="35%">
+      <el-table-column
+        :label="$t('test_track.case.step_desc')"
+        prop="desc"
+        min-width="35%">
         <template v-slot:default="scope">
           <el-input
-            class="table-edit-input"
-            size="mini"
-            :disabled="readOnly"
-            type="textarea"
-            :autosize="{ minRows: 1, maxRows: 6}"
-            :rows="2"
             v-model="scope.row.desc"
+            size="mini"
+            type="textarea"
+            class="table-edit-input sync-textarea"
+            :disabled="readOnly"
+            :rows="defaultRows"
             :placeholder="$t('commons.input_content')"
-            clearable/>
+            @input="resizeTextarea(scope)"/>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('test_track.case.expected_results')" prop="result" min-width="35%">
+      <el-table-column
+        :label="$t('test_track.case.expected_results')"
+        prop="result"
+        min-width="35%">
         <template v-slot:default="scope">
           <el-input
-            class="table-edit-input"
-            size="mini"
-            :disabled="readOnly"
-            type="textarea"
-            :autosize="{ minRows: 1, maxRows: 6}"
-            :rows="2"
             v-model="scope.row.result"
+            clearable
+            size="mini"
+            type="textarea"
+            class="table-edit-input sync-textarea"
+            :rows="defaultRows"
+            :disabled="readOnly"
             :placeholder="$t('commons.input_content')"
-            clearable/>
+            @input="resizeTextarea(scope)"/>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('commons.input_content')" min-width="30%">
+      <el-table-column :label="$t('commons.operating')" min-width="30%">
         <template v-slot:default="scope">
           <el-button
             type="primary"
@@ -64,6 +69,9 @@
 </template>
 
 <script>
+
+import {resizeTextarea} from "@/common/js/utils";
+
 export default {
   name: "TestCaseStepItem",
   props: {
@@ -71,6 +79,11 @@ export default {
     form: Object,
     readOnly: Boolean
   },
+  data() {
+    return {
+      defaultRows: 2
+    }
+  },
   created() {
     if (!this.form.steps || this.form.steps.length < 1) {
       this.form.steps = [{
@@ -80,6 +93,13 @@ export default {
       }];
     }
   },
+  watch: {
+    'form.steps'() {
+      this.$nextTick(() => {
+        this.resizeTextarea();
+      });
+    }
+  },
   methods: {
     handleAddStep(index, data) {
       let step = {};
@@ -113,10 +133,21 @@ export default {
         }
       });
     },
+    // 同一行文本框高度保持一致
+    resizeTextarea(scope) {
+      resizeTextarea(2, scope ? scope.$index : null);
+    }
   }
 }
 </script>
 
 <style scoped>
+.el-table >>> td:nth-child(2) .cell,.el-table >>> td:nth-child(2),
+.el-table >>> td:nth-child(3) .cell,.el-table >>> td:nth-child(3) {
+  padding: 0;
+}
 
+.el-table >>> td:nth-child(1) .cell {
+  text-align: center;
+}
 </style>

frontend/src/business/components/track/plan/view/comonents/functional/TestPlanCaseStepResultsItem.vue

@@ -14,9 +14,8 @@
         <template v-slot:default="scope">
           <el-input
             size="mini"
-            class="border-hidden"
+            class="border-hidden sync-textarea"
             type="textarea"
-            :autosize="{ minRows: scope.row.minRows, maxRows: 4}"
             :disabled="true"
             v-model="scope.row.desc"/>
         </template>
@@ -25,25 +24,24 @@
         <template v-slot:default="scope">
           <el-input
             size="mini"
-            class="border-hidden"
+            class="border-hidden sync-textarea"
             type="textarea"
-            :autosize="{ minRows: scope.row.minRows, maxRows: 4}"
             :disabled="true"
-            v-model="scope.row.result"/>
+            v-model="scope.row.result"/>eee
         </template>
-      </el-table-column>
+      </el-table-column>f
       <el-table-column :label="$t('test_track.plan_view.actual_result')" min-width="21%">
-        <template v-slot:default="scope">
+        G<template v-slot:default="scope">DD
           <el-input
-            class="table-edit-input"
+            v-model="scope.row.actualResult"
+            clearable
             size="mini"
             type="textarea"
-            :autosize="{ minRows: scope.row.minRows, maxRows: 4}"
+            class="table-edit-input sync-textarea"
+            :rows="2"
             :disabled="isReadOnly"
-            @blur="actualResultChange(scope.row)"
-            v-model="scope.row.actualResult"
             :placeholder="$t('commons.input_content')"
-            clearable/>
+            @input="resizeTextarea(scope)"/>
         </template>
       </el-table-column>
       <el-table-column :label="$t('test_track.plan_view.step_result')" min-width="12%">
@@ -70,7 +68,7 @@
 </template>
 
 <script>
-import {getCharCountInStr} from "@/common/js/utils";
+import {resizeTextarea} from "@/common/js/utils";
 
 export default {
   name: "TestPlanCaseStepResultsItem",
@@ -80,32 +78,14 @@ export default {
       visible: true
     }
   },
-  mounted() {
+  watch: {
-    let step = this.testCase.steptResults;
+    'testCase.steptResults.length'() {
-    if (step) {
+      this.$nextTick(() => {
-      step.forEach(item => {
+        this.resizeTextarea();
-        let maxCount = Math.max(
-          getCharCountInStr(item.desc, '\n'),
-          getCharCountInStr(item.result, '\n'),
-          getCharCountInStr(item.actualResult, '\n')
-        );
-        let minRows = maxCount + 1;
-        minRows = minRows > 4 ? 4 : minRows;
-        this.$set(item, 'minRows', minRows);
       });
     }
   },
   methods: {
-    actualResultChange(item) {
-      let minRows = getCharCountInStr(item.actualResult, '\n') + 1;
-      if (minRows > item.minRows) {
-        this.$set(item, 'minRows', Math.min(minRows, 4));
-        this.visible = false;
-        this.$nextTick(() => {
-          this.visible = true;
-        });
-      }
-    },
     stepResultChange() {
       if (this.testCase.method === 'manual' || !this.testCase.method) {
         this.isFailure = this.testCase.steptResults.filter(s => {
@@ -115,6 +95,10 @@ export default {
         this.isFailure = false;
       }
     },
+    // 同一行文本框高度保持一致
+    resizeTextarea(scope) {
+      resizeTextarea(3, scope ? scope.$index : null);
+    }
   }
 }
 </script>
@@ -123,4 +107,14 @@ export default {
 /deep/ .table-edit-input .el-textarea__inner, .table-edit-input .el-input__inner {
   border-style: solid;
 }
+
+.el-table >>> td:nth-child(2) .cell,.el-table >>> td:nth-child(2),
+.el-table >>> td:nth-child(3) .cell,.el-table >>> td:nth-child(3),
+.el-table >>> td:nth-child(4) .cell,.el-table >>> td:nth-child(4) {
+  padding: 0;
+}
+
+.el-table >>> td:nth-child(1) .cell {
+  text-align: center;
+}
 </style>

frontend/src/common/js/utils.js

@@ -12,6 +12,7 @@ import {
 import {jsPDF} from "jspdf";
 import JSEncrypt from 'jsencrypt';
 import i18n from "@/i18n/i18n";
+import calcTextareaHeight from "element-ui/packages/input/src/calcTextareaHeight";
 
 export function hasRole(role) {
   let user = getCurrentUser();
@@ -187,14 +188,6 @@ export function lineToHump(name) {
   });
 }
 
-// 查找字符出现的次数
-export function getCharCountInStr(str, char) {
-  if (!str) return 0;
-  let regex = new RegExp(char, 'g'); // 使用g表示整个字符串都要匹配
-  let result = str.match(regex);
-  let count = !result ? 0 : result.length;
-  return count;
-}
 
 export function downloadFile(name, content) {
   const blob = new Blob([content]);
@@ -530,3 +523,39 @@ export function parseTag(data) {
     }
   });
 }
+
+/**
+ * 同一行的多个文本框高度保持一致
+ * 同时支持 autosize 的功能
+ * @param size 同一行中文本框的个数
+ * @param index 编辑行的下标
+ * 如果编辑某一行，则只调整某一行，提升效率
+ */
+export function resizeTextarea(size = 2, index) {
+  let textareaList = document.querySelectorAll('.sync-textarea .el-textarea__inner');
+  if (index || index === 0)  {
+    _resizeTextarea(index * size, size, textareaList);
+  } else {
+    for (let i = 0; i < textareaList.length; i+=size) {
+      _resizeTextarea(i, size, textareaList);
+    }
+  }
+}
+
+function _resizeTextarea(i, size, textareaList) {
+  // 查询同一行中文本框的最大高度
+  let maxHeight = 0;
+  for (let j = 0; j < size; j++) {
+    let cur = textareaList[i + j];
+    let curHeight = Number.parseInt(calcTextareaHeight(cur).height.replace(/[^\d]/g, ''));
+    maxHeight = Math.max(curHeight, maxHeight);
+  }
+
+  // 将同一行中的文本框设置为最大高度
+  for (let k = 0; k < size; k++) {
+    let cur = textareaList[i + k];
+    if (cur.clientHeight !== maxHeight) {
+      cur.style.height = maxHeight + 'px';
+    }
+  }
+}