解决合并冲突

src/components/collectionTable.vue

@@ -3,46 +3,54 @@
         <div style="height: 35px;margin-left: 15px;text-align: left;">
             <el-button size="mini" class="button-new-tag" @click="selectElement" v-if="isSelectTable">选择元素</el-button>
             <el-button size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
-            <span style="margin-left: 80px;" v-if="isSelectTable">表名:</span> <vxe-input v-if="isSelectTable" v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
+            <span style="margin-left: 80px;" v-if="isSelectTable">表名:</span> <vxe-input v-if="isSelectTable"
+                v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
         </div>
         <!-- 全部表格信息 -->
-        <div style="overflow: auto;min-width: 460px;">
-            <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="270" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;">
-                <vxe-column field="" title="列名" min-width="150">
+        <div style="width: 498px;overflow: auto;">
+            <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="270"
+                v-if="isSelectTable" auto-resize style="margin-bottom: 5px;">
+                <vxe-column field="" title="列名" width="150">
                     <template v-slot="{ row }">
                         <!-- {{ row.text }} -->
-                        <div style="display: flex;"> <span style="width: 68px;"></span> <vxe-input v-model="row.title" placeholder="请填写列名" size="mini"></vxe-input>
+                        <div style="display: flex;"> <span style="width: 68px;"></span> <vxe-input v-model="row.title"
+                                placeholder="请填写列名" size="mini"></vxe-input>
                         </div>
                     </template>
                 </vxe-column>
-                <vxe-column field="" title="属性名" min-width="150">
+                <vxe-column field="" title="属性名" width="150">
                     <template v-slot="{ row }">
-                        <div style="display: flex;"> <span style="width: 68px;"></span> <vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input>
+                        <div style="display: flex;"> <span style="width: 68px;"></span> <vxe-input v-model="row.name"
+                                placeholder="请填写属性名" size="mini"></vxe-input>
                         </div>
                     </template>
                 </vxe-column>
-                <vxe-column field="" title="值类型" min-width="150">
+                <vxe-column field="" title="值类型" width="150">
                     <template v-slot="{ row }">
                         <div style="display: flex;"> <span style="width: 68px;line-height: 12px;">
-                            </span> <vxe-select v-model="row.type" placeholder="选择值类型" placement="bottom" v-if="row.typeOptions.length > 1">
-                                <vxe-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value" :label="num.label"></vxe-option>
+                            </span> <vxe-select v-model="row.type" placeholder="选择值类型" placement="bottom"
+                                v-if="row.typeOptions.length > 1">
+                                <vxe-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value"
+                                    :label="num.label"></vxe-option>
                             </vxe-select>
-                            <vxe-input v-model="row.type" :placeholder="row.typeOptions[0].label" size="mini" v-else disabled></vxe-input>
+                            <vxe-input v-model="row.type" :placeholder="row.typeOptions[0].label" size="mini" v-else
+                                disabled></vxe-input>
                         </div>
                     </template>
                 </vxe-column>
-                <vxe-column field="" title="当前选中文本值" min-width="150">
+                <vxe-column field="" title="当前选中文本值" width="150">
                     <template v-slot="{ row }">
                         {{ row.contentText }}
                     </template>
                 </vxe-column>
-                <vxe-column title="操作" min-width="100">
+                <vxe-column title="操作" width="100">
                     <template #default="{ row }">
-                        <vxe-button status="danger" content="删除" @click="columnDelete(row)" style="margin-right: 20px;width: 50px;"></vxe-button>
+                        <vxe-button status="danger" content="删除" @click="columnDelete(row)"
+                            style="margin-right: 20px;width: 50px;"></vxe-button>
                     </template>
                 </vxe-column>
             </vxe-table>
-            <vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220" v-else>
+            <vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220"  v-else>
                 <vxe-table-column show-overflow="ellipsis" v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>
             </vxe-table>
         </div>
@@ -116,7 +124,7 @@ export default {
                 if (targetElement.tagName === 'A') {
                     // 链接
                     info = {
-                        xPath: 'xPath',
+                        xPath:'xPath',
                         url: 'href',
                         text: 'textContent'
                     };
@@ -131,7 +139,7 @@ export default {
                 } else if (targetElement.tagName === 'IMG') {
                     // 图片
                     info = {
-                        xPath: 'xPath',
+                        xPath:'xPath',
                         src: 'src',
                         alt: 'alt'
                     };
@@ -162,7 +170,7 @@ export default {
                 info.type = ''
                 _this.SelectTableData.push(info)
                 _this.Xpaths.push(info)
-                // sdkTable------------------------------
+                // sdkTable--------------------------------------------------------------------------------------------------------
                 // 移除事件监听器
                 document.removeEventListener('contextmenu', contextMenuHandler);
                 _this.contextMenuListenerAdded = false;
@@ -231,7 +239,7 @@ export default {
             // 遍历 Xpaths
             for (let i = 0; i < _this.Xpaths.length; i++) {
                 // _this.Xpaths[i].name = 'ID' + i
-                _this.table.newCell(_this.Xpaths[i].xpath, _this.Xpaths[i].name, _this.Xpaths[i].type, _this.Xpaths[i].typeOptions, _this.Xpaths[i].title)
+                _this.table.newCell(_this.Xpaths[i].xpath, _this.Xpaths[i].name, _this.Xpaths[i].type,_this.Xpaths[i].typeOptions, _this.Xpaths[i].title)
             }
             _this.table.verify()
             _this.table.name = _this.tableName
@@ -266,4 +274,7 @@ export default {
 .vxe-input--inner {
     width: 120px !important;
 }
+/* .vxe-table--render-default .vxe-body--column, .vxe-table--render-default .vxe-footer--column, .vxe-table--render-default .vxe-header--column{
+    line-height: 0px!important;
+} */
 </style>
\ No newline at end of file

src/components/elInput.vue

 <template>
-  <div class="elInput">
+  <div class="onInput">
     <!-- 操作按钮区域 -->
-    <div style="width: 130px;height: 50px; margin-left: 15px; text-align: left;display: flex;align-items: center;justify-content: space-between;">
+    <div style="height: 35px; margin-left: 15px; text-align: left;">
       <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
       <el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
     </div>
@@ -14,19 +14,22 @@
         <el-input v-model="actionConfig.Target.tagName" disabled></el-input>
       </el-form-item>
       <el-form-item label="文本内容">
-        <el-input v-model="actionConfig.InputValue"></el-input>
+        <el-input v-model="actionConfig.Attributes.innerText"></el-input>
       </el-form-item>
       <el-form-item label="查询时间">
         <el-input v-model="actionConfig.Target.Timeout"></el-input>
       </el-form-item>
     </el-form>
-    <el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
+    <!-- 提交按钮 -->
+    <div style="width: 100%; text-align: right;">
+      <el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'elInput',
+  name: 'onInput',
   components: {},
   props: ['actionName', 'actionType', 'dynamicTagObj'],
   data () {
@@ -35,12 +38,13 @@ export default {
       actionConfig: {
         "Target": {
           "Type": "xpath",
-          "Selector": "",
+          "Xpath": "",
           "Timeout": 5000,
           "tagName": ''
         },
-        "InputValue": "",//输入的内容
-        "Script": null,
+        "Attributes": {
+          "innerText": ""
+        },
         "Name": this.actionName,
         "Alias": this.actionType
       },
@@ -49,8 +53,8 @@ export default {
   },
   created () {
     console.log(this.dynamicTagObj);
-    if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
-    this.actionConfig = this.dynamicTagObj.actionConfigs
+    // if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
+    // this.actionConfig = this.dynamicTagObj.actionConfigs
   },
   mounted () { },
   watch: {},
@@ -75,7 +79,7 @@ export default {
       };
       this.elementInfos = elementInfo;
       console.log(event);
-      this.actionConfig.Target.Selector = elementInfo.Xpath;
+      this.actionConfig.Target.Xpath = elementInfo.Xpath;
       this.actionConfig.Target.tagName = elementInfo.TagName;
       this.selectDisabled = false;
       // 移除事件监听器
@@ -114,14 +118,4 @@ export default {
   },
 }
 </script>
-
-<style scoped>
+<style lang="scss" scoped></style>
\ No newline at end of file
-.el-form-item {
-  margin-bottom: 0 !important;
-}
-
-.tooltips button {
-  width: 60px !important;
-  height: 30px !important;
-}
-</style>
\ No newline at end of file

src/components/elOutput.vue

 <template>
   <div class="elOutput">
     <!-- 操作按钮区域 -->
-    <div style="width: 130px;height: 50px; margin-left: 15px; text-align: left;display: flex;align-items: center;justify-content: space-between;">
+    <div style="height: 35px; margin-left: 15px; text-align: left;">
       <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
       <el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
     </div>
@@ -18,7 +18,9 @@
       </el-form-item>
     </el-form>
     <!-- 提交按钮 -->
-    <el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
+    <div style="width: 100%; text-align: right;">
+      <el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
+    </div>
   </div>
 </template>
 
@@ -33,7 +35,7 @@ export default {
       actionConfig: {
         "Target": {
           "Type": "xpath",
-          "Selector": "",
+          "Xpath": "",
           "Timeout": 5000
         },
         "Attributes": {
@@ -78,7 +80,7 @@ export default {
         Text: element.innerText
       };
       this.elementInfos = elementInfo;
-      this.actionConfig.Target.Selector = elementInfo.Xpath;
+      this.actionConfig.Target.Xpath = elementInfo.Xpath;
       this.actionConfig.Attributes.innerText = elementInfo.Text;
       // 移除事件监听器
       document.removeEventListener('contextmenu', this.contextMenuHandler);

src/components/elclick.vue

@@ -2,7 +2,7 @@
     <!-- 点击菜单组件 -->
     <div class="elClick">
         <!-- 操作按钮区域 -->
-        <div style="width: 130px;height: 50px; margin-left: 15px; text-align: left;display: flex;align-items: center;justify-content: space-between;">
+        <div style="height: 35px; margin-left: 15px; text-align: left;">
             <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
             <el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
         </div>
@@ -19,7 +19,9 @@
             </el-form-item>
         </el-form>
         <!-- 提交按钮 -->
-        <el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
+        <div style="width: 100%; text-align: right;">
+            <el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
+        </div>
     </div>
 </template>
 
@@ -27,7 +29,7 @@
 export default {
     name: 'elClick',
     components: {},
-    props: ['actionName', 'actionType', 'dynamicTagObj'],
+    props: ['dynamicTagObj'],
     data () {
         return {
             elementInfos: {}, // 存储当前选中元素的信息
@@ -45,8 +47,8 @@ export default {
     },
     created () {
         console.log(this.dynamicTagObj);
-        if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
-        this.actionConfig = this.dynamicTagObj.actionConfigs
+        // if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
+        // this.actionConfig = this.dynamicTagObj.actionConfigs
     },
     mounted () { },
     beforeDestroy () {
@@ -60,8 +62,8 @@ export default {
         submit () {
             console.log(this.actionConfig);
             // 防止父级改变，子级未改变重新赋值
-            this.actionConfig.Name = this.actionName;
-            this.actionConfig.Alias = this.actionType;
+            // this.actionConfig.Name = this.actionName;
+            // this.actionConfig.Alias = this.actionType;
             this.$emit('dataChanged', this.actionConfig);
         },
 

src/components/index.js

@@ -2,14 +2,14 @@ import pageNavigate from './pageNavigates.vue';
 import elClick from './elClick.vue';
 import sysSleep from './sysSleep.vue';
 import elOutput from './elOutput.vue';
-import elInput from './elInput.vue';
-import pageJavascript from './pageJavascript.vue';
-import loopClick from './loopClick.vue';
+import loopClick from './loopClick.vue'
 import collectSingleElements from './collectSingleElements.vue';
 import pageClose from './pageClose.vue';
 import mouseMove from './mouseMove.vue';
+import pageJavascipt from './pageJavascipt.vue'
 import collectionTable from './collectionTable.vue';
 import submit from './submit.vue';
 import actions from './actions.vue';
+import onInput from './onInput.vue'
 
-export { pageNavigate, elClick, sysSleep, elOutput, elInput, pageJavascript, loopClick, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions };
+export { pageNavigate, elClick, sysSleep, elOutput, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file

src/components/onInput.vue

+<template>
+  <div class="onInput">
+    <!-- 操作按钮区域 -->
+    <div style="height: 35px; margin-left: 15px; text-align: left;">
+      <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
+      <el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
+    </div>
+    <!-- 表单区域 -->
+    <el-form label-position="right" label-width="80px" :model="actionConfig">
+      <el-form-item label="查找方式">
+        <el-input v-model="actionConfig.Target.Type" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="当前标签">
+        <el-input v-model="actionConfig.Target.tagName" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="文本内容">
+        <el-input v-model="actionConfig.InputValue"></el-input>
+      </el-form-item>
+      <el-form-item label="查询时间">
+        <el-input v-model="actionConfig.Target.Timeout"></el-input>
+      </el-form-item>
+    </el-form>
+    <!-- 提交按钮 -->
+    <div style="width: 100%; text-align: right;">
+      <el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'onInput',
+  components: {},
+  props: ['actionName', 'actionType', 'dynamicTagObj'],
+  data () {
+    return {
+      elementInfos: {}, // 存储当前选中元素的信息
+      actionConfig: {
+        "Target": {
+          "Type": "xpath",
+          "Selector": "",
+          "Timeout": 5000,
+          "tagName": ''
+        },
+        "InputValue": "",//输入的内容
+        "Script": null,
+        "Name": this.actionName,
+        "Alias": this.actionType
+      },
+      selectDisabled: true // 控制选择按钮的禁用状态
+    }
+  },
+  created () {
+    console.log(this.dynamicTagObj);
+    if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
+    this.actionConfig = this.dynamicTagObj.actionConfigs
+  },
+  mounted () { },
+  watch: {},
+  computed: {},
+  methods: {
+    // 提交表单信息
+    submit () {
+      console.log(this.actionConfig);
+      // 防止父级改变，子级未改变重新赋值
+      this.$emit('dataChanged', this.actionConfig);
+    },
+
+    // 获取页面元素方法
+    contextMenuHandler (event) {
+      event.preventDefault(); // 阻止默认的右击菜单
+      let element = event.target;
+      let elementInfo = {
+        Xpath: this.getElementXPath(element),
+        TagName: element.tagName
+      };
+      this.elementInfos = elementInfo;
+      console.log(event);
+      this.actionConfig.Target.Selector = elementInfo.Xpath;
+      this.actionConfig.Target.tagName = elementInfo.TagName;
+      this.selectDisabled = false;
+      // 移除事件监听器
+      document.removeEventListener('contextmenu', this.contextMenuHandler);
+    },
+
+    // 选择元素按钮调用
+    selectElement () {
+      // 添加事件监听器
+      document.addEventListener('contextmenu', this.contextMenuHandler, false);
+    },
+
+    // 取消按钮调用
+    cancelSelect () {
+      // 在取消按钮点击时移除事件监听器
+      document.removeEventListener('contextmenu', this.contextMenuHandler);
+    },
+
+    // 获取xpath
+    getElementXPath (element) {
+      let _this = this;
+      if (element.tagName === 'BODY') {
+        return '/HTML/' + element.tagName;
+      }
+      var ix = 1, siblings = element.parentNode.childNodes;
+      for (var i = 0; i < siblings.length; i++) {
+        var sibling = siblings[i];
+        if (sibling === element) {
+          return _this.getElementXPath(element.parentNode) + '/' + element.tagName + '[' + ix + ']';
+        }
+        if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
+          ix++;
+        }
+      }
+    },
+  },
+}
+</script>
+<style lang="scss" scoped></style>
\ No newline at end of file

src/components/pageJavascipt.vue

+<template>
+  <div class="pageJavascipt">页面执行</div>
+</template>
+
+<script>
+export default {
+  name:'pageJavascipt',
+  components:{},
+  props:{},
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){},
+  watch:{},
+  computed:{},
+  methods:{},
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/components/pageNavigates.vue

@@ -13,9 +13,9 @@
         <div style="width: 100%; text-align: right; display: flex; justify-content: space-between;">
             <!-- 获取当前页面地址的按钮 -->
             <el-button size="small" class="button-new-tag" @click="getCurrentPageUrl" style="margin-left: 15px;">获取当前页面地址</el-button>
+            <!-- 提交信息的按钮 -->
+            <el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 15px">提交信息</el-button>
         </div>
-        <!-- 提交信息的按钮 -->
-        <el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
     </div>
 </template>
 <script>
@@ -47,8 +47,6 @@ export default {
         submit () {
             // 防止父级改变，子级未改变重新赋值
             // 将当前组件中的actionConfig对象通过自定义事件传递给父组件
-            this.actionConfig.Name = this.actionName;
-            this.actionConfig.Alias = this.actionType;
             this.$emit("dataChanged", this.actionConfig);
         },
         // 获取当前页面地址的方法