From 92bfed4ddfc2f4477a82b440f120c18b942ce2aa Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Wed, 12 Apr 2023 16:32:05 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):?=
 =?UTF-8?q?=20=E5=8A=9F=E8=83=BD=E7=94=A8=E4=BE=8B=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=AD=97=E6=AE=B5=E8=A1=A8=E5=8D=95=E9=A1=BA=E5=BA=8F?=
 =?UTF-8?q?=E8=B7=9F=E6=A8=A1=E6=9D=BF=E9=85=8D=E7=BD=AE=E4=BF=9D=E6=8C=81?=
 =?UTF-8?q?=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--story=1011688 --user=陈建星 #23471 用例模板自定义字段多了之后显示很混乱 https://www.tapd.cn/55049933/s/1361654
---
 .../frontend/src/utils/custom_field.js        |  7 +-
 .../ext/ExtCustomFieldTemplateMapper.xml      |  1 +
 .../business/common/CustomFieldFormItems.vue  | 81 +++++++++++++++++++
 .../functional/FunctionalTestCaseEdit.vue     | 37 +++------
 .../components/TestReviewTestCaseEdit.vue     | 21 ++---
 5 files changed, 104 insertions(+), 43 deletions(-)
 create mode 100644 test-track/frontend/src/business/common/CustomFieldFormItems.vue

diff --git a/framework/sdk-parent/frontend/src/utils/custom_field.js b/framework/sdk-parent/frontend/src/utils/custom_field.js
index a53d061303..cf3a63de37 100644
--- 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;
 }
diff --git 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
index a2fe89266f..11de3a27bb 100644
--- 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
diff --git a/test-track/frontend/src/business/common/CustomFieldFormItems.vue b/test-track/frontend/src/business/common/CustomFieldFormItems.vue
new file mode 100644
index 0000000000..b3ef6458d7
--- /dev/null
+++ 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>
diff --git a/test-track/frontend/src/business/plan/view/comonents/functional/FunctionalTestCaseEdit.vue b/test-track/frontend/src/business/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
index 45ee089d69..99f29817ec 100644
--- 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
diff --git a/test-track/frontend/src/business/review/view/components/TestReviewTestCaseEdit.vue b/test-track/frontend/src/business/review/view/components/TestReviewTestCaseEdit.vue
index 5b480a4620..ed0ba3fcb1 100644
--- 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
           }