refactor(测试跟踪): 测试用例用例步骤、备注等改成富文本框 (#2018)

* refactor(测试跟踪): 测试用例用例步骤、备注等改成富文本框 * style: 修改代码格式 * Update TestCaseStepRichText.vue Co-authored-by: jianxing <41557596+AgAngle@users.noreply.github.com>
2021-04-16 09:51:42 +08:00 · 2021-04-16 09:51:42 +08:00 · 539d68dcff
parent f9aece0463
commit 539d68dcff
9 changed files with 390 additions and 275 deletions
--- a/backend/src/main/java/io/metersphere/base/domain/TestCase.java
+++ b/backend/src/main/java/io/metersphere/base/domain/TestCase.java
@ -1,8 +1,7 @@
 package io.metersphere.base.domain;

-import lombok.Data;
-
 import java.io.Serializable;
+import lombok.Data;

@Data
 public class TestCase implements Serializable {
@ -10,6 +9,8 @@ public class TestCase implements Serializable {

    private String nodeId;

+    private String testId;
+
    private String nodePath;

    private String projectId;
@ -30,8 +31,6 @@ public class TestCase implements Serializable {

    private Long updateTime;

-    private String testId;
-
    private Integer sort;

    private Integer num;
--- a/backend/src/main/java/io/metersphere/base/domain/TestCaseWithBLOBs.java
+++ b/backend/src/main/java/io/metersphere/base/domain/TestCaseWithBLOBs.java
@ -1,18 +1,21 @@
 package io.metersphere.base.domain;

+import java.io.Serializable;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
 import lombok.ToString;

-import java.io.Serializable;
-
@Data
@EqualsAndHashCode(callSuper = true)
@ToString(callSuper = true)
 public class TestCaseWithBLOBs extends TestCase implements Serializable {
    private String remark;

-    private String steps;   //与TestCaseExcelData里的属性名不一致，BeanUtils.copyBean()复制不了值，需要手动赋值
+    private String steps;
+
+    private String stepDescription;
+
+    private String expectedResult;

    private static final long serialVersionUID = 1L;
 }
--- a/backend/src/main/java/io/metersphere/base/mapper/TestCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/TestCaseMapper.xml
@ -2,32 +2,34 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="io.metersphere.base.mapper.TestCaseMapper">
  <resultMap id="BaseResultMap" type="io.metersphere.base.domain.TestCase">
-    <id column="id" jdbcType="VARCHAR" property="id"/>
-    <result column="node_id" jdbcType="VARCHAR" property="nodeId"/>
-    <result column="node_path" jdbcType="VARCHAR" property="nodePath"/>
-    <result column="project_id" jdbcType="VARCHAR" property="projectId"/>
-    <result column="name" jdbcType="VARCHAR" property="name"/>
-    <result column="type" jdbcType="VARCHAR" property="type"/>
-    <result column="maintainer" jdbcType="VARCHAR" property="maintainer"/>
-    <result column="priority" jdbcType="VARCHAR" property="priority"/>
-    <result column="method" jdbcType="VARCHAR" property="method"/>
-    <result column="prerequisite" jdbcType="VARCHAR" property="prerequisite"/>
-    <result column="create_time" jdbcType="BIGINT" property="createTime"/>
-    <result column="update_time" jdbcType="BIGINT" property="updateTime"/>
-    <result column="test_id" jdbcType="VARCHAR" property="testId"/>
-    <result column="sort" jdbcType="INTEGER" property="sort"/>
-    <result column="num" jdbcType="INTEGER" property="num"/>
-    <result column="other_test_name" jdbcType="VARCHAR" property="otherTestName"/>
-    <result column="review_status" jdbcType="VARCHAR" property="reviewStatus"/>
-    <result column="tags" jdbcType="VARCHAR" property="tags"/>
-    <result column="demand_id" jdbcType="VARCHAR" property="demandId"/>
-    <result column="demand_name" jdbcType="VARCHAR" property="demandName"/>
-    <result column="follow_people" jdbcType="VARCHAR" property="followPeople"/>
-    <result column="status" jdbcType="VARCHAR" property="status"/>
+    <id column="id" jdbcType="VARCHAR" property="id" />
+    <result column="node_id" jdbcType="VARCHAR" property="nodeId" />
+    <result column="test_id" jdbcType="VARCHAR" property="testId" />
+    <result column="node_path" jdbcType="VARCHAR" property="nodePath" />
+    <result column="project_id" jdbcType="VARCHAR" property="projectId" />
+    <result column="name" jdbcType="VARCHAR" property="name" />
+    <result column="type" jdbcType="VARCHAR" property="type" />
+    <result column="maintainer" jdbcType="VARCHAR" property="maintainer" />
+    <result column="priority" jdbcType="VARCHAR" property="priority" />
+    <result column="method" jdbcType="VARCHAR" property="method" />
+    <result column="prerequisite" jdbcType="VARCHAR" property="prerequisite" />
+    <result column="create_time" jdbcType="BIGINT" property="createTime" />
+    <result column="update_time" jdbcType="BIGINT" property="updateTime" />
+    <result column="sort" jdbcType="INTEGER" property="sort" />
+    <result column="num" jdbcType="INTEGER" property="num" />
+    <result column="other_test_name" jdbcType="VARCHAR" property="otherTestName" />
+    <result column="review_status" jdbcType="VARCHAR" property="reviewStatus" />
+    <result column="tags" jdbcType="VARCHAR" property="tags" />
+    <result column="demand_id" jdbcType="VARCHAR" property="demandId" />
+    <result column="demand_name" jdbcType="VARCHAR" property="demandName" />
+    <result column="follow_people" jdbcType="VARCHAR" property="followPeople" />
+    <result column="status" jdbcType="VARCHAR" property="status" />
  </resultMap>
  <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.metersphere.base.domain.TestCaseWithBLOBs">
    <result column="remark" jdbcType="LONGVARCHAR" property="remark" />
    <result column="steps" jdbcType="LONGVARCHAR" property="steps" />
+    <result column="step_description" jdbcType="LONGVARCHAR" property="stepDescription" />
+    <result column="expected_result" jdbcType="LONGVARCHAR" property="expectedResult" />
  </resultMap>
  <sql id="Example_Where_Clause">
    <where>
@ -88,12 +90,12 @@
    </where>
  </sql>
  <sql id="Base_Column_List">
-    id, node_id, node_path, project_id, `name`, `type`, maintainer, priority, `method`, 
-    prerequisite, create_time, update_time, test_id, sort, num, other_test_name, review_status, 
+    id, node_id, test_id, node_path, project_id, `name`, `type`, maintainer, priority, 
+    `method`, prerequisite, create_time, update_time, sort, num, other_test_name, review_status, 
    tags, demand_id, demand_name, follow_people, `status`
  </sql>
  <sql id="Blob_Column_List">
-    remark, steps
+    remark, steps, step_description, expected_result
  </sql>
  <select id="selectByExampleWithBLOBs" parameterType="io.metersphere.base.domain.TestCaseExample" resultMap="ResultMapWithBLOBs">
    select
@ -144,22 +146,26 @@
    </if>
  </delete>
  <insert id="insert" parameterType="io.metersphere.base.domain.TestCaseWithBLOBs">
-    insert into test_case (id, node_id, node_path,
-                           project_id, `name`, `type`,
-                           maintainer, priority, `method`,
-                           prerequisite, create_time, update_time,
-                           test_id, sort, num,
+    insert into test_case (id, node_id, test_id, 
+      node_path, project_id, `name`, 
+      `type`, maintainer, priority, 
+      `method`, prerequisite, create_time, 
+      update_time, sort, num, 
      other_test_name, review_status, tags, 
      demand_id, demand_name, follow_people, 
-                           `status`, remark, steps)
-    values (#{id,jdbcType=VARCHAR}, #{nodeId,jdbcType=VARCHAR}, #{nodePath,jdbcType=VARCHAR},
-            #{projectId,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{type,jdbcType=VARCHAR},
-            #{maintainer,jdbcType=VARCHAR}, #{priority,jdbcType=VARCHAR}, #{method,jdbcType=VARCHAR},
-            #{prerequisite,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT},
-            #{testId,jdbcType=VARCHAR}, #{sort,jdbcType=INTEGER}, #{num,jdbcType=INTEGER},
+      `status`, remark, steps, 
+      step_description, expected_result
+      )
+    values (#{id,jdbcType=VARCHAR}, #{nodeId,jdbcType=VARCHAR}, #{testId,jdbcType=VARCHAR}, 
+      #{nodePath,jdbcType=VARCHAR}, #{projectId,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, 
+      #{type,jdbcType=VARCHAR}, #{maintainer,jdbcType=VARCHAR}, #{priority,jdbcType=VARCHAR}, 
+      #{method,jdbcType=VARCHAR}, #{prerequisite,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, 
+      #{updateTime,jdbcType=BIGINT}, #{sort,jdbcType=INTEGER}, #{num,jdbcType=INTEGER}, 
      #{otherTestName,jdbcType=VARCHAR}, #{reviewStatus,jdbcType=VARCHAR}, #{tags,jdbcType=VARCHAR}, 
      #{demandId,jdbcType=VARCHAR}, #{demandName,jdbcType=VARCHAR}, #{followPeople,jdbcType=VARCHAR}, 
-            #{status,jdbcType=VARCHAR}, #{remark,jdbcType=LONGVARCHAR}, #{steps,jdbcType=LONGVARCHAR})
+      #{status,jdbcType=VARCHAR}, #{remark,jdbcType=LONGVARCHAR}, #{steps,jdbcType=LONGVARCHAR}, 
+      #{stepDescription,jdbcType=LONGVARCHAR}, #{expectedResult,jdbcType=LONGVARCHAR}
+      )
  </insert>
  <insert id="insertSelective" parameterType="io.metersphere.base.domain.TestCaseWithBLOBs">
    insert into test_case
@ -170,6 +176,9 @@
      <if test="nodeId != null">
        node_id,
      </if>
+      <if test="testId != null">
+        test_id,
+      </if>
      <if test="nodePath != null">
        node_path,
      </if>
@ -200,9 +209,6 @@
      <if test="updateTime != null">
        update_time,
      </if>
-      <if test="testId != null">
-        test_id,
-      </if>
      <if test="sort != null">
        sort,
      </if>
@ -236,6 +242,12 @@
      <if test="steps != null">
        steps,
      </if>
+      <if test="stepDescription != null">
+        step_description,
+      </if>
+      <if test="expectedResult != null">
+        expected_result,
+      </if>
    </trim>
    <trim prefix="values (" suffix=")" suffixOverrides=",">
      <if test="id != null">
@ -244,6 +256,9 @@
      <if test="nodeId != null">
        #{nodeId,jdbcType=VARCHAR},
      </if>
+      <if test="testId != null">
+        #{testId,jdbcType=VARCHAR},
+      </if>
      <if test="nodePath != null">
        #{nodePath,jdbcType=VARCHAR},
      </if>
@ -274,9 +289,6 @@
      <if test="updateTime != null">
        #{updateTime,jdbcType=BIGINT},
      </if>
-      <if test="testId != null">
-        #{testId,jdbcType=VARCHAR},
-      </if>
      <if test="sort != null">
        #{sort,jdbcType=INTEGER},
      </if>
@ -310,6 +322,12 @@
      <if test="steps != null">
        #{steps,jdbcType=LONGVARCHAR},
      </if>
+      <if test="stepDescription != null">
+        #{stepDescription,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="expectedResult != null">
+        #{expectedResult,jdbcType=LONGVARCHAR},
+      </if>
    </trim>
  </insert>
  <select id="countByExample" parameterType="io.metersphere.base.domain.TestCaseExample" resultType="java.lang.Long">
@ -327,6 +345,9 @@
      <if test="record.nodeId != null">
        node_id = #{record.nodeId,jdbcType=VARCHAR},
      </if>
+      <if test="record.testId != null">
+        test_id = #{record.testId,jdbcType=VARCHAR},
+      </if>
      <if test="record.nodePath != null">
        node_path = #{record.nodePath,jdbcType=VARCHAR},
      </if>
@ -357,9 +378,6 @@
      <if test="record.updateTime != null">
        update_time = #{record.updateTime,jdbcType=BIGINT},
      </if>
-      <if test="record.testId != null">
-        test_id = #{record.testId,jdbcType=VARCHAR},
-      </if>
      <if test="record.sort != null">
        sort = #{record.sort,jdbcType=INTEGER},
      </if>
@ -393,6 +411,12 @@
      <if test="record.steps != null">
        steps = #{record.steps,jdbcType=LONGVARCHAR},
      </if>
+      <if test="record.stepDescription != null">
+        step_description = #{record.stepDescription,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.expectedResult != null">
+        expected_result = #{record.expectedResult,jdbcType=LONGVARCHAR},
+      </if>
    </set>
    <if test="_parameter != null">
      <include refid="Update_By_Example_Where_Clause" />
@ -402,6 +426,7 @@
    update test_case
    set id = #{record.id,jdbcType=VARCHAR},
      node_id = #{record.nodeId,jdbcType=VARCHAR},
+      test_id = #{record.testId,jdbcType=VARCHAR},
      node_path = #{record.nodePath,jdbcType=VARCHAR},
      project_id = #{record.projectId,jdbcType=VARCHAR},
      `name` = #{record.name,jdbcType=VARCHAR},
@ -412,7 +437,6 @@
      prerequisite = #{record.prerequisite,jdbcType=VARCHAR},
      create_time = #{record.createTime,jdbcType=BIGINT},
      update_time = #{record.updateTime,jdbcType=BIGINT},
-    test_id = #{record.testId,jdbcType=VARCHAR},
      sort = #{record.sort,jdbcType=INTEGER},
      num = #{record.num,jdbcType=INTEGER},
      other_test_name = #{record.otherTestName,jdbcType=VARCHAR},
@ -423,7 +447,9 @@
      follow_people = #{record.followPeople,jdbcType=VARCHAR},
      `status` = #{record.status,jdbcType=VARCHAR},
      remark = #{record.remark,jdbcType=LONGVARCHAR},
-    steps = #{record.steps,jdbcType=LONGVARCHAR}
+      steps = #{record.steps,jdbcType=LONGVARCHAR},
+      step_description = #{record.stepDescription,jdbcType=LONGVARCHAR},
+      expected_result = #{record.expectedResult,jdbcType=LONGVARCHAR}
    <if test="_parameter != null">
      <include refid="Update_By_Example_Where_Clause" />
    </if>
@ -432,6 +458,7 @@
    update test_case
    set id = #{record.id,jdbcType=VARCHAR},
      node_id = #{record.nodeId,jdbcType=VARCHAR},
+      test_id = #{record.testId,jdbcType=VARCHAR},
      node_path = #{record.nodePath,jdbcType=VARCHAR},
      project_id = #{record.projectId,jdbcType=VARCHAR},
      `name` = #{record.name,jdbcType=VARCHAR},
@ -442,7 +469,6 @@
      prerequisite = #{record.prerequisite,jdbcType=VARCHAR},
      create_time = #{record.createTime,jdbcType=BIGINT},
      update_time = #{record.updateTime,jdbcType=BIGINT},
-    test_id = #{record.testId,jdbcType=VARCHAR},
      sort = #{record.sort,jdbcType=INTEGER},
      num = #{record.num,jdbcType=INTEGER},
      other_test_name = #{record.otherTestName,jdbcType=VARCHAR},
@ -462,6 +488,9 @@
      <if test="nodeId != null">
        node_id = #{nodeId,jdbcType=VARCHAR},
      </if>
+      <if test="testId != null">
+        test_id = #{testId,jdbcType=VARCHAR},
+      </if>
      <if test="nodePath != null">
        node_path = #{nodePath,jdbcType=VARCHAR},
      </if>
@ -492,9 +521,6 @@
      <if test="updateTime != null">
        update_time = #{updateTime,jdbcType=BIGINT},
      </if>
-      <if test="testId != null">
-        test_id = #{testId,jdbcType=VARCHAR},
-      </if>
      <if test="sort != null">
        sort = #{sort,jdbcType=INTEGER},
      </if>
@ -528,12 +554,19 @@
      <if test="steps != null">
        steps = #{steps,jdbcType=LONGVARCHAR},
      </if>
+      <if test="stepDescription != null">
+        step_description = #{stepDescription,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="expectedResult != null">
+        expected_result = #{expectedResult,jdbcType=LONGVARCHAR},
+      </if>
    </set>
    where id = #{id,jdbcType=VARCHAR}
  </update>
  <update id="updateByPrimaryKeyWithBLOBs" parameterType="io.metersphere.base.domain.TestCaseWithBLOBs">
    update test_case
    set node_id = #{nodeId,jdbcType=VARCHAR},
+      test_id = #{testId,jdbcType=VARCHAR},
      node_path = #{nodePath,jdbcType=VARCHAR},
      project_id = #{projectId,jdbcType=VARCHAR},
      `name` = #{name,jdbcType=VARCHAR},
@ -544,7 +577,6 @@
      prerequisite = #{prerequisite,jdbcType=VARCHAR},
      create_time = #{createTime,jdbcType=BIGINT},
      update_time = #{updateTime,jdbcType=BIGINT},
-        test_id         = #{testId,jdbcType=VARCHAR},
      sort = #{sort,jdbcType=INTEGER},
      num = #{num,jdbcType=INTEGER},
      other_test_name = #{otherTestName,jdbcType=VARCHAR},
@ -555,12 +587,15 @@
      follow_people = #{followPeople,jdbcType=VARCHAR},
      `status` = #{status,jdbcType=VARCHAR},
      remark = #{remark,jdbcType=LONGVARCHAR},
-        steps           = #{steps,jdbcType=LONGVARCHAR}
+      steps = #{steps,jdbcType=LONGVARCHAR},
+      step_description = #{stepDescription,jdbcType=LONGVARCHAR},
+      expected_result = #{expectedResult,jdbcType=LONGVARCHAR}
    where id = #{id,jdbcType=VARCHAR}
  </update>
  <update id="updateByPrimaryKey" parameterType="io.metersphere.base.domain.TestCase">
    update test_case
    set node_id = #{nodeId,jdbcType=VARCHAR},
+      test_id = #{testId,jdbcType=VARCHAR},
      node_path = #{nodePath,jdbcType=VARCHAR},
      project_id = #{projectId,jdbcType=VARCHAR},
      `name` = #{name,jdbcType=VARCHAR},
@ -571,7 +606,6 @@
      prerequisite = #{prerequisite,jdbcType=VARCHAR},
      create_time = #{createTime,jdbcType=BIGINT},
      update_time = #{updateTime,jdbcType=BIGINT},
-        test_id         = #{testId,jdbcType=VARCHAR},
      sort = #{sort,jdbcType=INTEGER},
      num = #{num,jdbcType=INTEGER},
      other_test_name = #{otherTestName,jdbcType=VARCHAR},
--- a/backend/src/main/resources/db/migration/V80__v1.9.0_release.sql
+++ b/backend/src/main/resources/db/migration/V80__v1.9.0_release.sql
@ -0,0 +1,5 @@
+-- add test_case
+alter table test_case
+    add step_description text null;
+alter table test_case
+    add expected_result text null;
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@ -112,7 +112,6 @@
                  </el-option>
                </el-select>
              </el-form-item>
-
            </el-col>
            <el-col :span="7">
              <el-form-item label="需求ID/名称" :label-width="formLabelWidth" prop="demandName"
@ -124,104 +123,72 @@

          <div class="tip">步骤信息</div>
          <el-row style="margin-top: 10px;">
-            <el-col :span="1" :offset="1">{{ $t('test_track.case.prerequisite') }}:</el-col>
-            <el-col :span="19">
-              <el-form-item prop="prerequisite">
-                <el-input :disabled="readOnly" v-model="form.prerequisite"
-                          type="textarea"
-                          :autosize="{ minRows: 2, maxRows: 4}"
-                          :rows="2"
-                          :placeholder="$t('test_track.case.input_prerequisite')"></el-input>
-              </el-form-item>
+            <el-col :span="2" :offset="1">{{ $t('test_track.case.prerequisite') }}:</el-col>
+            <el-col :span="18">
+              <el-row :disabled="readOnly">
+                <ms-test-case-step-rich-text :content="form.prerequisite" @updateRichText="updatePrerequisite"/>
+              </el-row>
            </el-col>
          </el-row>

-          <el-row>
-            <el-col :span="1" :offset="1">{{ $t('test_track.case.steps') }}:</el-col>
-            <el-col :span="19">
-              <el-table
-                v-if="isStepTableAlive"
-                :data="form.steps"
-                class="tb-edit"
-                border
-                size="mini"
-                :default-sort="{prop: 'num', order: 'ascending'}"
-                highlight-current-row>
-                <el-table-column :label="$t('test_track.case.number')" prop="num" min-width="10%"></el-table-column>
-                <el-table-column :label="$t('test_track.case.step_desc')" prop="desc" min-width="35%">
-                  <template v-slot:default="scope">
-                    <el-input
-                      class="table-edit-input"
-                      size="mini"
-                      :disabled="readOnly"
-                      type="textarea"
-                      :autosize="{ minRows: 1, maxRows: 6}"
-                      :rows="2"
-                      v-model="scope.row.desc"
-                      :placeholder="$t('commons.input_content')"
-                      clearable/>
-                  </template>
-                </el-table-column>
-                <el-table-column :label="$t('test_track.case.expected_results')" prop="result" min-width="35%">
-                  <template v-slot:default="scope">
-                    <el-input
-                      class="table-edit-input"
-                      size="mini"
-                      :disabled="readOnly"
-                      type="textarea"
-                      :autosize="{ minRows: 1, maxRows: 6}"
-                      :rows="2"
-                      v-model="scope.row.result"
-                      :placeholder="$t('commons.input_content')"
-                      clearable/>
-                  </template>
-                </el-table-column>
-                <el-table-column :label="$t('commons.input_content')" min-width="25%">
-                  <template v-slot:default="scope">
-                    <el-button
-                      type="primary"
-                      :disabled="readOnly"
-                      icon="el-icon-plus"
-                      circle size="mini"
-                      @click="handleAddStep(scope.$index, scope.row)"></el-button>
-                    <el-button
-                      icon="el-icon-document-copy"
-                      type="success"
-                      :disabled="readOnly"
-                      circle size="mini"
-                      @click="handleCopyStep(scope.$index, scope.row)"></el-button>
-                    <el-button
-                      type="danger"
-                      icon="el-icon-delete"
-                      circle size="mini"
-                      @click="handleDeleteStep(scope.$index, scope.row)"
-                      :disabled="readOnly || (scope.$index == 0 && form.steps.length <= 1)"></el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
+          <el-row style="margin-top: 20px;">
+            <el-col :span="2" :offset="1">{{ $t('test_track.case.step_desc') }}:</el-col>
+            <el-col :span="18">
+              <el-row v-if="isStepTableAlive">
+                <ms-test-case-step-rich-text :content="form.stepDesc" @updateRichText="updateStepDesc"/>
+              </el-row>
            </el-col>
          </el-row>
-          <el-row style="margin-top: 10px;">
-            <el-col :span="1" :offset="1">{{ $t('commons.remark') }}:</el-col>
-            <el-col :span="19">
-              <el-form-item>
-                <el-input v-model="form.remark"
-                          :autosize="{ minRows: 2, maxRows: 4}"
-                          type="textarea"
-                          :disabled="readOnly"
-                          :rows="2"
-                          :placeholder="$t('commons.input_content')"></el-input>
-              </el-form-item>
+          <el-row style="margin-top: 20px;margin-bottom: 20px;">
+            <el-col :span="2" :offset="1">{{ $t('test_track.case.expected_results') }}:</el-col>
+            <el-col :span="18">
+              <el-row v-if="isStepTableAlive">
+                <ms-test-case-step-rich-text :content="form.stepResult" @updateRichText="updateExpectRes"/>
+              </el-row>
            </el-col>
          </el-row>
          <div class="tip">其他信息</div>
+         
          <el-row>
-            <el-col :span="20" :offset="1">{{ $t('test_track.case.attachment') }}:</el-col>
+            <el-col :span="1" ><div v-html="'&nbsp;'"></div></el-col>
+            <el-col :span="20" style="margin-top: 10px">
+              <el-tabs v-model="tabActiveName">
+                <el-tab-pane :label="$t('commons.remark')" name="remark">
+                  <el-row :disabled="readOnly">
+                    <ms-test-case-step-rich-text :content="form.remark" @updateRichText="updateRemark"/>
                  </el-row>
+                </el-tab-pane>
+                <el-tab-pane :label="$t('test_track.case.relate_test')" name="relateTest">
+                  <el-col :span="7" style="margin-top: 10px;">
+                    <el-form-item :label="$t('test_track.case.relate_test')" :label-width="formLabelWidth">
+                      <el-cascader :options="sysList" filterable placeholder="请选择要关联的测试" show-all-levels
+                                   v-model="form.selected" :props="props"
+                                   class="ms-case" @change="clearInput" ref="cascade"></el-cascader>
+                    </el-form-item>
+                  </el-col>
+                </el-tab-pane>
+                <el-tab-pane label="关联需求" name="demand">
+                  <el-col :span="7">
+                    <el-form-item label="关联需求" :label-width="formLabelWidth" prop="demandId">
+                      <el-select filterable :disabled="readOnly" v-model="form.demandId" @visible-change="visibleChange"
+                                 placeholder="请选择要关联的需求" class="ms-case-input">
+                        <el-option
+                          v-for="item in demandOptions"
+                          :key="item.id"
+                          :label="item.platform + ': '+item.name"
+                          :value="item.id">
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-tab-pane>
+
+                <el-tab-pane label="关联缺陷" name="bug">关联缺陷</el-tab-pane>
+                <el-tab-pane :label="$t('test_track.case.attachment')" name="attachment">
                  <el-row>
-            <el-col :span="19" :offset="2">
+                    <el-col :span="20" :offset="1">
                      <el-upload
-                accept=".jpg,.jpeg,.png,.xlsx,.doc,.pdf,.docx,.txt"
+                        accept=".jpg,.jpeg,.png,.xlsx,.doc,.pdf,.docx"
                        action=""
                        :show-file-list="false"
                        :before-upload="beforeUpload"
@ -244,6 +211,11 @@
                      />
                    </el-col>
                  </el-row>
+                </el-tab-pane>
+              </el-tabs>
+            </el-col>
+          </el-row>
+
          <el-row style="margin-top: 10px" v-if="type!='add'">
            <el-col :span="20" :offset="1">{{ $t('test_track.review.comment') }}:
              <el-button icon="el-icon-plus" type="mini" @click="openComment"></el-button>
@ -293,6 +265,7 @@ import ReviewCommentItem from "@/business/components/track/review/commom/ReviewC
 import {API_STATUS, REVIEW_STATUS, TEST} from "@/business/components/api/definition/model/JsonData";
 import MsTableButton from "@/business/components/common/components/MsTableButton";
 import MsSelectTree from "../../../common/select-tree/SelectTree";
+import MsTestCaseStepRichText from "./TestCaseStepRichText";

 export default {
  name: "TestCaseEdit",
@ -300,7 +273,8 @@ export default {
    MsTableButton,
    MsSelectTree,
    ReviewCommentItem,
-    TestCaseComment, MsPreviousNextButton, MsInputTag, CaseComment, MsDialogFooter, TestCaseAttachment
+    TestCaseComment, MsPreviousNextButton, MsInputTag, CaseComment, MsDialogFooter, TestCaseAttachment,
+    MsTestCaseStepRichText
  },
  data() {
    return {
@ -331,6 +305,8 @@ export default {
          desc: '',
          result: ''
        }],
+        stepDesc: '',
+        stepResult: '',
        selected: [],
        remark: '',
        tags: [],
@ -360,6 +336,7 @@ export default {
        prerequisite: [{max: 500, message: this.$t('test_track.length_less_than') + '500', trigger: 'blur'}],
        remark: [{max: 1000, message: this.$t('test_track.length_less_than') + '1000', trigger: 'blur'}]
      },
+      tabActiveName: "remark",
      formLabelWidth: "120px",
      operationType: '',
      isCreateContinue: false,
@ -663,12 +640,25 @@ export default {
      let tmp = {};
      Object.assign(tmp, testCase);
      tmp.steps = JSON.parse(testCase.steps);
-      if (tmp.steps == null) {
-        tmp.steps = [{
-          num: 1,
-          desc: '',
-          result: ''
-        }];
+      if(testCase.expectedResult != null) { //  改成富文本后加入的新数据 或 经过兼容的旧数据
+        tmp.stepResult = testCase.expectedResult + '<br>';
+      } else {  //  如果是旧数据
+        if(tmp.steps != null) {
+          tmp.stepResult = '';
+          tmp.steps.forEach(item => {
+            tmp.stepResult += item.num + ': ' + item.result + '<br>';
+          });
+        }
+      }
+      if(testCase.stepDescription != null) {
+        tmp.stepDesc = testCase.stepDescription + '<br>';
+      } else {
+        if(tmp.steps != null) {
+          tmp.stepDesc = '';
+          tmp.steps.forEach(item => {
+            tmp.stepDesc += item.num + ': ' + item.desc + '<br>';
+          });
+        }
      }
      tmp.tags = JSON.parse(tmp.tags);
      Object.assign(this.form, tmp);
@ -785,7 +775,9 @@ export default {
    buildParam() {
      let param = {};
      Object.assign(param, this.form);
-      param.steps = JSON.stringify(this.form.steps);
+      param.steps = null; //  旧数据搬运到新字段后，不再用到，置空便于判断
+      param.expectedResult = this.form.stepResult;
+      param.stepDescription = this.form.stepDesc; //  设置数据到新字段
      param.nodeId = this.form.module;
      param.nodePath = getNodePath(this.form.module, this.moduleOptions);
      if (this.projectId) {
@ -841,14 +833,16 @@ export default {
      };
    },
    validate(param) {
+      if(param.steps != null) {
        for (let i = 0; i < param.steps.length; i++) {
          if ((param.steps[i].desc && param.steps[i].desc.length > 300) ||
            (param.steps[i].result && param.steps[i].result.length > 300)) {
            this.$warning(this.$t('test_track.case.step_desc') + ","
-            + this.$t('test_track.case.expected_results') + this.$t('test_track.length_less_than') + '300');
+              + this.$t('test_track.case.expectedResults') + this.$t('test_track.length_less_than') + '300');
            return false;
          }
        }
+      }
      if (param.name == '') {
        this.$warning(this.$t('test_track.case.input_name'));
        return false;
@ -1013,6 +1007,18 @@ export default {
    createCtrlSHandle(event) {
      handleCtrlSEvent(event, this.saveCase);
    },
+    updateExpectRes(text) {
+      this.form.stepResult = text;
+    },
+    updateStepDesc(text) {
+      this.form.stepDesc = text;
+    },
+    updatePrerequisite(text) {
+      this.form.prerequisite = text;
+    },
+    updateRemark(text) {
+      this.form.remark = text;
+    },
  }
 }
 </script>
--- a/frontend/src/business/components/track/case/components/TestCaseStepRichText.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseStepRichText.vue
@ -0,0 +1,68 @@
+<template>
+    <ckeditor v-if="!isReportView"
+              :editor="editor"
+              v-model="textData"
+              :config="editorConfig"
+              :placeholder="$t('test_track.case.input_prerequisite')"
+              >
+    </ckeditor>
+</template>
+
+<script>
+  import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
+  export default {
+    name: "TestCaseRichText",
+    computed: {
+      textData: {
+        get: function () {
+          return this.content;
+        },
+        set: function (val) {
+          this.$emit('updateRichText', val);
+        }
+      }
+    },
+    data() {
+      return {
+        editor: ClassicEditor,
+        editorConfig: {
+          toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ,'insertTable', 'imageUpload', '|','undo', 'redo'],
+          // ckfinder: {
+          //   uploadUrl: `/image/uploadCkEditor?imgPath=${JSON.stringify(this.imagePath)}`
+          // },
+          // filebrowserImageUploadUrl: '/image/uploadCkEditor'simpleUpload
+        },
+        // shiftEnterMode: window.CKEditor.ENTER_P
+        // startupMode: 'source'
+      };
+    },
+    props: {
+      imagePath: {
+        type: String,
+        default: ''
+      },
+      content: {
+        type: String,
+        default: null
+      },
+      isReportView:
+        {
+          type: Boolean,
+          default: false
+        }
+    },
+    methods: {
+      // onReady(editor) {
+      //   // 自定义上传图片插件
+      //   editor.plugins.get("FileRepository").createUploadAdapter = loader => {
+      //     return new MyUploadAdapter(loader);
+      //   };
+      // }
+    }
+  };
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@ -1196,7 +1196,7 @@ export default {
      steps: "Steps",
      number: "Number",
      prerequisite: "Prerequisite",
-      step_desc: "Step describe",
+      step_desc: "Case step",
      expected_results: "Expected results",
      input_name: "Please enter name",
      input_module: "Please select module",
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@ -1200,7 +1200,7 @@ export default {
      steps: "执行步骤",
      number: "编号",
      prerequisite: "前置条件",
-      step_desc: "步骤描述",
+      step_desc: "用例步骤",
      expected_results: "预期结果",
      input_name: "请输入名称",
      input_module: "请选择模块",
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@ -1198,7 +1198,7 @@ export default {
      steps: "執行步驟",
      number: "編號",
      prerequisite: "前置條件",
-      step_desc: "步驟描述",
+      step_desc: "用例步驟",
      expected_results: "預期結果",
      input_name: "請輸入名稱",
      input_module: "請選擇模塊",