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

--bug=1018313 --user=陈建星 【测试跟踪】测试用例-步骤描述-文案优化 https://www.tapd.cn/55049933/s/1265874

test-track/frontend/src/business/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 "@/business/utils/sdk-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>

test-track/frontend/src/business/utils/sdk-utils.js

@@ -1,4 +1,5 @@
-export {operationConfirm, removeGoBackListener, handleCtrlSEvent, byteToSize, getTypeByFileName, strMapToObj, getUUID, windowPrint} from "metersphere-frontend/src/utils";
+export {operationConfirm, removeGoBackListener, handleCtrlSEvent, byteToSize, resizeTextarea,
+  getTypeByFileName, strMapToObj, getUUID, windowPrint} from "metersphere-frontend/src/utils";
 export {parseCustomFilesForList, getCustomFieldFilter, buildBatchParam} from "metersphere-frontend/src/utils/tableUtils";
 export {getCurrentProjectID, getCurrentWorkspaceId, getCurrentUser} from "metersphere-frontend/src/utils/token";
 export {hasLicense, hasPermissions, hasPermission} from "metersphere-frontend/src/utils/permission";