refactor: 步骤描述格式优化 -bug=1005182 --user=陈建星 【测试计划】-步骤描述格式优化 https://www.tapd.cn/55049933/s/1043894

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

@@ -545,18 +545,6 @@ p {
 .head-bar {
   z-index: 999;
 }
-
-/*/deep/ .el-textarea.is-disabled .el-textarea__inner {
-  background-color: #FBFBFB !important;
-  color: #606266 !important;
-  height: 48px !important;
-}*/
-
-/*/deep/ .table-edit-input .el-textarea__inner, .table-edit-input .el-input__inner {
-  border-style: solid;
-  height: 30px !important;
-  min-height: 30px !important;
-}*/
 </style>
 
 <style>

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

@@ -1,6 +1,7 @@
 <template>
   <el-form-item class="result-item" :label-width="labelWidth">
     <el-table
+      v-if="visible"
       :data="testCase.steptResults"
       class="tb-edit"
       size="mini"
@@ -15,7 +16,7 @@
             size="mini"
             class="border-hidden"
             type="textarea"
-            :autosize="{ minRows: 1, maxRows: 4}"
+            :autosize="{ minRows: scope.row.minRows, maxRows: 4}"
             :disabled="true"
             v-model="scope.row.desc"/>
         </template>
@@ -26,7 +27,7 @@
             size="mini"
             class="border-hidden"
             type="textarea"
-            :autosize="{ minRows: 1, maxRows: 4}"
+            :autosize="{ minRows: scope.row.minRows, maxRows: 4}"
             :disabled="true"
             v-model="scope.row.result"/>
         </template>
@@ -37,9 +38,9 @@
             class="table-edit-input"
             size="mini"
             type="textarea"
-            :autosize="{ minRows: 1, maxRows: 4}"
+            :autosize="{ minRows: scope.row.minRows, maxRows: 4}"
-            :rows="2"
             :disabled="isReadOnly"
+            @blur="actualResultChange(scope.row)"
             v-model="scope.row.actualResult"
             :placeholder="$t('commons.input_content')"
             clearable/>
@@ -69,10 +70,42 @@
 </template>
 
 <script>
+import {getCharCountInStr} from "@/common/js/utils";
+
 export default {
   name: "TestPlanCaseStepResultsItem",
   props: ['testCase', 'isReadOnly', 'labelWidth'],
+  data() {
+    return {
+      visible: true
+    }
+  },
+  mounted() {
+    let step = this.testCase.steptResults;
+    if (step) {
+      step.forEach(item => {
+        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 => {

frontend/src/common/js/utils.js

@@ -260,6 +260,15 @@ 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]);
   if ("download" in document.createElement("a")) {