From b0427ef35ce366915b16f86672fcc8474127a0ed Mon Sep 17 00:00:00 2001
From: fanzhuxian <17826840660@139.com>
Date: Tue, 29 Apr 2025 15:08:14 +0800
Subject: [PATCH] =?UTF-8?q?add:=20ui=E6=B5=8B=E8=AF=95-=20=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E5=8C=96-=E7=BC=96=E8=BE=91-=E5=9C=BA=E6=99=AF?=
 =?UTF-8?q?=E6=AD=A5=E9=AA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test-ui/src/views/test/uiTest/editScene.vue | 104 +++-
 test-ui/src/views/test/uiTest/sceneStep.vue | 576 ++++++++++++++++----
 2 files changed, 547 insertions(+), 133 deletions(-)

diff --git a/test-ui/src/views/test/uiTest/editScene.vue b/test-ui/src/views/test/uiTest/editScene.vue
index 3ea203d..1395888 100644
--- a/test-ui/src/views/test/uiTest/editScene.vue
+++ b/test-ui/src/views/test/uiTest/editScene.vue
@@ -8,10 +8,12 @@
               <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-select v-model="informationForm.groupId">
+                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
             </el-form-item>
             <el-form-item prop='status' label="状态">
-              <el-select v-model="informationForm.status">
+              <el-select v-model="informationForm.status" placeholder="请选择状态">
                 <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>
@@ -21,7 +23,12 @@
               <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-select v-model="informationForm.caseLevel" placeholder="请选择用例等级">
+                <el-option key="P0" label="P0" value="P0"></el-option>
+                <el-option key="P1" label="P1" value="P1"></el-option>
+                <el-option key="P2" label="P2" value="P2"></el-option>
+                <el-option key="P3" label="P3" value="P3"></el-option>
+              </el-select>
             </el-form-item>
             <el-form-item prop='label' label="标签">
               <el-input v-model="informationForm.label" placeholder="请输入标签"></el-input>
@@ -33,11 +40,13 @@
         </el-tab-pane>
         <el-tab-pane label="场景步骤" name="second">
           <el-menu :default-active="String(defaultActive)" @select="handleSelect">
-            <div v-for="(item, index) in stepList">
+            <div v-for="(item, index) in informationForm.uiSceneStepsVOList">
               <el-menu-item :index="String(index + 1)">
                 <div class="menu-wrap">
                   <div class="stepCount">{{ index + 1 }}</div>
                   <div>{{ item.name }}</div>
+                  <el-button type="text" icon="el-icon-delete" class="delete-btn"
+                    @click="deleteStep(index)"></el-button>
                 </div>
               </el-menu-item>
             </div>
@@ -49,12 +58,12 @@
       <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" />
+      <SceneStep v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep" />
+      <AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" />
     </div>
     <!-- 添加步骤 -->
     <div class="add-btn">
-      <el-dropdown @command="handleClickAddStep" :hide-on-click="false">
+      <el-dropdown @command="handleCommand" :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>
@@ -71,7 +80,8 @@
 <script>
 import AdvancedSetting from './advancedSetting.vue'
 import SceneStep from './sceneStep.vue'
-import { getAutomationDetail } from '../../../api/uiTest/automationTest'
+import { getAutomationDetail, updateAutomation } from '../../../api/uiTest/automationTest'
+import { listGroup } from "../../../api/test/group"
 
 export default {
   name: "EditScene",
@@ -79,7 +89,9 @@ export default {
   data() {
     return {
       activeName: 'first',
+      groupList: [], // 分组
       informationForm: {
+        automationId: null, // 场景id
         name: null, // 名称
         groupId: null,  // 模块
         status: null,  // 状态
@@ -87,6 +99,7 @@ export default {
         caseLevel: null,   // 用例等级
         label: null, // 标签
         description: null,  // 描述
+        uiSceneStepsVOList: [], // 场景步骤
       },
       rules: {
         name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
@@ -96,60 +109,105 @@ export default {
       },
       stepList: [],
       defaultActive: 0, // 当前激活菜单的 index
-      stepName: null, // 当前所选中的步骤的名称
+      changeStep: null, // 选中的步骤
     }
   },
   mounted() {
+    this.getGroupListData()
     this.getSceneDetail()
   },
   methods: {
     handleClick() { },
+    // 
+    getGroupListData() {
+      listGroup('automation').then(res => {
+        if (res.code === 200) {
+          this.groupList = res.data
+        }
+      })
+    },
     // 获取详情
     getSceneDetail() {
       getAutomationDetail(this.$route.query.id).then(res => {
         if (res.code === 200) {
-
+          this.informationForm = res.data
+          if (this.informationForm.uiSceneStepsVOList.length > 0) {
+            this.defaultActive = 1
+            this.changeStep = this.informationForm.uiSceneStepsVOList[this.defaultActive - 1]
+          } else {
+            this.defaultActive = 0
+          }
         }
       })
     },
+    // 删除步骤
+    deleteStep(index) {
+      this.$modal.confirm('确认删除该步骤' + '？').then(() => {
+        this.informationForm.uiSceneStepsVOList.splice(index, 1);
+      }).catch(() => { })
+    },
     // 场景步骤
     handleSelect(key, keyPath) {
       this.defaultActive = Number(key)
-      this.stepName = this.stepList[Number(key) - 1].name
+      this.changeStep = this.informationForm.uiSceneStepsVOList[this.defaultActive - 1]
     },
     // 添加步骤
-    handleClickAddStep(command) {
+    handleCommand(command) {
       var param = {
-        name: '',
+        name: null,
+        operateType: null,
+        stepType: '1',
+        automationId: this.$route.query.id
       }
       switch (command) {
         case '浏览器操作':
           param.name = '打开网页'
+          param.operateType = '1'
           break
         case '弹窗操作':
           param.name = '弹窗操作'
+          param.operateType = '2'
           break
         case '元素操作':
           param.name = '提交表单'
+          param.operateType = '3'
           break
         case '鼠标操作':
           param.name = '鼠标点击'
+          param.operateType = '4'
           break
         case '输入操作':
           param.name = '输入操作'
+          param.operateType = '5'
           break
       }
-      this.stepName = param.name
-      this.stepList.splice(this.defaultActive, 0, param);
+      this.informationForm.uiSceneStepsVOList.splice(this.defaultActive, 0, param);
+      this.changeStep = this.informationForm.uiSceneStepsVOList[this.defaultActive]
       this.defaultActive++;
     },
-    // 步骤名称同步
-    stenNameChange(val) {
-      this.stepName = val
-      this.stepList[this.defaultActive - 1].name = val
-    },
     // 保存
     handleClickSave() {
+      if (this.informationForm.name === null || this.informationForm.name === '') {
+        this.$modal.msgWarning("请输入名称！");
+      }
+      if (this.informationForm.groupId === null || this.informationForm.groupId === '') {
+        this.$modal.msgWarning("请选择模块！");
+      }
+      if (this.informationForm.status === null || this.informationForm.status === '') {
+        this.$modal.msgWarning("请选择状态");
+      }
+      if (this.informationForm.dutyBy === null || this.informationForm.dutyBy === '') {
+        this.$modal.msgWarning("请输入责任人");
+      }
+      updateAutomation(this.informationForm).then(res => {
+        if (res.code === 200) {
+          this.$modal.msgSuccess("编辑成功")
+          this.$tab.closeOpenPage({ path: "/ui-test/automation-test" });
+        } else {
+          this.$modal.msgError("编辑失败")
+        }
+
+      })
     },
   }
 }
@@ -168,6 +226,12 @@ export default {
       display: flex;
       align-items: center;
       gap: 10px;
+      position: relative;
+
+      .delete-btn {
+        position: absolute;
+        right: 0px;
+      }
 
       .stepCount {
         width: 20px;
diff --git a/test-ui/src/views/test/uiTest/sceneStep.vue b/test-ui/src/views/test/uiTest/sceneStep.vue
index 67e119e..f455cce 100644
--- a/test-ui/src/views/test/uiTest/sceneStep.vue
+++ b/test-ui/src/views/test/uiTest/sceneStep.vue
@@ -1,70 +1,306 @@
 <template>
   <div class="scene-step">
     <div class="title">场景步骤</div>
-    <el-form :model="saveForm" :rules="rules" label-width="100px">
-      <el-form-item prop="stepName" label="名称">
-        <el-input v-model="saveForm.stepName" placeholder="请输入名称" maxlength="100" show-word-limit @input="changeInput"
-          class="input" />
+    <el-form :model="saveForm" :rules="rules" label-width="110px">
+      <el-form-item prop="name" label="名称">
+        <el-input v-model="saveForm.name" placeholder="请输入名称" maxlength="100" show-word-limit class="input" />
       </el-form-item>
-      <el-form-item prop="type" label="步骤类型">
-        <el-select v-model="saveForm.type" placeholder="请选择" class="select" @change="changeSelectType">
+      <el-form-item prop="stepType" label="步骤类型">
+        <el-select v-model="saveForm.stepType" placeholder="请选择" class="select" @change="selectStepType">
           <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
         <span style="margin-left: 20px; color: gray;">{{ typeTitle }}</span>
       </el-form-item>
-      <div v-show="typeName === '打开网页'">
-        <el-form-item prop="url" label="URL">
-          <el-input v-model="saveForm.stepName" placeholder="URL或路径" class="input" />
+      <!-- 判断样式 -->
+      <!-- 浏览器操作 -->
+      <div v-show="saveForm.operateType === '1'">
+        <!-- 打开网页 -->
+        <el-form-item prop="url" label="URL" v-show="saveForm.stepType === '1'">
+          <el-input v-model="saveForm.url" placeholder="URL或路径" class="input" />
           <el-tooltip class="item" effect="dark" content="根据URL,打开指定的页面" placement="right">
             <i class="el-icon-info" style="margin-left: 20px;"></i>
           </el-tooltip>
         </el-form-item>
-        <el-form-item>
-          <el-radio v-model="saveForm.radio" label="1">追加页面</el-radio>
+        <el-form-item v-show="saveForm.stepType === '1'">
+          <el-checkbox v-model="saveForm.isAppendPage">追加页面</el-checkbox>
           <el-tooltip class="item" effect="dark" content="追加页面，在新的页面打开url，不勾选覆盖当前url" placement="right">
             <i class="el-icon-info"></i>
           </el-tooltip>
         </el-form-item>
+        <!-- 切换窗口 - 设置窗口大小 - 选择内嵌网页 -->
+        <el-form-item label="操作" v-show="saveForm.stepType != '1' && saveForm.stepType != '2'">
+          <el-select v-model="saveForm.operate" class="select">
+            <el-option v-for="item in actionList" :key="Number(item.value)" :label="item.label"
+              :value="Number(item.value)"></el-option>
+          </el-select>
+          <el-tooltip v-show="saveForm.stepType === '3' && saveForm.operate != null" class="item" effect="dark"
+            content="如果是切换到指定窗口，需要传入句柄" placement="right">
+            <i class="el-icon-info" style="margin-left: 10px;"></i>
+          </el-tooltip>
+          <el-tooltip v-show="saveForm.stepType === '4' && saveForm.operate === 2" class="item" effect="dark"
+            content="指定尺寸，根据输入的宽度和高度，设置窗口的大小" placement="right">
+            <i class="el-icon-info" style="margin-left: 10px;"></i>
+          </el-tooltip>
+          <el-tooltip v-show="saveForm.stepType === '5' && saveForm.operate != null" class="item" effect="dark"
+            content="如果是切换 frame，需要传入索引或者元素定位后再切换" placement="right">
+            <i class="el-icon-info" style="margin-left: 10px;"></i>
+          </el-tooltip>
+        </el-form-item>
+        <!-- 切换窗口 -->
+        <div v-show="saveForm.stepType === '3'">
+          <!-- 根据句柄 ID 切换到指定窗口 -->
+          <el-form-item prop="handleId" label="句柄ID" v-show="saveForm.operate === '1'">
+            <el-input v-model="saveForm.handleId" placeholder="窗口句柄ID" class="input" />
+          </el-form-item>
+          <!-- 根据网页索引号切换到指定窗口 -->
+          <el-form-item prop="pageIndex" label="网页索引号" v-show="saveForm.operate === '2'">
+            <el-input-number v-model="saveForm.pageIndex" :min="1"></el-input-number>
+            <el-tooltip class="item" effect="dark" content="选择打开过的第几个网页；例：比如索引值输入 3，那么效果会切换到已经打开过的第 3 个窗口(索引值从 1 开始计算)"
+              placement="right">
+              <i class="el-icon-info" style="margin-left: 10px;"></i>
+            </el-tooltip>
+          </el-form-item>
+        </div>
+        <!-- 设置窗口大小 -->
+        <div v-show="saveForm.stepType === '4'">
+          <el-form-item label="尺寸" v-show="saveForm.operate === 2">
+            <el-input-number v-model="winSize.width" controls-position="right" :min="0"
+              @change="changeWindSize"></el-input-number>
+            <span style="margin: 0 5px;">X</span>
+            <el-input-number v-model="winSize.height" controls-position="right" :min="0"
+              @change="changeWindSize"></el-input-number>
+            <el-tooltip class="item" effect="dark" content="以像素为单位" placement="right">
+              <i class="el-icon-info" style="margin-left: 10px;"></i>
+            </el-tooltip>
+          </el-form-item>
+        </div>
+        <!-- 选择内嵌网页 -->
+        <div v-show="saveForm.stepType === '5'">
+          <el-form-item prop="frameIndex" label="frame索引号" v-show="saveForm.operate === 2">
+            <el-input-number v-model="saveForm.frameIndex" :min="0"></el-input-number>
+            <el-tooltip class="item" effect="dark"
+              content="选择当前页面的第几个 frame；例：比如索引值输入 1，那么效果会切换到当前页面的第 2 个 frame(索引值从 0 开始计算)" placement="right">
+              <i class="el-icon-info" style="margin-left: 20px;"></i>
+            </el-tooltip>
+          </el-form-item>
+          <!-- 根据定位方式切换 frame -->
+          <el-form-item prop="operateObject" label="操作对象" v-show="saveForm.operate === 3">
+            <div class="operateObject-wrap">
+              <el-select v-model="saveForm.operateObject" class="select">
+                <el-option key="1" label="元素对象" value="1"></el-option>
+                <el-option key="2" label="元素定位" value="2"></el-option>
+              </el-select>
+              <!-- 元素对象 -->
+              <div v-show="saveForm.operateObject != '2'" class="operateObject-wrap">
+                <el-select v-model="saveForm.operateGroupId" class="select" @change="getOperateGroup">
+                  <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+                <el-select v-model="saveForm.action" class="select">
+                  <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+              </div>
+              <!-- 元素定位 -->
+              <div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
+                <el-select v-model="saveForm.operateLocType" class="select" @change="getOperateLoc">
+                  <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+                <el-select v-model="saveForm.operateLocValue" class="select">
+                  <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+              </div>
+            </div>
+          </el-form-item>
+        </div>
       </div>
-      <div v-show="typeName === '弹窗操作'">
-        <el-form-item label="是否输入" prop="isInput">
-          <el-select v-model="saveForm.isInput" class="select">
-            <el-option key="1" label="是" value="1"></el-option>
-            <el-option key="0" label="否" value="0"></el-option>
+      <!-- 弹窗操作 -->
+      <div v-show="saveForm.operateType === '2'">
+        <el-form-item label="是否输入" prop="isEnter">
+          <el-select v-model="saveForm.isEnter" class="select">
+            <el-option key="1" label="否" value="1"></el-option>
+            <el-option key="2" label="是" value="2"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="操作方式" prop="actionType">
-          <el-select v-model="saveForm.actionType" class="select">
+        <el-form-item label="操作方式" prop="operateWay">
+          <el-select v-model="saveForm.operateWay" class="select">
             <el-option key="1" label="确定" value="1"></el-option>
-            <el-option key="0" label="取消" value="0"></el-option>
+            <el-option key="2" label="取消" value="2"></el-option>
           </el-select>
           <el-tooltip class="item" effect="dark" content="点击弹窗确定按钮或取消按钮" placement="right" style="margin-left: 10px;">
             <i class="el-icon-info"></i>
           </el-tooltip>
         </el-form-item>
       </div>
-      <div
-        v-show="typeName === '切换窗口' || typeName === '设置窗口大小' || typeName === '选择内嵌网页' || typeName === '下拉框操作' || typeName === '设置选项'">
-        <el-form-item label="操作">
-          <el-select v-model="saveForm.action" class="select">
-            <el-option v-for="item in actionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+      <!-- 元素操作 -->
+      <div v-show="saveForm.operateType === '3'">
+        <el-form-item label="操作" v-show="saveForm.stepType != '1'">
+          <el-select v-model="saveForm.operate" class="select">
+            <el-option v-for="item in actionList" :key="Number(item.value)" :label="item.label"
+              :value="Number(item.value)"></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item prop="operateObject" label="操作对象">
+          <div class="operateObject-wrap">
+            <el-select v-model="saveForm.operateObject" class="select">
+              <el-option key="1" label="元素对象" value="1"></el-option>
+              <el-option key="2" label="元素定位" value="2"></el-option>
+            </el-select>
+            <!-- 元素对象 -->
+            <div v-show="saveForm.operateObject != '2'" class="operateObject-wrap">
+              <el-select v-model="saveForm.operateGroupId" class="select" @change="getOperateGroup">
+                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+              <el-select v-model="saveForm.action" class="select">
+                <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </div>
+            <!-- 元素定位 -->
+            <div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
+              <el-select v-model="saveForm.operateLocType" class="select" @change="getOperateLoc">
+                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+              <el-select v-model="saveForm.operateLocValue" class="select">
+                <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item prop="subOptions" label="子选项" v-show="saveForm.stepType === '2'">
+          <el-select v-model="saveForm.subOptions" class="select">
+            <el-option key="1" label="选项(Option)" value="1"></el-option>
+            <el-option key="2" label="索引(Index)" value="2"></el-option>
+            <el-option key="3" label="值(Value)" value="3"></el-option>
+          </el-select>
+          <el-input v-model="saveForm.subOptionsValue" placeholder="值" class="select"
+            style="margin-left: 10px"></el-input>
+        </el-form-item>
+        <div v-show="saveForm.stepType === '4'">
+          <!-- 等待文本 -->
+          <el-form-item prop="awaitValue" label="等待文本" v-show="saveForm.operate === 1">
+            <el-input v-model="saveForm.awaitValue" placeholder="等待文本" class="select"></el-input>
+            <el-tooltip class="item" effect="dark" content="针对元素的Text属性，指页面展示出来的文本内容，等待超时时间为15000ms" placement="right">
+              <i class="el-icon-info" style="margin-left: 20px;"></i>
+            </el-tooltip>
+          </el-form-item>
+          <!-- 等待超时 -->
+          <el-form-item label="等待超时" v-show="saveForm.operate != 1">
+            <el-input-number v-model="saveForm.awaitValue" :min="1"></el-input-number>
+            <span style="margin-left: 5px;">ms</span>
+          </el-form-item>
+        </div>
       </div>
-      <div v-show="typeName === '提交表单' || typeName === '下拉框操作' || typeName === '设置选项' || typeName === '等待元素'">
-        <el-form-item label="操作对象">
-          <el-select v-model="saveForm.action" class="select">
-            <el-option key="1" label="元素对象" value="1"></el-option>
-            <el-option key="1" label="元素定位" value="1"></el-option>
+      <!-- 鼠标操作 -->
+      <div v-show="saveForm.operateType === '4'">
+        <el-form-item label="点击方式" v-show="saveForm.stepType === '1'">
+          <el-select v-model="saveForm.clickMethod" class="select">
+            <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-option key="4" label="按下" value="4"></el-option>
+            <el-option key="5" label="弹起" value="5"></el-option>
           </el-select>
-          <el-select v-model="saveForm.action" class="select" style="margin: 0px 10px;">
-            <el-option key="1" label="元素对象" value="1"></el-option>
-            <el-option key="1" label="元素定位" value="1"></el-option>
+        </el-form-item>
+        <el-form-item prop="operateObject" label="元素位置" v-show="saveForm.stepType === '1'">
+          <div class="operateObject-wrap">
+            <el-select v-model="saveForm.operateObject" class="select">
+              <el-option key="1" label="元素对象" value="1"></el-option>
+              <el-option key="2" label="元素定位" value="2"></el-option>
+            </el-select>
+            <!-- 元素对象 -->
+            <div v-show="saveForm.operateObject != '2'" class="operateObject-wrap">
+              <el-select v-model="saveForm.operateGroupId" class="select" @change="getOperateGroup">
+                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+              <el-select v-model="saveForm.action" class="select">
+                <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </div>
+            <!-- 元素定位 -->
+            <div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
+              <el-select v-model="saveForm.operateLocType" class="select" @change="getOperateLoc">
+                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+              <el-select v-model="saveForm.operateLocValue" class="select">
+                <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="移动方式" v-show="saveForm.stepType === '2'">
+          <el-select v-model="saveForm.clickMethod" class="select">
+            <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-select v-model="saveForm.action" class="select">
-            <el-option key="1" label="元素对象" value="1"></el-option>
-            <el-option key="1" label="元素定位" value="1"></el-option>
+        </el-form-item>
+        <el-form-item prop="operateObject" label="鼠标位置" v-show="saveForm.stepType === '2'">
+          <div class="operateObject-wrap">
+            <el-select v-model="saveForm.operateObject" class="select">
+              <el-option key="1" label="元素对象" value="1"></el-option>
+              <el-option key="2" label="元素定位" value="2"></el-option>
+            </el-select>
+            <!-- 元素对象 -->
+            <div v-show="saveForm.operateObject != '2'" class="operateObject-wrap">
+              <el-select v-model="saveForm.operateGroupId" class="select" @change="getOperateGroup">
+                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+              <el-select v-model="saveForm.action" class="select">
+                <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </div>
+            <!-- 元素定位 -->
+            <div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
+              <el-select v-model="saveForm.operateLocType" class="select" @change="getOperateLoc">
+                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+              <el-select v-model="saveForm.operateLocValue" class="select">
+                <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </div>
+          </div>
+        </el-form-item>
+      </div>
+      <!-- 输入操作 -->
+      <div v-show="saveForm.operateType === '5'">
+        <el-form-item label="操作">
+          <el-select v-model="saveForm.operate" class="select">
+            <el-option v-for="item in actionList" :key="Number(item.value)" :label="item.label"
+              :value="Number(item.value)"></el-option>
           </el-select>
+          <el-tooltip class="item" effect="dark"
+            content="可编辑段落的元素 contenteditable 属性必须为 true, 才可实现输入；例： contenteditable='true' 这是一段可编辑的段落。请试着编辑该文本。"
+            placement="right">
+            <i class="el-icon-info"></i>
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item prop="operateObject" label="操作对象">
+          <div class="operateObject-wrap">
+            <el-select v-model="saveForm.operateObject" class="select">
+              <el-option key="1" label="元素对象" value="1"></el-option>
+              <el-option key="2" label="元素定位" value="2"></el-option>
+            </el-select>
+            <!-- 元素对象 -->
+            <div v-show="saveForm.operateObject != '2'" class="operateObject-wrap">
+              <el-select v-model="saveForm.operateGroupId" class="select" @change="getOperateGroup">
+                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+              <el-select v-model="saveForm.action" class="select">
+                <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </div>
+            <!-- 元素定位 -->
+            <div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
+              <el-select v-model="saveForm.operateLocType" class="select" @change="getOperateLoc">
+                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+              <el-select v-model="saveForm.operateLocValue" class="select">
+                <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item prop="inputValue" label="输入内容">
+          <el-input placeholder="请输入内容" v-model="saveForm.inputValue" type="textarea" :rows="4" class="input">
+          </el-input>
         </el-form-item>
       </div>
     </el-form>
@@ -72,107 +308,216 @@
 </template>
 
 <script>
+import { number } from "echarts";
+import { listGroup } from "../../../api/test/group";
+import { getElementList } from "../../../api/uiTest/elementLibrary";
+
 export default {
   name: "SceneStep",
   props: {
-    step: '',
+    selectIndex: number, // 当前选中的步骤
+    detail: {}, // 编辑的数据
   },
   data() {
     return {
+      winSize: {
+        height: 0,
+        width: 0,
+      },
       saveForm: {
-        stepName: null,
-        type: '1',
-        url: null,
-        radio: true,
-        action: null,
-        isInput: null,
-        actionType: null
+        automationId: null, // 场景id
+        name: null, // 名称
+        operateType: null, // 操作类型
+        stepType: null, // 步骤类型
+        url: null, // url
+        isAppendPage: 0, // 追加页面
+        operate: null, // 操作
+        handleId: null, // 句柄ID
+        pageIndex: 1, // 网页索引号
+        windowSize: null, // 尺寸
+        frameIndex: 0, // frame索引号
+        operateObject: null, // 操作对象
+        operateGroupId: null, // 元素对象
+        operateElementId: null, // 元素对象
+        operateLocType: null, // 元素定位
+        operateLocValue: null, // 元素定位
+        isEnter: null, // 是否输入
+        operateWay: null, // 操作方式
+        subOptions: null, // 子选项
+        subOptionsValue: null, // 子选项值
+        awaitValue: null, // 等待文本
+        clickMethod: null, // 点击方式
+        inputValue: null, // 输入内容
       },
       rules: {
-        stepName: [{ required: true, message: '请输入元素名称', trigger: 'blur' }],
-        type: [{ required: true, message: '请选择步骤类型', trigger: 'blur' }],
+        name: [{ required: true, message: '请输入元素名称', trigger: 'blur' }],
+        stepType: [{ required: true, message: '请选择步骤类型', trigger: 'blur' }],
         url: [{ required: true, message: '请输入URL或路径', trigger: 'blur' }],
-        isInput: [{ required: true, message: '请选择是否输入', trigger: 'blur' }],
-        actionType: [{ required: true, message: '请选择操作方式', trigger: 'blur' }],
+        handleId: [{ required: true, message: '请输入句柄ID', trigger: 'blur' }],
+        pageIndex: [{ required: true, message: '请选择网页索引号', trigger: 'blur' }],
+        frameIndex: [{ required: true, message: '请选择frame索引号', trigger: 'blur' }],
+        operateObject: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
+        operateGroupId: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
+        operateElementId: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
+        operateLocType: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
+        operateLocValue: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
+        isEnter: [{ required: true, message: '请选择是否输入', trigger: 'blur' }],
+        operateWay: [{ required: true, message: '请选择操作方式', trigger: 'blur' }],
+        subOptions: [{ required: true, message: '请选择子选项', trigger: 'blur' }],
+        subOptionsValue: [{ required: true, message: '请输入子选项值', trigger: 'blur' }],
+        awaitValue: [{ required: true, message: '请输入等待文本', trigger: 'blur' }],
+        clickMethod: [{ required: true, message: '请输入方式', trigger: 'blur' }],
+        inputValue: [{ required: true, message: '请输入内容', trigger: 'blur' }],
       },
       typeList: [],// 步骤类型
       typeTitle: '', // 步骤类型
       typeName: '', // 步骤类型
-      actionList: [],
+      actionList: [], // 操作列表
+      groupList: [], // 操作对象分组
+      elementList: [], // 操作对象分组
     }
   },
   mounted() {
+    this.getListGroupData()
   },
   methods: {
-    changeInput(val) {
-      this.$emit('stepNameChange', val);
+    // 步骤类型变换
+    selectStepType() {
+      // 置空操作
+      this.saveForm.operate = null
     },
-    changeSelectType(val) {
-      this.saveForm.stepName = this.typeList[val - 1].label
-      this.typeName = this.typeList[val - 1].label
-      this.$emit('stepNameChange', this.saveForm.stepName);
-      switch (this.typeList[val - 1].label) {
-        case '打开网页': this.typeTitle = '使用指定的浏览器打开网页'
-          break
-        case '关闭网页':
-          this.typeTitle = '关闭当前网页'
-          break
-        case '切换窗口':
-          this.typeTitle = '切换到指定窗口'
-          this.actionList = [{ label: '根据句柄ID切换到指定窗口', value: '1' }, { label: '根据网页索引号切换到指定窗口', value: '2' }, { label: '切换到初始窗口', value: '3' }]
-          break
-        case '设置窗口大小':
-          this.typeTitle = '设置窗口大小'
-          this.actionList = [{ label: '窗口最大化', value: '1' }, { label: '指定尺寸(像素为单位)', value: '2' }]
-          break
-        case '选择内嵌网页':
-          this.typeTitle = '选择内嵌网页'
-          this.actionList = [{ label: '退出当前frame(回到主页面)', value: '1' }, { label: '根据frame索引号切换到指定frame', value: '2' }, { label: '根据定位方式切换frame', value: '3' }]
-          break
-        case '提交表单':
-          this.typeTitle = '针对属性type="submit”的元素，用于提交表单数据'
-          break
-        case '下拉框操作':
-          this.typeTitle = '对下拉选项进行操作，可实现单选，多选，以及取消选择的操作'
-          this.actionList = [{ label: '选择', value: '1' }, { label: '取消', value: '2' }]
-          break
-        case '设置选项':
-          this.typeTitle = '用于设置 checkbox/radio 的状态'
-          this.actionList = [{ label: '选择', value: '1' }, { label: '取消', value: '2' }]
-          break
-      }
+    // 改变尺寸
+    changeWindSize() {
+      this.saveForm.windowSize = String(this.winSize.width) + '*' + String(this.winSize.height)
+    },
+    // 获取操作对象列表
+    getListGroupData() {
+      listGroup('element').then(res => {
+        if (res.code === 200) {
+          this.groupList = res.data
+        }
+      })
+    },
+    // 元素对象
+    getOperateGroup() {
+      this.getElementListData(this.saveForm.operateGroupId)
+    },
+    // 元素定位
+    getOperateLoc() {
+      this.getElementListData(this.saveForm.operateLocType)
+    },
+    // 获取元素列表
+    getElementListData(id) {
+      getElementList({ groupId: id }).then(res => {
+        if (res.code === 200) {
+          this.elementList = res.rows
+        }
+      })
     },
   },
   watch: {
-    step(newVal, oldVal) {
-      this.saveForm.stepName = newVal
-      this.typeName = newVal
-      switch (newVal) {
-        case '打开网页':
-          this.typeList = [{ label: '打开网页', value: '1' }, { label: '关闭网页', value: '2' }, { label: '切换窗口', value: '3' },
-          { label: '设置窗口大小', value: '4' }, { label: '选择内嵌网页', value: '5' }]
-          this.typeTitle = '使用指定的浏览器打开网页'
-          break
-        case '弹窗操作':
-          this.typeList = [{ label: '弹窗操作', value: '1' }]
-          this.typeTitle = '对无法进行元素定位的弹窗实现的操作 (注：弹框事件不会产生截图)'
-          break
-        case '提交表单':
-          this.typeList = [{ label: '提交表单', value: '1' }, { label: '下拉框操作', value: '2' }, { label: '设置选项', value: '3' },
-          { label: '等待元素', value: '4' }]
-          this.typeTitle = '针对属性type="submit”的元素，用于提交表单数据'
-          break
-        case '鼠标点击':
-          this.typeList = [{ label: '鼠标点击', value: '1' }, { label: '鼠标移动', value: '2' }]
-          this.typeTitle = '模拟鼠标点击的操作，支持单击/双击/按下/弹起'
-          break
-        case '输入操作':
-          this.typeList = [{ label: '输入操作', value: '1' }]
-          this.typeTitle = '对元素实现输入的操作'
-          break
-      }
-    }
-  },
+    detail(newVal, oldVal) {
+      this.saveForm = newVal
+    },
+    saveForm: {
+      handler(newVal, oldVal) {
+        // 判断操作类型
+        switch (newVal.operateType) {
+          case '1': // 浏览器操作
+            this.typeList = [{ label: '打开网页', value: '1' }, { label: '关闭网页', value: '2' }, { label: '切换窗口', value: '3' },
+            { label: '设置窗口大小', value: '4' }, { label: '选择内嵌网页', value: '5' }]
+            // 判断步骤类型
+            switch (newVal.stepType) {
+              case '1': // 打开网页
+                this.typeTitle = '使用指定的浏览器打开网页'
+                break
+              case '2': // 关闭网页
+                this.typeTitle = '关闭当前网页'
+                break
+              case '3': // 切换窗口
+                this.typeTitle = '切换到指定窗口'
+                this.actionList = [{ label: '根据句柄 ID 切换到指定窗口', value: '1' }, { label: '根据网页索引号切换到指定窗口', value: '2' },
+                { label: '切换到初始窗口', value: '3' }]
+                break
+              case '4': // 设置窗口大小
+                this.typeTitle = '设置窗口大小'
+                this.actionList = [{ label: '窗口最大化', value: '1' }, { label: '指定尺寸(像素为单位)', value: '2' }]
+                break
+              case '5': // 选择内嵌网页
+                this.typeTitle = '从当前 window 选择 frame(对 frame 标签起作用)'
+                this.actionList = [{ label: '退出当前 frame(回到主页面)', value: '1' }, { label: '根据 frame 索引号切换到指定 frame', value: '2' },
+                { label: '根据定位方式切换 frame', value: '3' }]
+                break
+            }
+            break
+          case '2': // 弹窗操作
+            this.typeList = [{ label: '弹窗操作', value: '1' }]
+            // 判断步骤类型
+            switch (newVal.stepType) {
+              case '1': // 弹窗操作
+                this.typeTitle = '对无法进行元素定位的弹窗实现的操作 (注：弹框事件不会产生截图)'
+                break
+            }
+            break
+          case '3': // 元素操作
+            this.typeList = [{ label: '提交表单', value: '1' }, { label: '下拉框操作', value: '2' }, { label: '设置选项', value: '3' },
+            { label: '等待元素', value: '4' }]
+            // 判断步骤类型
+            switch (newVal.stepType) {
+              case '1': // 提交表单
+                this.typeTitle = '针对属性type="submit”的元素，用于提交表单数据'
+                break
+              case '2': // 下拉框操作
+                this.typeTitle = '对下拉选项进行操作，可实现单选，多选，以及取消选择的操作'
+                this.actionList = [{ label: '选择', value: '1' }, { label: '取消', value: '2' }]
+                break
+              case '3': // 设置选项
+                this.typeTitle = '用于设置 checkbox/radio 的状态'
+                this.actionList = [{ label: '选择', value: '1' }, { label: '取消', value: '2' }]
+                break
+              case '4': // 等待元素
+                this.typeTitle = '对页面对象执行指定的等待操作，默认等待超时15000ms'
+                this.actionList = [{ label: '等待元素等于给定的定值(Text)', value: '1' }, { label: '等待元素存在', value: '2' },
+                { label: '等待元素显示', value: '3' }, { label: '等待元素不显示', value: '4' },
+                { label: '等待元素不存在', value: '5' }, { label: '等待元素可编辑', value: '6' }, { label: '等待元素不可编辑', value: '7' }]
+                break
+            }
+            break
+          case '4': // 鼠标操作
+            this.typeList = [{ label: '鼠标点击', value: '1' }, { label: '鼠标移动', value: '2' }]
+            // 判断步骤类型
+            switch (newVal.stepType) {
+              case '1': // 鼠标点击
+                this.typeTitle = '模拟鼠标点击的操作，支持单击/双击/按下/弹起'
+                break
+              case '2': // 鼠标移动
+                this.typeTitle = '将鼠标悬停在网页元素的上方'
+                break
+            }
+            break
+          case '5': // 输入操作
+            this.typeList = [{ label: '输入操作', value: '1' }]
+            // 判断步骤类型
+            switch (newVal.stepType) {
+              case '1': // 输入操作
+                this.typeTitle = '对元素实现输入的操作'
+                this.actionList = [{ label: '输入框', value: '1' }, { label: '可编辑段落', value: '2' }]
+                break
+            }
+            break
+        }
+        // 尺寸
+        if (newVal.windowSize != null) {
+          let result = newVal.windowSize.split(/\*/);
+          if (result.length > 0) {
+            this.winSize.width = result[0]
+            this.winSize.width = result[1]
+          }
+        }
+      },
+      deep: true
+    },
+  }
 }
 </script>
 
@@ -193,5 +538,10 @@ export default {
   .select {
     width: 200px;
   }
+
+  .operateObject-wrap {
+    display: flex;
+    gap: 10px;
+  }
 }
 </style>