From 898fc59b5004c71bf85f08b0d9a921436d819152 Mon Sep 17 00:00:00 2001
From: fanzhuxian <17826840660@139.com>
Date: Wed, 7 May 2025 17:31:17 +0800
Subject: [PATCH] =?UTF-8?q?add=EF=BC=9Aui=E6=B5=8B=E8=AF=95=EF=BC=8C?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=92=8C=E6=96=B0=E5=A2=9Eapi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test-ui/src/views/test/uiTest/addScene.vue    |  13 +-
 .../src/views/test/uiTest/advancedSetting.vue | 368 +++++++++++++++++-
 test-ui/src/views/test/uiTest/editScene.vue   |   9 +-
 test-ui/src/views/test/uiTest/sceneStep.vue   |  13 +-
 4 files changed, 383 insertions(+), 20 deletions(-)

diff --git a/test-ui/src/views/test/uiTest/addScene.vue b/test-ui/src/views/test/uiTest/addScene.vue
index e8c4314..5ccd042 100644
--- a/test-ui/src/views/test/uiTest/addScene.vue
+++ b/test-ui/src/views/test/uiTest/addScene.vue
@@ -59,7 +59,8 @@
         <el-button size="mini" @click="handleClickSave">保存</el-button>
       </div>
       <SceneStep v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep" />
-      <AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" />
+      <AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep"
+        @changeSetting="changeSetting" />
     </div>
     <!-- 添加步骤 -->
     <div class="add-btn">
@@ -80,7 +81,7 @@
 <script>
 import AdvancedSetting from './advancedSetting.vue'
 import SceneStep from './sceneStep.vue'
-import { getAutomationDetail, updateAutomation } from '../../../api/uiTest/automationTest'
+import { getAutomationDetail, addAutomation } from '../../../api/uiTest/automationTest'
 import { listGroup } from "../../../api/test/group"
 
 export default {
@@ -109,7 +110,7 @@ export default {
       },
       stepList: [],
       defaultActive: 0, // 当前激活菜单的 index
-      changeStep: null, // 选中的步骤
+      changeStep: { operateType: null }, // 选中的步骤
     }
   },
   mounted() {
@@ -125,6 +126,10 @@ export default {
         }
       })
     },
+    // 修改高级设置
+    changeSetting(val) {
+      this.informationForm.uiSceneStepsVOList[this.defaultActive - 1].uiHighSettingVOList = val
+    },
 
     // 删除步骤
     deleteStep(index) {
@@ -185,7 +190,7 @@ export default {
       if (this.informationForm.dutyBy === null || this.informationForm.dutyBy === '') {
         this.$modal.msgWarning("请输入责任人");
       }
-      updateAutomation(this.informationForm).then(res => {
+      addAutomation(this.informationForm).then(res => {
         if (res.code === 200) {
           this.$modal.msgSuccess("编辑成功")
           this.$tab.closeOpenPage({ path: "/ui-test/automation-test" });
diff --git a/test-ui/src/views/test/uiTest/advancedSetting.vue b/test-ui/src/views/test/uiTest/advancedSetting.vue
index 2c7c82b..e607674 100644
--- a/test-ui/src/views/test/uiTest/advancedSetting.vue
+++ b/test-ui/src/views/test/uiTest/advancedSetting.vue
@@ -3,7 +3,7 @@
     <div class="title">高级设置</div>
     <div class="tab-wrap">
       <el-tabs v-model="activeName">
-        <el-tab-pane label="元素库" name="first">
+        <el-tab-pane v-if="detail.operateType != '1' && detail.operateType != '2'" label="元素库" name="first">
           <div class="element-wrap">
             <div class="header">
               <el-button icon="el-icon-circle-plus-outline" size="mini" @click="addElementData">创建元素</el-button>
@@ -57,16 +57,170 @@
             </el-dialog>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="前置操作" name="second">前置操作</el-tab-pane>
-        <el-tab-pane label="后置操作" name="third">后置操作</el-tab-pane>
+        <el-tab-pane label="前置操作" name="second">
+          <el-select v-model="saveForm.before" class="select">
+            <el-option key="1" label="等待时间" value="1"></el-option>
+            <el-option key="3" label="数据提取" value="3"></el-option>
+          </el-select>
+          <el-button type="primary" plain style="margin-left: 10px;" @click="addBefore">添加</el-button>
+          <div class="list">
+            <div v-for="(item, index) in saveForm.beforeList">
+              <!-- 等待时间 -->
+              <div v-if="item.operateType === '1'" class="time">
+                <div class="time-left">
+                  <div class="number">{{ index + 1 }}</div>
+                  <div>等待时间</div>
+                  <el-input-number v-model="item.awateTime" :min="0"></el-input-number>
+                </div>
+                <div class="time-right">
+                  <el-switch v-model="item.isDisabled" :active-value="1" :inactive-value="0">
+                  </el-switch>
+                  <el-button type="text" icon="el-icon-delete" style="color: red;"
+                    @click="beforeDelete(index)"></el-button>
+                </div>
+              </div>
+              <!-- 数据提取 -->
+              <div v-if="item.operateType === '3'">
+                <el-collapse v-model="index" accordion>
+                  <el-collapse-item name="1">
+                    <template slot="title">
+                      <div class="time">
+                        <div class="time-left">
+                          <div class="number">{{ index + 1 }}</div>
+                          <div>数据提取</div>
+                          <el-input v-model="item.name" class="select" @click.native.stop></el-input>
+                        </div>
+                        <div class="time-right">
+                          <el-switch v-model="item.isDisabled" active-value="1" inactive-value="0"
+                            @click.native.stop></el-switch>
+                          <el-button type="text" icon="el-icon-delete" style="color: red;"
+                            @click="beforeDelete(index)"></el-button>
+                        </div>
+                      </div>
+                    </template>
+                    <div class="collapse-content">
+                      <div style="margin-bottom: 20px;">将提取的内容保存到变量中</div>
+                      <el-select v-model="saveForm.informationType" class="select">
+                        <el-option key="1" label="提取窗口信息" value="1"></el-option>
+                        <el-option key="2" label="提取元素信息" value="2"></el-option>
+                      </el-select>
+                      <el-select v-if="saveForm.informationType === '1'" v-model="saveForm.windowType" class="select"
+                        style="margin: 0 10px;">
+                        <el-option key="1" label="窗口 Handle(storeWindowHandle)" value="1"></el-option>
+                        <el-option key="2" label="网页标题(storeTitle) " value="2"></el-option>
+                      </el-select>
+                      <el-select v-if="saveForm.informationType === '2'" v-model="saveForm.elementType" class="select"
+                        style="margin: 0 10px;">
+                        <el-option key="1" label="普通对象(store)" value="1"></el-option>
+                        <el-option key="2" label="元素文本(storeText)" value="2"></el-option>
+                        <el-option key="3" label="元素值(storeValue)" value="3"></el-option>
+                        <el-option key="4" label="元素属性(storeAttribute)" value="4"></el-option>
+                        <el-option key="5" label="CSS属性(storeCssAttribute)" value="5"></el-option>
+                        <el-option key="6" label="匹配 xpath 的元素数量(storeXpathCount)" value="6"></el-option>
+                      </el-select>
+                      <el-button type="primary" plain @click="addBeforeDataExtractionQOList">添加</el-button>
+                      <!-- 提取窗口信息 -->
+                      <div v-if="saveForm.beforeWindowList.length > 0" class="information">
+                        <div>提取窗口信息</div>
+                        <div v-for="row in saveForm.beforeWindowList">
+                          <div class="time">
+                            <div class="time-left">
+                              <el-select v-model="row.windowType" class="select">
+                                <el-option key="1" label="窗口 Handle(storeWindowHandle)" value="1"></el-option>
+                                <el-option key="2" label="网页标题(storeTitle) " value="2"></el-option>
+                              </el-select>
+                              <el-input class="select" style="margin:0px 10px;" placeholder="请输入"></el-input>
+                              <el-tooltip class="item" effect="dark"
+                                content="将提取的内容保存到变量中，如果元素不存在，则返回值为 'NoSuchElementException'" placement="right">
+                                <i class="el-icon-info"></i>
+                              </el-tooltip>
+                            </div>
+                            <div class="time-right">
+                              <el-switch v-model="row.isDisabled" active-value="1" inactive-value="0"
+                                @click.native.stop></el-switch>
+                              <el-button type="text" icon="el-icon-delete" style="color: red;"
+                                @click="beforeWindowDelete(index)"></el-button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <!-- 提取元素信息 -->
+                      <div v-if="saveForm.beforeElementList.length > 0" class="information">
+                        <div>提取元素信息</div>
+                        <div v-for="row in saveForm.beforeElementList">
+                          <div class="time">
+                            <div class="time-left">
+                              <el-select v-model="row.elementType" class="select">
+                                <el-option key="1" label="普通对象(store)" value="1"></el-option>
+                                <el-option key="2" label="元素文本(storeText)" value="2"></el-option>
+                                <el-option key="3" label="元素值(storeValue)" value="3"></el-option>
+                                <el-option key="4" label="元素属性(storeAttribute)" value="4"></el-option>
+                                <el-option key="5" label="CSS属性(storeCssAttribute)" value="5"></el-option>
+                                <el-option key="6" label="匹配 xpath 的元素数量(storeXpathCount)" value="6"></el-option>
+                              </el-select>
+                              <el-input class="select" style="margin:0px 10px;" placeholder="请输入"></el-input>
+                              <el-tooltip class="item" effect="dark"
+                                content="将提取的内容保存到变量中，如果元素不存在，则返回值为 'NoSuchElementException'" placement="right">
+                                <i class="el-icon-info"></i>
+                              </el-tooltip>
+                            </div>
+                            <div class="time-right">
+                              <el-switch v-model="row.isDisabled" active-value="1" inactive-value="0"
+                                @click.native.stop></el-switch>
+                              <el-button type="text" icon="el-icon-delete" style="color: red;"
+                                @click="beforeWindowDelete(index)"></el-button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="后置操作" name="third">
+          <el-select v-model="saveForm.after" 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-button type="primary" plain style="margin-left: 10px;" @click="addAfter">添加</el-button>
+        </el-tab-pane>
         <el-tab-pane label="错误处理" name="forth">
           <el-form :model="saveForm">
             <el-form-item label="处理方式">
-              el
+              <el-select v-model="saveForm.errorHandling" 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>
+        </el-tab-pane>
+        <el-tab-pane label="其他设置" name="fifth">
+          <el-form :model="saveForm">
+            <el-form-item v-show="detail.operateType != '1' && detail.operateType != '2'" label="等待元素超时时间">
+              <el-input-number v-model="saveForm.waitElementTime" :min="0"></el-input-number>
+              <el-tooltip class="item" effect="dark"
+                content="如果步骤涉及的元素定位在一定时间内无法找到元素，将会提示超时错误。(注：若超时错误的日志显示会四舍五入成 秒，但不影响等待具体时长)" placement="right">
+                <i class="el-icon-info" style="margin-left: 20px;"></i>
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item label="截图配置">
+              <el-select v-model="saveForm.screenshotConfiguration" 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-tooltip class="item" effect="dark" content="当前步骤截图: 场景步骤执行后截图，步骤如果触发原生弹窗（alert或prompt），或不存在页面时，截图不生效;出现异常截图: 
+              当前步骤出现异常截图,包括场景步骤异常、数据提取和断言异常;
+              不截图: 当前场景步骤不截图。" placement="right">
+                <i class="el-icon-info" style="margin-left: 20px;"></i>
+              </el-tooltip>
             </el-form-item>
           </el-form>
         </el-tab-pane>
-        <el-tab-pane label="其他设置" name="fifth">其他设置</el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -84,8 +238,22 @@ export default {
   data() {
     return {
       activeName: 'first',
+      uiHighSettingVOList: [], // 
       saveForm: {
-
+        errorHandling: '1', // 错误处理
+        waitElementTime: 15000, // 等待元素超时时间
+        screenshotConfiguration: '1', // 截图配置
+        beforeList: [], // 前置数组
+        afterList: [], // 后置数组
+        before: '1',
+        after: '1',
+        informationType: '1',
+        windowType: null,
+        elementType: null,
+        beforeWindowList: [], // 前置-窗口信息数组
+        beforeElementList: [], // 前置-元素信息数组
+        afterWindowList: [], // 后置-窗口信息数组
+        afterElementList: [], // 后置-元素信息数组
       },
       searchForm: {
         pageNum: 1,
@@ -169,10 +337,148 @@ export default {
       this.searchForm.pageNum = val
       this.getElementData();
     },
+    // 添加 - 前置操作
+    addBefore() {
+      if (this.saveForm.before === '1') {
+        // 等待时间
+        var param = {
+          settingType: '1', // 前置操作
+          operateType: '1', // 等待时间
+          awateTime: 15000,
+          isDisabled: '1',
+        }
+        this.saveForm.beforeList.push(param)
+      } else {
+        // 数据提取
+        var param = {
+          settingType: '1', // 前置操作
+          operateType: '3', // 数据提取
+          dataExtractionQOList: [],
+          isDisabled: '1',
+          name: '数据提取',
+        }
+        this.saveForm.beforeList.push(param)
+      }
+
+    },
+    // 添加 - 后置操作
+    addAfter() { },
+    // 删除
+    beforeDelete(val) {
+      this.saveForm.beforeList = this.saveForm.beforeList.filter((item, index) => index !== val);
+    },
+    // 添加
+    addBeforeDataExtractionQOList() {
+      if (this.saveForm.informationType === '1' && this.saveForm.windowType != null) {
+        // 提取窗口信息且子分类不为空
+        var param = {
+          windowType: this.saveForm.windowType,
+          value: null,
+          isDisabled: '1',
+        }
+        this.saveForm.beforeWindowList.push(param)
+      } else if (this.saveForm.informationType === '2' && this.saveForm.elementType != null) {
+        // 提取元素信息且子分类不为空
+      }
+    },
+    // 删除
+    beforeWindowDelete(val) {
+      this.saveForm.beforeWindowList = this.saveForm.beforeWindowList.filter((item, index) => index !== val);
+    },
+
   },
   watch: {
     detail(newVal, oldVal) {
-      this.saveForm = newVal
+      this.saveForm.beforeList = []
+      this.saveForm.afterList = []
+
+      if (newVal.operateType != '1' && newVal.operateType != '2') {
+        this.activeName = 'first'
+      } else {
+        this.activeName = 'second'
+      }
+      if (newVal.uiHighSettingVOList != null) {
+        this.uiHighSettingVOList = newVal.uiHighSettingVOList
+      }
+
+      Promise.all([
+        new Promise((resolve) => {
+          this.uiHighSettingVOList.forEach(item => {
+            switch (item.settingType) {
+              // 前置操作
+              case '1':
+                this.saveForm.beforeList.push(item)
+                break
+              // 后置操作
+              case '2':
+                this.saveForm.afterList.push(item)
+                break
+              // 错误处理
+              case '3':
+                this.saveForm.errorHandling = item.errorHandling
+                break
+              // 其他设置 
+              case '4':
+                this.saveForm.waitElementTime = item.otherSettingsQO.waitElementTime
+                this.saveForm.screenshotConfiguration = item.otherSettingsQO.screenshotConfiguration
+                break
+            }
+          })
+          resolve();
+        }),
+        new Promise((resolve) => {
+          this.saveForm.beforeList.forEach(item => {
+            if (item.informationType === '1' && item) {
+              // 提取窗口信息
+              this.saveForm.beforeWindowList.push(item)
+            } else {
+              // 提取元素信息
+              this.saveForm.beforeElementList.push(item)
+            }
+          })
+          resolve();
+        }),
+        new Promise((resolve) => {
+          this.saveForm.afterList.forEach(item => {
+            if (item.informationType === '1') {
+              // 提取窗口信息
+              this.saveForm.afterWindowList.push(item)
+            } else {
+              // 提取元素信息
+              this.saveForm.afterElementList.push(item)
+            }
+          })
+          resolve();
+        })
+      ]).then(() => {
+        console.log('Both arrays have been processed.');
+      });
+
+      console.log(this.saveForm.beforeList)
+    },
+    saveForm: {
+      handler(newVal, oldVal) {
+        // 前置操作
+
+        // 后置操作
+
+        var newList = [...this.saveForm.beforeList, ...this.saveForm.afterList]
+        // 错误处理
+        var param3 = {
+          settingType: '3',
+          errorHandling: this.saveForm.errorHandling,
+        }
+        newList.push(param3)
+        // 其他设置
+        var param4 = {
+          settingType: '4',
+          waitElementTime: this.saveForm.waitElementTime,
+          screenshotConfiguration: this.saveForm.screenshotConfiguration,
+        }
+        newList.push(param4)
+        this.$emit('changeSetting', newList)
+      },
+      deep: true
     },
   }
 }
@@ -222,5 +528,53 @@ export default {
       align-items: flex-end;
     }
   }
+
+  .select {
+    width: 200px;
+  }
+
+
+  .list {
+    padding: 20px 0px;
+
+    .number {
+      height: 24px;
+      width: 24px;
+      border-radius: 12px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: solid 1px black;
+    }
+
+    .time {
+      display: flex;
+      align-items: center;
+      padding: 10px;
+      justify-content: space-between;
+      width: 100%;
+
+      .time-left {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .time-right {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    }
+
+    .collapse-content {
+      padding: 15px;
+
+      .information {
+        padding: 10px;
+      }
+    }
+  }
 }
 </style>
diff --git a/test-ui/src/views/test/uiTest/editScene.vue b/test-ui/src/views/test/uiTest/editScene.vue
index 1395888..53d291d 100644
--- a/test-ui/src/views/test/uiTest/editScene.vue
+++ b/test-ui/src/views/test/uiTest/editScene.vue
@@ -59,7 +59,8 @@
         <el-button size="mini" @click="handleClickSave">保存</el-button>
       </div>
       <SceneStep v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep" />
-      <AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" />
+      <AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep"
+        @changeSetting="changeSetting" />
     </div>
     <!-- 添加步骤 -->
     <div class="add-btn">
@@ -109,7 +110,7 @@ export default {
       },
       stepList: [],
       defaultActive: 0, // 当前激活菜单的 index
-      changeStep: null, // 选中的步骤
+      changeStep: { operateType: null }, // 选中的步骤
     }
   },
   mounted() {
@@ -126,6 +127,10 @@ export default {
         }
       })
     },
+    // 修改高级设置
+    changeSetting(val) {
+      this.informationForm.uiSceneStepsVOList[this.defaultActive - 1].uiHighSettingVOList = val
+    },
     // 获取详情
     getSceneDetail() {
       getAutomationDetail(this.$route.query.id).then(res => {
diff --git a/test-ui/src/views/test/uiTest/sceneStep.vue b/test-ui/src/views/test/uiTest/sceneStep.vue
index fecada2..429ef9b 100644
--- a/test-ui/src/views/test/uiTest/sceneStep.vue
+++ b/test-ui/src/views/test/uiTest/sceneStep.vue
@@ -13,7 +13,7 @@
       </el-form-item>
       <!-- 判断样式 -->
       <!-- 浏览器操作 -->
-      <div v-show="saveForm.operateType === '1'">
+      <div v-if="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" />
@@ -113,7 +113,7 @@
         </div>
       </div>
       <!-- 弹窗操作 -->
-      <div v-show="saveForm.operateType === '2'">
+      <div v-if="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>
@@ -131,7 +131,7 @@
         </el-form-item>
       </div>
       <!-- 元素操作 -->
-      <div v-show="saveForm.operateType === '3'">
+      <div v-if="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"
@@ -189,7 +189,7 @@
         </div>
       </div>
       <!-- 鼠标操作 -->
-      <div v-show="saveForm.operateType === '4'">
+      <div v-if="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>
@@ -260,7 +260,7 @@
         </el-form-item>
       </div>
       <!-- 输入操作 -->
-      <div v-show="saveForm.operateType === '5'">
+      <div v-if="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"
@@ -308,7 +308,6 @@
 </template>
 
 <script>
-import { number } from "echarts";
 import { listGroup } from "../../../api/test/group";
 import { getElementList } from "../../../api/uiTest/elementLibrary";
 
@@ -383,7 +382,7 @@ export default {
     // 步骤类型变换
     selectStepType() {
       // 置空操作
-      this.saveForm.operate = null
+      // this.saveForm.operate = null
     },
     // 改变尺寸
     changeWindSize() {