refactor(测试跟踪): 功能用例自定义字段表单顺序跟模板配置保持一致

--story=1011688 --user=陈建星 #23471 用例模板自定义字段多了之后显示很混乱 https://www.tapd.cn/55049933/s/1361654
2023-04-12 16:32:05 +08:00 · 2023-04-12 16:32:05 +08:00 · 92bfed4ddf
parent b655dbf856
commit 92bfed4ddf
5 changed files with 104 additions and 43 deletions
--- a/framework/sdk-parent/frontend/src/utils/custom_field.js
+++ b/framework/sdk-parent/frontend/src/utils/custom_field.js
@ -208,12 +208,7 @@ export function sortCustomFields(customFields) {
        // nothing
      }
    }
-    if (customFields[i].type === "richText") {
-      //循环到是0的位置就删除该元素0并且在arr末尾push进这个元素0，由于splice删除了该位置元素，所以i不用+1，下次循环仍然检查i位置的元素
-      customFields.push(customFields.splice(i, 1)[0]);
-    } else {
-      i++; //循环到不是0的位置就继续往后循环
-    }
+    i++; //循环到不是0的位置就继续往后循环
  }
  return customFields;
 }
--- a/project-management/backend/src/main/java/io/metersphere/base/mapper/ext/ExtCustomFieldTemplateMapper.xml
+++ b/project-management/backend/src/main/java/io/metersphere/base/mapper/ext/ExtCustomFieldTemplateMapper.xml
@ -24,6 +24,7 @@
        select id, field_id fieldId, template_id templateId, scene, required, `order`, default_value defaultValue, custom_data customData, `key`
        from custom_field_template
        where custom_field_template.template_id = #{templateId}
+        order by `order` asc
    </select>
    <select id="getCustomFieldByTemplateId" resultType="io.metersphere.dto.CustomFieldDao">
        select
--- a/test-track/frontend/src/business/common/CustomFieldFormItems.vue
+++ b/test-track/frontend/src/business/common/CustomFieldFormItems.vue
@ -0,0 +1,81 @@
+<template>
+  <div>
+    <el-row v-for="row in customFieldsRows" :key="row.id">
+      <el-col
+        :span="isRichTextRow(row) ? 21 : 7"
+        v-for="(item, index) in row"
+        :key="index"
+      >
+        <el-form-item
+          v-if="item"
+          :label-width="formLabelWidth"
+          :label="item.system ? $t(systemNameMap[item.name]) : item.name"
+          :prop="item.name"
+        >
+          <custom-filed-component
+            v-if="!loading"
+            :disabled="true"
+            :data="item"
+            :form="{}"
+            prop="defaultValue"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import CustomFiledComponent from "metersphere-frontend/src/components/new-ui/MsCustomFiledComponent";
+
+export default {
+  name: "CustomFieldFormItems",
+  components: {
+    CustomFiledComponent
+  },
+  props: {
+    fields: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    formLabelWidth: [String, Number],
+    systemNameMap: Object,
+    loading: Boolean
+  },
+  computed: {
+    customFieldsRows() {
+      // 自定义字段每三个一行显示，富文本框独占一行
+      let displayRows = [];
+      // 将 [{}, {}, {type: richText}, {}] 转化成 [[{}, {}], [{type: richText}], [{}]]
+      this.fields.forEach((item) => {
+        if (item.type === 'richText') {
+          displayRows.push([item]);
+        } else if(displayRows[displayRows.length - 1]) {
+          if (displayRows[displayRows.length - 1][0].type === 'richText') {
+            displayRows.push([item]);
+          } else {
+            displayRows[displayRows.length - 1].push(item);
+          }
+        } else {
+          displayRows.push([item]);
+        }
+      });
+      return displayRows;
+    }
+  },
+  methods: {
+    isRichTextRow(row) {
+      if (row && row.length === 1 && row[0].type === 'richText') {
+        return true;
+      }
+      return false;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/test-track/frontend/src/business/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
@ -101,31 +101,11 @@
                      v-if="isCustomFiledActive"
                      class="case-form"
                    >
-                      <el-row>
-                        <el-col
-                          :span="7"
-                          v-for="(item, index) in testCaseTemplate.customFields"
-                          :key="index"
-                        >
-                          <el-form-item
-                            :label-width="formLabelWidth"
-                            :label="
-                              item.system
-                                ? $t(systemNameMap[item.name])
-                                : item.name
-                            "
-                            :prop="item.name"
-                          >
-                            <custom-filed-component
-                              v-if="!loading"
-                              :disabled="true"
-                              :data="item"
-                              :form="{}"
-                              prop="defaultValue"
-                            />
-                          </el-form-item>
-                        </el-col>
-                      </el-row>
+                      <custom-field-form-items
+                        :form-label-width="formLabelWidth"
+                        :fields="testCaseTemplate.customFields"
+                        :loading="loading"
+                        :system-name-map="systemNameMap"/>
                    </el-form>

                    <form-rich-text-item
@ -250,10 +230,12 @@ import { testPlanEditStatus } from "@/api/remote/plan/test-plan";
 import { getTestTemplate } from "@/api/custom-field-template";
 import { checkProjectPermission } from "@/api/testCase";
 import {openCaseEdit, resetCaseSystemField} from "@/business/case/test-case";
+import CustomFieldFormItems from "@/business/common/CustomFieldFormItems";

 export default {
  name: "FunctionalTestCaseEdit",
  components: {
+    CustomFieldFormItems,
    StatusTableItem,
    TestPlanFunctionalExecute,
    TestPlanCaseStepResultsItem,
@ -512,8 +494,9 @@ export default {
        );
        this.testCaseTemplate.customFields.forEach((item) => {
          try {
-            if (typeof JSON.parse(item.defaultValue) !== "object") {
-              item.defaultValue = JSON.parse(item.defaultValue);
+            let v = JSON.parse(item.defaultValue);
+            if (!(v instanceof Object) || ['multipleSelect', 'checkbox', 'multipleMember', 'multipleInput'].indexOf(item.type) > -1) {
+              item.defaultValue = v;
            }
          } catch (e) {
            // nothing
--- a/test-track/frontend/src/business/review/view/components/TestReviewTestCaseEdit.vue
+++ b/test-track/frontend/src/business/review/view/components/TestReviewTestCaseEdit.vue
@ -37,15 +37,11 @@
              <el-form ref="customFieldForm"
                       v-if="isCustomFiledActive"
                       class="case-form">
-                <el-row>
-                  <el-col :span="7" v-for="(item, index) in testCaseTemplate.customFields" :key="index">
-                    <el-form-item :label="item.system ? $t(systemNameMap[item.name]) : item.name"
-                                  :prop="item.name"
-                                  :label-width="formLabelWidth">
-                      <custom-filed-component v-if="!loading" :disabled="true" :data="item" :form="{}" prop="defaultValue"/>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
+                <custom-field-form-items
+                  :form-label-width="formLabelWidth"
+                  :fields="testCaseTemplate.customFields"
+                  :loading="loading"
+                  :system-name-map="systemNameMap"/>
              </el-form>

              <form-rich-text-item :label-width="formLabelWidth" :disabled="true"
@ -132,10 +128,12 @@ import TestReviewTestCaseEditOperationBar from "@/business/review/view/component
 import TestReviewTestCaseEditHeaderBar from "@/business/review/view/components/TestReviewTestCaseEditHeaderBar";
 import CommentHistory from "@/business/review/view/components/commnet/CommentHistory";
 import {resetCaseSystemField} from "@/business/case/test-case";
+import CustomFieldFormItems from "@/business/common/CustomFieldFormItems";

 export default {
  name: "TestReviewTestCaseEdit",
  components: {
+    CustomFieldFormItems,
    CommentHistory,
    TestReviewTestCaseEditHeaderBar,
    TestReviewTestCaseEditOperationBar,
@ -349,7 +347,10 @@ export default {
        );
        this.testCaseTemplate.customFields.forEach((item) => {
          try {
-            item.defaultValue = JSON.parse(item.defaultValue);
+            let v = JSON.parse(item.defaultValue);
+            if (!(v instanceof Object) || ['multipleSelect', 'checkbox', 'multipleMember', 'multipleInput'].indexOf(item.type) > -1) {
+              item.defaultValue = v;
+            }
          } catch (e) {
            // nothing
          }