diff --git a/test-ui/src/views/test/case/report/index.vue b/test-ui/src/views/test/case/report/index.vue
new file mode 100644
index 0000000..9b3bc35
--- /dev/null
+++ b/test-ui/src/views/test/case/report/index.vue
@@ -0,0 +1,256 @@
+<template>
+  <el-collapse v-model="activeName" accordion>
+    <el-collapse-item :name="index" v-for="(item, index) in list" :key="index" v-if="!item.parentId">
+      <template slot="title">
+        <el-button size="mini" plain type="warning" icon="el-icon-rank" circle style="margin-right: 12px" class="drag-handle"/>
+        <el-tag effect="plain" style="width: 70px;text-align: center;margin-right: 12px;" class="drag-handle">{{ dict.type.step_type.findLast(t => t.value == item.type).label }}</el-tag>
+        <el-tag v-if="item.name" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info" class="drag-handle">{{ item.name }}</el-tag>
+        <el-tag v-if="item.datasourceId" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info" class="drag-handle">{{ datasourceList.findLast(t => t.id === item.datasourceId).name }}</el-tag>
+        <el-tag v-if="item.requestUrl" effect="plain" style="text-align: center;margin-right: 12px;" type="success" class="drag-handle">{{ item.requestUrl }}</el-tag>
+        <el-tag effect="plain" style="text-align: center;margin-right: 12px;" class="drag-handle">{{ index + 1 }}</el-tag>
+      </template>
+      <el-tabs v-model="tabsActiveName" v-if="item.type == 2 || item.type == 1">
+        <el-tab-pane v-if="item.type == 1" label="Headers" name="Headers">
+          <el-table :data="form.requestHeader">
+            <el-table-column label="参数名">
+              <template slot-scope="scope">
+                <el-input placeholder="请输入参数名" v-model="form.requestHeader[scope.$index].key" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
+              </template>
+            </el-table-column>
+            <el-table-column label="示例值">
+              <template slot-scope="scope">
+                <el-input placeholder="请输入参数名" v-model="form.requestHeader[scope.$index].value" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="60">
+              <template slot-scope="scope">
+                <el-button v-if="form.requestHeader.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('header', scope)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane v-if="item.type == 1" label="Params" name="Params">
+          <el-table :data="form.requestParams">
+            <el-table-column label="参数名">
+              <template slot-scope="scope">
+                <el-input placeholder="请输入参数名" v-model="form.requestParams[scope.$index].key" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
+              </template>
+            </el-table-column>
+            <el-table-column label="示例值">
+              <template slot-scope="scope">
+                <el-input placeholder="请输入示例值" v-model="form.requestParams[scope.$index].value" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="60">
+              <template slot-scope="scope">
+                <el-button v-if="form.requestParams.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('param', scope)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane v-if="item.type == 1" label="Body" name="Body">
+          <JsonEditorVue mode="text" v-model="form.requestBody" class="jse-theme-dark"/>
+        </el-tab-pane>
+        <el-tab-pane v-if="item.type == 2" label="SQL指令" name="sql">
+          <codemirror v-model="form.sqlCommand" :options="editorOptions" />
+        </el-tab-pane>
+        <el-tab-pane label="提取" name="assignment">
+          <el-table :data="form.assignment">
+            <el-table-column label="变量名">
+              <template slot-scope="scope">
+                <el-input placeholder="请输入变量名" v-model="form.assignment[scope.$index].name" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+              </template>
+            </el-table-column>
+            <el-table-column label="提取方式">
+              <template slot-scope="scope">
+                <el-input placeholder="请输入提取方式" v-model="form.assignment[scope.$index].type" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+              </template>
+            </el-table-column>
+            <el-table-column label="提取对象">
+              <template slot-scope="scope">
+                <el-input placeholder="请输入提取对象" v-model="form.assignment[scope.$index].content" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+              </template>
+            </el-table-column>
+            <el-table-column label="提取表达式">
+              <template slot-scope="scope">
+                <el-input placeholder="请输入提取表达式" v-model="form.assignment[scope.$index].path" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="60">
+              <template slot-scope="scope">
+                <el-button v-if="form.assignment.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('assignment', scope)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="校验" name="assertion">
+          <el-table :data="form.assertion">
+            <el-table-column label="描述">
+              <template slot-scope="scope">
+                <el-input placeholder="请输入描述" v-model="form.assertion[scope.$index].name" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+              </template>
+            </el-table-column>
+            <el-table-column label="对象">
+              <template slot-scope="scope">
+                <el-input placeholder="请输入对象" v-model="form.assertion[scope.$index].source" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+              </template>
+            </el-table-column>
+            <el-table-column label="条件">
+              <template slot-scope="scope">
+                <el-input placeholder="请输入条件" v-model="form.assertion[scope.$index].fn" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+              </template>
+            </el-table-column>
+            <el-table-column label="内容">
+              <template slot-scope="scope">
+                <el-input placeholder="请输入内容" v-model="form.assertion[scope.$index].target" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="60">
+              <template slot-scope="scope">
+                <el-button v-if="form.assertion.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('assertion', scope)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+      <div v-if="item.type == 3 || item.type == 4">
+        <el-collapse-item :name="index" v-for="(item, index) in list" :key="index" v-if="item.parentId && item.parentId === form.id">
+          <template slot="title">
+            <el-button size="mini" plain type="warning" icon="el-icon-rank" circle style="margin-right: 12px" class="drag-handle"/>
+            <el-tag effect="plain" style="width: 70px;text-align: center;margin-right: 12px;" class="drag-handle">{{ dict.type.step_type.findLast(t => t.value == item.type).label }}</el-tag>
+            <el-tag v-if="item.name" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info" class="drag-handle">{{ item.name }}</el-tag>
+            <el-tag v-if="item.datasourceId" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info" class="drag-handle">{{ datasourceList.findLast(t => t.id === item.datasourceId).name }}</el-tag>
+            <el-tag v-if="item.requestUrl" effect="plain" style="text-align: center;margin-right: 12px;" type="success" class="drag-handle">{{ item.requestUrl }}</el-tag>
+            <el-tag effect="plain" style="text-align: center;margin-right: 12px;" class="drag-handle">{{ index + 1 }}</el-tag>
+          </template>
+          <el-tabs v-model="childrenTabsActiveName" v-if="item.type == 2 || item.type == 1">
+            <el-tab-pane v-if="item.type == 1" label="Headers" name="Headers">
+              <el-table :data="form.requestHeader">
+                <el-table-column label="参数名">
+                  <template slot-scope="scope">
+                    <el-input placeholder="请输入参数名" v-model="form.requestHeader[scope.$index].key" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="示例值">
+                  <template slot-scope="scope">
+                    <el-input placeholder="请输入参数名" v-model="form.requestHeader[scope.$index].value" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="60">
+                  <template slot-scope="scope">
+                    <el-button v-if="form.requestHeader.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('header', scope)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane v-if="item.type == 1" label="Params" name="Params">
+              <el-table :data="form.requestParams">
+                <el-table-column label="参数名">
+                  <template slot-scope="scope">
+                    <el-input placeholder="请输入参数名" v-model="form.requestParams[scope.$index].key" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="示例值">
+                  <template slot-scope="scope">
+                    <el-input placeholder="请输入示例值" v-model="form.requestParams[scope.$index].value" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="60">
+                  <template slot-scope="scope">
+                    <el-button v-if="form.requestParams.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('param', scope)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane v-if="item.type == 1" label="Body" name="Body">
+              <JsonEditorVue mode="text" v-model="form.requestBody" class="jse-theme-dark"/>
+            </el-tab-pane>
+            <el-tab-pane v-if="item.type == 2" label="SQL指令" name="sql">
+              <codemirror v-model="form.sqlCommand" :options="editorOptions" />
+            </el-tab-pane>
+            <el-tab-pane label="提取" name="assignment">
+              <el-table :data="form.assignment">
+                <el-table-column label="变量名">
+                  <template slot-scope="scope">
+                    <el-input placeholder="请输入变量名" v-model="form.assignment[scope.$index].name" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="提取方式">
+                  <template slot-scope="scope">
+                    <el-input placeholder="请输入提取方式" v-model="form.assignment[scope.$index].type" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="提取对象">
+                  <template slot-scope="scope">
+                    <el-input placeholder="请输入提取对象" v-model="form.assignment[scope.$index].content" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="提取表达式">
+                  <template slot-scope="scope">
+                    <el-input placeholder="请输入提取表达式" v-model="form.assignment[scope.$index].path" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="60">
+                  <template slot-scope="scope">
+                    <el-button v-if="form.assignment.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('assignment', scope)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="校验" name="assertion">
+              <el-table :data="form.assertion">
+                <el-table-column label="描述">
+                  <template slot-scope="scope">
+                    <el-input placeholder="请输入描述" v-model="form.assertion[scope.$index].name" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="对象">
+                  <template slot-scope="scope">
+                    <el-input placeholder="请输入对象" v-model="form.assertion[scope.$index].source" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="条件">
+                  <template slot-scope="scope">
+                    <el-input placeholder="请输入条件" v-model="form.assertion[scope.$index].fn" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="内容">
+                  <template slot-scope="scope">
+                    <el-input placeholder="请输入内容" v-model="form.assertion[scope.$index].target" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="60">
+                  <template slot-scope="scope">
+                    <el-button v-if="form.assertion.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('assertion', scope)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
+        </el-collapse-item>
+      </div>
+    </el-collapse-item>
+  </el-collapse>
+</template>
+
+<script>
+
+import JsonEditorVue from "json-editor-vue";
+
+export default {
+  components: {JsonEditorVue},
+  data() {
+    return {
+      form: {},
+      activeName: '',
+      tabsActiveName: '',
+      childrenTabsActiveName: '',
+      list: []
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>