优化采集表格

src/components/collectionForm.vue

@@ -2,7 +2,7 @@
     <div class="collectionForm">
         <div style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
             <div style="display: flex;">
-                <el-button style="width: 80px;height: 30px;" size="mini" class="button-new-tag" @click="selectElement">批量选择元素</el-button>
+                <el-button style="width: 80px;height: 30px;" size="mini" class="button-new-tag" @click="selectElement" v-if="!isSelectForm">批量选择元素</el-button>
                 <el-button style="width: 60px;height: 30px;margin-left: 10px !important;" size="small" class="button-new-tag" @click="cancelSelect" v-if="isSelectForm">取消选择</el-button>
             </div>
         </div>

src/components/collectionTable.vue

@@ -6,11 +6,14 @@
                     <!-- <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag"
                         @click="selectElement">选择元素</el-button> -->
                     <!-- <vxe-button icon="fa fa-plus">新增</vxe-button> -->
-                    <el-button type="primary" size="mini" style="width: 40px;height: 20px;" @click="selectElement">
+                    <el-button type="primary" size="mini" style="width: 40px;height: 20px;" @click="selectElement" v-if="!selectTable">
                         <img style="width: 10px;height: 10px;vertical-align: bottom;" src="../assets/add.svg">
                         <span>新增</span>
                     </el-button>
                 </el-tooltip>
+                <el-tooltip class="item" effect="dark" content="点击取消选择" placement="top">
+                    <el-button style="width: 50px;height: 20px;" size="small" class="button-new-tag" @click="cancelSelect" v-if="selectTable">取消选择</el-button>
+                </el-tooltip>
             </template>
             <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
             <div style="display: flex;align-items: center;">
@@ -84,6 +87,7 @@ export default {
     props: ['activedAction', 'widthResize'],
     data () {
         return {
+            selectTable: false,
             tableColumn: [],
             tableData: [],
             SelectTableData: [],
@@ -190,11 +194,9 @@ export default {
 
         },
 
-        // 获取页面元素
-        selectElement () {
-            let _this = this
         // 定义事件处理函数
-            function contextMenuHandler (event) {
+        contextMenuHandler (event) {
+            let _this = this;
             event.preventDefault(); // 阻止默认的右击菜单
             _this.contextMenuListenerAdded = true
             //表格展示配置
@@ -259,20 +261,27 @@ export default {
             if (window.currentlyHighlighted) {
                 window.currentlyHighlighted.style.backgroundColor = '';
             }
-
             // 更新背景色并保存当前元素
             event.target.style.backgroundColor = 'orange';
             window.currentlyHighlighted = event.target;
+            _this.selectTable = false;
             // 移除事件监听器
-                document.removeEventListener('contextmenu', contextMenuHandler);
-                _this.contextMenuListenerAdded = false;
-            }
-            if (!_this.contextMenuListenerAdded) {
+            // document.removeEventListener('contextmenu', contextMenuHandler);
+            // _this.contextMenuListenerAdded = false;
+        },
+        // 选择元素按钮调用
+        selectElement () {
+            this.selectTable = true;
             // 添加事件监听器
-                document.addEventListener('contextmenu', contextMenuHandler, false);
-                _this.contextMenuListenerAdded = true;
-            }
-
+            document.addEventListener('contextmenu', this.contextMenuHandler, false);
+            this.contextMenuListenerAdded = true;
+        },
+        // 取消按钮调用
+        cancelSelect () {
+            this.selectTable = false;
+            // 在取消按钮点击时移除事件监听器
+            document.removeEventListener('contextmenu', this.contextMenuHandler);
+            this.contextMenuListenerAdded = false;
         },
         // 获取xpath
         getElementXPath (element) {
@@ -384,7 +393,7 @@ export default {
 }
 </script>
 <style >
-/* .vxe-select>.vxe-input {
+.vxe-select>.vxe-input {
     width: 120px !important;
 }
 
@@ -395,11 +404,4 @@ export default {
 .el-tooltip__popper.is-dark {
     z-index: 99999 !important;
 }
-
-.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
-.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
-.vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-} */
 </style>
\ No newline at end of file

src/components/elOutput.vue

@@ -2,8 +2,8 @@
   <div class="elOutput">
     <!-- 操作按钮区域 -->
     <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
-      <el-button size="small" class="button-new-tag" @click="selectElement">选择内容</el-button>
-      <el-button size="small" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect" v-if="outputState">取消选择</el-button>
+      <el-button size="small" class="button-new-tag" @click="selectElement" v-if="!outputState">选择内容</el-button>
+      <el-button size="small" class="button-new-tag" @click="cancelSelect" v-if="outputState">取消选择</el-button>
     </div>
     <!-- 表单区域 -->
     <el-form label-position="right" :model="actionConfig">

src/components/elclick.vue

@@ -3,8 +3,8 @@
     <div class="elClick">
         <!-- 操作按钮区域 -->
         <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
-            <el-button size="small" class="button-new-tag" @click="selectElement">选择点击内容</el-button>
-            <el-button size="small" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect" v-if="clickState">取消选择</el-button>
+            <el-button size="small" class="button-new-tag" @click="selectElement" v-if="!clickState">选择点击内容</el-button>
+            <el-button size="small" class="button-new-tag" @click="cancelSelect" v-if="clickState">取消选择</el-button>
         </div>
         <!-- 表单区域 -->
         <el-form label-position="left" :model="actionConfig">

src/components/onInput.vue

@@ -2,8 +2,8 @@
   <div class="onInput">
     <!-- 操作按钮区域 -->
     <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
-      <el-button size="small" class="button-new-tag" @click="selectElement">选择输入框</el-button>
-      <el-button size="small" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect" v-if="inputState">取消选择</el-button>
+      <el-button size="small" class="button-new-tag" @click="selectElement" v-if="!inputState">选择输入框</el-button>
+      <el-button size="small" class="button-new-tag" @click="cancelSelect" v-if="inputState">取消选择</el-button>
     </div>
     <!-- 表单区域 -->
     <el-form label-position="right" :model="actionConfig">