refactor(测试跟踪): 创建用例和缺陷的时候富文本框默认为编辑模式

--bug=1013698 --user=陈建星 【测试跟踪】富文本框默认改成编辑状态 https://www.tapd.cn/55049933/s/1175991

frontend/src/business/components/common/components/form/CustomFiledFormItem.vue

@@ -6,13 +6,21 @@
         <el-col :span="8" v-if="item.type !== 'richText'">
           <el-form-item :label="item.system ? $t(systemNameMap[item.name]) : item.name" :prop="item.name"
                         :label-width="formLabelWidth">
-            <custom-filed-component :data="item" :form="form" prop="defaultValue" :disabled="isPublic"/>
+            <custom-filed-component
+              prop="defaultValue"
+              :data="item"
+              :form="form"
+              :default-open="defaultOpen"
+              :disabled="isPublic"/>
           </el-form-item>
         </el-col>
         <div v-else>
           <el-col :span="24">
-            <el-form-item :label="item.system ? $t(systemNameMap[item.name]) : item.name" :prop="item.name"
+            <el-form-item
-                          :label-width="formLabelWidth">
+              :label="item.system ? $t(systemNameMap[item.name]) : item.name"
+              :prop="item.name"
+              :default-open="defaultOpen"
+              :label-width="formLabelWidth">
                <custom-filed-component :data="item" :form="form" prop="defaultValue"/>
             </el-form-item>
           </el-col>
@@ -44,7 +52,13 @@ export default {
       default() {
         return false;
       }
-    }
+    },
+    defaultOpen: {
+      type: String,
+      default() {
+        return 'preview';
+      }
+    },
   },
   computed: {
     customFieldRowNums() {

frontend/src/business/components/common/components/form/CustomFiledFormRow.vue

@@ -6,7 +6,13 @@
         <el-col :span="24">
           <el-form-item :label="item.system ? $t(systemNameMap[item.name]) : item.name" :prop="item.name"
                         :label-width="formLabelWidth">
-            <custom-filed-component :data="item" :form="form" prop="defaultValue" :disabled="(item.type !== 'richText' && isPublic) || disabled"/>
+            <custom-filed-component
+              :data="item"
+              :form="form"
+              prop="defaultValue"
+              :disabled="(item.type !== 'richText' && isPublic) || disabled"
+              :default-open="defaultOpen"
+            />
           </el-form-item>
         </el-col>
       </span>
@@ -42,7 +48,13 @@ export default {
       default() {
         return false;
       }
-    }
+    },
+    defaultOpen: {
+      type: String,
+      default() {
+        return 'preview';
+      }
+    },
   },
   computed: {
     customFieldRowNums() {

frontend/src/business/components/project/template/CustomFiledComponent.vue

@@ -99,6 +99,7 @@
     <ms-mark-down-text v-else-if="data.type === 'richText'"
                        :prop="prop"
                        @change="handleChange"
+                       :default-open="defaultOpen"
                        :data="data" :disabled="disabled"/>
 
     <el-input class="custom-with"
@@ -124,7 +125,8 @@ export default {
     'data',
     'prop',
     'form',
-    'disabled'
+    'disabled',
+    'defaultOpen'
   ],
   data() {
     return {

frontend/src/business/components/track/case/components/FormRichTextItem.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form-item :disable="true" :label="title" :prop="prop" :label-width="labelWidth">
-    <ms-mark-down-text :prop="prop" :data="data" :disabled="disabled"/>
+    <ms-mark-down-text :prop="prop" :data="data" :disabled="disabled" :default-open="defaultOpen"/>
   </el-form-item>
 </template>
 
@@ -9,7 +9,19 @@ import MsMarkDownText from "@/business/components/track/case/components/MsMarkDo
 export default {
   name: "FormRichTextItem",
   components: {MsMarkDownText},
-  props: ['data', 'title', 'prop', 'disabled', 'labelWidth']
+  props: {
+    data: Object,
+    prop: String,
+    disabled: Boolean,
+    title: String,
+    defaultOpen: {
+      type: String,
+      default() {
+        return 'preview';
+      }
+    },
+    labelWidth: [String, Number]
+  }
 }
 </script>
 

frontend/src/business/components/track/case/components/MsMarkDownText.vue

@@ -1,5 +1,5 @@
 <template>
-  <mavon-editor :id="id" :editable="!disabled" @imgAdd="imgAdd" :default-open="defaultOpen"
+  <mavon-editor :id="id" :editable="!disabled" @imgAdd="imgAdd" :default-open="defaultOpenValue"
                 :xss-options="xssOptions" :style="{'min-height': customMinHeight + 'px'}"
                 @change="$emit('change')"
                 :subfield="false" :toolbars="toolbars" :language="language" :toolbarsFlag="!disabled"
@@ -18,6 +18,12 @@ export default {
     data: Object,
     prop: String,
     disabled: Boolean,
+    defaultOpen: {
+      type: String,
+      default() {
+        return 'preview';
+      }
+    },
     autoReview: {
       type: Boolean,
       default() {
@@ -110,7 +116,7 @@ export default {
         },
         stripIgnoreTagBody: true
       },
-      defaultOpen: 'preview'
+      defaultOpenValue: 'preview'
     }
   },
 
@@ -134,28 +140,41 @@ export default {
       }
     }
   },
+  watch: {
+    defaultOpen() {
+      if (this.defaultOpen) {
+        this.defaultOpenValue = this.defaultOpen;
+      }
+    }
+  },
   mounted() {
     if (!this.disabled) {
       // 点击编辑，失去焦点展示
       let el = document.getElementById(this.id);
       if (!this.autoReview) {
-        this.defaultOpen = null;
+        this.defaultOpenValue = null;
+      }
+      if (this.defaultOpen) {
+        this.defaultOpenValue = this.defaultOpen;
       }
       if (el) {
         el.addEventListener('click', () => {
           let imagePreview = el.getElementsByClassName('v-note-img-wrapper');
           if (imagePreview.length > 0) { // 图片预览的时候不切换到编辑模式
-            if (this.autoReview)
+            if (this.autoReview) {
-              this.defaultOpen = 'preview';
+              this.defaultOpenValue = 'preview';
+            }
           } else {
-            if (this.autoReview)
+            if (this.autoReview) {
-              this.defaultOpen = null;
+              this.defaultOpenValue = null;
+            }
           }
         });
         let input = el.getElementsByClassName('auto-textarea-input');
         input[0].addEventListener('blur', () => {
-          if (this.autoReview)
+          if (this.autoReview) {
-            this.defaultOpen = 'preview';
+            this.defaultOpenValue = 'preview';
+          }
         });
       }
     }

frontend/src/business/components/track/case/components/TestCaseBaseInfo.vue

@@ -50,6 +50,7 @@
                class="case-form">
         <custom-filed-form-row :form="customFieldForm"
                                :disabled="readOnly"
+                               :default-open="defaultOpen"
                                :issue-template="testCaseTemplate"/>
       </el-form>
 
@@ -112,6 +113,7 @@ export default {
     customFieldForm: Object,
     customFieldRules: Object,
     testCaseTemplate: Object,
+    defaultOpen: String
   },
   computed: {
     isCustomNum() {

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

@@ -16,6 +16,7 @@
               :custom-field-form="customFieldForm"
               :custom-field-rules="customFieldRules"
               :test-case-template="testCaseTemplate"
+              :default-open="richTextDefaultOpen"
               ref="testCaseBaseInfo"
             />
           </ms-aside-container>
@@ -70,17 +71,34 @@
               </div>
               <ms-form-divider :title="$t('test_track.case.step_info')"/>
 
-              <form-rich-text-item :disabled="readOnly" :label-width="formLabelWidth"
+              <form-rich-text-item :disabled="readOnly"
-                                   :title="$t('test_track.case.prerequisite')" :data="form" prop="prerequisite"/>
+                                   :label-width="formLabelWidth"
+                                   :title="$t('test_track.case.prerequisite')"
+                                   :data="form"
+                                   :default-open="richTextDefaultOpen"
+                                   prop="prerequisite"/>
 
               <step-change-item :label-width="formLabelWidth" :form="form"/>
-              <form-rich-text-item :disabled="readOnly" :label-width="formLabelWidth" v-if="form.stepModel === 'TEXT'"
+              <form-rich-text-item  v-if="form.stepModel === 'TEXT'"
-                                   :title="$t('test_track.case.step_desc')" :data="form" prop="stepDescription"/>
+                                    prop="stepDescription"
-              <form-rich-text-item :disabled="readOnly" :label-width="formLabelWidth" v-if="form.stepModel === 'TEXT'"
+                                    :disabled="readOnly"
-                                   :title="$t('test_track.case.expected_results')" :data="form" prop="expectedResult"/>
+                                    :label-width="formLabelWidth"
+                                    :title="$t('test_track.case.step_desc')"
+                                    :data="form"
+                                    :default-open="richTextDefaultOpen"/>
 
-              <test-case-step-item :label-width="formLabelWidth" v-if="form.stepModel === 'STEP' || !form.stepModel"
+              <form-rich-text-item  v-if="form.stepModel === 'TEXT'"
-                                   :form="form" :read-only="readOnly"/>
+                                    prop="expectedResult"
+                                    :disabled="readOnly"
+                                    :label-width="formLabelWidth"
+                                    :title="$t('test_track.case.expected_results')"
+                                    :data="form"
+                                    :default-open="richTextDefaultOpen"/>
+
+              <test-case-step-item v-if="form.stepModel === 'STEP' || !form.stepModel"
+                                   :label-width="formLabelWidth"
+                                   :form="form"
+                                   :read-only="readOnly"/>
 
               <ms-form-divider :title="$t('test_track.case.other_info')"/>
 
@@ -91,6 +109,7 @@
                                          @openComment="openComment"
                                          :is-click-attachment-tab.sync="isClickAttachmentTab"
                                          :version-enable="versionEnable"
+                                         :default-open="richTextDefaultOpen"
                                          ref="otherInfo"/>
               <test-case-comment :case-id="form.id"
                                  @getComments="getComments" ref="testCaseComment"/>
@@ -315,6 +334,9 @@ export default {
     isCustomNum() {
       return this.$store.state.currentProjectIsCustomNum;
     },
+    richTextDefaultOpen() {
+      return this.type === 'edit' ? 'preview' : 'edit';
+    },
     readOnly() {
       const {rowClickHasPermission} = this.currentTestCaseInfo;
       if (rowClickHasPermission !== undefined) {

frontend/src/business/components/track/case/components/TestCaseEditOtherInfo.vue

@@ -2,7 +2,12 @@
   <el-tabs class="other-info-tabs" v-loading="result.loading" v-model="tabActiveName">
     <el-tab-pane :label="$t('commons.remark')" name="remark">
       <el-row>
-        <form-rich-text-item class="remark-item" :disabled="readOnly" :data="form" prop="remark"/>
+        <form-rich-text-item
+          class="remark-item"
+          :disabled="readOnly"
+          :data="form"
+          :default-open="defaultOpen"
+          prop="remark"/>
       </el-row>
     </el-tab-pane>
     <el-tab-pane :label="$t('test_track.case.relate_test')" name="relateTest">
@@ -134,7 +139,10 @@ export default {
     ReviewCommentItem,
     FormRichTextItem, TestCaseIssueRelate, TestCaseAttachment, MsRichText, TestCaseRichText
   },
-  props: ['form', 'labelWidth', 'caseId', 'readOnly', 'projectId', 'isTestPlan', 'planId', 'versionEnable', 'isCopy', 'isTestPlanEdit', 'type', 'comments', 'isClickAttachmentTab'],
+  props: ['form', 'labelWidth', 'caseId', 'readOnly', 'projectId', 'isTestPlan', 'planId', 'versionEnable', 'isCopy', 'isTestPlanEdit',
+    'type', 'comments', 'isClickAttachmentTab',
+    'defaultOpen'
+  ],
   data() {
     return {
       result: {},

frontend/src/business/components/track/issue/IssueEditDetail.vue

@@ -29,7 +29,11 @@
 
         <!-- 自定义字段 -->
         <el-form :model="customFieldForm" :rules="customFieldRules" ref="customFieldForm" class="case-form">
-          <custom-filed-form-item :form="customFieldForm" :form-label-width="formLabelWidth" :issue-template="issueTemplate"/>
+          <custom-filed-form-item
+            :form="customFieldForm"
+            :default-open="richTextDefaultOpen"
+            :form-label-width="formLabelWidth"
+            :issue-template="issueTemplate"/>
         </el-form>
 
         <el-row v-if="jiraTransitions">
@@ -45,7 +49,12 @@
           </el-col>
         </el-row>
 
-        <form-rich-text-item v-if="!enableThirdPartTemplate" :title="$t('custom_field.issue_content')" :data="form" prop="description"/>
+        <form-rich-text-item
+          v-if="!enableThirdPartTemplate"
+          :title="$t('custom_field.issue_content')"
+          :data="form"
+          :default-open="richTextDefaultOpen"
+          prop="description"/>
 
         <el-row v-if="!enableThirdPartTemplate" class="custom-field-row">
           <el-col :span="8" v-if="hasTapdId">
@@ -231,7 +240,8 @@ export default {
         subfield: false, // 单双栏模式
         preview: false, // 预览
       },
-      comments: []
+      comments: [],
+      richTextDefaultOpen: 'preview'
     };
   },
   props: {
@@ -278,6 +288,7 @@ export default {
     open(data, type) {
       this.result.loading = true;
       this.type = type;
+      this.richTextDefaultOpen = this.type === 'edit' ? 'preview' : 'edit';
       this.$nextTick(() => {
         getIssuePartTemplateWithProject((template, project) => {
           this.currentProject = project;

frontend/src/business/components/track/review/commom/ReviewComment.vue

@@ -17,7 +17,13 @@
     <div>
       <div class="editors_div_style">
         <div id="editorsDiv">
-          <ms-mark-down-text prop="description" :data="form" :toolbars="toolbars" ref="md" custom-min-height="220"/>
+          <ms-mark-down-text
+            default-open="edit"
+            prop="description"
+            custom-min-height="220"
+            :data="form"
+            :toolbars="toolbars"
+            ref="md"/>
         </div>
       </div>