场景用例模块

src/api/getAotoInterface.js

@@ -92,3 +92,11 @@ export function delInterface(queryInfo) {
     params: queryInfo
   })
 }
+// 获取某个接口下的所有用例
+export function getCaseByInterface(queryInfo) {
+  return request({
+    url: '/auto/testcase/byInterface',
+    method: 'get',
+    params: queryInfo
+  })
+}

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
+  })
+}

src/router/index.js

@@ -22,7 +22,8 @@ import JiraNotify from '../views/jira/Notify'
 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',
@@ -126,6 +127,17 @@ const router = new Router({
           name: AddCase,
           component: AddCase
         },
+        {
+          path: '/auto/SceneList',
+          name: SceneList,
+          component: SceneList
+        },
+        // 编辑场景
+        {
+          path: '/auto/EditScene',
+          name: EditScene,
+          component: EditScene
+        },
         {
           'path': '/effect/jira/notify',
           component: JiraNotify

src/views/auto/AddCase.vue

@@ -197,7 +197,6 @@
         </div>
       </el-card>
     </el-form>
-
   </div>
 </template>
 <script>

src/views/auto/CaseList.vue

@@ -74,6 +74,7 @@ export default {
     }
   },
   created() {
+    this.isShow = false
     this.getModulList()
     this.getCaseList()
     bus.$on('refresh', () => {

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="sceneCaseList" 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="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="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-left:500px;margin-top:20px">
+          <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="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: 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>
+  </div>
+</template>
+<script>
+import bus from '@/utils/bus'
+import {
+  getProjectList,
+  getModulList,
+  interfaceDetailList,
+  getCaseByInterface
+} from '@/api/getAotoInterface'
+import { getSceneCaseList } from '@/api/getAutoScene'
+export default {
+  data() {
+    return {
+      queryProjectList: {
+        pageNum: 1,
+        pageSize: 20
+      },
+      sceneForm: {
+        name: '',
+        projectId: ''
+      },
+      projectList: [],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '场景名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        projectId: [
+          {
+            required: true,
+            message: '项目名称不能为空！',
+            trigger: 'blur'
+          }
+        ]
+      },
+      sceneCaseForm: {},
+      sceneCaseList: [],
+      sceneCaseInfo: {
+        sceneId: ''
+      },
+      DialogVisible: false,
+      modelList: [],
+      interfaceList: [],
+      moduleInfo: {
+        pageNum: 1,
+        pageSize: 100
+      },
+      interfaceInfo: {
+        pageNum: 1,
+        pageSize: 100,
+        moduleId: ''
+      },
+      caseInfo: {
+        interfaceId: ''
+      },
+      moduleFrom: {},
+      interfaceFrom: {},
+      caseList: [],
+      newFrom: {
+        moduleName: '',
+        moduleId: '',
+        interfaceName: '',
+        interfaceId: '',
+        caseDetialList: []
+      }
+    }
+  },
+  created() {
+    this.getProjectList()
+    bus.$on('scenemsg', (row) => {
+      // console.log('参数信息', row)
+      this.sceneForm.name = row.name
+      this.sceneForm.projectId = row.projectId
+      this.sceneCaseInfo.sceneId = row.id
+      this.getSceneCaseList()
+    })
+    this.getModelList()
+  },
+  methods: {
+    // 获取项目列表
+    getProjectList() {
+      getProjectList(this.queryProjectList).then((resp) => {
+        this.projectList = resp.data.data.list
+      })
+    },
+    // 获取场景用例列表
+    getSceneCaseList() {
+      getSceneCaseList(this.sceneCaseInfo).then((resp) => {
+        this.sceneCaseList = resp.data.data.list
+      })
+    },
+    // 获取模块列表
+    getModelList() {
+      getModulList(this.moduleInfo).then((resp) => {
+        this.modelList = resp.data.data.list
+      })
+    },
+    // 模块下拉框改变事件
+    selectChangeModel() {
+      this.interfaceInfo.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.newFrom.caseDetialList = row
+    },
+    // 确定按钮
+    addSceneFrom() {
+      this.newFrom.moduleId = this.moduleFrom.id
+      this.newFrom.moduleName = this.moduleFrom.name
+      this.newFrom.interfaceId = this.interfaceFrom.id
+      this.newFrom.interfaceName = this.interfaceFrom.name
+      console.log('列表信息', this.sceneCaseList)
+      // var newCaseList = []
+      this.sceneCaseList.push({
+        moduleName: this.newFrom.moduleName,
+        interfaceName: this.newFrom.interfaceName
+      })
+      console.log('新列表信息', this.sceneCaseList)
+      this.DialogVisible = false
+      this.moduleFrom = ''
+      this.interfaceFrom = ''
+      this.caseList = []
+    },
+    // 保存场景用例方法
+    addSceneCaseFrom() {}
+  }
+}
+</script>

src/views/auto/Project.vue

@@ -180,8 +180,7 @@ export default {
     handleCurrentChange(newPage) {
       this.queryModuleInfo.pageNum = newPage
       this.getProjectList()
-    },
-    closeEditDialog() {}
+    }
   }
 }
 </script>

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 } from '@/api/getAutoScene'
+import { getProjectList } from '@/api/getAotoInterface'
+import bus from '@/utils/bus'
+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: false,
+      requestData: ''
+    }
+  },
+  created() {
+    this.getSecneList()
+    this.getProjectList()
+  },
+  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() {},
+    // 编辑场景
+    editeSceneFrom(row) {
+      this.$router.push({ path: 'EditScene' })
+      // bus使用
+      this.$nextTick(function () {
+        // DOM 现在更新了
+        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/leftAside/menu.json

@@ -117,6 +117,12 @@
           "icon": "el-icon-postcard",
           "path": "/auto/CaseList"
         },
+        {
+          "id": 5,
+          "title": "场景管理",
+          "icon": "el-icon-thumb",
+          "path": "/auto/SceneList"
+        },
         {
           "id": 6,
           "title": "新增接口",