add ：自动化 - 执行api

test-ui/src/api/uiTest/automationTest.js

@@ -36,10 +36,18 @@ export function updateAutomation(data) {
 }
 
 // 自动化 - 详情
-
 export function getAutomationDetail(data) {
   return request({
-    url: '/test/automation/getInfo' + data,
+    url: '/test/automation/getInfo/' + data,
     method: 'get',
   })
-}
+}
+
+// 自动化 - 执行
+export function executeAutomationData(query) {
+  return request({
+    url: '/test/automation/executeStep',
+    method: 'get',
+    params: query,
+  })
+}

test-ui/src/views/test/uiTest/automationTest.vue

@@ -44,7 +44,7 @@
           <template slot-scope="scope">
             <el-button type="text" icon="el-icon-edit-outline" @click="hadleClickEdit(scope.row)">编辑</el-button>
             <el-button type="text" icon="el-icon-view" @click="handleClickDetail(scope.row)"
-              style="color: green;">查看</el-button>
+              style="color: green;">执行</el-button>
             <el-button type="text" icon="el-icon-delete" style="color: red;"
               @click="hadleClickDelete(scope.row)">删除</el-button>
           </template>
@@ -58,7 +58,7 @@
 
 <script>
 import FolderPage from "@/components/FolderPage/index.vue"
-import { getAutomationList, deleteAutomation } from "../../../api/uiTest/automationTest";
+import { getAutomationList, deleteAutomation, executeAutomationData } from "../../../api/uiTest/automationTest";
 
 export default {
   name: "AutomationTest",
@@ -129,7 +129,15 @@ export default {
       }).catch(() => { })
     },
     // 查看
-    handleClickDetail() { },
+    handleClickDetail(val) {
+      executeAutomationData({ id: val.id }).then(res => {
+        if (res.code === 200) {
+          this.$modal.msgSuccess("执行成功");
+        } else {
+          this.$modal.msgSuccess("执行失败");
+        }
+      })
+    },
     // 分页
     handleSizeChange(val) {
       this.searchForm.pageSize = val

test-ui/src/views/test/uiTest/editScene.vue

@@ -1,18 +1,213 @@
 <template>
-  <div>编辑场景</div>
+  <div class="create-scene">
+    <div class="left-wrap">
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" stretch>
+        <el-tab-pane label="基础信息" name="first">
+          <el-form ref="form" :rules="rules" label-width="80px" :model="informationForm" label-position="right">
+            <el-form-item prop='name' label="名称">
+              <el-input v-model="informationForm.name" placeholder="请输入名称" maxlength="100" show-word-limit></el-input>
+            </el-form-item>
+            <el-form-item prop='groupId' label="模块">
+              <el-input v-model="informationForm.groupId" placeholder="请选择模块"></el-input>
+            </el-form-item>
+            <el-form-item prop='status' label="状态">
+              <el-select v-model="informationForm.status">
+                <el-option key="1" label="未开始" value="1"></el-option>
+                <el-option key="2" label="进行中" value="2"></el-option>
+                <el-option key="3" label="已完成" value="3"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop='dutyBy' label="责任人">
+              <el-input v-model="informationForm.dutyBy" placeholder="请选择责任人"></el-input>
+            </el-form-item>
+            <el-form-item prop='caseLevel' label="用例等级">
+              <el-input v-model="informationForm.caseLevel" placeholder="请选择用例登记"></el-input>
+            </el-form-item>
+            <el-form-item prop='label' label="标签">
+              <el-input v-model="informationForm.label" placeholder="请输入标签"></el-input>
+            </el-form-item>
+            <el-form-item prop='description' label="描述">
+              <el-input v-model="informationForm.description" placeholder="请输入描述" type="textarea" :rows="2"></el-input>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="场景步骤" name="second">
+          <el-menu :default-active="String(defaultActive)" @select="handleSelect">
+            <div v-for="(item, index) in stepList">
+              <el-menu-item :index="String(index + 1)">
+                <div class="menu-wrap">
+                  <div class="stepCount">{{ index + 1 }}</div>
+                  <div>{{ item.name }}</div>
+                </div>
+              </el-menu-item>
+            </div>
+          </el-menu>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <div class="scene-wrap">
+      <div class="scene-header">
+        <el-button size="mini" @click="handleClickSave">保存</el-button>
+      </div>
+      <SceneStep v-show="defaultActive != 0" :step="stepName" @stepNameChange="stenNameChange" />
+      <AdvancedSetting v-show="defaultActive != 0" />
+    </div>
+    <!-- 添加步骤 -->
+    <div class="add-btn">
+      <el-dropdown @command="handleClickAddStep" :hide-on-click="false">
+        <el-button icon="el-icon-circle-plus-outline" type="text" style="font-size: 30px;"></el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="浏览器操作">浏览器操作</el-dropdown-item>
+          <el-dropdown-item command="弹窗操作">弹窗操作</el-dropdown-item>
+          <el-dropdown-item command="元素操作">元素操作</el-dropdown-item>
+          <el-dropdown-item command="鼠标操作">鼠标操作</el-dropdown-item>
+          <el-dropdown-item command="输入操作">输入操作</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
 </template>
 
 <script>
+import AdvancedSetting from './advancedSetting.vue'
+import SceneStep from './sceneStep.vue'
+import { getAutomationDetail } from '../../../api/uiTest/automationTest'
+
 export default {
   name: "EditScene",
+  components: { AdvancedSetting, SceneStep },
   data() {
-    return {}
+    return {
+      activeName: 'first',
+      informationForm: {
+        name: null, // 名称
+        groupId: null,  // 模块
+        status: null,  // 状态
+        dutyBy: null,  // 责任人
+        caseLevel: null,   // 用例等级
+        label: null, // 标签
+        description: null,  // 描述
+      },
+      rules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        groupId: [{ required: true, message: '请选择模块', trigger: 'blur' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
+        dutyBy: [{ required: true, message: '请输入责任人', trigger: 'blur' }],
+      },
+      stepList: [],
+      defaultActive: 0, // 当前激活菜单的 index
+      stepName: null, // 当前所选中的步骤的名称
+    }
   },
   mounted() {
+    this.getSceneDetail()
   },
   methods: {
+    handleClick() { },
+    // 获取详情
+    getSceneDetail() {
+      getAutomationDetail(this.$route.query.id).then(res => {
+        if (res.code === 200) {
+
+        }
+      })
+    },
+    // 场景步骤
+    handleSelect(key, keyPath) {
+      this.defaultActive = Number(key)
+      this.stepName = this.stepList[Number(key) - 1].name
+    },
+    // 添加步骤
+    handleClickAddStep(command) {
+      var param = {
+        name: '',
+      }
+      switch (command) {
+        case '浏览器操作':
+          param.name = '打开网页'
+          break
+        case '弹窗操作':
+          param.name = '弹窗操作'
+          break
+        case '元素操作':
+          param.name = '提交表单'
+          break
+        case '鼠标操作':
+          param.name = '鼠标点击'
+          break
+        case '输入操作':
+          param.name = '输入操作'
+          break
+      }
+      this.stepName = param.name
+      this.stepList.splice(this.defaultActive, 0, param);
+      this.defaultActive++;
+    },
+    // 步骤名称同步
+    stenNameChange(val) {
+      this.stepName = val
+      this.stepList[this.defaultActive - 1].name = val
+    },
+    // 保存
+    handleClickSave() {
+    },
   }
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.create-scene {
+  padding: 20px;
+  display: flex;
+
+  .left-wrap {
+    width: 300px;
+    overflow: auto;
+
+    .menu-wrap {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .stepCount {
+        width: 20px;
+        height: 20px;
+        border: solid 1px;
+        border-radius: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+  }
+
+  .scene-wrap {
+    width: 100%;
+
+    .scene-header {
+      display: flex;
+      justify-content: flex-end;
+      padding-right: 30px;
+    }
+  }
+
+  .add-btn {
+    position: fixed;
+    bottom: 100px;
+    right: 100px;
+  }
+}
+
+::v-deep .el-menu-item {
+  height: 36px;
+  line-height: 36px;
+}
+
+::v-deep .el-menu-item.is-active {
+  background-color: white;
+  /* 自定义背景色 */
+  color: #409EFF;
+  /* 自定义字体颜色 */
+}
+</style>