refactor(功能用例): 用例详情富文本框自定义字段，从右侧基础信息移到左侧

--story=1015721 --user=陈建星 【三星】测试用例模板：自定义字段类型为富文本类型，功能测试用例明细中，支持放在左侧，和默认的字段（前置条件和步骤描述）展示形式一样 https://www.tapd.cn/55049933/s/1566955

test-track/frontend/src/business/case/components/BaseEditItemComponent.vue

@@ -119,10 +119,14 @@
           </span>
           <span v-else>
              <ms-mark-down-text
+               v-if="contentObject.content.defaultValue"
                class="rich-text"
                prop="defaultValue"
                :disabled="true"
                :data="contentObject.content"/>
+               <div class="empty" v-else @click="handleReadTextClick">
+                {{ $t("case.none") }}
+              </div>
           </span>
         </div>
         <div class="empty" v-else @click="handleReadTextClick">

test-track/frontend/src/business/case/components/TestCaseEdit.vue

@@ -224,6 +224,9 @@
           :comments.sync="comments"
           @openComment="openComment"
           @getComments="getComments"
+          :test-case-template="testCaseTemplate"
+          :custom-field-form="customFieldForm"
+          :custom-field-rules="customFieldRules"
           :version-enable="versionEnable"
           :default-open="richTextDefaultOpen"
           ref="otherInfo"
@@ -1589,6 +1592,9 @@ export default {
       if (!this.$refs.testCaseBaseInfo.validateWithTip()) {
         isValidate = false;
       }
+      if (!this.$refs.otherInfo.validateForm()) {
+        isValidate = false;
+      }
       return isValidate;
     },
     async createVersion(row) {

test-track/frontend/src/business/case/components/case/CaseCustomFiledFormRow.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row v-for="i in customFieldRowNums" :key="i">
-      <span class="custom-item" v-for="(item, j) in issueTemplate.customFields" :key="j">
+      <span class="custom-item" v-for="(item, j) in customFields" :key="j">
         <template v-if="j >= (i - 1) * 3 && j < (i - 1) * 3 + 3">
           <div class="custom-row case-wrap">
             <div class="case-title-wrap">
@@ -89,9 +89,14 @@ export default {
     projectId: String
   },
   computed: {
+    customFields() {
+      // 基本信息不显示富文本的自定义字段
+      return this.issueTemplate && this.issueTemplate.customFields ?
+        this.issueTemplate.customFields.filter((item) => item.type !== 'richText') : [];
+    },
     customFieldRowNums() {
-      let size = this.issueTemplate.customFields
+      let size = this.customFields
-        ? this.issueTemplate.customFields.length
+        ? this.customFields.length
         : 0;
       let val = parseInt(size / 3);
       return size % 3 === 0 ? val : val + 1;

test-track/frontend/src/business/case/components/case/CaseDetailComponent.vue

@@ -161,6 +161,55 @@
         </div>
       </div>
 
+      <el-form
+        :model="customFieldForm"
+        :rules="customFieldRules"
+        ref="textCustomFieldForm"
+        label-position="right"
+        size="small"
+        class="case-form case-padding"
+      >
+        <!-- 富文本自定义字段 -->
+        <div class="remark-row" v-for="item in richTextCustomFields">
+          <div class="remark-name case-title-wrap">
+            <div class="name title-wrap">
+              {{ item.name }}
+            </div>
+            <div class="required required-item" v-if="item.required"></div>
+          </div>
+          <div class="content-wrap">
+            <div class="opt-row">
+              <base-edit-item-component
+                :editable="editable"
+                :auto-save="!readOnly"
+                trigger="hover"
+                :contentObject="{
+                  content: item,
+                  contentType: 'CUSTOM',
+                }"
+                :model="form"
+                :rules="rules"
+                :project-id="projectId"
+              >
+                <template v-slot:content="{ onClick, hoverEditable }">
+                  <div :class="hoverEditable ? 'selectHover' : ''">
+                    <el-form-item :prop="item.name">
+                      <ms-custom-filed-component
+                        :data="item"
+                        :form="customFieldForm"
+                        prop="defaultValue"
+                        :project-id="projectId"
+                        @onClick="onClick"
+                      />
+                    </el-form-item>
+                  </div>
+                </template>
+              </base-edit-item-component>
+            </div>
+          </div>
+        </div>
+      </el-form>
+
       <!-- remark -->
       <div class="remark-row">
         <div class="remark-name case-title-wrap">
@@ -219,6 +268,7 @@
         </div>
       </div>
     </el-form>
+
   </div>
 </template>
 <script>
@@ -228,6 +278,7 @@ import TestCaseStepItem from "@/business/case/components/case/CaseStepItem";
 import StepChangeItem from "@/business/case/components/case/CaseStepChange";
 import CaseAttachmentComponent from "@/business/case/components/case/CaseAttachmentComponent";
 import MsFileBatchMove from "metersphere-frontend/src/components/environment/commons/variable/FileBatchMove";
+import MsCustomFiledComponent from "metersphere-frontend/src/components/new-ui/MsCustomFiledComponent";
 
 export default {
   name: "CaseDetailComponent",
@@ -237,6 +288,7 @@ export default {
     TestCaseStepItem,
     StepChangeItem,
     CaseAttachmentComponent,
+    MsCustomFiledComponent
   },
   data() {
     return {
@@ -271,7 +323,22 @@ export default {
     isCopy: Boolean,
     editableState: Boolean,
     isPublicShow: Boolean,
-    isReadonlyUser: Boolean
+    isReadonlyUser: Boolean,
+    testCaseTemplate: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    customFieldForm: Object,
+    customFieldRules: Object,
+  },
+  computed: {
+    richTextCustomFields() {
+      // 基本信息不显示富文本的自定义字段
+      return this.testCaseTemplate && this.testCaseTemplate.customFields ?
+        this.testCaseTemplate.customFields.filter((item) => item.type == 'richText') : [];
+    },
   },
   methods: {
     getUploadFiles() {
@@ -312,13 +379,18 @@ export default {
     handleSaveEvent() {
       //触发保存 TODO
     },
-    valideForm() {
+    validateForm() {
       let isValidate = true;
       this.$refs["caseDetailForm"].validate((valid) => {
         if (!valid) {
           isValidate = false;
         }
       });
+      this.$refs["textCustomFieldForm"].validate((valid) => {
+        if (!valid) {
+          isValidate = false;
+        }
+      });
       return isValidate;
     },
     getFileMetaData(id) {

test-track/frontend/src/business/case/components/case/CaseEditInfoComponent.vue

@@ -27,6 +27,9 @@
                     :form="form"
                     :richTextDefaultOpen="richTextDefaultOpen"
                     :formLabelWidth="formLabelWidth"
+                    :test-case-template="testCaseTemplate"
+                    :custom-field-form="customFieldForm"
+                    :custom-field-rules="customFieldRules"
                 ></case-detail-component>
               </div>
             </el-scrollbar>
@@ -188,6 +191,9 @@
             :editable-state="editableState"
             :form="form"
             :richTextDefaultOpen="richTextDefaultOpen"
+            :test-case-template="testCaseTemplate"
+            :custom-field-form="customFieldForm"
+            :custom-field-rules="customFieldRules"
             :formLabelWidth="formLabelWidth"
             ref="testCaseBaseInfo"
         ></case-detail-component>
@@ -246,7 +252,10 @@ export default {
     "edit",
     "editableState",
     "isPublicShow",
-    "isReadonlyUser"
+    "isReadonlyUser",
+    "testCaseTemplate",
+    "customFieldForm",
+    "customFieldRules"
   ],
   data() {
     return {
@@ -332,7 +341,7 @@ export default {
     validateForm() {
       let isValidate = true;
       if (this.$refs.testCaseBaseInfo) {
-        isValidate = this.$refs["testCaseBaseInfo"].valideForm();
+        isValidate = this.$refs["testCaseBaseInfo"].validateForm();
       }
       return isValidate;
     },