merge master

config/dev.env.js

@@ -5,7 +5,10 @@ const prodEnv = require('./prod.env')
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
-  QA_PLATFORM: '"//localhost:8082"',
+  // QA_PLATFORM: '"//localhost:8082"',
   TESTDATA_API: '"//testdata.liangkebang.com"',
-  HOLMES: '"//localhost:8084"',
+  // HOLMES: '"//localhost:8084"',
+  QA_PLATFORM: '"//qa-platform-fe.liangkebang.net/"',
+  HOLMES: '"//holmes-fe.liangkebang.net/"',
+  // HOLMES: '"//192.168.29.143:8084/"'
 })

config/index.js

@@ -11,9 +11,9 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {},
-
-    // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+ 
+    // Various Dev Server settings localhost
+    host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

package-lock.json

@@ -2771,6 +2771,16 @@
       "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "cliui": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
@@ -4508,6 +4518,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -6214,6 +6229,14 @@
         "pinkie-promise": "^2.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
@@ -13543,6 +13566,11 @@
         }
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -13978,6 +14006,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.13.0.tgz",
+      "integrity": "sha512-RBJirPY0spWCrU5yCmWM1eFs/XgX2J5c6b275/YyxFRgnzPhKl/TDeU2hNR8Dt7ITq66NRPM4UlOt+e5O4CFHg=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -14653,6 +14686,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -15227,6 +15265,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "vue-bus": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/vue-bus/-/vue-bus-1.2.1.tgz",
+      "integrity": "sha512-uCSJEWFWoDZz+GV/Pj/wXAC7WVBLD18V62l+2ezd4UCsZWZB27Hz3K0M9WUcbNum/yKBoN+OkOCIrU6A9xqWhw=="
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
@@ -15258,6 +15301,11 @@
         }
       }
     },
+    "vue-events": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-events/-/vue-events-3.1.0.tgz",
+      "integrity": "sha512-JoE6ZlIEFdpj/vE7oW6T1T3Vz2h0Zxc4XEyz92L2tiRVc1TZ0u/nY1s6ZrnpHKoVxeEU0ouAp/FMxTKI3JBpvA=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -15298,6 +15346,15 @@
         "vue": "^2.2.6"
       }
     },
+    "vue-json-viewer": {
+      "version": "2.2.18",
+      "resolved": "https://registry.npmjs.org/vue-json-viewer/-/vue-json-viewer-2.2.18.tgz",
+      "integrity": "sha512-OytvjRrnmH2cUfz8hbXM34GuYW08LFCQIr7tppQRJIaqGfVpn96F0cOuV+8ezwoEpeRT8xmldpeATBhiimNYDQ==",
+      "requires": {
+        "clipboard": "^2.0.4",
+        "vue": "^2.6.9"
+      }
+    },
     "vue-loader": {
       "version": "13.7.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz",

package.json

@@ -18,8 +18,12 @@
     "echarts": "^4.8.0",
     "element-ui": "^2.13.2",
     "less": "^3.11.1",
+    "sortablejs": "^1.13.0",
     "vue": "^2.5.2",
+    "vue-bus": "^1.2.1",
+    "vue-events": "^3.1.0",
     "vue-json-editor": "^1.4.3",
+    "vue-json-viewer": "^2.2.18",
     "vue-router": "^3.0.1",
     "vuex": "^3.6.2"
   },

src/api/getAotoInterface.js

+import request from '@/utils/holmesRequest'
+// 项目模块相关接口
+export function getProjectList(queryInfo) {
+  return request({
+    url: '/auto/project/list',
+    method: 'get',
+    params: queryInfo
+  })
+}
+export function addProject(data) {
+  return request({
+    url: '/auto/project/add',
+    method: 'post',
+    data
+  })
+}
+export function editProject(data) {
+  return request({
+    url: '/auto/project/modify',
+    method: 'post',
+    data
+  })
+}
+export function delProject(queryInfo) {
+  return request({
+    url: '/auto/project/delete',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 模块列表相关接口
+export function getModulList(queryInfo) {
+  return request({
+    url: '/auto/module/list',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 添加模块接口
+export function addModul(data) {
+  return request({
+    url: '/auto/module/add',
+    method: 'post',
+    data
+  })
+}
+// 编辑模块接口
+export function editModel(data) {
+  return request({
+    url: '/auto/module/modify',
+    method: 'post',
+    data
+  })
+}
+// 删除模块
+export function delModel(queryInfo) {
+  return request({
+    url: '/auto/module/delete',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 获取接口列表
+export function interfaceDetailList(queryInfo) {
+  return request({
+    url: '/auto/interface/list',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 添加接的口接口
+export function addInterface(data) {
+  return request({
+    url: '/auto/interface/add',
+    method: 'post',
+    data
+  })
+}
+// 编辑接口的接口
+export function editInterface(data) {
+  return request({
+    url: '/auto/interface/modify',
+    method: 'post',
+    data
+  })
+}
+// 删除接口的接口
+export function delInterface(queryInfo) {
+  return request({
+    url: '/auto/interface/delete',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 获取某个接口下的所有用例
+export function getCaseByInterface(queryInfo) {
+  return request({
+    url: '/auto/testcase/byInterface',
+    method: 'get',
+    params: queryInfo
+  })
+}

src/api/getAutoCase.js

+import request from '@/utils/holmesRequest'
+// 获取case列表
+export function singleCaseList(queryInfo) {
+  return request({
+    url: '/auto/testcase/list',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 获取接口详情
+export function getInterfaceDetail(queryInfo) {
+  return request({
+    url: '/auto/interface/detail',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 添加用例接口
+export function addCase(data) {
+  return request({
+    url: '/auto/testcase/add',
+    method: 'post',
+    data
+  })
+}
+// 删除case接口
+export function delCase(queryInfo) {
+  return request({
+    url: '/auto/testcase/delete',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 执行单个case
+export function executeCase(queryInfo) {
+  return request({
+    url: '/auto/execute/testcase',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 单个用例编辑接口
+export function editCase(data) {
+  return request({
+    url: '/auto/testcase/modify',
+    method: 'post',
+    data
+  })
+}

src/api/getAutoScene.js

+import request from '@/utils/holmesRequest'
+export function getSceneList(queryInfo) {
+  return request({
+    url: '/auto/scene/list',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 添加场景接口
+export function addSecene(data) {
+  return request({
+    url: '/auto/scene/add',
+    method: 'post',
+    data
+  })
+}
+// 删除场景
+export function delSecne(queryInfo) {
+  return request({
+    url: '/auto/scene/delete',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 获取场景用例列表接口
+export function getSceneCaseList(queryInfo) {
+  return request({
+    url: '/auto/sceneTestcase/list',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 添加场景用例接口
+export function addSceneCase(data) {
+  return request({
+    url: '/auto/sceneTestcase/saveOrUpdate',
+    method: 'post',
+    data
+  })
+}
+// 执行场景用例接口
+export function executeScene(queryInfo) {
+  return request({
+    url: '/auto/execute/scene',
+    method: 'get',
+    params: queryInfo
+  })
+}

src/assets/css/global.css

@@ -16,4 +16,23 @@ html, body, #app {
 
 .jsoneditor-vue {
     height: 300px;
+}
+.el-collapse-item__header{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 48px;
+    line-height: 48px;
+    background-color: #FFF;
+    color: #303133;
+    cursor: pointer;
+    border-bottom: 1px solid #EBEEF5;
+    font-size: 15px !important;
+    font-weight: 550 !important;
+    -webkit-transition: border-bottom-color .3s;
+    transition: border-bottom-color .3s;
+    outline: 0;
 }
\ No newline at end of file

src/main.js

@@ -8,6 +8,9 @@ import echarts from 'echarts'
 import 'element-ui/lib/theme-chalk/index.css'
 import axios from 'axios'
 import store from './store/store'
+import JsonViewer from 'vue-json-viewer'
+import bus from '../src/utils/bus'
+// import Sortable from 'sortablejs'
 import {
   Container,
   Header,
@@ -40,7 +43,9 @@ import {
   Switch,
   RadioGroup,
   Radio,
-  MessageBox
+  MessageBox,
+  Row,
+  Col
 } from 'element-ui'
 
 Vue.config.productionTip = false
@@ -51,6 +56,7 @@ Vue.prototype.$echarts = echarts
 Vue.prototype.$message = Message
 Vue.prototype.$loading = Loading
 Vue.prototype.$messageBox = MessageBox
+Vue.prototype.$bus = bus
 // axios.defaults.baseURL = 'https://qa-platform-pre.liangkebang.net'
 // axios.defaults.baseURL = 'http://localhost:8082'
 
@@ -83,6 +89,10 @@ Vue.use(TabPane)
 Vue.use(Switch)
 Vue.use(RadioGroup)
 Vue.use(Radio)
+Vue.use(Row)
+Vue.use(Col)
+Vue.use(JsonViewer)
+// Vue.use(Sortable)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/router/index.js

@@ -14,22 +14,31 @@ import Mock from '../views/mock/Mock'
 import kdspDecrypt from '../views/effect/KdspDecrypt'
 import JenkinsBuildInfo from '../views/effect/JenkinsBuildInfo'
 import LoginWhiteList from '../views/effect/LoginWhiteList'
+// 2021-040-09新添加
+import ProjectList from '../views/auto/Project'
+import ModelList from '../views/auto/Model'
+import InterfaceDetail from '../views/auto/InterfaceDetail'
 import JiraNotify from '../views/jira/Notify'
 import RiskControl from '../views/vcc/RiskControl'
 import ClearCache from '../views/effect/ClearCache'
 import ClearData from '../views/effect/ClearData'
+import AddInterface from '../views/auto/AddInterface'
+import CaseList from '../views/auto/CaseList'
+import AddCase from '../views/auto/AddCase'
+import SceneList from '../views/auto/SceneList'
+import EditScene from '../views/auto/EditScene'
 
 Vue.use(Router)
-
 const router = new Router({
   mode: 'history',
   routes: [
     {
-      'path': '/',
+      path: '/',
       redirect: '/index'
     },
     {
-      'path': '/index',
+      path: '/index',
+      name: '登录页',
       component: Index
     },
     // {
@@ -42,45 +51,97 @@ const router = new Router({
       component: Home,
       children: [
         {
-          'path': '/main',
+          path: '/main',
+          name: '主页',
           component: Main
         },
         {
-          'path': '/xyqb/genLoanData',
+          path: '/xyqb/genLoanData',
+          name: '捞数据',
           component: XyqbGenLoanData
         },
         {
-          'path': '/xyqb/getLoanData',
+          path: '/xyqb/getLoanData',
+          name: '造数据',
           component: XyqbGetLoanData
         },
         {
-          'path': '/vcc/getData',
+          path: '/vcc/getData',
+          name: '查数据',
           component: VccGetData
         },
         {
-          'path': '/vcc/genData',
+          path: '/vcc/genData',
+          name: 'VCC捞数据',
           component: VccGenData
         },
         {
-          'path': '/vcc/checkData',
+          path: '/vcc/checkData',
+          name: '造数据',
           component: VccCheckData
         },
         {
-          'path': '/mock/list',
+          path: '/mock/list',
+          name: '工具',
           component: Mock
         },
         {
-          'path': '/effect/kdsp/decrypt',
+          path: '/effect/kdsp/decrypt',
+          name: 'kdsp解密',
           component: kdspDecrypt
         },
         {
-          'path': '/effect/jenkins/build',
+          path: '/effect/jenkins/build',
+          name: '构建记录',
           component: JenkinsBuildInfo
         },
         {
-          'path': '/effect/whitelist',
+          path: '/effect/whitelist',
+          name: '登录白名单',
           component: LoginWhiteList
         },
+        // 2021-4-08新添加项目管理页面
+        {
+          path: '/auto/Project',
+          name: ProjectList,
+          component: ProjectList
+        },
+        {
+          path: '/auto/Model',
+          name: ModelList,
+          component: ModelList
+        },
+        {
+          path: '/auto/InterfaceDetail',
+          name: InterfaceDetail,
+          component: InterfaceDetail
+        },
+        {
+          path: '/auto/AddInterface',
+          name: AddInterface,
+          component: AddInterface
+        },
+        {
+          path: '/auto/CaseList',
+          name: CaseList,
+          component: CaseList
+        },
+        {
+          path: '/auto/AddCase',
+          name: AddCase,
+          component: AddCase
+        },
+        {
+          path: '/auto/SceneList',
+          name: SceneList,
+          component: SceneList
+        },
+        // 编辑场景
+        {
+          path: '/auto/EditScene',
+          name: EditScene,
+          component: EditScene
+        },
         {
           'path': '/jira/notify',
           component: JiraNotify
@@ -99,7 +160,7 @@ const router = new Router({
         }
       ]
     }
+
   ]
 })
-
 export default router

src/utils/bus.js

+import Vue from 'vue'
+
+const bus = new Vue()
+
+export default bus

src/views/auto/AddCase.vue

+<template>
+  <div>
+    <el-form ref="caseForm" :rules="rules" :model="caseForm" label-width="90px">
+      <el-form-item label="模块名称:" prop="moduleId">
+        <el-select v-model="caseForm.moduleId" placeholder="请选择模块" @change="selectChangeModel" clearable>
+          <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="接口名称:" prop="interfaceId">
+        <el-select v-model="caseForm.interfaceId" placeholder="请选择接口" @change="selectChangeInterface" clearable>
+          <el-option v-for="item in interfaceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-card v-if="this.isShow">
+        <el-form-item label="用例名称:" prop="name" style="width:310px;margin-left:-20px">
+          <el-input v-model="caseForm.name" placeholder="请输入用例名称"></el-input>
+        </el-form-item>
+        <el-collapse v-model="activeNames">
+          <!-- Headers -->
+          <el-collapse-item name="1" title="请求头">
+            <el-button type="success" plain @click="AddHeaderListRow()" class="el-icon-circle-plus">添加行</el-button>
+            <el-form-item>
+              <el-row>
+                <el-col :span="6">
+                  <div class="grid-content" style="margin-left:15px">参数名称</div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="grid-content" style="margin-left:15px">参数值</div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="grid-content" style="margin-left:25px">操作</div>
+                </el-col>
+              </el-row>
+              <el-row v-for="(item,index) in headersList" :key="index">
+                <el-col :span="6">
+                  <div>
+                    <el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div>
+                    <el-input v-model.trim="item.paramsValue" placeholder="请输入参数值"></el-input>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div>
+                    <el-button size="mini" type="danger" @click="advanceDelss(index)" style="height:40px;margin-left:20px">删除</el-button>
+                  </div>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </el-collapse-item>
+          <!-- 请求参数 -->
+          <el-collapse-item name="2" title="请求参数">
+            <el-button type="success" plain @click="AddRequestParamsListRow()" class="el-icon-circle-plus">添加行</el-button>
+            <el-form-item>
+              <el-row>
+                <el-col :span="6">
+                  <div class="grid-content" style="margin-left:15px">参数名称</div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="grid-content" style="margin-left:15px">参数值</div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="grid-content" style="margin-left:25px">操作</div>
+                </el-col>
+              </el-row>
+              <el-row v-for="(item,index) in requestParamsList" :key="index">
+                <el-col :span="6">
+                  <div>
+                    <el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div>
+                    <el-input v-model.trim="item.paramsValue" placeholder="请输入参数值"></el-input>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div>
+                    <el-button size="mini" type="danger" @click="requestParamsDel(index)" style="height:40px;margin-left:20px">删除</el-button>
+                  </div>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </el-collapse-item>
+          <!-- 参数列表 -->
+          <el-collapse-item name="3" title="参数列表">
+            <el-button type="success" plain @click="AddParamsListRow()" class="el-icon-circle-plus">添加行</el-button>
+            <el-form-item>
+              <el-row>
+                <el-col :span="6">
+                  <div class="grid-content" style="margin-left:15px">参数名称</div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="grid-content" style="margin-left:15px">参数值</div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="grid-content" style="margin-left:25px">操作</div>
+                </el-col>
+              </el-row>
+              <el-row v-for="(item,index) in paramsList" :key="index">
+                <el-col :span="6">
+                  <div>
+                    <el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div>
+                    <el-input v-model.trim="item.paramsValue" placeholder="请输入参数值"></el-input>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div>
+                    <el-button size="mini" type="danger" @click="paramsDel(index)" style="height:40px;margin-left:20px">删除</el-button>
+                  </div>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </el-collapse-item>
+          <!-- 响应解析列表 -->
+          <el-collapse-item name="4" title="响应列表">
+            <el-button type="success" plain @click="AddResponseListRow()" class="el-icon-circle-plus">添加行</el-button>
+            <el-form-item>
+              <el-row>
+                <el-col :span="6">
+                  <div class="grid-content" style="margin-left:15px">参数名称</div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="grid-content" style="margin-left:15px">参数值</div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="grid-content" style="margin-left:25px">操作</div>
+                </el-col>
+              </el-row>
+              <el-row v-for="(item,index) in responseList" :key="index">
+                <el-col :span="6">
+                  <div>
+                    <el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div>
+                    <el-input v-model.trim="item.paramsValue" placeholder="请输入参数值"></el-input>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div>
+                    <el-button size="mini" type="danger" @click="responeDel(index)" style="height:40px;margin-left:20px">删除</el-button>
+                  </div>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </el-collapse-item>
+          <!-- 断言 -->
+          <el-collapse-item name="5" title="结果断言">
+            <el-button type="success" plain @click="AddAssertionListRow()" class="el-icon-circle-plus">添加行</el-button>
+            <el-table :data="assertionList" border style="width:100%;margin-top: 15px;">
+              <el-table-column label="参数名称" width="150">
+                <template slot-scope="scope">
+                  <el-input v-model="scope.row.paramsName">
+                  </el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="参数值" width="150">
+                <template slot-scope="scope">
+                  <el-input v-model="scope.row.paramsValue">
+                  </el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="是否必填" width="150" style="text-align:center">
+                <template slot-scope="scope">
+                  <el-switch v-model="scope.row.isRequired" active-color="#13ce66" inactive-color="#A9A9A9" active-text="是" inactive-text="否" @change="changeState()"></el-switch>
+                </template>
+              </el-table-column>
+              <el-table-column label="示例" width="300">
+                <template slot-scope="scope">
+                  <el-input v-model="scope.row.examples"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="备注" width="300">
+                <template slot-scope="scope">
+                  <el-input v-model="scope.row.remarks"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="danger" @click="AssertionDelete(scope.$index)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-collapse-item>
+        </el-collapse>
+        <div style="margin-left:700px;margin-top:20px">
+          <el-button type="primary" @click="addCaseFrom">确 定</el-button>
+        </div>
+      </el-card>
+    </el-form>
+  </div>
+</template>
+<script>
+import { getModulList, interfaceDetailList } from '@/api/getAotoInterface'
+import { getInterfaceDetail, addCase, editCase } from '@/api/getAutoCase'
+// import bus from '@/utils/bus'
+export default {
+  data() {
+    return {
+      queryModuleInfo: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      moduleInfo: {
+        pageNum: 1,
+        pageSize: 100
+      },
+      interfaceInfo: {
+        pageNum: 1,
+        pageSize: 100,
+        moduleId: ''
+      },
+      caseForm: {
+        id: '',
+        name: '',
+        moduleId: '',
+        moduleName: '',
+        interfaceName: '',
+        interfaceId: '',
+        headers: '',
+        variables: '',
+        parameters: '',
+        extract: '',
+        validate: ''
+      },
+      modelList: [],
+      interfaceList: [],
+      selectInterfacelId: '',
+      rules: {
+        moduleId: [
+          {
+            required: true,
+            message: '模块名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        interfaceId: [
+          {
+            required: true,
+            message: '接口名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        name: [
+          {
+            required: true,
+            message: '用例不能为空！',
+            trigger: 'blur'
+          }
+        ]
+      },
+      isShow: false,
+      activeNames: '1',
+      interfaceForm: {
+        interfaceId: ''
+      },
+      assertionList: [],
+      headersList: [],
+      requestParamsList: [],
+      paramsList: [],
+      responseList: []
+    }
+  },
+  created() {
+    this.getModelList()
+    this.$bus.$on('casemsg', (row) => {
+      // console.log('接收到的信息', row)
+      if (row !== null) {
+        if (row === '新增') {
+          this.isShow = false
+          this.caseForm.name = ''
+          this.caseForm.moduleId = ''
+          this.caseForm.interfaceId = ''
+          this.headersList = []
+          this.requestParamsList = []
+          this.paramsList = []
+          this.responseList = []
+          this.assertionList = []
+        } else {
+          // 编辑接收到的信息
+          this.isShow = true
+          this.caseForm.id = row.id
+          this.caseForm.name = row.name
+          this.caseForm.moduleId = row.moduleId
+          this.caseForm.interfaceId = row.interfaceId
+          this.caseForm.moduleName = row.moduleName
+          this.caseForm.interfaceName = row.interfaceName
+          // 请求头（将json字符串转化为对象）
+          var newHeaders = JSON.parse(row.headers)
+          this.headersList = []
+          for (var i in newHeaders) {
+            this.headersList.push({
+              paramsName: i,
+              paramsValue: newHeaders[i]
+            })
+          }
+          // 请求参数
+          var newParamters = JSON.parse(row.parameters)
+          this.requestParamsList = []
+          for (var j in newParamters) {
+            this.requestParamsList.push({
+              paramsName: j,
+              paramsValue: newParamters[j]
+            })
+          }
+          // 参数列表
+          var newVariables = JSON.parse(row.variables)
+          this.paramsList = []
+          for (var k in newVariables) {
+            this.paramsList.push({
+              paramsName: k,
+              paramsValue: newVariables[k]
+            })
+          }
+          // 响应解析列表
+          var newExtract = JSON.parse(row.extract)
+          this.responseList = []
+          for (var o in newExtract) {
+            this.responseList.push({
+              paramsName: o,
+              paramsValue: newExtract[o]
+            })
+          }
+          // 返回断言
+          this.assertionList = JSON.parse(row.validate)
+        }
+      }
+    })
+  },
+  methods: {
+    // 获取模块列表
+    getModelList() {
+      getModulList(this.moduleInfo).then((resp) => {
+        this.modelList = resp.data.data.list
+      })
+    },
+    // 模块下拉框改变事件
+    selectChangeModel() {
+      interfaceDetailList(this.interfaceInfo).then((resp) => {
+        this.interfaceList = resp.data.data.list
+      })
+    },
+    // 接口下拉框改变事件
+    selectChangeInterface() {
+      this.isShow = true
+      this.interfaceForm.interfaceId = this.caseForm.interfaceId
+      // 获取接口详情
+      getInterfaceDetail(this.interfaceForm).then((resp) => {
+        this.headersList = JSON.parse(resp.data.data.headers)
+        this.requestParamsList = JSON.parse(resp.data.data.paramTemplate)
+        this.responseList = JSON.parse(resp.data.data.responseTemplate)
+      })
+    },
+    // 添加Headers
+    AddHeaderListRow() {
+      this.headersList.push({
+        paramsName: '',
+        paramsValue: ''
+      })
+    },
+    // 删除Headers
+    advanceDelss(index) {
+      this.headersList.splice(index, 1)
+    },
+    // 添加请求参数
+    AddRequestParamsListRow() {
+      this.requestParamsList.push({
+        paramsName: '',
+        paramsValue: ''
+      })
+    },
+    // 删除请求参数
+    requestParamsDel(index) {
+      this.requestParamsList.splice(index, 1)
+    },
+    // 参数列表
+    AddParamsListRow() {
+      this.paramsList.push({
+        paramsName: '',
+        paramsValue: ''
+      })
+    },
+    // 参数列表删除
+    paramsDel(index) {
+      this.paramsList.splice(index, 1)
+    },
+    // 添加响应解析列表
+    AddResponseListRow() {
+      this.responseList.push({
+        paramsName: '',
+        paramsValue: ''
+      })
+    },
+    // 删除响应解析信息
+    responeDel(index) {
+      this.responseList.splice(index, 1)
+    },
+    // 添加断言行
+    AddAssertionListRow() {
+      this.assertionList.push({
+        paramsName: '',
+        paramsValue: '',
+        isRequired: true,
+        examples: '',
+        remarks: ''
+      })
+    },
+    // 断言改变
+    changeState(e) {
+      if (e === true) {
+        this.assertionList.isRequired = e
+      } else {
+        this.assertionList.isRequired = e
+      }
+    },
+    // 断言删除
+    AssertionDelete(index) {
+      this.assertionList.splice(index, 1)
+    },
+    // 添加case信息
+    addCaseFrom() {
+      // 将数组转化为对象
+      var headersObj = {}
+      this.headersList.forEach((item) => {
+        headersObj[item.paramsName] = item.paramsValue
+      })
+      // 将对象转化为Json
+      this.caseForm.headers = JSON.stringify(headersObj)
+      // 请求参数
+      var requestParamsObj = {}
+      this.requestParamsList.forEach((item) => {
+        requestParamsObj[item.paramsName] = item.paramsValue
+      })
+      this.caseForm.parameters = JSON.stringify(requestParamsObj)
+      // 参数列表
+      var paramsListObj = {}
+      this.paramsList.forEach((item) => {
+        paramsListObj[item.paramsName] = item.paramsValue
+      })
+      this.caseForm.variables = JSON.stringify(paramsListObj)
+      // 响应解析列表
+      var responseObj = {}
+      this.responseList.forEach((item) => {
+        responseObj[item.paramsName] = item.paramsValue
+      })
+      this.caseForm.extract = JSON.stringify(responseObj)
+      // 断言
+      this.caseForm.validate = JSON.stringify(this.assertionList)
+      if (this.caseForm.id) {
+        // 编辑接口
+        editCase(this.caseForm).then((resp) => {
+          if (resp.data.data === true) {
+            this.$message.success('修改成功！')
+            this.$router.push('CaseList')
+            // 刷新列表页
+            this.sendResh()
+          } else {
+            this.$message.error(resp.data.msg)
+          }
+        })
+      } else {
+        // 添加接口
+        addCase(this.caseForm).then((resp) => {
+          if (resp.data.data === true) {
+            this.$message.success('添加成功！')
+            // 返回列表页
+            this.$router.push('CaseList')
+            // 刷新列表页
+            this.sendResh()
+          } else {
+            this.$message.error(resp.data.msg)
+          }
+        })
+      }
+    },
+
+    // 刷新列表
+    sendResh() {
+      // bus使用
+      this.$nextTick(function () {
+        // DOM 现在更新了
+        this.$bus.$emit('refresh')
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.h-list {
+  line-height: 20px;
+  padding: 10px 0;
+  font-size: 14px;
+  color: #161b22;
+  border-bottom: 1px solid #e9eaf1;
+  div {
+    padding-right: 5px;
+    max-height: 150px;
+    //overflow-y: auto;
+    overflow-x: hidden;
+    word-wrap: break-word;
+  }
+}
+</style>

src/views/auto/AddInterface.vue

+<template>
+  <div>
+    <el-form ref="interfaceForm" :rules="rules" :model="interfaceForm">
+      <el-collapse v-model="activeNames">
+        <el-collapse-item name="1" title="基本信息">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="接口名称:" prop="name">
+                <el-input v-model="interfaceForm.name" style="width:200px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="所属模块:" prop="moduleId">
+                <el-select v-model="interfaceForm.moduleId" placeholder="请选择模块">
+                  <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="请求方式:" prop="method">
+                <el-select v-model="interfaceForm.method" placeholder="请选择">
+                  <el-option v-for="item in optionMethod" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="请求路径:" prop="url">
+                <el-input v-model="interfaceForm.url" style="width:200px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="参数类型:" prop="paramType">
+                <el-select v-model="interfaceForm.paramType" placeholder="请选择参数类型">
+                  <el-option v-for="item in optionReqType" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-collapse-item>
+        <!-- Headers添加 -->
+        <el-collapse-item title="请求头" name="2">
+          <el-button type="success" plain class="el-icon-circle-plus" @click="AddHeaderListRow()">添加行</el-button>
+          <!-- Header参数添加 -->
+          <el-table :data="headersList" border style="width:100%;margin-top:15px;">
+            <el-table-column label="参数名称" width="150">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.paramsName">
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="参数值" width="150">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.paramsValue">
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="是否必填" width="150" style="text-align:center">
+              <template slot-scope="scope">
+                <el-switch v-model="scope.row.isRequired" active-color="#13ce66" inactive-color="#A9A9A9" active-text="是" inactive-text="否" @change="changeState($event,'1')"></el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column label="示例" width="300">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.examples"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" width="300">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.remarks"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button size="mini" type="danger" @click="headerDelete(scope.$index)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-collapse-item>
+        <!-- 参数添加 -->
+        <el-collapse-item title="请求参数" name="3">
+          <el-button type="success" plain class="el-icon-circle-plus" @click="AddParamsListRow()">添加行</el-button>
+          <el-table :data="paramList" border style="width:100%;margin-top: 15px;">
+            <el-table-column label="参数名称" width="150">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.paramsName">
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="参数值" width="150">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.paramsValue">
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="是否必填" width="150" style="text-align:center">
+              <template slot-scope="scope">
+                <el-switch v-model="scope.row.isRequired" active-color="#13ce66" inactive-color="#A9A9A9" active-text="是" inactive-text="否" @change="changeState($event,'2')"></el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column label="示例" width="300">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.examples"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" width="300">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.remarks"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button size="mini" type="danger" @click="paramsDelete(scope.$index)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-collapse-item>
+        <!-- 响应参数添加 -->
+        <el-collapse-item title="响应参数" name="4">
+          <el-button type="success" plain class="el-icon-circle-plus" @click="AddResponseListRow()">添加行</el-button>
+          <el-table :data="responseList" border style="width:100%;margin-top: 15px;">
+            <el-table-column label="参数名称" width="150">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.paramsName">
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="参数值" width="150">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.paramsValue">
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="是否必填" width="150" style="text-align:center">
+              <template slot-scope="scope">
+                <el-switch v-model="scope.row.isRequired" active-color="#13ce66" inactive-color="#A9A9A9" active-text="是" inactive-text="否" @change="changeState($event,'3')"></el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column label="示例" width="300">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.examples"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" width="300">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.remarks"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button size="mini" type="danger" @click="responseDelete(scope.$index)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-collapse-item>
+      </el-collapse>
+    </el-form>
+    <div style="margin-left:700px;margin-top:20px">
+      <el-button type="primary" @click="addInterfaceFrom">确 定</el-button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {
+  getModulList,
+  addInterface,
+  editInterface
+} from '@/api/getAotoInterface'
+// import bus from '@/utils/bus'
+export default {
+  data() {
+    return {
+      queryModuleInfo: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      activeNames: '1',
+      interfaceForm: {
+        id: '',
+        name: '',
+        moduleId: '',
+        method: '',
+        url: '',
+        paramType: '',
+        headers: '',
+        paramTemplate: '',
+        responseTemplate: ''
+      },
+      headersList: [],
+      paramList: [],
+      responseList: [],
+      modelList: [],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '接口名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        moduleId: [
+          {
+            required: true,
+            message: '接口名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        method: [
+          {
+            required: true,
+            message: '接口名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        url: [
+          {
+            required: true,
+            message: '接口名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        paramType: [
+          {
+            required: true,
+            message: '接口名称不能为空！',
+            trigger: 'blur'
+          }
+        ]
+      },
+      optionMethod: [
+        {
+          id: 'get',
+          name: 'get'
+        },
+        {
+          id: 'post',
+          name: 'post'
+        }
+      ],
+      optionReqType: [
+        {
+          id: 'params',
+          name: 'params'
+        },
+        {
+          id: 'json',
+          name: 'json'
+        },
+        {
+          id: 'form',
+          name: 'form'
+        }
+      ]
+    }
+  },
+  created() {
+    this.$bus.$on('msg', (row) => {
+      if (row !== null) {
+        if (row === '新增') {
+          this.interfaceForm.id = ''
+          this.interfaceForm.name = ''
+          this.interfaceForm.moduleId = ''
+          this.interfaceForm.method = ''
+          this.interfaceForm.url = ''
+          this.interfaceForm.paramType = ''
+          this.headersList = []
+          this.paramList = []
+          this.responseList = []
+        } else {
+          this.interfaceForm.id = row.id
+          this.interfaceForm.name = row.name
+          this.interfaceForm.moduleId = row.moduleId
+          this.interfaceForm.method = row.method
+          this.interfaceForm.url = row.url
+          this.interfaceForm.paramType = row.paramType
+          this.headersList = JSON.parse(row.headers)
+          this.paramList = JSON.parse(row.paramTemplate)
+          this.responseList = JSON.parse(row.responseTemplate)
+        }
+      }
+    })
+    this.getModelList()
+  },
+  methods: {
+    // 接受参数信息
+    getParamsMes() {},
+    // 模块列表
+    getModelList() {
+      getModulList(this.queryModuleInfo).then((resp) => {
+        this.modelList = resp.data.data.list
+      })
+    },
+    // 添加行信息
+    AddHeaderListRow() {
+      this.headersList.push({
+        paramsName: '',
+        paramsValue: '',
+        isRequired: true,
+        examples: '',
+        remarks: ''
+      })
+    },
+    AddParamsListRow() {
+      this.paramList.push({
+        paramsName: '',
+        paramsValue: '',
+        isRequired: true,
+        examples: '',
+        remarks: ''
+      })
+    },
+    AddResponseListRow() {
+      this.responseList.push({
+        paramsName: '',
+        paramsValue: '',
+        isRequired: true,
+        examples: '',
+        remarks: ''
+      })
+    },
+    // 删除header行信息
+    headerDelete(index) {
+      this.headersList.splice(index, 1)
+    },
+    // 删除参数行
+    paramsDelete(index) {
+      this.paramList.splice(index, 1)
+    },
+    // 删除响应参数
+    responseDelete(index) {
+      this.responseList.splice(index, 1)
+    },
+    // 状态按钮
+    changeState(e, str) {
+      if (e === true && str === '1') {
+        this.headersList.isRequired = e
+      } else {
+        this.headersList.isRequired = e
+      }
+      if (e === true && str === '2') {
+        this.paramList.isRequired = e
+      } else {
+        this.paramList.isRequired = e
+      }
+      if (e === true && str === '3') {
+        this.responseList.isRequired = e
+      } else {
+        this.responseList.isRequired = e
+      }
+    },
+    // 刷新列表
+    sendResh() {
+      // bus使用
+      this.$nextTick(function () {
+        // DOM 现在更新了
+        this.$bus.$emit('refresh')
+      })
+    },
+    // 保存接口信息
+    addInterfaceFrom() {
+      this.interfaceForm.headers = JSON.stringify(this.headersList)
+      this.interfaceForm.paramTemplate = JSON.stringify(this.paramList)
+      this.interfaceForm.responseTemplate = JSON.stringify(this.responseList)
+
+      if (this.interfaceForm.id) {
+        // 编辑接口
+        editInterface(this.interfaceForm).then((resp) => {
+          if (resp.data.data === true) {
+            this.$message.success('修改成功！')
+            this.$router.push('InterfaceDetail')
+            // 刷新列表页
+            this.sendResh()
+          } else {
+            this.$message.error(resp.data.msg)
+          }
+        })
+      } else {
+        addInterface(this.interfaceForm).then((resp) => {
+          if (resp.data.data === true) {
+            this.$message.success('添加成功！')
+            // 返回列表页
+            this.$router.push('InterfaceDetail')
+            // 刷新列表页
+            this.sendResh()
+            this.interfaceForm.name = ''
+            this.interfaceForm.moduleId = ''
+            this.interfaceForm.method = ''
+            this.interfaceForm.url = ''
+            this.interfaceForm.paramType = ''
+            this.interfaceForm.headers = ''
+            this.interfaceForm.paramTemplate = ''
+            this.interfaceForm.responseTemplate = ''
+          } else {
+            this.$message.error(resp.data.msg)
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/auto/CaseList.vue

+<template>
+  <div>
+    <el-card>
+      <div>
+        模块:
+        <el-select v-model="selectModelId" placeholder="请选择模块" @change="selectChangeModel" clearable>
+          <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+        </el-select>
+        <el-input v-model="queryModuleInfo.testcaseName" clearable placeholder="请输入用例名称" style="width: 300px;"></el-input>
+        <el-button type="primary" style="margin-left:20px" @click="queryData">查询</el-button>
+        <el-button type="primary" style="margin-left:20px" @click="addPage">新增</el-button>
+      </div>
+      <el-table :data="singleCaseList" border style="width: 100%;margin-top:20px">
+        <el-table-column type='index' width="50px"></el-table-column>
+        <el-table-column prop="moduleName" label="模块名称" width="200px"></el-table-column>
+        <el-table-column prop="interfaceName" label="接口名称" width="200px"></el-table-column>
+        <el-table-column prop="name" label="用例名称" width="200px"></el-table-column>
+        <el-table-column prop="createTime" label="创建日期" width="200px"></el-table-column>
+        <el-table-column prop="updateTime" label="修改日期" width="200px"></el-table-column>
+        <el-table-column label="操作">
+          <slot slot-scope="scope">
+            <el-button type="warning" @click="executeCaseFrom(scope.row)">执行</el-button>
+            <el-button type="success" @click="editCaseFrom(scope.row)">编辑</el-button>
+            <el-button type="danger" @click="delCaseFrom(scope.row)">删除</el-button>
+          </slot>
+        </el-table-column>
+      </el-table>
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize" layout="total, prev, pager, next"
+        :total="totalNum"></el-pagination>
+    </el-card>
+    <!-- 接口返回数据 -->
+    <el-card v-if="isShow">
+      <div slot="header">
+        <el-row>
+          <el-col :span="3">
+            <div>响应结果 :</div>
+          </el-col>
+        </el-row>
+        <json-viewer :value="requestData"></json-viewer>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+import { getModulList } from '@/api/getAotoInterface'
+import { singleCaseList, delCase, executeCase } from '@/api/getAutoCase'
+// import bus from '@/utils/bus'
+export default {
+  data() {
+    return {
+      queryModuleInfo: {
+        pageNum: 1,
+        pageSize: 20,
+        moduleId: '',
+        testcaseName: ''
+      },
+      moduleInfo: {
+        pageNum: 1,
+        pageSize: 100
+      },
+      totalNum: 0,
+      modelList: [],
+      selectModelId: '',
+      singleCaseList: [],
+      delCase: {
+        testcaseId: ''
+      },
+      executeCaseParam: {
+        namespace: '',
+        testcaseId: ''
+      },
+      isShow: false,
+      requestData: ''
+    }
+  },
+  created() {
+    this.isShow = false
+    this.getModulList()
+    this.getCaseList()
+    this.$bus.$on('refresh', () => {
+      this.isShow = false
+      this.getCaseList()
+    })
+  },
+  methods: {
+    // 获取模块列表
+    getModulList() {
+      getModulList(this.moduleInfo).then((resp) => {
+        this.modelList = resp.data.data.list
+      })
+    },
+    // 下拉框改变事件
+    selectChangeModel() {
+      this.queryModuleInfo.moduleId = this.selectModelId
+    },
+    // 查询方法
+    queryData() {
+      this.getCaseList()
+    },
+    // 获取case列表
+    getCaseList() {
+      singleCaseList(this.queryModuleInfo).then((resp) => {
+        this.singleCaseList = resp.data.data.list
+        this.totalNum = resp.data.data.total
+      })
+    },
+    // 添加方法
+    addPage() {
+      this.$router.push('AddCase')
+      this.$nextTick(function () {
+        // DOM 现在更新了
+        var row = '新增'
+        this.$bus.$emit('casemsg', row)
+      })
+    },
+    // 执行用例
+    executeCaseFrom(row) {
+      this.isShow = true
+      // 获取用例id
+      this.executeCaseParam.testcaseId = row.id
+      this.executeCaseParam.namespace = window.sessionStorage.getItem('env')
+      // 获取当前场景
+      executeCase(this.executeCaseParam).then((resp) => {
+        this.requestData = resp.data.data
+      })
+    },
+    // 编辑用例
+    editCaseFrom(row) {
+      this.$router.push({ path: 'AddCase' })
+      // bus使用
+      this.$nextTick(function () {
+        // DOM 现在更新了
+        this.$bus.$emit('casemsg', row)
+      })
+    },
+    // 对话框方法
+    openMessage(message, confirmText, doit) {
+      this.$messageBox
+        .confirm(message, '确定', {
+          cancelButtonText: '取消',
+          confirmButtonText: confirmText,
+          type: 'warning'
+        })
+        .then(() => {
+          doit()
+        })
+        .catch(() => {})
+    },
+    // 删除用例
+    delCaseFrom(row) {
+      this.delCase.testcaseId = row.id
+      this.openMessage('您确定要删除吗？', '删除', () => {
+        delCase(this.delCase)
+          .then((resp) => {
+            if (resp.data.data === true) {
+              this.$message.success('删除成功！')
+              this.getCaseList()
+            } else if (resp.data.data === false) {
+              this.$message.error(resp.data.msg)
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      })
+    },
+    handleSizeChange(newSize) {
+      this.queryModuleInfo.pageSize = newSize
+      this.getCaseList()
+    },
+    handleCurrentChange(newPage) {
+      this.queryModuleInfo.pageNum = newPage
+      this.getCaseList()
+    }
+  }
+}
+</script>

src/views/auto/EditScene.vue

+<template>
+  <div>
+    <el-form ref="sceneForm" :rules="rules" :model="sceneForm" label-width="90px">
+      <el-form-item label="场景名称:" prop="name" style="width:300px">
+        <el-input v-model="sceneForm.name"></el-input>
+      </el-form-item>
+      <el-form-item label="项目名称:" prop="projectId">
+        <el-select v-model="sceneForm.projectId" placeholder="请选择项目" clearable>
+          <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="success" plain @click="DialogVisible = true" class="el-icon-circle-plus">添加</el-button>
+
+        <el-table :data="sceneTestcaseList" border style="width: 100%;margin-top:20px" row-key="sequence">
+          <!-- <el-table-column prop='sequence' width="50px"></el-table-column> -->
+          <!-- <el-table-column type='index' width="50px"></el-table-column> -->
+          <!-- <el-table-column prop="moduleName" label="模块名称" width="200px"></el-table-column>
+          <el-table-column prop="interfaceName" label="接口名称" width="200px"></el-table-column> -->
+          <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="col[index].prop" :label="item.label" align="center"></el-table-column>
+
+          <el-table-column label="操作">
+            <slot slot-scope="scope">
+              <el-button type="success" @click="editeSceneFrom(scope.row)">编辑</el-button>
+              <el-button type="danger" @click="deleSceneFrom(scope.row)">删除</el-button>
+            </slot>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+      <el-form-item>
+        <div style="margin-top:20px;float:right;margin-right:500px">
+          <el-button type="primary" @click="addSceneCaseFrom">确 定</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <!-- 添加场景用例 -->
+    <el-dialog title="新增场景用例" :visible.sync="DialogVisible" width="30%">
+      <el-form :model="sceneCaseForm" label-width="90px">
+        <el-form-item label="模块名称:" style="width:300px">
+          <el-select v-model="sceneCaseForm.moduleFrom" value-key="id" placeholder="请选择模块" @change="selectChangeModel" clearable>
+            <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="接口名称:" style="width:500px">
+          <el-select v-model="sceneCaseForm.interfaceFrom" value-key="id" placeholder="请选择接口" @change="selectChangeInterface" clearable>
+            <el-option v-for="item in interfaceList" :key="item.id" :label="item.name" :value="item"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-table :data="sceneCaseForm.caseList" border style="width: 100%;margin-left:1px" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" style="width:10%">
+            </el-table-column>
+            <el-table-column type='index' style="width:15%"></el-table-column>
+            <el-table-column prop="name" label="用例名称" style="width:60%"></el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="DialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addSceneFrom">确 定</el-button>
+      </span>
+    </el-dialog>
+    <!-- 编辑场景用例 -->
+    <el-dialog title="编辑场景用例" :visible.sync="editDialogVisible" width="60%">
+      <el-card>
+        <el-form>
+          <!-- <el-form-item label="用例名称:" style="width:310px;">
+            <el-input v-model="caseForm.name" :disabled="true"></el-input>
+          </el-form-item> -->
+          <el-collapse v-model="activeNames">
+            <!-- Headers -->
+            <el-collapse-item name="1" title="请求头">
+              <el-button type="success" plain @click="AddHeaderListRow()" class="el-icon-circle-plus">添加行</el-button>
+              <el-form-item>
+                <el-row>
+                  <el-col :span="6">
+                    <div class="grid-content" style="margin-left:15px">参数名称</div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div class="grid-content" style="margin-left:15px">参数值</div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div class="grid-content" style="margin-left:25px">操作</div>
+                  </el-col>
+                </el-row>
+                <el-row v-for="(item,index) in headersList" :key="index">
+                  <el-col :span="6">
+                    <div>
+                      <el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div>
+                      <el-input v-model.trim="item.paramsValue" placeholder="请输入参数值"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div>
+                      <el-button size="mini" type="danger" @click="advanceDelss(index)" style="height:40px;margin-left:20px">删除</el-button>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-collapse-item>
+            <!-- 请求参数 -->
+            <el-collapse-item name="2" title="请求参数">
+              <el-button type="success" plain @click="AddRequestParamsListRow()" class="el-icon-circle-plus">添加行</el-button>
+              <el-form-item>
+                <el-row>
+                  <el-col :span="6">
+                    <div class="grid-content" style="margin-left:15px">参数名称</div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div class="grid-content" style="margin-left:15px">参数值</div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div class="grid-content" style="margin-left:25px">操作</div>
+                  </el-col>
+                </el-row>
+                <el-row v-for="(item,index) in requestParamsList" :key="index">
+                  <el-col :span="6">
+                    <div>
+                      <el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div>
+                      <el-input v-model.trim="item.paramsValue" placeholder="请输入参数值"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div>
+                      <el-button size="mini" type="danger" @click="requestParamsDel(index)" style="height:40px;margin-left:20px">删除</el-button>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-collapse-item>
+            <!-- 参数列表 -->
+            <el-collapse-item name="3" title="参数列表">
+              <el-button type="success" plain @click="AddParamsListRow()" class="el-icon-circle-plus">添加行</el-button>
+              <el-form-item>
+                <el-row>
+                  <el-col :span="6">
+                    <div class="grid-content" style="margin-left:15px">参数名称</div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div class="grid-content" style="margin-left:15px">参数值</div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div class="grid-content" style="margin-left:25px">操作</div>
+                  </el-col>
+                </el-row>
+                <el-row v-for="(item,index) in paramsList" :key="index">
+                  <el-col :span="6">
+                    <div>
+                      <el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div>
+                      <el-input v-model.trim="item.paramsValue" placeholder="请输入参数值"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div>
+                      <el-button size="mini" type="danger" @click="paramsDel(index)" style="height:40px;margin-left:20px">删除</el-button>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-collapse-item>
+            <!-- 响应解析列表 -->
+            <el-collapse-item name="4" title="响应列表">
+              <el-button type="success" plain @click="AddResponseListRow()" class="el-icon-circle-plus">添加行</el-button>
+              <el-form-item>
+                <el-row>
+                  <el-col :span="6">
+                    <div class="grid-content" style="margin-left:15px">参数名称</div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div class="grid-content" style="margin-left:15px">参数值</div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div class="grid-content" style="margin-left:25px">操作</div>
+                  </el-col>
+                </el-row>
+                <el-row v-for="(item,index) in responseList" :key="index">
+                  <el-col :span="6">
+                    <div>
+                      <el-input v-model.trim="item.paramsName" placeholder="请输入参数名称"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div>
+                      <el-input v-model.trim="item.paramsValue" placeholder="请输入参数值"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div>
+                      <el-button size="mini" type="danger" @click="responeDel(index)" style="height:40px;margin-left:20px">删除</el-button>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-collapse-item>
+            <!-- 断言 -->
+            <el-collapse-item name="5" title="结果断言">
+              <el-button type="success" plain @click="AddAssertionListRow()" class="el-icon-circle-plus">添加行</el-button>
+              <el-table :data="assertionList" border style="width:100%;margin-top: 15px;">
+                <el-table-column label="参数名称" width="150">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.paramsName">
+                    </el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="参数值" width="150">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.paramsValue">
+                    </el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="是否必填" width="150" style="text-align:center">
+                  <template slot-scope="scope">
+                    <el-switch v-model="scope.row.isRequired" active-color="#13ce66" inactive-color="#A9A9A9" active-text="是" inactive-text="否" @change="changeState()"></el-switch>
+                  </template>
+                </el-table-column>
+                <el-table-column label="示例" width="300">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.examples"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="备注" width="300">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.remarks"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作">
+                  <template slot-scope="scope">
+                    <el-button size="mini" type="danger" @click="AssertionDelete(scope.$index)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-collapse-item>
+          </el-collapse>
+          <div style="margin-top:20px;margin-left:400px">
+            <el-button  @click="cancelCaseFrom">取 消</el-button>
+            <el-button type="primary" @click="addCaseFrom">确 定</el-button>
+          </div>
+        </el-form>
+      </el-card>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  getProjectList,
+  getModulList,
+  interfaceDetailList,
+  getCaseByInterface
+} from '@/api/getAotoInterface'
+import { getSceneCaseList, addSceneCase } from '@/api/getAutoScene'
+import Sortable from 'sortablejs'
+export default {
+  data() {
+    return {
+      col: [
+        { label: '模块名称', prop: 'moduleName' },
+        { label: '接口名称', prop: 'interfaceName' }
+      ],
+      queryProjectList: {
+        pageNum: 1,
+        pageSize: 20
+      },
+      sceneForm: {
+        name: '',
+        projectId: ''
+      },
+      projectList: [],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '场景名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        projectId: [
+          {
+            required: true,
+            message: '项目名称不能为空！',
+            trigger: 'blur'
+          }
+        ]
+      },
+      sceneCaseForm: {
+        caseDetialList: [],
+        moduleName: '',
+        moduleId: '',
+        interfaceName: '',
+        interfaceId: '',
+        caseList: [],
+        moduleFrom: {
+          id: '',
+          name: ''
+        },
+        interfaceFrom: {
+          id: '',
+          name: ''
+        },
+        sequence: 0,
+        caseId: '',
+        caseName: '',
+        headers: '',
+        parameters: '',
+        variables: '',
+        extract: '',
+        validate: '',
+        sceneId: ''
+      },
+      sceneTestcaseList: [],
+      sceneCaseInfo: {
+        sceneId: ''
+      },
+      DialogVisible: false,
+      modelList: [],
+      interfaceList: [],
+      moduleInfo: {
+        pageNum: 1,
+        pageSize: 100
+      },
+      interfaceInfo: {
+        pageNum: 1,
+        pageSize: 100,
+        moduleId: ''
+      },
+      caseInfo: {
+        interfaceId: ''
+      },
+      editDialogVisible: false,
+      activeNames: '1',
+      headersList: [],
+      requestParamsList: [],
+      paramsList: [],
+      responseList: [],
+      assertionList: [],
+      caseForm: {
+        sceneId: '',
+        interfaceId: '',
+        name: '',
+        headers: '',
+        parameters: '',
+        variables: '',
+        extract: '',
+        validate: '',
+        sequence: '',
+        caseId: '',
+        newInterfaceId: ''
+      },
+      newIndex: 0,
+      newCaseIndex: 0,
+      newSceneForm: {
+        sceneId: '',
+        sceneTestcaseList: []
+      }
+    }
+  },
+  created() {
+    this.getProjectList()
+    this.getModelList()
+    this.$bus.$off('scenemsg').$on('scenemsg', (row) => {
+      // console.log('参数信息', row)
+      this.sceneForm.name = row.name
+      this.sceneForm.projectId = row.projectId
+      this.sceneCaseInfo.sceneId = row.id
+      this.getSceneCaseList()
+      this.rowDrop()
+    })
+  },
+  mounted() {
+    this.rowDrop()
+  },
+  methods: {
+    rowDrop() {
+      const tbody = document.querySelector('.el-table__body-wrapper tbody')
+      const _this = this
+      Sortable.create(tbody, {
+        draggable: '.el-table__row',
+        onEnd({ newIndex, oldIndex }) {
+          // console.log('索引新', newIndex)
+          // console.log('索引旧', oldIndex)
+          const currRow = _this.sceneTestcaseList.splice(oldIndex, 1)[0]
+          _this.sceneTestcaseList.splice(newIndex, 0, currRow)
+        }
+      })
+    },
+    // 获取项目列表
+    getProjectList() {
+      getProjectList(this.queryProjectList).then((resp) => {
+        this.projectList = resp.data.data.list
+      })
+    },
+    // 获取场景用例列表
+    getSceneCaseList() {
+      getSceneCaseList(this.sceneCaseInfo).then((resp) => {
+        this.sceneTestcaseList = resp.data.data
+      })
+    },
+    // 获取模块列表
+    getModelList() {
+      getModulList(this.moduleInfo).then((resp) => {
+        this.modelList = resp.data.data.list
+      })
+    },
+    // 模块下拉框改变事件
+    selectChangeModel() {
+      this.interfaceInfo.moduleId = this.sceneCaseForm.moduleFrom.id
+      interfaceDetailList(this.interfaceInfo).then((resp) => {
+        this.interfaceList = resp.data.data.list
+      })
+    },
+    // 选择接口下拉框改变事件
+    selectChangeInterface() {
+      this.caseInfo.interfaceId = this.sceneCaseForm.interfaceFrom.id
+      getCaseByInterface(this.caseInfo).then((resp) => {
+        this.sceneCaseForm.caseList = resp.data.data
+      })
+    },
+    // 选择事件
+    handleSelectionChange(row) {
+      this.sceneCaseForm.caseDetialList = row
+    },
+    // 添加确定按钮
+    addSceneFrom() {
+      this.sceneTestcaseList.push({
+        moduleName: this.sceneCaseForm.moduleFrom.name,
+        interfaceName: this.sceneCaseForm.interfaceFrom.name,
+        name: this.sceneCaseForm.caseDetialList[0].name,
+        headers: this.sceneCaseForm.caseDetialList[0].headers,
+        parameters: this.sceneCaseForm.caseDetialList[0].parameters,
+        variables: this.sceneCaseForm.caseDetialList[0].variables,
+        extract: this.sceneCaseForm.caseDetialList[0].extract,
+        validate: this.sceneCaseForm.caseDetialList[0].validate,
+        id: this.sceneCaseForm.caseDetialList[0].id,
+        interfaceId: this.sceneCaseForm.caseDetialList[0].interfaceId,
+        sceneId: this.sceneCaseInfo.sceneId,
+        sequence: this.sceneTestcaseList.length + 1
+      })
+      console.log('save----', this.sceneTestcaseList)
+      this.DialogVisible = false
+      this.sceneCaseForm.moduleFrom = ''
+      this.sceneCaseForm.interfaceFrom = ''
+      this.sceneCaseForm.caseList = []
+    },
+    // 编辑场景用例
+    editeSceneFrom(row) {
+      console.log('11', row)
+      this.editDialogVisible = true
+      this.sceneCaseForm.sequence = row.sequence
+      this.sceneCaseForm.interfaceId = row.interfaceId
+      this.sceneCaseForm.caseId = row.id
+      this.sceneCaseForm.caseName = row.name
+      var newHeaders = JSON.parse(row.headers)
+      // 请求头（将json字符串转化为对象）
+      this.headersList = []
+      for (var i in newHeaders) {
+        this.headersList.push({
+          paramsName: i,
+          paramsValue: newHeaders[i]
+        })
+      }
+      // 请求参数
+      var newParamters = JSON.parse(row.parameters)
+      this.requestParamsList = []
+      for (var j in newParamters) {
+        this.requestParamsList.push({
+          paramsName: j,
+          paramsValue: newParamters[j]
+        })
+      }
+      // 参数列表
+      var newVariables = JSON.parse(row.variables)
+      this.paramsList = []
+      for (var k in newVariables) {
+        this.paramsList.push({
+          paramsName: k,
+          paramsValue: newVariables[k]
+        })
+      }
+      // 响应解析列表
+      var newExtract = JSON.parse(row.extract)
+      this.responseList = []
+      for (var o in newExtract) {
+        this.responseList.push({
+          paramsName: o,
+          paramsValue: newExtract[o]
+        })
+      }
+      // 返回断言
+      this.assertionList = JSON.parse(row.validate)
+    },
+    // 保存场景用例方法
+    addSceneCaseFrom() {
+      var index = 1
+      this.sceneTestcaseList.forEach((item) => {
+        item.sequence = index
+        index += 1
+      })
+      this.newSceneForm.sceneId = this.sceneCaseInfo.sceneId
+      this.newSceneForm.sceneTestcaseList = this.sceneTestcaseList
+      addSceneCase(this.newSceneForm).then((resp) => {
+        if (resp.data.data === true) {
+          this.$message.success('保存成功！')
+          // 返回列表页
+          this.$router.push({ path: 'SceneList' })
+          // 刷新列表页
+          this.sendResh()
+        } else {
+          this.$message.error(resp.data.msg)
+        }
+      })
+    },
+    // 刷新列表
+    sendResh() {
+      // bus使用
+      this.$nextTick(function () {
+        // DOM 现在更新了
+        this.$bus.$emit('refreshScene')
+      })
+    },
+    // 添加Header行
+    AddHeaderListRow() {
+      this.headersList.push({
+        paramsName: '',
+        paramsValue: ''
+      })
+    },
+    // 删除Header行
+    advanceDelss(index) {
+      this.headersList.splice(index, 1)
+    },
+    // 添加请求参数行
+    AddRequestParamsListRow() {
+      this.requestParamsList.push({
+        paramsName: '',
+        paramsValue: ''
+      })
+    },
+    // 删除请求参数行
+    requestParamsDel(index) {
+      this.requestParamsList.splice(index, 1)
+    },
+    // 天机参数列表行
+    AddParamsListRow() {
+      this.paramsList.push({
+        paramsName: '',
+        paramsValue: ''
+      })
+    },
+    // 删除参数列表行
+    paramsDel(index) {
+      this.paramsList.splice(index, 1)
+    },
+    // 添加响应解析行
+    AddResponseListRow() {
+      this.responseList.push({
+        paramsName: '',
+        paramsValue: ''
+      })
+    },
+    // 删除响应解析行
+    responeDel(index) {
+      this.responseList.splice(index, 1)
+    },
+    // 添加断言行
+    AddAssertionListRow() {
+      this.assertionList.push({
+        paramsName: '',
+        paramsValue: '',
+        isRequired: true,
+        examples: '',
+        remarks: ''
+      })
+    },
+    // 断言改变
+    changeState(e) {
+      if (e === true) {
+        this.assertionList.isRequired = e
+      } else {
+        this.assertionList.isRequired = e
+      }
+    },
+    // 删除断言行
+    AssertionDelete(index) {
+      this.assertionList.splice(index, 1)
+    },
+    // 修改确定按钮
+    addCaseFrom() {
+      // 将数组重新赋值（将数组转化为对象）
+      var headersObj = {}
+      this.headersList.forEach((item) => {
+        headersObj[item.paramsName] = item.paramsValue
+      })
+      // 将对象转化为Json
+      this.sceneCaseForm.headers = JSON.stringify(headersObj)
+      // 请求参数
+      var requestParamsObj = {}
+      this.requestParamsList.forEach((item) => {
+        requestParamsObj[item.paramsName] = item.paramsValue
+      })
+      this.sceneCaseForm.parameters = JSON.stringify(requestParamsObj)
+      // 参数列表
+      var paramsListObj = {}
+      this.paramsList.forEach((item) => {
+        paramsListObj[item.paramsName] = item.paramsValue
+      })
+      this.sceneCaseForm.variables = JSON.stringify(paramsListObj)
+      // 响应解析列表
+      var responseObj = {}
+      this.responseList.forEach((item) => {
+        responseObj[item.paramsName] = item.paramsValue
+      })
+      this.sceneCaseForm.extract = JSON.stringify(responseObj)
+      // 断言
+      this.sceneCaseForm.validate = JSON.stringify(this.assertionList)
+      // 循环数组并删除对应的数组下标的整条数据信息
+      // for (var i = 0; i < this.sceneTestcaseList.length; i++) {
+      //   if (
+      //     this.sceneTestcaseList[i].sequence === this.sceneCaseForm.sequence
+      //   ) {
+      //     var moduleName = this.sceneTestcaseList[i].moduleName
+      //     var interfaceName = this.sceneTestcaseList[i].interfaceName
+      //     this.sceneTestcaseList.splice(i, 1)
+      //   }
+      // }
+      for (var i = 0; i < this.sceneTestcaseList.length; i++) {
+        if (
+          this.sceneTestcaseList[i].sequence === this.sceneCaseForm.sequence
+        ) {
+          this.sceneTestcaseList[i].headers = this.sceneCaseForm.headers
+          this.sceneTestcaseList[i].parameters = this.sceneCaseForm.parameters
+          this.sceneTestcaseList[i].variables = this.sceneCaseForm.variables
+          this.sceneTestcaseList[i].extract = this.sceneCaseForm.extract
+          this.sceneTestcaseList[i].validate = this.sceneCaseForm.validate
+        }
+      }
+      this.editDialogVisible = false
+      console.log('新集合信息', this.sceneTestcaseList)
+    },
+    cancelCaseFrom() {
+      this.editDialogVisible = false
+    },
+    // 删除场景用例
+    deleSceneFrom(row) {
+      for (var i = 0; i < this.sceneTestcaseList.length; i++) {
+        if (this.sceneTestcaseList[i].id === row.id) {
+          this.sceneTestcaseList.splice(i, 1)
+        }
+      }
+    }
+  }
+}
+</script>

src/views/auto/InterfaceDetail.vue

+<template>
+  <div>
+    <el-card>
+      <div>
+        项目:
+        <el-select v-model="selectProjectId" placeholder="请选择项目" @change="selectChange" clearable>
+          <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+        </el-select>
+        模块:
+        <el-select v-model="selectModelId" placeholder="请选择模块" @change="selectChangeModel" clearable>
+          <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+        </el-select>
+        <el-input v-model="queryModuleInfo.interfaceName" clearable placeholder="请输入接口名称" style="width: 300px;"></el-input>
+        <el-button type="primary" style="margin-left:20px" @click="queryData">查询</el-button>
+        <el-button type="primary" style="margin-left:20px" @click="addPage">新增</el-button>
+      </div>
+      <el-table :data="interfaceList" border style="width: 100%;margin-top:20px">
+        <el-table-column type='index' width="50px"></el-table-column>
+        <el-table-column prop="name" label="接口名称" width="150px"></el-table-column>
+        <el-table-column prop="projectName" label="所属项目" width="150px"></el-table-column>
+        <el-table-column prop="moduleName" label="所属模块" width="200px"></el-table-column>
+        <el-table-column prop="url" label="接口路径" width="300px"></el-table-column>
+        <el-table-column prop="method" label="请求方式" width="70px"></el-table-column>
+        <el-table-column prop="paramType" label="参数类型" width="80px"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
+        <el-table-column prop="updateTime" label="修改时间" width="200px"></el-table-column>
+        <el-table-column label="操作">
+          <slot slot-scope="scope">
+            <el-button type="success" @click="editInterfaceFrom(scope.row)">编辑</el-button>
+            <el-button type="danger" @click="delInterfaceFrom(scope.row)">删除</el-button>
+          </slot>
+        </el-table-column>
+      </el-table>
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize" layout="total, prev, pager, next"
+        :total="totalNum"></el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {
+  getModulList,
+  getProjectList,
+  interfaceDetailList,
+  delInterface
+} from '@/api/getAotoInterface'
+// 引入组件
+import bus from '@/utils/bus'
+export default {
+  data() {
+    return {
+      queryModuleInfo: {
+        pageNum: 1,
+        pageSize: 20,
+        projectId: '',
+        moduleId: '',
+        interfaceName: ''
+      },
+      totalNum: 0,
+      projectList: [],
+      modelList: [],
+      // 下来项目id
+      selectProjectId: '',
+      // 下拉模块id
+      selectModelId: '',
+      interfaceName: '',
+      interfaceList: [],
+      interfaceDetailForm: {},
+      delInterfaceParam: {
+        interfaceId: ''
+      }
+    }
+  },
+  created() {
+    this.getProjectList()
+    this.getInterfaceDetailList()
+    bus.$on('refresh', () => {
+      this.getInterfaceDetailList()
+    })
+  },
+  methods: {
+    // 项目列表
+    getProjectList() {
+      getProjectList(this.queryModuleInfo).then((resp) => {
+        this.projectList = resp.data.data.list
+      })
+    },
+
+    // 下来框选中改变事件
+    selectChange() {
+      this.queryModuleInfo.projectId = this.selectProjectId
+      getModulList(this.queryModuleInfo).then((resp) => {
+        this.modelList = resp.data.data.list
+      })
+    },
+    // 模块下拉框改变事件
+    selectChangeModel() {
+      this.queryModuleInfo.moduleId = this.selectModelId
+    },
+    // 查询方法
+    queryData() {
+      this.getInterfaceDetailList()
+      // this.queryModuleInfo.projectId = ''
+      // this.queryModuleInfo.moduleId = ''
+      // this.queryModuleInfo.interfaceName = ''
+    },
+    // 添加跳转页面
+    addPage() {
+      this.$router.push('AddInterface')
+      this.$nextTick(function () {
+        // DOM 现在更新了
+        var row = '新增'
+        bus.$emit('msg', row)
+      })
+    },
+    // 获取接口列表
+    getInterfaceDetailList() {
+      interfaceDetailList(this.queryModuleInfo).then((resp) => {
+        this.interfaceList = resp.data.data.list
+        this.totalNum = resp.data.data.total
+      })
+    },
+    handleSizeChange(newSize) {
+      this.queryModuleInfo.pageSize = newSize
+      this.getInterfaceDetailList()
+    },
+    handleCurrentChange(newPage) {
+      this.queryModuleInfo.pageNum = newPage
+      this.getInterfaceDetailList()
+    },
+    // 编辑接口方法
+    editInterfaceFrom(row) {
+      this.$router.push({ path: 'AddInterface' })
+      // bus使用
+      this.$nextTick(function () {
+        // DOM 现在更新了
+        bus.$emit('msg', row)
+      })
+    },
+    // 对话框方法
+    openMessage(message, confirmText, doit) {
+      this.$messageBox
+        .confirm(message, '确定', {
+          cancelButtonText: '取消',
+          confirmButtonText: confirmText,
+          type: 'warning'
+        })
+        .then(() => {
+          doit()
+        })
+        .catch(() => {})
+    },
+    // 删除接口方法
+    delInterfaceFrom(row) {
+      this.delInterfaceParam.interfaceId = row.id
+      this.openMessage('您确定要删除吗？', '删除', () => {
+        delInterface(this.delInterfaceParam)
+          .then((resp) => {
+            if (resp.data.data === true) {
+              this.$message.success('删除成功！')
+              this.getInterfaceDetailList()
+            } else if (resp.data.data === false) {
+              this.$message.error(resp.data.msg)
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      })
+    }
+  }
+}
+</script>

src/views/auto/Model.vue

+<template>
+  <div>
+    <el-card>
+      <div class="filter">
+        <el-button type="primary" @click="DialogVisible = true">新增</el-button>
+      </div>
+      <el-table :data="modelList" border style="width: 100%;margin-top:20px">
+        <!-- <el-table-column prop="id" label="序号" width="80px"></el-table-column> -->
+        <el-table-column type='index' width="50px"></el-table-column>
+        <el-table-column prop="name" label="模块名称" width="200px"></el-table-column>
+        <el-table-column prop="projectName" label="所属项目" width="200px"></el-table-column>
+        <el-table-column prop="domain" label="域名" width="300px"></el-table-column>
+        <el-table-column prop="description" label="描述" width="210px"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
+        <el-table-column prop="updateTime" label="修改时间" width="200px"></el-table-column>
+        <el-table-column label="操作">
+          <slot slot-scope="scope">
+            <el-button type="success" @click="openEditDialog(scope.row)">编辑</el-button>
+            <el-button type="danger" @click="delModelFrom(scope.row)">删除</el-button>
+          </slot>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize" layout="total, prev, pager, next"
+        :total="totalNum"></el-pagination>
+    </el-card>
+    <!-- 新增模块 -->
+    <el-dialog title="新增模块" :visible.sync="DialogVisible" width="30%">
+      <el-form ref="modelForm" :rules="rules" :model="modelForm" label-width="90px">
+        <el-form-item label="模块名称:" prop="name" style="width:400px">
+          <el-input v-model="modelForm.name"></el-input>
+        </el-form-item>
+        <el-form-item label="所属项目:" prop="projectId">
+          <el-select v-model="modelForm.projectId" placeholder="请选择项目" clearable style="width:310px">
+            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="模块描述:" prop="description" style="width:400px">
+          <el-input v-model="modelForm.description"></el-input>
+        </el-form-item>
+        <el-form-item label="域名:" prop="domain" style="width:400px">
+          <el-input v-model="modelForm.domain"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="DialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addModelFrom">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getModulList,
+  getProjectList,
+  addModul,
+  editModel,
+  delModel
+} from '@/api/getAotoInterface'
+export default {
+  data() {
+    return {
+      queryModuleInfo: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      totalNum: 0,
+      modelList: [],
+      projectList: [],
+      modelForm: {
+        name: '',
+        projectId: '',
+        description: '',
+        domain: ''
+      },
+      DialogVisible: false,
+      delModelParam: {
+        moduleId: ''
+      },
+      // 验证
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '模块名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        projectId: [
+          {
+            required: true,
+            message: '模块名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        description: [
+          {
+            required: true,
+            message: '模块描述不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        domain: [
+          {
+            required: true,
+            message: '域名不能为空！',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getModelList()
+    this.getProjectList()
+  },
+  methods: {
+    // 获取模块列表
+    getModelList() {
+      getModulList(this.queryModuleInfo).then((resp) => {
+        this.modelList = resp.data.data.list
+        this.totalNum = resp.data.data.total
+      })
+    },
+    // 获取项目列表
+    getProjectList() {
+      getProjectList(this.queryModuleInfo).then((resp) => {
+        this.projectList = resp.data.data.list
+      })
+    },
+    // 分页展示
+    handleSizeChange(newSize) {
+      this.queryModuleInfo.pageSize = newSize
+      this.getModelList()
+    },
+    // 分页展示
+    handleCurrentChange(newPage) {
+      this.queryModuleInfo.pageNum = newPage
+      this.getModelList()
+    },
+
+    // 添加模块按钮
+    addModelFrom() {
+      if (this.modelForm.id) {
+        editModel(this.modelForm).then((resp) => {
+          if (resp.data.data === true) {
+            this.DialogVisible = false
+            this.$message.success('修改成功！')
+            this.getModelList()
+          } else {
+            this.$message.error(resp.data.msg)
+          }
+        })
+      } else {
+        // 添加模块
+        addModul(this.modelForm)
+          .then((resp) => {
+            console.log('保存信息', this.modelForm)
+            if (resp.data.data === true) {
+              this.DialogVisible = false
+              this.$message.success('新增成功！')
+              this.modelList.name = ''
+              this.modelList.projectName = ''
+              this.modelList.description = ''
+              this.modelList.domain = ''
+              this.getModelList()
+            } else {
+              this.$message.error(resp.data.msg)
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      }
+    },
+    // 编辑模块
+    openEditDialog(row) {
+      this.DialogVisible = true
+      this.modelForm = row
+    },
+    // 对话框方法
+    openMessage(message, confirmText, doit) {
+      this.$messageBox
+        .confirm(message, '确定', {
+          cancelButtonText: '取消',
+          confirmButtonText: confirmText,
+          type: 'warning'
+        })
+        .then(() => {
+          doit()
+        })
+        .catch(() => {})
+    },
+    // 删除模块
+    delModelFrom(row) {
+      this.delModelParam.moduleId = row.id
+      this.openMessage('您确定要删除吗？', '删除', () => {
+        delModel(this.delModelParam)
+          .then((resp) => {
+            if (resp.data.data === true) {
+              this.$message.success('删除成功！')
+              this.getModelList()
+            } else if (resp.data.data === false) {
+              this.$message.error(resp.data.msg)
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      })
+    }
+  }
+}
+</script>

src/views/auto/Project.vue

+<template>
+  <div>
+    <el-card>
+      <div class="filter">
+        <!-- <el-input placeholder="请输入项目名称" style="width:15%"></el-input>
+        <el-button type="primary" icon="el-icon-search" @click="searchMockList">查询</el-button> -->
+        <el-button type="primary" @click="DialogVisible = true">新增</el-button>
+      </div>
+      <el-table :data="projectList" border style="width: 100%;margin-top:20px">
+        <!-- <el-table-column prop="id" label="序号" width="80px"></el-table-column> -->
+        <el-table-column type='index' width="50px"></el-table-column>
+        <el-table-column prop="name" label="名称" width="200px"></el-table-column>
+        <el-table-column prop="description" label="描述" width="300px"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
+        <el-table-column prop="updateTime" label="修改时间" width="200px"></el-table-column>
+        <el-table-column label="操作">
+          <slot slot-scope="scope">
+            <el-button type="success" @click="openEditDialog(scope.row)">编辑</el-button>
+            <el-button type="danger" @click="delProjectFrom(scope.row)">删除</el-button>
+          </slot>
+        </el-table-column>
+      </el-table>
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize" layout="total, prev, pager, next"
+        :total="totalNum">
+      </el-pagination>
+    </el-card>
+    <!-- 新增页面 /编辑页面-->
+    <el-dialog title="新增项目" :visible.sync="DialogVisible" width="30%">
+      <el-form ref="projectForm" :rules="rules" :model="projectForm" label-width="90px">
+        <el-form-item label="项目名称:" prop="name" style="width:400px">
+          <el-input v-model="projectForm.name"></el-input>
+        </el-form-item>
+        <el-form-item label="项目描述:" prop="description" style="width:400px">
+          <el-input v-model="projectForm.description"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="DialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addPojectFrom">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getProjectList,
+  addProject,
+  editProject,
+  delProject
+} from '@/api/getAotoInterface'
+export default {
+  data() {
+    return {
+      queryModuleInfo: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      projectList: [],
+      totalNum: 0,
+      DialogVisible: false,
+      projectForm: {
+        name: '',
+        description: ''
+      },
+      delProjectParam: {
+        projectId: ''
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '项目名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        description: [
+          {
+            required: true,
+            message: '项目描述不能为空！',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getProjectList()
+  },
+  methods: {
+    // 获取项目列表
+    getProjectList() {
+      getProjectList(this.queryModuleInfo).then((resp) => {
+        this.projectList = resp.data.data.list
+        this.totalNum = resp.data.data.total
+      })
+    },
+    // 查询按钮
+    searchMockList() {},
+    // 新增确定按钮
+    addPojectFrom() {
+      if (this.projectForm.id) {
+        // 编辑接口
+        editProject(this.projectForm)
+          .then((resp) => {
+            if (resp.data.data === true) {
+              this.DialogVisible = false
+              this.$message.success('修改成功！')
+              this.getProjectList()
+            } else if (resp.data.data === false) {
+              this.$message.error(resp.data.msg)
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      } else {
+        // 添加接口
+        addProject(this.projectForm)
+          .then((resp) => {
+            if (resp.data.data === true) {
+              this.DialogVisible = false
+              this.$message.success('新增成功！')
+              this.projectForm.name = ''
+              this.projectForm.description = ''
+              this.getProjectList()
+            } else {
+              this.$message.error(resp.data.msg)
+              this.projectForm.name = ''
+              this.projectForm.description = ''
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      }
+    },
+    // 编辑信息回显
+    openEditDialog(row) {
+      this.DialogVisible = true
+      this.projectForm = row
+    },
+    // 对话框方法
+    openMessage(message, confirmText, doit) {
+      this.$messageBox
+        .confirm(message, '确定', {
+          cancelButtonText: '取消',
+          confirmButtonText: confirmText,
+          type: 'warning'
+        })
+        .then(() => {
+          doit()
+        })
+        .catch(() => {})
+    },
+    // 删除项目
+    delProjectFrom(row) {
+      this.delProjectParam.projectId = row.id
+      this.openMessage('您确定要删除吗？', '删除', () => {
+        delProject(this.delProjectParam)
+          .then((resp) => {
+            if (resp.data.data === true) {
+              this.$message.success('删除成功！')
+              this.getProjectList()
+            } else if (resp.data.data === false) {
+              this.$message.error(resp.data.msg)
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      })
+    },
+    // 分页展示
+    handleSizeChange(newSize) {
+      this.queryModuleInfo.pageSize = newSize
+      this.getProjectList()
+    },
+    // 分页展示
+    handleCurrentChange(newPage) {
+      this.queryModuleInfo.pageNum = newPage
+      this.getProjectList()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.el-table {
+  margin-top: 20px;
+}
+.el-select {
+  margin-right: 20px;
+}
+</style>

src/views/auto/SceneCaseDetail.vue

+<template>
+  <div>
+    <div id="dialog" class="test test-1 drag" v-if="show_dialog">
+      <div class="header_title"> 添加场景用例</div>
+      <el-form :model="sceneCaseForm" style="margin-left:50px;margin-top:20px;">
+        <el-form-item label="模块名称:" style="width:300px">
+          <el-select v-model="moduleFrom" value-key="id" placeholder="请选择模块" @change="selectChangeModel" clearable>
+            <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="接口名称:" style="width:500px">
+          <el-select v-model="interfaceFrom" value-key="id" placeholder="请选择接口" @change="selectChangeInterface" clearable>
+            <el-option v-for="item in interfaceList" :key="item.id" :label="item.name" :value="item"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-table :data="caseList" border style="width: 70%;margin-left:1px" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" style="width:10%">
+            </el-table-column>
+            <el-table-column type='index' style="width:15%"></el-table-column>
+            <el-table-column prop="name" label="用例名称" style="width:60%"></el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer" style="margin-left:200px;margin-top:30px;">
+        <el-button @click="cancelForm">取 消</el-button>
+        <el-button type="primary" @click="addCaseDetailFrom">确 定</el-button>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  getCaseByInterface,
+  getModulList,
+  interfaceDetailList
+} from '@/api/getAotoInterface'
+export default {
+  props: {
+    msgchange: { type: Boolean }
+  },
+  data() {
+    return {
+      sceneCaseForm: {
+        // moduleFrom: '',
+        // interfaceFrom: '',
+        caseDetail: []
+      },
+      moduleFrom: {},
+      interfaceFrom: {},
+      newFrom: {
+        newModule: '',
+        newInterface: ''
+      },
+      moduleInfo: {
+        pageNum: 1,
+        pageSize: 100
+      },
+      modelList: [],
+      interfaceList: [],
+      interfaceInfo: {
+        pageNum: 1,
+        pageSize: 100,
+        moduleId: ''
+      },
+      caseInfo: {
+        interfaceId: ''
+      },
+      caseList: [],
+      show_dialog: false
+    }
+  },
+  created() {
+    this.getModelList()
+  },
+  methods: {
+    // 获取模块列表
+    getModelList() {
+      getModulList(this.moduleInfo).then((resp) => {
+        this.modelList = resp.data.data.list
+        console.log('列表信息', this.modelList)
+      })
+    },
+    // 模块下拉框改变事件
+    selectChangeModel() {
+      console.log('下拉款信息', this.sceneCaseForm.moduleFrom)
+      this.interfaceInfo.moduleId = this.moduleFrom.id
+      this.sceneCaseForm.moduleId = this.moduleFrom.id
+      interfaceDetailList(this.interfaceInfo).then((resp) => {
+        this.interfaceList = resp.data.data.list
+      })
+    },
+    // 接口下拉框改变事件
+    selectChangeInterface() {
+      this.caseInfo.interfaceId = this.interfaceFrom.id
+      getCaseByInterface(this.caseInfo).then((resp) => {
+        this.caseList = resp.data.data
+      })
+    },
+    // 复选框选中事件
+    handleSelectionChange(row) {
+      this.sceneCaseForm.caseDetail = row
+    },
+    // 保存事件
+    addCaseDetailFrom() {
+      // 子组件向父组件传递的信息
+      this.$emit('childFn', this.sceneCaseForm)
+    },
+    // 取消事件
+    cancelForm() {
+      this.show_dialog = false
+    },
+    // 父组件传递的事件
+    addSceneCase(param) {
+      if (param) {
+        this.show_dialog = true
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+#dialog {
+  width: 500px;
+  height: 500px;
+  margin: 0 auto;
+  background-color: #ffffff;
+  position: fixed;
+  top: 40%;
+  left: 60%;
+  margin: -120px 0 0 -150px;
+  z-index: 1000;
+  border: 2px solid #ccc;
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  box-shadow: 3px 2px 4px #ccc;
+  -webkit-box-shadow: 3px 2px 4px #ccc;
+  box-sizing: border-box;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
+}
+.header_title {
+  margin-left: 20px;
+  margin-top: 20px;
+  font-size: 18px;
+  color: #303133;
+}
+
+.test {
+  width: 50px;
+  height: 120px;
+  overflow: auto;
+  float: left;
+  margin: 5px;
+  border: none;
+}
+.scrollbar {
+  width: 30px;
+  height: 300px;
+  margin: 0 auto;
+}
+.test-1::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+.test-1::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #535353;
+}
+.test-1::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background: #ededed;
+}
+.drag {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: red;
+}
+</style>

src/views/auto/SceneList.vue

+<template>
+  <div>
+    <el-card>
+      <div>
+        场景名称：
+        <el-input v-model="queryModuleInfo.sceneName" clearable placeholder="请输入场景名称" style="width: 300px;"></el-input>
+        <el-button type="primary" style="margin-left:20px" @click="queryData">查询</el-button>
+        <el-button type="primary" style="margin-left:20px" @click="DialogVisible = true">新增</el-button>
+      </div>
+      <el-table :data="sceneList" border style="width: 100%;margin-top:20px">
+        <el-table-column type='index' width="50px"></el-table-column>
+        <el-table-column prop="name" label="场景名称" width="200px"></el-table-column>
+        <el-table-column prop="projectName" label="项目名称" width="200px"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
+        <el-table-column prop="updateTime" label="修改时间" width="200px"></el-table-column>
+        <el-table-column label="操作">
+          <slot slot-scope="scope">
+            <el-button type="warning" @click="executeSceneFrom(scope.row)">执行</el-button>
+            <el-button type="success" @click="editeSceneFrom(scope.row)">编辑</el-button>
+            <el-button type="danger" @click="deleSceneFrom(scope.row)">删除</el-button>
+          </slot>
+        </el-table-column>
+      </el-table>
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize" layout="total, prev, pager, next"
+        :total="totalNum"></el-pagination>
+    </el-card>
+    <!-- 接口返回数据 -->
+    <el-card v-if="isShow">
+      <div slot="header">
+        <el-row>
+          <el-col :span="3">
+            <div>响应结果 :</div>
+          </el-col>
+        </el-row>
+        <json-viewer :value="requestData"></json-viewer>
+      </div>
+    </el-card>
+    <!-- 新增页面 /编辑页面-->
+    <el-dialog title="新增场景" :visible.sync="DialogVisible" width="30%">
+      <el-form ref="sceneForm" :rules="rules" :model="sceneForm" label-width="90px">
+        <el-form-item label="场景名称:" prop="name" style="width:300px">
+          <el-input v-model="sceneForm.name"></el-input>
+        </el-form-item>
+        <el-form-item label="项目名称:" prop="projectId" style="width:500px">
+          <el-select v-model="sceneForm.projectId" placeholder="请选择项目" clearable>
+            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="DialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addSceneFrom">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  getSceneList,
+  addSecene,
+  delSecne,
+  executeScene
+} from '@/api/getAutoScene'
+import { getProjectList } from '@/api/getAotoInterface'
+export default {
+  data() {
+    return {
+      queryModuleInfo: {
+        pageNum: 1,
+        pageSize: 20,
+        sceneName: ''
+      },
+      queryProjectList: {
+        pageNum: 1,
+        pageSize: 20
+      },
+      sceneList: [],
+      totalNum: 0,
+      sceneForm: {
+        name: '',
+        projectId: ''
+      },
+      projectList: [],
+      DialogVisible: false,
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '场景名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        projectId: [
+          {
+            required: true,
+            message: '项目名称不能为空！',
+            trigger: 'blur'
+          }
+        ]
+      },
+      delSceneForm: {
+        sceneId: ''
+      },
+      isShow: true,
+      requestData: '',
+      executeScene: {
+        sceneId: '',
+        namespace: ''
+      }
+    }
+  },
+  created() {
+    this.getSecneList()
+    this.getProjectList()
+    this.$bus.$on('refreshScene', () => {
+      this.getSecneList()
+    })
+  },
+  methods: {
+    // 获取场景列表
+    getSecneList() {
+      getSceneList(this.queryModuleInfo).then((resp) => {
+        this.sceneList = resp.data.data.list
+        this.totalNum = resp.data.data.total
+      })
+    },
+    // 获取项目列表
+    getProjectList() {
+      getProjectList(this.queryProjectList).then((resp) => {
+        this.projectList = resp.data.data.list
+      })
+    },
+    // 查询方法
+    queryData() {
+      this.getSecneList()
+    },
+    // 执行场景
+    executeSceneFrom(row) {
+      // 获取用例id
+      this.executeScene.sceneId = row.id
+      this.executeScene.namespace = window.sessionStorage.getItem('env')
+      // this.isShow = true
+      executeScene(this.executeScene).then((resp) => {
+        console.log('接口返回结果', resp)
+        this.requestData = resp.data.data
+      })
+    },
+    // 编辑场景
+    editeSceneFrom(row) {
+      window.sessionStorage.setItem('curScene', JSON.stringify(row))
+      this.$router.push({ path: 'EditScene' })
+      // this.$router.push({ path: 'tese' })
+      // bus使用
+      this.$nextTick(function () {
+        // DOM 现在更新了
+
+        this.$bus.$emit('scenemsg', row)
+      })
+    },
+    // 对话框方法
+    openMessage(message, confirmText, doit) {
+      this.$messageBox
+        .confirm(message, '确定', {
+          cancelButtonText: '取消',
+          confirmButtonText: confirmText,
+          type: 'warning'
+        })
+        .then(() => {
+          doit()
+        })
+        .catch(() => {})
+    },
+    // 删除场景
+    deleSceneFrom(row) {
+      this.delSceneForm.sceneId = row.id
+      this.openMessage('您确定要删除吗？', '删除', () => {
+        delSecne(this.delSceneForm)
+          .then((resp) => {
+            if (resp.data.data === true) {
+              this.$message.success('删除成功！')
+              this.getSecneList()
+            } else if (resp.data.data === false) {
+              this.$message.error(resp.data.msg)
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      })
+    },
+    handleSizeChange(newSize) {
+      this.queryModuleInfo.pageSize = newSize
+      this.getSecneList()
+    },
+    handleCurrentChange(newPage) {
+      this.queryModuleInfo.pageNum = newPage
+      this.getSecneList()
+    },
+    // 添加场景
+    addSceneFrom() {
+      addSecene(this.sceneForm).then((resp) => {
+        if (resp.data.data === true) {
+          this.DialogVisible = false
+          this.$message.success('新增成功！')
+          this.sceneForm.name = ''
+          this.sceneForm.projectId = ''
+          this.getSecneList()
+        } else {
+          this.$message.error(resp.data.msg)
+        }
+      })
+    }
+  }
+}
+</script>

src/views/layout/Home.vue

@@ -10,10 +10,7 @@
       <el-main>
         <AsideTitle></AsideTitle>
         <!--页面的展示-->
-        <transition
-          name="compAnimate"
-          appear
-        >
+        <transition name="compAnimate" appear>
           <keep-alive>
             <router-view :style="{marginTop: '55px'}"></router-view>
           </keep-alive>
@@ -22,7 +19,6 @@
     </el-container>
   </el-container>
 </template>
-
 <script>
 import Aside from './leftAside/Aside'
 import Header from './rightMain/Header'

src/views/layout/leftAside/menu.json

@@ -100,17 +100,54 @@
         }
       ]
     },
+    {
+      "id": 5,
+      "title": "接口自动化",
+      "icon": "el-icon-s-opportunity",
+      "child": [
+        {
+          "id": 1,
+          "title": "项目管理",
+          "icon": "el-icon-bicycle",
+          "path": "/auto/Project"
+        },
+        {
+          "id": 2,
+          "title": "模块管理",
+          "icon": "el-icon-wallet",
+          "path": "/auto/Model"
+        },
+        {
+          "id": 3,
+          "title": "接口管理",
+          "icon": "el-icon-bank-card",
+          "path": "/auto/InterfaceDetail"
+        },
+        {
+          "id": 4,
+          "title": "用例管理",
+          "icon": "el-icon-postcard",
+          "path": "/auto/CaseList"
+        },
+        {
+          "id": 5,
+          "title": "场景管理",
+          "icon": "el-icon-thumb",
+          "path": "/auto/SceneList"
+        }
+      ]
+    },
     {
       "id": 6,
       "title": "Jira相关",
       "icon": "el-icon-hot-water",
       "child": [
-          {
-            "id": 1,
-            "title": "jira-钉钉通知",
-            "icon": "el-icon-ice-tea",
-            "path": "/jira/notify"
-          }
+        {
+          "id": 1,
+          "title": "jira-钉钉通知",
+          "icon": "el-icon-ice-tea",
+          "path": "/jira/notify"
+        }
       ]
     }
   ]