解决合并冲突

src/App.vue

@@ -95,7 +95,7 @@
                 <div style="margin-left: 15px;margin-top: 10px;" v-if="actionType == 'actions'">
                     <el-button @click="toActions">进入容器</el-button>
                 </div>
-                <component :is="dynamicComponent" :actionName="actionName" :actionType="actionType" @dataChanged="handleDataChange" v-if="actionType !== ''"></component>
+                <component :is="dynamicComponent" :actionName="actionName" :actionType="actionType" @dataChanged="handleDataChange" :dynamicTagObj="dynamicTagObj" v-if="actionType !== ''"></component>
             </div>
         </div>
     </div>

src/components/elclick.vue

@@ -45,10 +45,7 @@ export default {
         };
     },
     created () { },
-    mounted () {
-        // 在组件挂载后调用selectElement来添加事件监听器
-        this.selectElement();
-    },
+    mounted () { },
     beforeDestroy () {
         // 在组件销毁前移除事件监听器
         document.removeEventListener('contextmenu', this.contextMenuHandler);
@@ -122,5 +119,3 @@ export default {
     height: 30px !important;
 }
 </style>
\ No newline at end of file
-
-

src/components/onInput.vue

 <template>
-  <div class="onInput">输入</div>
+  <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.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>
+    <!-- 提交按钮 -->
+    <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: {},
+  props: ['actionName', 'actionType', 'dynamicTagObj'],
   data () {
     return {
+      elementInfos: {}, // 存储当前选中元素的信息
+      actionConfig: {
+        "Target": {
+          "Type": "xpath",
+          "Xpath": "",
+          "Timeout": 5000,
+          "tagName": ''
+        },
+        "Attributes": {
+          "innerText": ""
+        },
+        "Name": this.actionName,
+        "Alias": this.actionType
+      },
+      selectDisabled: true // 控制选择按钮的禁用状态
     }
   },
-  created () { },
+  created () {
+    console.log(this.dynamicTagObj);
+    if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
+    this.actionConfig = this.dynamicTagObj.actionConfigs
+  },
   mounted () { },
   watch: {},
   computed: {},
-  methods: {},
+  methods: {
+    // 提交表单信息
+    submit () {
+      console.log(this.actionConfig);
+      // 防止父级改变，子级未改变重新赋值
+      this.actionConfig.Name = this.actionName;
+      this.actionConfig.Alias = this.actionType;
+      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.Xpath = 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