优化采集表单

src/App.vue

@@ -425,7 +425,7 @@ export default {
 /* 窗口整体样式 */
 .tooltips {
     min-width: 460px;
-    min-height: 500px;
+    min-height: 460px;
     background-color: white;
     border: solid #3384FF 3px;
     position: fixed;

src/components/collectionTable.vue

@@ -22,9 +22,7 @@
         </div>
         <!-- 全部表格信息 -->
         <div style="overflow: auto;height: 290px;" :style="{ width: widthResize + 'px' }">
-            <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="250"
-                v-if="isSelectTable" auto-resize style="margin-bottom: 5px;" @current-change="currentChangeEvent"
-                highlight-hover-row highlight-current-row>
+            <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="250" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;" @current-change="currentChangeEvent" highlight-hover-row highlight-current-row>
                 <vxe-column field="" title="列名" min-width="150">
                     <template v-slot="{ row }">
                         <div style="display: flex;flex-direction: column;">
@@ -45,20 +43,16 @@
                     <template v-slot="{ row }">
                         <div style="display: flex;flex-direction: column;">
                             <!-- <span>选中内容:{{ row.contentText }}</span> -->
-                            <el-select style="height: 28px;" v-model="row.type" placeholder="选择值类型"
-                                v-if="row.typeOptions.length > 1" :popper-append-to-body="false" filterable remote>
-                                <el-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.label"
-                                    :label="num.value"></el-option>
+                            <el-select style="height: 28px;" v-model="row.type" placeholder="选择值类型" v-if="row.typeOptions.length > 1" :popper-append-to-body="false" filterable remote>
+                                <el-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.label" :label="num.value"></el-option>
                             </el-select>
-                            <vxe-input style="width: 100% !important;" v-model="row.type"
-                                :placeholder="row.typeOptions[0].value" size="mini" v-else disabled></vxe-input>
+                            <vxe-input style="width: 100% !important;" v-model="row.type" :placeholder="row.typeOptions[0].value" size="mini" v-else disabled></vxe-input>
                         </div>
                     </template>
                 </vxe-column>
                 <vxe-column title="操作" min-width="70" fixed="right">
                     <template #default="{ row }">
-                        <img style="width: 50px;height: 28px;vertical-align: bottom;" src="../assets/close.svg"
-                            @click="columnDelete(row)">
+                        <img style="width: 50px;height: 28px;vertical-align: bottom;" src="../assets/close.svg" @click="columnDelete(row)">
                         <!-- <vxe-button status="danger" content="删除" @click="columnDelete(row)"
                             style="width: 50px;"></vxe-button> -->
                     </template>

src/components/elOutput.vue

@@ -48,7 +48,6 @@ export default {
     };
   },
   created () {
-    // console.log(this.activedAction);
     if (this.activedAction.Target !== undefined) {
       this.actionConfig.Target = this.activedAction.Target;
     }
@@ -68,7 +67,6 @@ export default {
         this.activedAction.Target = this.actionConfig.Target;
         this.activedAction.Attributes = this.actionConfig.Attributes;
         this.$emit('dataChanged', this.activedAction);
-        // console.log(this.activedAction)
       },
       deep: true
     }
@@ -102,6 +100,7 @@ export default {
     },
     // 取消按钮调用
     cancelSelect () {
+      this.outputState = false;
       // 在取消按钮点击时移除事件监听器
       document.removeEventListener('contextmenu', this.contextMenuHandler);
     },

src/components/elclick.vue

@@ -8,9 +8,6 @@
         </div>
         <!-- 表单区域 -->
         <el-form label-position="left" :model="actionConfig">
-            <!-- <el-form-item label="查找方式">
-                <el-input v-model="actionConfig.Target.Type" disabled></el-input>
-            </el-form-item> -->
             <el-form-item>
                 <div style="display: flex;width: 100%;">
                     <span style="font-size: 13px;width: 85px;padding-left: 15px;">内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容:</span>
@@ -53,7 +50,18 @@ export default {
             this.actionConfig.Target = this.activedAction.Target;
         }
     },
-    mounted () { },
+    mounted () {
+        let _this = this
+        document.addEventListener('click', function (event) {
+            // 如果点击的不是当前高亮的元素，移除高亮
+            if (event.target !== window.currentlyHighlighted) {
+                if (window.currentlyHighlighted) {
+                    window.currentlyHighlighted.style.backgroundColor = '';
+                }
+                window.currentlyHighlighted = null;
+            }
+        });
+    },
     beforeDestroy () {
         // 在组件销毁前移除事件监听器
         document.removeEventListener('contextmenu', this.contextMenuHandler);
@@ -86,6 +94,13 @@ export default {
             this.actionConfig.Target.Selector = elementInfo.Xpath;
             this.actionConfig.Target.InnerText = elementInfo.Text;
             this.clickState = false;
+            // 移除先前元素的背景色（如果有）
+            if (window.currentlyHighlighted) {
+                window.currentlyHighlighted.style.backgroundColor = '';
+            }
+            // 更新背景色并保存当前元素
+            event.target.style.backgroundColor = 'orange';
+            window.currentlyHighlighted = event.target;
             // 移除事件监听器
             document.removeEventListener('contextmenu', this.contextMenuHandler);
         },
@@ -99,6 +114,7 @@ export default {
 
         // 取消按钮调用
         cancelSelect () {
+            this.clickState = false;
             // 在取消按钮点击时移除事件监听器
             document.removeEventListener('contextmenu', this.contextMenuHandler);
         },

src/components/onInput.vue

@@ -54,7 +54,6 @@ export default {
     }
   },
   created () {
-    // console.log(this.activedAction);
     if (this.activedAction.Target !== undefined) {
       this.actionConfig.Target = this.activedAction.Target;
     }
@@ -62,7 +61,18 @@ export default {
       this.actionConfig.InputValue = this.activedAction.InputValue;
     }
   },
-  mounted () { },
+  mounted () {
+    let _this = this
+    document.addEventListener('click', function (event) {
+      // 如果点击的不是当前高亮的元素，移除高亮
+      if (event.target !== window.currentlyHighlighted) {
+        if (window.currentlyHighlighted) {
+          window.currentlyHighlighted.style.backgroundColor = '';
+        }
+        window.currentlyHighlighted = null;
+      }
+    });
+  },
   watch: {
     actionConfig: {
       handler (newVal) {
@@ -70,7 +80,6 @@ export default {
         this.activedAction.InputValue = this.actionConfig.InputValue;
         this.activedAction.Script = this.actionConfig.Script;
         this.$emit('dataChanged', this.activedAction);
-        console.log(this.activedAction)
       },
       deep: true
     }
@@ -89,7 +98,6 @@ export default {
         Xpath: this.getElementXPath(element),
         TagName: element.tagName
       };
-      console.log(elementInfo.TagName)
       if (elementInfo.TagName != 'INPUT') {
         this.$message.error("请选择输入框");
         this.actionConfig.Target.tagName = '未选择输入框';
@@ -98,10 +106,15 @@ export default {
         this.actionConfig.Target.tagName = '已选择输入框';
       }
       this.elementInfos = elementInfo;
-      console.log(event);
       this.actionConfig.Target.Selector = elementInfo.Xpath;
-
       this.inputState = false;
+      // 移除先前元素的背景色（如果有）
+      if (window.currentlyHighlighted) {
+        window.currentlyHighlighted.style.backgroundColor = '';
+      }
+      // 更新背景色并保存当前元素
+      event.target.style.backgroundColor = 'orange';
+      window.currentlyHighlighted = event.target;
       // 移除事件监听器
       document.removeEventListener('contextmenu', this.contextMenuHandler);
     },
@@ -115,6 +128,7 @@ export default {
 
     // 取消按钮调用
     cancelSelect () {
+      this.inputState = false;
       // 在取消按钮点击时移除事件监听器
       document.removeEventListener('contextmenu', this.contextMenuHandler);
     },

src/components/pageJavascript.vue

@@ -25,7 +25,6 @@ export default {
     };
   },
   created () {
-    // console.log(this.activedAction);
     if (this.activedAction.Script !== undefined) {
       this.actionConfig.Script = this.activedAction.Script;
     }
@@ -36,7 +35,6 @@ export default {
       handler (newVal) {
         this.activedAction.Script = this.actionConfig.Script;
         this.$emit('dataChanged', this.activedAction);
-        console.log(this.activedAction)
       },
       deep: true
     }

src/components/pageNavigates.vue

@@ -33,7 +33,6 @@ export default {
         };
     },
     created () {
-        console.log(this.activedAction);
         if (this.activedAction.Url !== undefined) {
             this.actionConfig.Url = this.activedAction.Url;
         }
@@ -44,7 +43,6 @@ export default {
             handler (newVal) {
                 this.activedAction.Url = this.actionConfig.Url;
                 this.$emit('dataChanged', this.activedAction);
-                console.log(this.activedAction)
             },
             deep: true
         }

src/components/sysSleep.vue

@@ -26,7 +26,6 @@ export default {
     };
   },
   created () {
-    // console.log(this.activedAction);
     if (this.activedAction.PauseMilliseconds !== undefined) {
       this.actionConfig.PauseMilliseconds = this.activedAction.PauseMilliseconds;
     }
@@ -37,7 +36,6 @@ export default {
       handler (newVal) {
         this.activedAction.PauseMilliseconds = this.actionConfig.PauseMilliseconds;
         this.$emit('dataChanged', this.activedAction);
-        console.log(this.activedAction)
       },
       deep: true
     }