From 73a24895a70a4ae42db95974a52be1cc7c2860dc Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Tue, 22 Dec 2020 15:21:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):=20?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92=E9=A1=B5=E9=9D=A2=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E8=AF=84=E8=AE=BA=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../track/case/components/CaseComment.vue     |   2 +-
 .../track/case/components/TestCaseDetail.vue  |  20 +-
 .../track/case/components/TestCaseEdit.vue    |  50 +-
 .../track/case/components/TestCaseList.vue    |   1 -
 .../functional/FunctionalTestCaseEdit.vue     | 630 +++++++++---------
 5 files changed, 375 insertions(+), 328 deletions(-)

diff --git a/frontend/src/business/components/track/case/components/CaseComment.vue b/frontend/src/business/components/track/case/components/CaseComment.vue
index 8f4d74f703..cd10488fb9 100644
--- a/frontend/src/business/components/track/case/components/CaseComment.vue
+++ b/frontend/src/business/components/track/case/components/CaseComment.vue
@@ -5,7 +5,7 @@
       <i class="el-icon-refresh" @click="getComments()"
          style="margin-left:10px;font-size: 14px; cursor: pointer"/>
     </template>
-    <div class="comment-list" style="height: 500px; overflow: auto;">
+    <div style="height: 100%;overflow:auto;">
       <review-comment-item v-for="(comment,index) in comments"
                            :key="index"
                            :comment="comment"
diff --git a/frontend/src/business/components/track/case/components/TestCaseDetail.vue b/frontend/src/business/components/track/case/components/TestCaseDetail.vue
index 0873fa9a40..e98a78a015 100644
--- a/frontend/src/business/components/track/case/components/TestCaseDetail.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="5">
-    <el-col :span="16">
+    <el-col :span="15">
       <el-card class="case-detail-form-card">
         <el-form :model="form" ref="caseFrom" v-loading="result.loading">
 
@@ -11,13 +11,13 @@
                 :label="$t('test_track.case.name')"
                 :label-width="formLabelWidth"
                 prop="name">
-                <el-input class="case-name" :disabled="readOnly" v-model="testCase.name"></el-input>
+                <el-input :disabled="readOnly" v-model="testCase.name"></el-input>
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item :label="$t('test_track.case.module')" :label-width="formLabelWidth" prop="module">
-                <el-input class="case-name" :disabled="readOnly" v-model="testCase.nodePath"></el-input>
+                <el-input :disabled="readOnly" v-model="testCase.nodePath"></el-input>
               </el-form-item>
             </el-col>
           </el-row>
@@ -156,8 +156,8 @@
         </el-form>
       </el-card>
     </el-col>
-    <el-col :span="8">
-      <case-comment :case-id="testCaseId" :read-only="true"/>
+    <el-col :span="9">
+      <case-comment :case-id="testCaseId" :read-only="true" class="case-detail-comment"/>
     </el-col>
   </el-row>
 
@@ -193,7 +193,7 @@ export default {
         remark: '',
       },
       workspaceId: '',
-      formLabelWidth: "120px",
+      formLabelWidth: "80px",
 
       isStepTableAlive: true,
       methodOptions: [
@@ -223,6 +223,12 @@ export default {
 }
 
 .case-detail-form-card >>> .el-card__body {
-  padding: 20px 28px;
+  padding: 20px 0;
+}
+
+.case-detail-comment {
+  min-width: 320px;
+  height: 600px;
+  overflow: auto;
 }
 </style>
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index fd02887d7b..5125544200 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -3,13 +3,13 @@
   <el-dialog :close-on-click-modal="false" class="case-dialog"
              @close="close"
              :title="operationType == 'edit' ? ( readOnly ? $t('test_track.case.view_case') : $t('test_track.case.edit_case')) : $t('test_track.case.create')"
-             :visible.sync="dialogFormVisible" width="88%">
+             :visible.sync="dialogFormVisible" width="85%">
 
     <el-row :gutter="10">
       <div>
         <el-col :span="17">
-          <el-card>
-            <el-form :model="form" :rules="rules" ref="caseFrom" v-loading="result.loading">
+          <el-card class="container">
+            <el-form :model="form" :rules="rules" ref="caseFrom" v-loading="result.loading" class="case-form">
 
               <el-row>
                 <el-col :span="8" :offset="1">
@@ -170,7 +170,7 @@
                           clearable/>
                       </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.input_content')" min-width="20%">
+                    <el-table-column :label="$t('commons.input_content')" min-width="25%">
                       <template v-slot:default="scope">
                         <el-button
                           type="primary"
@@ -237,22 +237,20 @@
                 </el-col>
               </el-row>
 
-              <el-row style="float: right; margin-bottom: 10px;">
-                <el-switch v-if="operationType == 'add'"
-                           v-model="isCreateContinue"
-                           :active-text="$t('test_track.case.save_create_continue')">
-                </el-switch>
-                <ms-dialog-footer v-if="!readOnly"
-                                  @cancel="dialogFormVisible = false"
-                                  @confirm="saveCase"/>
-              </el-row>
-
             </el-form>
-
+            <el-row style="float: right; margin-bottom: 20px;margin-top: 20px">
+              <el-switch v-if="operationType == 'add'"
+                         v-model="isCreateContinue"
+                         :active-text="$t('test_track.case.save_create_continue')">
+              </el-switch>
+              <ms-dialog-footer v-if="!readOnly"
+                                @cancel="dialogFormVisible = false"
+                                @confirm="saveCase"/>
+            </el-row>
           </el-card>
         </el-col>
         <el-col :span="7">
-          <case-comment :case-id="testCase ? testCase.id : ''"/>
+          <case-comment :case-id="testCase ? testCase.id : ''" class="comment-card"/>
         </el-col>
       </div>
     </el-row>
@@ -712,8 +710,28 @@ export default {
   width: 194px;
 }
 
+.container {
+  height: 100vh;
+}
+
+.case-form {
+  height: 95%;
+  overflow: auto;
+}
+
 .case-dialog >>> .el-dialog__body {
   padding: 0 20px 10px 20px;
 }
 
+.container >>> .el-card__body {
+  height: calc(100vh - 120px);
+}
+
+.comment-card >>> .el-card__header {
+  padding: 27px 20px;
+}
+
+.comment-card >>> .el-card__body {
+  height: calc(100vh - 120px);
+}
 </style>
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index 9ccf7fb60b..7062407e14 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -62,7 +62,6 @@
             <el-popover
               placement="right-end"
               :title="$t('test_track.case.view_case')"
-              width="70%"
               trigger="hover"
             >
               <test-case-detail v-if="currentCaseId === scope.row.id" :test-case-id="currentCaseId"/>
diff --git a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
index a321dcedb1..28959073c6 100644
--- a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
@@ -10,338 +10,348 @@
     v-loading="result.loading">
 
     <template v-slot:default="scope">
-      <div class="container">
+      <el-row :gutter="10">
+        <div class="container">
+          <el-col :span="17">
+            <el-card>
+              <el-scrollbar>
 
-        <el-scrollbar>
+                <el-header>
 
-          <el-header>
+                  <el-row type="flex" class="head-bar">
 
-            <el-row type="flex" class="head-bar">
+                    <el-col :span="12">
+                      <el-button plain size="mini"
+                                 icon="el-icon-back"
+                                 @click="cancel">{{ $t('test_track.return') }}
+                      </el-button>
+                    </el-col>
 
-              <el-col :span="12">
-                <el-button plain size="mini"
-                           icon="el-icon-back"
-                           @click="cancel">{{ $t('test_track.return') }}
-                </el-button>
-              </el-col>
-
-              <el-col :span="11" class="head-right">
+                    <el-col :span="11" class="head-right">
                 <span class="head-right-tip" v-if="index + 1 === testCases.length">
                   {{ $t('test_track.plan_view.pre_case') }} : {{
                     testCases[index - 1] ? testCases[index - 1].name : ''
                   }}
                 </span>
-                <span class="head-right-tip" v-if="index + 1 !== testCases.length">
+                      <span class="head-right-tip" v-if="index + 1 !== testCases.length">
                   {{ $t('test_track.plan_view.next_case') }} : {{
-                    testCases[index + 1] ? testCases[index + 1].name : ''
-                  }}
+                          testCases[index + 1] ? testCases[index + 1].name : ''
+                        }}
                 </span>
 
-                <el-button plain size="mini" icon="el-icon-arrow-up"
-                           :disabled="index + 1 <= 1"
-                           @click="handlePre()"/>
-                <span>  {{ index + 1 }}/{{ testCases.length }} </span>
-                <el-button plain size="mini" icon="el-icon-arrow-down"
-                           :disabled="index + 1 >= testCases.length"
-                           @click="handleNext()"/>
-              </el-col>
+                      <el-button plain size="mini" icon="el-icon-arrow-up"
+                                 :disabled="index + 1 <= 1"
+                                 @click="handlePre()"/>
+                      <span>  {{ index + 1 }}/{{ testCases.length }} </span>
+                      <el-button plain size="mini" icon="el-icon-arrow-down"
+                                 :disabled="index + 1 >= testCases.length"
+                                 @click="handleNext()"/>
+                    </el-col>
 
-            </el-row>
+                  </el-row>
 
-            <el-row style="margin-top: 0;">
-              <el-col>
-                <el-divider content-position="left">{{ testCase.name }}</el-divider>
-              </el-col>
-            </el-row>
+                  <el-row style="margin-top: 0;">
+                    <el-col>
+                      <el-divider content-position="left">{{ testCase.name }}</el-divider>
+                    </el-col>
+                  </el-row>
 
-          </el-header>
+                </el-header>
 
-          <div class="case_container">
-            <el-row>
-              <el-col :span="4" :offset="1">
-                <span class="cast_label">{{ $t('test_track.case.priority') }}：</span>
-                <span class="cast_item">{{ testCase.priority }}</span>
-              </el-col>
-              <el-col :span="5">
-                <span class="cast_label">{{ $t('test_track.case.case_type') }}：</span>
-                <span class="cast_item" v-if="testCase.type === 'functional'">{{ $t('commons.functional') }}</span>
-                <span class="cast_item" v-if="testCase.type === 'performance'">{{ $t('commons.performance') }}</span>
-                <span class="cast_item" v-if="testCase.type === 'api'">{{ $t('commons.api') }}</span>
-              </el-col>
-              <el-col :span="13">
-                <test-plan-test-case-status-button class="status-button"
-                                                   @statusChange="statusChange"
-                                                   :is-read-only="isReadOnly"
-                                                   :is-failure="isFailure"
-                                                   :status="testCase.status"/>
-              </el-col>
-            </el-row>
+                <div class="case_container">
+                  <el-row>
+                    <el-col :span="4" :offset="1">
+                      <span class="cast_label">{{ $t('test_track.case.priority') }}：</span>
+                      <span class="cast_item">{{ testCase.priority }}</span>
+                    </el-col>
+                    <el-col :span="5">
+                      <span class="cast_label">{{ $t('test_track.case.case_type') }}：</span>
+                      <span class="cast_item" v-if="testCase.type === 'functional'">{{ $t('commons.functional') }}</span>
+                      <span class="cast_item" v-if="testCase.type === 'performance'">{{ $t('commons.performance') }}</span>
+                      <span class="cast_item" v-if="testCase.type === 'api'">{{ $t('commons.api') }}</span>
+                    </el-col>
+                    <el-col :span="10">
+                      <test-plan-test-case-status-button class="status-button"
+                                                         @statusChange="statusChange"
+                                                         :is-read-only="isReadOnly"
+                                                         :is-failure="isFailure"
+                                                         :status="testCase.status"/>
+                    </el-col>
+                  </el-row>
 
-            <el-row>
-              <el-col :span="4" :offset="1">
-                <span class="cast_label">{{ $t('test_track.case.method') }}：</span>
-                <span v-if="testCase.method === 'manual'">{{ $t('test_track.case.manual') }}</span>
-                <span v-if="testCase.method === 'auto'">{{ $t('test_track.case.auto') }}</span>
-              </el-col>
-              <el-col :span="5">
-                <span class="cast_label">{{ $t('test_track.case.module') }}：</span>
-                <span class="cast_item">{{ testCase.nodePath }}</span>
-              </el-col>
-              <el-col :span="4" :offset="1">
-                <span class="cast_label">{{ $t('test_track.plan.plan_project') }}：</span>
-                <span class="cast_item">{{ testCase.projectName }}</span>
-              </el-col>
-            </el-row>
+                  <el-row>
+                    <el-col :span="4" :offset="1">
+                      <span class="cast_label">{{ $t('test_track.case.method') }}：</span>
+                      <span v-if="testCase.method === 'manual'">{{ $t('test_track.case.manual') }}</span>
+                      <span v-if="testCase.method === 'auto'">{{ $t('test_track.case.auto') }}</span>
+                    </el-col>
+                    <el-col :span="5">
+                      <span class="cast_label">{{ $t('test_track.case.module') }}：</span>
+                      <span class="cast_item">{{ testCase.nodePath }}</span>
+                    </el-col>
+                    <el-col :span="4" :offset="1">
+                      <span class="cast_label">{{ $t('test_track.plan.plan_project') }}：</span>
+                      <span class="cast_item">{{ testCase.projectName }}</span>
+                    </el-col>
+                  </el-row>
 
-            <el-row>
-              <el-col :span="4" :offset="1" v-if="testCase.testId == 'other'">
-                <span class="cast_label">{{ $t('test_track.case.test_name') }}：</span>
-                <span class="cast_item">{{ testCase.otherTestName }}</span>
-              </el-col>
-            </el-row>
+                  <el-row>
+                    <el-col :span="4" :offset="1" v-if="testCase.testId == 'other'">
+                      <span class="cast_label">{{ $t('test_track.case.test_name') }}：</span>
+                      <span class="cast_item">{{ testCase.otherTestName }}</span>
+                    </el-col>
+                  </el-row>
 
-            <el-row>
-              <el-col :offset="1">
-                <span class="cast_label">{{ $t('test_track.case.prerequisite') }}：</span>
-                <span class="cast_item"><p>{{ testCase.prerequisite }}</p></span>
-              </el-col>
-            </el-row>
+                  <el-row>
+                    <el-col :offset="1">
+                      <span class="cast_label">{{ $t('test_track.case.prerequisite') }}：</span>
+                      <span class="cast_item"><p>{{ testCase.prerequisite }}</p></span>
+                    </el-col>
+                  </el-row>
 
-            <el-row v-if="testCase.method === 'auto' && testCase.testId && testCase.testId != 'other'">
-              <el-col class="test-detail" :span="20" :offset="1">
-                <el-tabs v-model="activeTab" type="border-card" @tab-click="testTabChange">
-                  <el-tab-pane name="detail" :label="$t('test_track.plan_view.test_detail')">
-                    <api-test-detail :is-read-only="isReadOnly" v-if="testCase.type === 'api'" @runTest="testRun"
-                                     :id="testCase.testId" ref="apiTestDetail"/>
-                    <performance-test-detail :is-read-only="isReadOnly" v-if="testCase.type === 'performance'"
-                                             @runTest="testRun" :id="testCase.testId" ref="performanceTestDetail"/>
-                  </el-tab-pane>
-                  <el-tab-pane name="result" :label="$t('test_track.plan_view.test_result')">
-                    <api-test-result :report-id="testCase.reportId" v-if=" testCase.type === 'api'"
-                                     ref="apiTestResult"/>
-                    <performance-test-result :is-read-only="isReadOnly" :report-id="testCase.reportId"
-                                             v-if="testCase.type === 'performance'" ref="performanceTestResult"/>
-                  </el-tab-pane>
-                </el-tabs>
-              </el-col>
-            </el-row>
+                  <el-row v-if="testCase.method === 'auto' && testCase.testId && testCase.testId != 'other'">
+                    <el-col class="test-detail" :span="20" :offset="1">
+                      <el-tabs v-model="activeTab" type="border-card" @tab-click="testTabChange">
+                        <el-tab-pane name="detail" :label="$t('test_track.plan_view.test_detail')">
+                          <api-test-detail :is-read-only="isReadOnly" v-if="testCase.type === 'api'" @runTest="testRun"
+                                           :id="testCase.testId" ref="apiTestDetail"/>
+                          <performance-test-detail :is-read-only="isReadOnly" v-if="testCase.type === 'performance'"
+                                                   @runTest="testRun" :id="testCase.testId" ref="performanceTestDetail"/>
+                        </el-tab-pane>
+                        <el-tab-pane name="result" :label="$t('test_track.plan_view.test_result')">
+                          <api-test-result :report-id="testCase.reportId" v-if=" testCase.type === 'api'"
+                                           ref="apiTestResult"/>
+                          <performance-test-result :is-read-only="isReadOnly" :report-id="testCase.reportId"
+                                                   v-if="testCase.type === 'performance'" ref="performanceTestResult"/>
+                        </el-tab-pane>
+                      </el-tabs>
+                    </el-col>
+                  </el-row>
 
-            <el-row v-if="testCase.method && testCase.method !== 'auto'">
-              <el-col :span="20" :offset="1">
-                <div>
-                  <span class="cast_label">{{ $t('test_track.case.steps') }}：</span>
-                </div>
-                <el-table
-                  :data="testCase.steptResults"
-                  class="tb-edit"
-                  size="mini"
-                  :border="true"
-                  :default-sort="{prop: 'num', order: 'ascending'}"
-                  highlight-current-row>
-                  <el-table-column :label="$t('test_track.case.number')" prop="num" min-width="5%"></el-table-column>
-
-                  <el-table-column :label="$t('test_track.case.step_desc')" prop="desc" min-width="21%">
-                    <template v-slot:default="scope">
-                      <el-input
+                  <el-row v-if="testCase.method && testCase.method !== 'auto'">
+                    <el-col :span="22" :offset="1">
+                      <div>
+                        <span class="cast_label">{{ $t('test_track.case.steps') }}：</span>
+                      </div>
+                      <el-table
+                        :data="testCase.steptResults"
+                        class="tb-edit"
                         size="mini"
-                        class="border-hidden"
-                        type="textarea"
-                        :autosize="{ minRows: 1, maxRows: 4}"
-                        :disabled="true"
-                        v-model="scope.row.desc"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column :label="$t('test_track.case.expected_results')" prop="result" min-width="21%">
-                    <template v-slot:default="scope">
-                      <el-input
-                        size="mini"
-                        class="border-hidden"
-                        type="textarea"
-                        :autosize="{ minRows: 1, maxRows: 4}"
-                        :disabled="true"
-                        v-model="scope.row.result"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column :label="$t('test_track.plan_view.actual_result')" min-width="21%">
-                    <template v-slot:default="scope">
-                      <el-input
-                        class="table-edit-input"
-                        size="mini"
-                        type="textarea"
-                        :autosize="{ minRows: 2, maxRows: 4}"
-                        :rows="2"
+                        :border="true"
+                        :default-sort="{prop: 'num', order: 'ascending'}"
+                        highlight-current-row>
+                        <el-table-column :label="$t('test_track.case.number')" prop="num" min-width="5%"></el-table-column>
+
+                        <el-table-column :label="$t('test_track.case.step_desc')" prop="desc" min-width="21%">
+                          <template v-slot:default="scope">
+                            <el-input
+                              size="mini"
+                              class="border-hidden"
+                              type="textarea"
+                              :autosize="{ minRows: 1, maxRows: 4}"
+                              :disabled="true"
+                              v-model="scope.row.desc"/>
+                          </template>
+                        </el-table-column>
+                        <el-table-column :label="$t('test_track.case.expected_results')" prop="result" min-width="21%">
+                          <template v-slot:default="scope">
+                            <el-input
+                              size="mini"
+                              class="border-hidden"
+                              type="textarea"
+                              :autosize="{ minRows: 1, maxRows: 4}"
+                              :disabled="true"
+                              v-model="scope.row.result"/>
+                          </template>
+                        </el-table-column>
+                        <el-table-column :label="$t('test_track.plan_view.actual_result')" min-width="21%">
+                          <template v-slot:default="scope">
+                            <el-input
+                              class="table-edit-input"
+                              size="mini"
+                              type="textarea"
+                              :autosize="{ minRows: 2, maxRows: 4}"
+                              :rows="2"
+                              :disabled="isReadOnly"
+                              v-model="scope.row.actualResult"
+                              :placeholder="$t('commons.input_content')"
+                              clearable/>
+                          </template>
+                        </el-table-column>
+                        <el-table-column :label="$t('test_track.plan_view.step_result')" min-width="12%">
+                          <template v-slot:default="scope">
+                            <el-select
+                              :disabled="isReadOnly"
+                              v-model="scope.row.executeResult"
+                              @change="stepResultChange()"
+                              filterable
+                              size="mini">
+                              <el-option :label="$t('test_track.plan_view.pass')" value="Pass"
+                                         style="color: #7ebf50;"></el-option>
+                              <el-option :label="$t('test_track.plan_view.failure')" value="Failure"
+                                         style="color: #e57471;"></el-option>
+                              <el-option :label="$t('test_track.plan_view.blocking')" value="Blocking"
+                                         style="color: #dda451;"></el-option>
+                              <el-option :label="$t('test_track.plan_view.skip')" value="Skip"
+                                         style="color: #919399;"></el-option>
+                            </el-select>
+                          </template>
+                        </el-table-column>
+                      </el-table>
+                    </el-col>
+                  </el-row>
+
+                  <el-row>
+                    <el-col :span="5" :offset="1">
+                      <el-switch
                         :disabled="isReadOnly"
-                        v-model="scope.row.actualResult"
-                        :placeholder="$t('commons.input_content')"
-                        clearable/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column :label="$t('test_track.plan_view.step_result')" min-width="12%">
-                    <template v-slot:default="scope">
-                      <el-select
-                        :disabled="isReadOnly"
-                        v-model="scope.row.executeResult"
-                        @change="stepResultChange()"
-                        filterable
-                        size="mini">
-                        <el-option :label="$t('test_track.plan_view.pass')" value="Pass"
-                                   style="color: #7ebf50;"></el-option>
-                        <el-option :label="$t('test_track.plan_view.failure')" value="Failure"
-                                   style="color: #e57471;"></el-option>
-                        <el-option :label="$t('test_track.plan_view.blocking')" value="Blocking"
-                                   style="color: #dda451;"></el-option>
-                        <el-option :label="$t('test_track.plan_view.skip')" value="Skip"
-                                   style="color: #919399;"></el-option>
-                      </el-select>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-col>
-            </el-row>
-
-            <el-row>
-              <el-col :span="5" :offset="1">
-                <el-switch
-                  :disabled="isReadOnly"
-                  v-model="issuesSwitch"
-                  @change="issuesChange"
-                  :active-text="$t('test_track.plan_view.submit_issues')">
-                </el-switch>
-                <el-tooltip class="item" effect="dark"
-                            :content="$t('test_track.issue.platform_tip')"
-                            placement="right">
-                  <i class="el-icon-info"/>
-                </el-tooltip>
-              </el-col>
-            </el-row>
-
-            <el-row v-if="issuesSwitch">
-              <el-col :span="20" :offset="1" class="issues-edit">
-                <el-input
-                  type="text"
-                  :placeholder="$t('test_track.issue.input_title')"
-                  v-model="testCase.issues.title"
-                  maxlength="60"
-                  show-word-limit
-                />
-                <ckeditor :editor="editor" :disabled="isReadOnly" :config="editorConfig"
-                          v-model="testCase.issues.content"/>
-                <el-row v-if="hasTapdId">
-                  {{ $t('test_track.issue.tapd_current_owner') }}
-                  <el-select v-model="testCase.tapdUsers"
-                             multiple
-                             filterable
-                             style="width: 20%"
-                             :placeholder="$t('test_track.issue.please_choose_current_owner')"
-                             collapse-tags size="small">
-                    <el-option v-for="(userInfo, index) in users" :key="index" :label="userInfo.user"
-                               :value="userInfo.user"/>
-                  </el-select>
-                </el-row>
-                <el-row v-if="hasZentaoId">
-                  {{ $t('test_track.issue.zentao_bug_build') }}
-                  <el-select v-model="testCase.zentaoBuilds"
-                             multiple
-                             filterable
-                             style="width: 20%"
-                             :placeholder="$t('test_track.issue.zentao_bug_build')"
-                             collapse-tags size="small">
-                    <el-option v-for="(build, index) in Builds" :key="index" :label="build.name"
-                               :value="build.id"/>
-                  </el-select>
-                  {{ $t('test_track.issue.zentao_bug_assigned') }}
-                  <el-select v-model="testCase.zentaoAssigned"
-                             filterable
-                             style="width: 20%"
-                             :placeholder="$t('test_track.issue.please_choose_current_owner')"
-                             collapse-tags size="small">
-                    <el-option v-for="(userInfo, index) in zentaoUsers" :key="index" :label="userInfo.name"
-                               :value="userInfo.user"/>
-                  </el-select>
-                </el-row>
-                <el-button type="primary" size="small" @click="saveIssues">{{ $t('commons.save') }}</el-button>
-                <el-button size="small" @click="issuesSwitch=false">{{ $t('commons.cancel') }}</el-button>
-              </el-col>
-            </el-row>
-
-            <el-row>
-              <el-col :span="20" :offset="1" class="issues-edit">
-                <el-table border class="adjust-table" :data="issues" style="width: 100%">
-                  <el-table-column prop="id" :label="$t('test_track.issue.id')" show-overflow-tooltip/>
-                  <el-table-column prop="title" :label="$t('test_track.issue.title')" show-overflow-tooltip/>
-                  <el-table-column prop="description" :label="$t('test_track.issue.description')">
-                    <template v-slot:default="scope">
-                      <el-popover
-                        placement="left"
-                        width="400"
-                        trigger="hover"
-                      >
-                        <ckeditor :editor="editor" disabled :config="readConfig"
-                                  v-model="scope.row.description"/>
-                        <el-button slot="reference" type="text">{{ $t('test_track.issue.preview') }}</el-button>
-                      </el-popover>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="status" :label="$t('test_track.issue.status')"/>
-                  <el-table-column prop="platform" :label="$t('test_track.issue.platform')"/>
-                  <el-table-column :label="$t('test_track.issue.operate')">
-                    <template v-slot:default="scope">
-                      <el-tooltip :content="$t('test_track.issue.close')"
-                                  placement="top" :enterable="false">
-                        <el-button type="danger" icon="el-icon-circle-close" size="mini"
-                                   circle v-if="scope.row.platform === 'Local'"
-                                   @click="closeIssue(scope.row)"
-                        />
+                        v-model="issuesSwitch"
+                        @change="issuesChange"
+                        :active-text="$t('test_track.plan_view.submit_issues')">
+                      </el-switch>
+                      <el-tooltip class="item" effect="dark"
+                                  :content="$t('test_track.issue.platform_tip')"
+                                  placement="right">
+                        <i class="el-icon-info"/>
                       </el-tooltip>
-                      <el-tooltip :content="$t('test_track.issue.delete')"
-                                  placement="top" :enterable="false">
-                        <el-button type="danger" icon="el-icon-delete" size="mini"
-                                   circle v-if="scope.row.platform === 'Local'"
-                                   @click="deleteIssue(scope.row)"
+                    </el-col>
+                  </el-row>
+
+                  <el-row v-if="issuesSwitch">
+                    <el-col :span="20" :offset="1" class="issues-edit">
+                      <el-input
+                        type="text"
+                        :placeholder="$t('test_track.issue.input_title')"
+                        v-model="testCase.issues.title"
+                        maxlength="60"
+                        show-word-limit
+                      />
+                      <ckeditor :editor="editor" :disabled="isReadOnly" :config="editorConfig"
+                                v-model="testCase.issues.content"/>
+                      <el-row v-if="hasTapdId">
+                        {{ $t('test_track.issue.tapd_current_owner') }}
+                        <el-select v-model="testCase.tapdUsers"
+                                   multiple
+                                   filterable
+                                   style="width: 20%"
+                                   :placeholder="$t('test_track.issue.please_choose_current_owner')"
+                                   collapse-tags size="small">
+                          <el-option v-for="(userInfo, index) in users" :key="index" :label="userInfo.user"
+                                     :value="userInfo.user"/>
+                        </el-select>
+                      </el-row>
+                      <el-row v-if="hasZentaoId">
+                        {{ $t('test_track.issue.zentao_bug_build') }}
+                        <el-select v-model="testCase.zentaoBuilds"
+                                   multiple
+                                   filterable
+                                   style="width: 20%"
+                                   :placeholder="$t('test_track.issue.zentao_bug_build')"
+                                   collapse-tags size="small">
+                          <el-option v-for="(build, index) in Builds" :key="index" :label="build.name"
+                                     :value="build.id"/>
+                        </el-select>
+                        {{ $t('test_track.issue.zentao_bug_assigned') }}
+                        <el-select v-model="testCase.zentaoAssigned"
+                                   filterable
+                                   style="width: 20%"
+                                   :placeholder="$t('test_track.issue.please_choose_current_owner')"
+                                   collapse-tags size="small">
+                          <el-option v-for="(userInfo, index) in zentaoUsers" :key="index" :label="userInfo.name"
+                                     :value="userInfo.user"/>
+                        </el-select>
+                      </el-row>
+                      <el-button type="primary" size="small" @click="saveIssues">{{ $t('commons.save') }}</el-button>
+                      <el-button size="small" @click="issuesSwitch=false">{{ $t('commons.cancel') }}</el-button>
+                    </el-col>
+                  </el-row>
+
+                  <el-row>
+                    <el-col :span="20" :offset="1" class="issues-edit">
+                      <el-table border class="adjust-table" :data="issues" style="width: 100%">
+                        <el-table-column prop="id" :label="$t('test_track.issue.id')" show-overflow-tooltip/>
+                        <el-table-column prop="title" :label="$t('test_track.issue.title')" show-overflow-tooltip/>
+                        <el-table-column prop="description" :label="$t('test_track.issue.description')">
+                          <template v-slot:default="scope">
+                            <el-popover
+                              placement="left"
+                              width="400"
+                              trigger="hover"
+                            >
+                              <ckeditor :editor="editor" disabled :config="readConfig"
+                                        v-model="scope.row.description"/>
+                              <el-button slot="reference" type="text">{{ $t('test_track.issue.preview') }}</el-button>
+                            </el-popover>
+                          </template>
+                        </el-table-column>
+                        <el-table-column prop="status" :label="$t('test_track.issue.status')"/>
+                        <el-table-column prop="platform" :label="$t('test_track.issue.platform')"/>
+                        <el-table-column :label="$t('test_track.issue.operate')">
+                          <template v-slot:default="scope">
+                            <el-tooltip :content="$t('test_track.issue.close')"
+                                        placement="top" :enterable="false">
+                              <el-button type="danger" icon="el-icon-circle-close" size="mini"
+                                         circle v-if="scope.row.platform === 'Local'"
+                                         @click="closeIssue(scope.row)"
+                              />
+                            </el-tooltip>
+                            <el-tooltip :content="$t('test_track.issue.delete')"
+                                        placement="top" :enterable="false">
+                              <el-button type="danger" icon="el-icon-delete" size="mini"
+                                         circle v-if="scope.row.platform === 'Local'"
+                                         @click="deleteIssue(scope.row)"
+                              />
+                            </el-tooltip>
+                          </template>
+                        </el-table-column>
+                      </el-table>
+                    </el-col>
+                  </el-row>
+
+                  <el-row>
+                    <el-col :span="15" :offset="1">
+                      <div>
+                        <span class="cast_label">{{ $t('commons.remark') }}：</span>
+                        <span v-if="testCase.remark == null || testCase.remark === ''"
+                              style="color: darkgrey">{{ $t('commons.not_filled') }}</span>
+                      </div>
+                      <div>
+                        <el-input :rows="3"
+                                  type="textarea"
+                                  v-if="testCase.remark"
+                                  disabled
+                                  v-model="testCase.remark"></el-input>
+                      </div>
+                    </el-col>
+                  </el-row>
+
+                  <el-row>
+                    <el-col :span="15" :offset="1">
+                      <div>
+                        <span class="cast_label">{{ $t('test_track.case.attachment') }}:</span>
+                      </div>
+                      <div>
+                        <test-case-attachment :table-data="tableData"
+                                              :read-only="isReadOnly"
+                                              :is-delete="false"
+                                              @handleDelete="handleDelete"
                         />
-                      </el-tooltip>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-col>
-            </el-row>
-
-            <el-row>
-              <el-col :span="15" :offset="1">
-                <div>
-                  <span class="cast_label">{{ $t('commons.remark') }}：</span>
-                  <span v-if="testCase.remark == null || testCase.remark === ''"
-                        style="color: darkgrey">{{ $t('commons.not_filled') }}</span>
+                      </div>
+                    </el-col>
+                  </el-row>
                 </div>
-                <div>
-                  <el-input :rows="3"
-                            type="textarea"
-                            v-if="testCase.remark"
-                            disabled
-                            v-model="testCase.remark"></el-input>
-                </div>
-              </el-col>
-            </el-row>
 
-            <el-row>
-              <el-col :span="15" :offset="1">
-                <div>
-                  <span class="cast_label">{{ $t('test_track.case.attachment') }}:</span>
-                </div>
-                <div>
-                  <test-case-attachment :table-data="tableData"
-                                        :read-only="isReadOnly"
-                                        :is-delete="false"
-                                        @handleDelete="handleDelete"
-                  />
-                </div>
-              </el-col>
-            </el-row>
-          </div>
+              </el-scrollbar>
+            </el-card>
+          </el-col>
+          <el-col :span="7">
+            <case-comment :case-id="testCase ? testCase.caseId : ''" class="comment-card"/>
+          </el-col>
 
-        </el-scrollbar>
 
-      </div>
+        </div>
+      </el-row>
+
 
     </template>
 
@@ -359,10 +369,12 @@ import PerformanceTestDetail from "../test/PerformanceTestDetail";
 import PerformanceTestResult from "../test/PerformanceTestResult";
 import {listenGoBack, removeGoBackListener} from "@/common/js/utils";
 import TestCaseAttachment from "@/business/components/track/case/components/TestCaseAttachment";
+import CaseComment from "@/business/components/track/case/components/CaseComment";
 
 export default {
   name: "FunctionalTestCaseEdit",
   components: {
+    CaseComment,
     PerformanceTestResult,
     PerformanceTestDetail,
     ApiTestResult,
@@ -722,6 +734,18 @@ export default {
   height: 100vh;
 }
 
+.container >>> .el-card__body {
+  height: calc(100vh - 70px);
+}
+
+.comment-card >>> .el-card__header {
+  padding: 0 20px;
+}
+
+.comment-card >>> .el-card__body {
+  height: calc(100vh - 120px);
+}
+
 .case_container > .el-row {
   margin-top: 1%;
 }