Skip to content

V
Vue-WebDriver
Commit 61b8c8de by 高源
Options

界面优化，拖拽模块bug修复

parent a0757b67
Showing with 675 additions and 414 deletions
src/App.vue
......@@ -2,7 +2,8 @@
<!-- <router-view></router-view>
-->
<div id="realcontent">
<div id="EasySpiderResizer" style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;"> </div>
<div id="EasySpiderResizer"
style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;"> </div>
<div>
<!-- 页头信息 -->
<div class="tooldrag">
......@@ -22,7 +23,8 @@
</div>
</div>
<div style="display: flex;flex-direction: column;">
<el-button size="mini" style="width: 60px;height: 25px;margin-bottom: 5px;margin-left: 10px;" @click="submitForm">保存任务</el-button>
<el-button size="mini" style="width: 60px;height: 25px;margin-bottom: 5px;margin-left: 10px;"
@click="submitForm">保存任务</el-button>
<el-button size="mini" style="width: 60px;height: 25px;" @click="newAction">新建动作</el-button>
</div>
</div>
......@@ -32,37 +34,44 @@
<div style="height: 35px;display: flex;justify-content: flex-start;align-items: center;margin-left: 15px;">
<span>动作集合:</span>
<span style="margin-left: 10px;" @click="onBreadcrumb(item)" v-for="item in actionAll" :key="item.kvid">
<span id="Breadcrumb" style="color: blue;">{{ item.name }}</span> /
<span id="Breadcrumb" style="color: blue;">{{ item.name }}</span> >
</span>
</div>
</div>
<!-- 动作标签 -->
<div style="margin-bottom: 5px;margin-left: 15px;margin-right: 15px;width: 470px;overflow: auto;white-space: nowrap;display: flex;">
<div
style="margin-bottom: 5px;margin-left: 15px;margin-right: 15px;width: 470px;overflow: auto;white-space: nowrap;display: flex;">
<!-- <el-button @click="goback">返回</el-button> -->
<draggable v-model="dynamicTags" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
<draggable v-model="treeNode" chosenClass="chosen" forceFallback="true" group="people" animation="1000"
@start="onStart" @end="onEnd" v-if="isChildrenTree == false">
<transition-group>
<!-- <div class="item" v-for="element in myArray" :key="element.id">{{ element.name }}</div> -->
<el-tag class="boxtags" :key="tag.Kvid" v-for="(tag, index) in allArray" @click="selectTag(tag)" v-if="ischTree == false && childrenTree.length >= 0">
<el-tag class="boxtags" :key="tag.tagId" v-for="(tag, index) in treeNode" @click="selectTag(tag)">
<div style="display: flex;align-items: center;">
<span style="margin-left: 3px;">{{ tag.actionName }}</span>
<img id="closeimg" @click="handleClose(index)" style="width: 15px;" src="./assets/close.png">
<img id="closeimg" @click="handleClose(index)" style="width: 15px;"
src="./assets/close.png">
</div>
</el-tag>
<el-tag class="boxtags" v-if="childrenTree.length > 0 || ischTree == true" :key="item.Kvid" v-for="(item, index) in childrenTree" @click="selectTag(item)">
</transition-group>
</draggable>
<draggable v-model="childrenTreeNode" chosenClass="chosen" forceFallback="true" group="people"
animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == true">
<transition-group>
<el-tag class="boxtags" :key="item.tagId" v-for="(item, index) in childrenTreeNode"
@click="selectTag(item)">
<div style="display: flex;align-items: center;">
<span style="margin-left: 3px;">{{ item.actionName }}</span>
<img id="closeimg" @click="handleClose(index)" style="width: 15px;" src="./assets/close.png">
<img id="closeimg" @click="handleClose(index)" style="width: 15px;"
src="./assets/close.png">
</div>
</el-tag>
<!-- <el-tag class="boxtags" :key="index" v-for="(item, index) in dynamicTags" closable :disable-transitions="false" @close="handleClose(index)">
{{ item.actionName }}
</el-tag> -->
</transition-group>
</draggable>
</div>
<el-divider></el-divider>
<!-- 动作配置 -->
<el-card class="box-card" v-if="inputVisible">
<el-card class="box-card" v-if="isShowAction">
<div style="height: 35px;display: flex;justify-content: space-evenly;align-items: center;">
<span>动作配置:</span>
<div style="width: 211px;display: flex;align-items: center;">
......@@ -73,7 +82,8 @@
</div>
<div style="margin-right: 5px;">
<span style="width: 90px;">动作类型:</span>
<el-select id="eventType" name="eventType" v-model="actionType" placeholder="请选择类型" @change="handleChange" filterable remote>
<el-select id="eventType" name="eventType" v-model="actionType" placeholder="请选择类型"
@change="handleChange" filterable remote>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
......@@ -82,99 +92,8 @@
<el-button @click="toActions">进入容器</el-button>
</div>
</div>
<!-- 选择动作 -->
<div style="background-color: white;" v-if="actionType == 'select'">
<div style="height: 35px;margin-left: 15px;text-align: left;">
<el-button size="small" style="" class="button-new-tag" @click="selectElement">选择元素</el-button>
<span style="margin-left: 3px;">元素信息如下:</span>
</div>
<!-- 表格信息 -->
<vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220">
<vxe-column field="xpath" title="xpath"></vxe-column>
<vxe-column field="content" title="content"></vxe-column>
<vxe-column title="操作" width="100">
<template #default="{ row }">
<vxe-button status="danger" content="删除" @click="deleteRowEvent(row)" style="margin-right: 20px;width: 50px;"></vxe-button>
</template>
</vxe-column>
</vxe-table>
<component :is="dynamicComponent"></component>
</div>
<!-- 点击动作 -->
<div v-if="actionType == 'elClick'">
<div style="margin-left: 15px;">
<el-button size="small" class="button-new-tag">选择点击元素</el-button>
</div>
</div>
<!-- 等待动作 -->
<div v-if="actionType == 'wait'" style="display: flex;justify-content: center;margin-top: 10px;">
<div style="display: flex;align-items: center;">
<span style="width: 130px;">输入等待时间:</span>
<!-- ref="saveTagInput" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" -->
<el-input class="input-new-tag dongzuo" size="small" placeholder="输入等待时间">
<template slot="suffix">单位:s</template>
</el-input>
</div>
</div>
<!-- 输入动作 -->
<div v-if="actionType == 'input'">
<div style="margin-left: 15px;">
<el-button size="small" class="button-new-tag">选择输入框</el-button>
<div style="display: flex;justify-content: center;">
<div style="display: flex;align-items: center;margin-top: 10px;">
<span style="width: 80px;">输入内容:</span>
<!-- ref="saveTagInput" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" -->
<el-input class="input-new-tag dongzuo" size="small" placeholder="输入内容">
</el-input>
</div>
</div>
</div>
</div>
<!-- 循环点击 -->
<div v-if="actionType == 'loopClick'">
<div style="margin-left: 15px;">
<el-button size="small" class="button-new-tag" style="width: 120px;">点击创建循环容器</el-button>
</div>
</div>
<!-- 采集单元素 -->
<div style="background-color: white;" v-if="actionType == 'collectSingleElements'">
<div style="height: 35px;margin-left: 15px;text-align: left;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
<span style="margin-left: 3px;">元素信息如下:</span>
</div>
<!-- 表格信息 -->
<vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220">
<vxe-column field="name" title="xpath"></vxe-column>
<vxe-column field="sex" title="content"></vxe-column>
<vxe-column title="操作" width="100">
<template #default="{ row }">
<vxe-button status="danger" content="删除" @click="deleteRowEvent(row)" style="margin-right: 20px;width: 50px;"></vxe-button>
</template>
</vxe-column>
</vxe-table>
</div>
<!-- 关闭页面 -->
<div v-if="actionType == 'pageClose'">
<div style="margin-left: 15px;">
<el-button size="small" class="button-new-tag">点击关闭页面</el-button>
</div>
</div>
<!-- 提交动作 -->
<div v-if="actionType == 'submit'">
<el-empty description="提交动作暂无"></el-empty>
</div>
<!-- 鼠标移动 -->
<div v-if="actionType == 'mouseMove'">
<el-empty description="鼠标移动暂无"></el-empty>
</div>
<!-- 脚本执行 -->
<div v-if="actionType == 'pageJavascipt'">
<el-empty description="脚本执行暂无"></el-empty>
</div>
<!-- 采集表 -->
<div v-if="actionType == 'collectionTable'">
<el-empty description="采集表暂无"></el-empty>
</div>
</el-card>
</div>
......@@ -182,20 +101,21 @@
</template>
<script>
import VXETable, { t } from 'vxe-table'
import draggable from 'vuedraggable'
import { onSelect, elClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions } from './components/index.js'
export default {
name: 'App',
components: { draggable },
components: { draggable, onSelect, elClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions },
props: {},
data() {
data () {
return {
dynamicComponent: null,
taskName: '',
taskAddress: 'https://k5.kivii.org/storages/app/files/bundle.js',
actionName: '',
actionType: '',
dynamicTags: [],
inputVisible: false,
isShowAction: false,
options: [{
value: 'select',
label: '选择'
......@@ -235,24 +155,25 @@ export default {
}],
tableData: [],
drag: false,
allData: [],
tagId: 0,
dynamicTagObj: {},
tableDataID: 0,
parentTree: [],
childrenTree: [],
childrenTreeNode: [],
kvid: null,
parentKvid: null,
ischTree: false,
allArray: [
],
selectr: {},
actionAll: []
isChildrenTree: false,
treeNode: [],
actionAll: [{
name: '根目录',
Kvid: 123123,
children: []
}]
}
},
created() { },
mounted() {
created () { },
mounted () {
this.$nextTick(() => {
window.addEventListener('resize', this.onResize);
});
......@@ -263,18 +184,19 @@ export default {
},
watch: {
actionName(newVal, oldVal) {
actionName (newVal, oldVal) {
// 在输入值发生变化时触发
if (newVal !== oldVal) {
console.log(newVal)
console.log(this.dynamicTags)
// console.log(newVal)
// console.log(this.dynamicTags)
const targetObject = this.dynamicTags.find(obj => obj.tagId === this.dynamicTagObj.tagId);
if (targetObject) {
if (newVal == undefined) return
// 找到匹配的对象
targetObject.actionName = newVal; // 设置新的id值
this.dynamicTagObj.actionName = newVal
console.log(this.dynamicTags)
// console.log(this.dynamicTags)
} else {
// 未找到匹配的对象
console.log("未找到匹配的对象");
......@@ -282,15 +204,144 @@ export default {
}
// 可以在这里执行自定义逻辑
},
actionType(newVal, oldVal) {
// 可以在这里执行自定义逻辑
treeNode: {
handler (newVal, oldVal) {
console.log('数组变化了', newVal);
},
deep: true
}
},
computed: {},
methods: {
handleChange(val) {
// 组件配置
loadComponent (componentName) {
switch (componentName) {
case 'select':
this.dynamicComponent = onSelect
break;
case 'elClick':
this.dynamicComponent = elClick
break;
case 'wait':
this.dynamicComponent = wait
break;
case 'input':
this.dynamicComponent = onInput
break;
case 'loopClick':
this.dynamicComponent = loopClick
break;
case 'collectSingleElements':
this.dynamicComponent = collectSingleElements
break;
case 'pageClose':
this.dynamicComponent = pageClose
break;
case 'mouseMove':
this.dynamicComponent = mouseMove
break;
case 'pageJavascipt':
this.dynamicComponent = pageJavascipt
break;
case 'collectionTable':
this.dynamicComponent = collectionTable
break;
case 'submit':
this.dynamicComponent = submit
break;
case 'actions':
this.dynamicComponent = actions
break;
default:
this.dynamicComponent = null;
}
},
// 新建动作
newAction () {
this.isShowAction = true;
this.dynamicTagObj = {}
this.actionName = "新建动作"
this.actionType = ""
this.kvid = null
let obj = {}
obj.taskName = this.taskName
obj.taskAddress = this.taskAddress
this.dynamicTagObj.actionName = '新建动作'
this.dynamicTagObj.actionType = this.actionType
this.dynamicTagObj.tagId = this.tagId++
this.Kvid = Math.floor(Math.random() * 100001);
this.dynamicTagObj.Kvid = this.Kvid
if (this.parentKvid != null) {
this.dynamicTagObj.parentKvid = this.parentKvid
this.isChildrenTree = true
} else {
this.isChildrenTree = false
}
obj.dynamicTags = []
obj.dynamicTags.push(this.dynamicTagObj)
this.dynamicTags.push(this.dynamicTagObj)
this.addDataToParent(this.treeNode, this.parentKvid, this.dynamicTagObj, this.isChildrenTree)
// 根目录时新建动作
if (this.parentKvid == null) {
this.childrenTreeNode = []
for (let i = 0; i < this.treeNode.length; i++) {
this.childrenTreeNode.push(this.treeNode[i])
}
this.isChildrenTree = false
}
},
// 进入容器
toActions () {
this.isShowAction = false
if (this.actionType == 'actions') {
// this.actionType = ''
// this.actionName = ''
this.parentKvid = this.Kvid
let activeItem = this.findObjectByKvid(this.treeNode, this.Kvid);
this.childrenTreeNode = []
this.isChildrenTree = true
// console.log(this.childrenTreeNode)
let activeParentItem = this.findObjectByKvid(this.treeNode, activeItem.parentKvid);
activeItem.children = []
if (activeParentItem == null) {
// console.log('已经有容器了')
if (this.actionAll[0].children.length > 0) return
let obj = {}
obj.name = activeItem.actionName
obj.Kvid = activeItem.Kvid
obj.children = []
for (let i = 0; i < this.treeNode.length; i++) {
this.actionAll[0].children.push(this.treeNode[i])
}
this.actionAll.push(obj)
this.findOrPushObject(this.actionAll[0].children, obj)
} else {
// this.actionType = ''
// this.actionName = ''
let obj = {}
obj.name = activeItem.actionName
obj.Kvid = activeItem.Kvid
obj.children = []
for (let i = 0; i < activeItem.children.length; i++) {
obj.children.push(activeItem.children[i])
}
this.childrenTreeNode = obj.children
this.findOrPushObject(this.actionAll, obj)
// console.log(this.actionAll)
}
} else {
this.parentKvid = null
}
},
// 动作下拉框
handleChange (val) {
this.actionType == val
let _this = this
// 在输入值发生变化时触发
......@@ -300,16 +351,79 @@ export default {
// 找到匹配的对象
targetObject.actionType = val; // 设置新的id值
_this.dynamicTagObj.actionType = val
_this.loadComponent(val)
} else {
// 未找到匹配的对象
console.log("未找到匹配的对象");
}
}
},
// 导航标签
onBreadcrumb (item) {
this.actionName = item.actionName
this.actionType = item.actionType
this.deleteObjectsAfterKvid(this.actionAll, item.Kvid)
let activeItem = this.findObjectByKvid(this.treeNode, item.Kvid);
if (activeItem == null) {
this.childrenTreeNode = this.treeNode
this.parentKvid = null
// console.log(this.treeNode)
} else {
this.childrenTreeNode = []
this.childrenTreeNode = activeItem.children
this.parentKvid = item.Kvid
this.isShowAction = false
}
},
// 单击标签
selectTag (item) {
// this.parentTree = item
if (item.actionType == 'actions') {
this.parentKvid = item.Kvid
this.isChildrenTree = true
this.isShowAction = false
// this.actionType = ''
// this.actionName = ''
let obj = {}
obj.name = item.actionName
obj.Kvid = item.Kvid
obj.children = []
for (let i = 0; i < item.children.length; i++) {
obj.children.push(item.children[i])
}
this.findOrPushObject(this.actionAll, obj)
} else {
this.actionName = item.actionName
this.actionType = item.actionType
this.isShowAction = true
}
this.Kvid = item.Kvid
// this.actionType =item.actionType
// this.actionName =item.actionName
if (item.children != undefined && item.children.length > 0) {
this.childrenTreeNode = []
for (let i = 0; i < item.children.length; i++) {
this.childrenTreeNode.push(item.children[i])
}
this.isChildrenTree = true
}
this.dynamicTagObj = item
},
// 删除标签
handleClose (tag) {
if (this.childrenTreeNode.length > 0) {
this.childrenTreeNode.splice(this.childrenTreeNode.indexOf(tag), 1);
} else {
this.treeNode.splice(this.treeNode.indexOf(tag), 1);
}
this.isShowAction = false
},
// 根据 Kvid 找到对应的对象，并将匹配到的对象后面的所有对象数据删除
deleteObjectsAfterKvid(dataArray, targetKvid) {
deleteObjectsAfterKvid (dataArray, targetKvid) {
const index = dataArray.findIndex(obj => obj.Kvid === targetKvid);
if (index !== -1) {
// 找到匹配的对象
......@@ -318,25 +432,24 @@ export default {
console.log("未找到匹配的对象");
}
},
// 树结构添加数据
addDataToParent(tree, parentKvid, newData) {
// 树结构添加数据
addDataToParent (tree, parentKvid, newData, childTree) {
let _this = this
_this.childrenTree = []
_this.childrenTreeNode = []
// 递归函数，用于在树的每一级中查找合适的父节点并添加数据
function addToNode(node, parentKvid, newData) {
function addToNode (node, parentKvid, newData, childTree) {
if (node.children == undefined) {
node.children = []
}
// 如果当前节点的 kvid 等于 parentKvid，将 newData 添加到当前节点的 children 中
if (node.Kvid === parentKvid) {
node.children.push(newData);
_this.ischTree = true
// _this.isChildrenTree = childTree
for (let i = 0; i < node.children.length; i++) {
_this.childrenTree.push(node.children[i])
_this.childrenTreeNode.push(node.children[i])
}
return true; // 表示数据已添加成功
}
// 递归查找子节点
for (var i = 0; i < node.children.length; i++) {
if (addToNode(node.children[i], parentKvid, newData)) {
......@@ -345,39 +458,39 @@ export default {
}
return false; // 表示未找到合适的父节点
}
// 遍历初始树结构，尝试添加数据
for (var i = 0; i < tree.length; i++) {
if (addToNode(tree[i], parentKvid, newData)) {
return; // 如果在当前节点中添加成功，结束函数
}
}
// 如果在整个树中都未找到合适的父节点，可以选择不添加数据或抛出错误
// console.error('Parent node not found for kvid: ' + parentKvid);
tree.push(newData);
},
// 返回上一级目录
goback() {
goback () {
this.parentKvid = null
this.childrenTree = []
let activeItem = this.findObjectByKvid(this.allArray, this.Kvid);
let activeParentItem = this.findObjectByKvid(this.allArray, activeItem.parentKvid);
let activeParentsItem = this.findObjectByKvid(this.allArray, activeParentItem.parentKvid);
this.childrenTreeNode = []
let activeItem = this.findObjectByKvid(this.treeNode, this.Kvid);
let activeParentItem = this.findObjectByKvid(this.treeNode, activeItem.parentKvid);
let activeParentsItem = this.findObjectByKvid(this.treeNode, activeParentItem.parentKvid);
if (activeParentsItem == null) {
this.childrenTree = this.allArray
this.childrenTreeNode = this.treeNode
} else {
for (let i = 0; i < activeParentsItem.children.length; i++) {
this.childrenTree.push(activeParentsItem.children[i])
// }
this.childrenTreeNode.push(activeParentsItem.children[i])
}
this.Kvid = activeParentItem.Kvid
}
},
// 计划任务提交
submitForm (formName) {
this.isShowAction = true
},
// 根据parentKvid找当前节点
findHierarchyByParentKvid(tree, parentKvid) {
findHierarchyByParentKvid (tree, parentKvid) {
let _this = this
for (var i = 0; i < tree.length; i++) {
var node = tree[i];
......@@ -395,7 +508,7 @@ export default {
return []; // 未找到匹配的节点，返回空数组
},
// 根据Kvid找节点
findObjectByKvid(array, kvid) {
findObjectByKvid (array, kvid) {
let _this = this
for (var i = 0; i < array.length; i++) {
var obj = array[i];
......@@ -412,75 +525,9 @@ export default {
return null; // 如果没有找到目标对象，返回 null
},
// 进入容器
toActions() {
if (this.actionType == 'actions') {
this.parentKvid = this.Kvid
this.selectr = this.dynamicTagObj
let activeItem = this.findObjectByKvid(this.allArray, this.Kvid);
let activeParentItem = this.findObjectByKvid(this.allArray, activeItem.parentKvid);
activeItem.children = []
if (activeParentItem == null) {
let obj = {}
obj.name = '根'
obj.Kvid = 123
obj.children = []
for (let i = 0; i < this.allArray.length; i++) {
obj.children.push(this.allArray[i])
}
// this.actionAll.push(obj)
this.findOrPushObject(this.actionAll, obj)
} else {
let obj = {}
obj.name = activeParentItem.actionName
obj.Kvid = activeParentItem.Kvid
obj.children = []
for (let i = 0; i < activeParentItem.children.length; i++) {
obj.children.push(activeParentItem.children[i])
}
// this.actionAll.push(obj)
this.findOrPushObject(this.actionAll, obj)
}
} else {
this.parentKvid = null
}
},
// 新建动作
newAction() {
this.inputVisible = true;
this.dynamicTagObj = {}
this.actionName = "新建动作"
this.actionType = ""
this.tableDataID = 0
this.kvid = null
let obj = {}
obj.taskName = this.taskName
obj.taskAddress = this.taskAddress
this.dynamicTagObj.actionName = '新建动作'
this.dynamicTagObj.actionType = this.actionType
this.dynamicTagObj.tagId = this.tagId++
this.Kvid = Math.floor(Math.random() * 100001);
this.dynamicTagObj.Kvid = this.Kvid
if (this.parentKvid != null) {
this.dynamicTagObj.parentKvid = this.parentKvid
}
obj.dynamicTags = []
obj.dynamicTags.push(this.dynamicTagObj)
this.dynamicTags.push(this.dynamicTagObj)
this.addDataToParent(this.allArray, this.parentKvid, this.dynamicTagObj)
console.log(this.allArray)
},
// 根据 Kvid 匹配，如果有相同的就返回，没有就 push
findOrPushObject(dataArray, newObj) {
findOrPushObject (dataArray, newObj) {
const existingObj = dataArray.find(obj => obj.Kvid === newObj.Kvid);
if (existingObj) {
// 已经存在相同的 Kvid，返回该对象
return existingObj;
......@@ -490,183 +537,30 @@ export default {
return newObj;
}
},
// 单击标签
selectTag(item) {
this.parentTree = item
if (item.actionType == 'actions') {
let obj = {}
obj.name = item.actionName
obj.Kvid = item.Kvid
obj.children = []
for (let i = 0; i < item.children.length; i++) {
obj.children.push(item.children[i])
}
this.findOrPushObject(this.actionAll, obj)
}
this.Kvid = item.Kvid
if (item.children != undefined && item.children.length > 0) {
this.childrenTree = []
for (let i = 0; i < item.children.length; i++) {
this.childrenTree.push(item.children[i])
}
this.ischTree = true
}
this.dynamicTagObj = item
this.actionName = item.actionName
this.actionType = item.actionType
this.inputVisible = true
},
// 导航标签
onBreadcrumb(item) {
this.deleteObjectsAfterKvid(this.actionAll, item.Kvid)
this.childrenTree = []
this.childrenTree = item.children
},
// 删除标签
handleClose(tag) {
console.log(tag)
if (this.childrenTree.length > 0) {
this.childrenTree.splice(this.childrenTree.indexOf(tag), 1);
} else {
this.allArray.splice(this.allArray.indexOf(tag), 1);
}
this.inputVisible = false
},
getTableData() {
const $table = this.$refs.xTable
const removeRecords = $table.getRemoveRecords()
},
async deleteRowEvent(row) {
this.tableData = this.tableData.filter(item => item.tableDataID !== row.tableDataID)
},
//开始拖拽事件
onStart() {
//开始拖拽事件-标签拖拽
onStart () {
this.drag = true;
this.isShowAction = false
},
//拖拽结束事件
onEnd() {
onEnd () {
this.drag = false;
// console.log(this.treeNode)
// console.log(this.childrenTreeNode)
let activeParentItem = this.findObjectByKvid(this.treeNode, this.childrenTreeNode[0].parentKvid);
if (activeParentItem != null) {
activeParentItem.children = []
for (let i = 0; i < this.childrenTreeNode.length; i++) {
activeParentItem.children.push(this.childrenTreeNode[i])
},
// 创建动作
submitForm(formName) {
this.inputVisible = true
},
btnRightClick() {
console.log("测试");
},
handleInputConfirm() {
let actionName = this.actionName;
if (actionName) {
this.dynamicTags.push(actionName);
}
this.inputVisible = true;
this.actionName = '';
},
selectElement() {
let _this = this
document.oncontextmenu = () => true;
document.oncontextmenu = function (e) {
e.preventDefault()
console.log(e.target.style)
var targetElement = e.target;
e.target.style.backgroundColor = "red"
console.log('右键点击发生在元素：', targetElement);
console.log(e)
const xpath = _this.getElementXPath(targetElement);
console.log("XPath:", xpath);
const element = _this.getElementByXPath(xpath);
console.log(element)
_this.docClose()
let obj = {}
obj.xpath = xpath;
obj.content = e.target.innerText
obj.tableDataID = _this.tableDataID++;
_this.tableData.push(obj)
if (element) {
// 执行你的操作，例如获取元素的文本内容或属性
console.log("元素文本内容:", element.textContent);
console.log("元素属性值:", element.getAttribute("yourAttribute"));
let obj = {}
obj.xpath = xpath;
obj.content = element.textContent;
// _this.data.push(obj);
// _this.addRow(obj)
} else {
console.log("未找到匹配的元素");
}
}
},
docClose() {
document.oncontextmenu = () => false;
},
// // 根据xpath获取元素信息
getElementByXPath(xpath) {
const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
const element = result.singleNodeValue;
return element;
},
// 获取元素xpath
getElementXPath(element) {
if (element && element.id) {
// 如果元素有ID，则使用ID作为XPath的一部分
return `id("${element.id}")`;
}
if (element === document.body) {
// 如果已经到达根元素（body），停止递归
return element.tagName;
}
let siblings = element.parentNode.children;
let index = 1;
for (let i = 0; i < siblings.length; i++) {
const sibling = siblings[i];
if (sibling === element) {
// 如果是目标元素，递归调用并添加位置信息
return `${this.getElementXPath(element.parentNode)}/${element.tagName}[${index}]`;
}
if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
// 如果是相同类型的兄弟节点，增加索引
index++;
}
}
// 拖拽完最终结果
console.log(this.treeNode)
},
btnRightClick() {
let _this = this
document.oncontextmenu = function (e) {
e.preventDefault()
// console.log(e)
var targetElement = e.target;
console.log('右键点击发生在元素：', targetElement);
const xpath = _this.getElementXPath(targetElement);
console.log("XPath:", xpath);
const element = _this.getElementByXPath(xpath);
console.log(element)
if (element) {
// 执行你的操作，例如获取元素的文本内容或属性
console.log("元素文本内容:", element.textContent);
console.log("元素属性值:", element.getAttribute("yourAttribute"));
let obj = {}
obj.xpath = xpath;
obj.content = element.textContent;
// _this.data.push(obj);
// _this.addRow(obj)
} else {
console.log("未找到匹配的元素");
}
}
},
},
}
</script>
......
src/components/actions.vue 0 → 100644
<template>
<div class="actions">
容器
</div>
</template>
<script>
export default {
name:'actions',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/collectSingleElements.vue 0 → 100644
<template>
<div class="collectSingleElements">
采集单元素
</div>
</template>
<script>
export default {
name:'collectSingleElements',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/collectionTable.vue 0 → 100644
<template>
<div class="collectionTable">
<div style="height: 35px;margin-left: 15px;text-align: left;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
<span style="margin-left: 3px;">元素信息如下:</span>
</div>
<!-- 表格信息 -->
<vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220">
<vxe-column field="xpath" title="xpath"></vxe-column>
<vxe-column field="content" title="content"></vxe-column>
<vxe-column title="操作" width="100">
<template #default="{ row }">
<vxe-button status="danger" content="删除" @click="deleteRowEvent(row)"
style="margin-right: 20px;width: 50px;"></vxe-button>
</template>
</vxe-column>
</vxe-table>
</div>
</template>
<script>
import VXETable, { t } from 'vxe-table'
export default {
name: 'collectionTable',
components: {},
props: {},
data () {
return {
tableData: []
}
},
created () { },
mounted () { },
watch: {},
computed: {},
methods: {
selectElement () {
let _this = this
document.addEventListener('contextmenu', function (event) {
var xpath = _this.getElementXPath(event.target);
var textContent = event.target.textContent.trim();
console.log('XPath of the clicked element:', xpath);
console.log('Text content of the clicked element:', textContent);
_this.docClose()
}, false);
},
getTableData () {
const $table = this.$refs.xTable
const removeRecords = $table.getRemoveRecords()
},
async deleteRowEvent (row) {
this.tableData = this.tableData.filter(item => item.tableDataID !== row.tableDataID)
},
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++;
}
}
},
// deleteRowEvent (row) {
// console.log(row)
// },
docClose () {
document.oncontextmenu = () => false;
},
},
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
src/components/elClick.vue 0 → 100644
<template>
<div class="elClick">点击</div>
</template>
<script>
export default {
name:'elClick',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/index.js 0 → 100644
import onSelect from './onSelect.vue';
import elClick from './elClick.vue';
import wait from './wait.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'
// import ComponentC from './ComponentC.vue';
export { onSelect, elClick, wait, onInput,loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file
src/components/loopClick.vue 0 → 100644
<template>
<div class="loopClick">循环点击</div>
</template>
<script>
export default {
name:'loopClick',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/mouseMove.vue 0 → 100644
<template>
<div class="mouseMove">鼠标移动</div>
</template>
<script>
export default {
name:'mouseMove',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/onInput.vue 0 → 100644
<template>
<div class="onInput">输入</div>
</template>
<script>
export default {
name:'onInput',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/onSelect.vue 0 → 100644
<template>
<div class="onSelect">选择</div>
</template>
<script>
export default {
name:'onSelect',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/pageClose.vue 0 → 100644
<template>
<div class="pageClose">页面关闭</div>
</template>
<script>
export default {
name:'pageClose',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/pageJavascipt.vue 0 → 100644
<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/submit.vue 0 → 100644
<template>
<div class="submit">提交</div>
</template>
<script>
export default {
name:'submit',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/wait.vue 0 → 100644
<template>
<div class="wait">等待</div>
</template>
<script>
export default {
name:'wait',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/main.js
......@@ -6,6 +6,7 @@ import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
Vue.use(ElementUI);
......@@ -115,37 +116,37 @@ function generateToolkit () {
window.onload = function () {
let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
toolkit = document.createElement("div");
toolkit.classList = "tooltips"; //添加样式
toolkit.setAttribute("id", "wrapperToolkit");
let tooltips = false; //标记鼠标是否在提示框上
toolkit = document.createElement("div");
toolkit.classList = "tooltips"; //添加样式
toolkit.setAttribute("id", "wrapperToolkit");
let tooltips = false; //标记鼠标是否在提示框上
//右键菜单屏蔽
document.oncontextmenu = () => false;
//右键菜单屏蔽
document.oncontextmenu = () => false;
toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
document.body.append(toolkit);
console.log(document)
document.body.append(toolkit);
console.log(document)
$(".tooltips").html(`
$(".tooltips").html(`
<div id="k5WebDriver"></div>
`);
// global.app = new Vue(ToolKit);
new Vue({
el: '#k5WebDriver',
router,
render: h => h(App)
})
document.addEventListener("DOMContentLoaded", function () {
// 在 DOMContentLoaded 事件触发后执行的代码
var body = document.body;
// 执行其他操作
});
generateToolkit();
// global.app = new Vue(ToolKit);
new Vue({
el: '#k5WebDriver',
router,
render: h => h(App)
})
document.addEventListener("DOMContentLoaded", function () {
// 在 DOMContentLoaded 事件触发后执行的代码
var body = document.body;
// 执行其他操作
});
generateToolkit();
}
webpack.config.js
......@@ -15,11 +15,15 @@ module.exports = {
打包速度很慢，仅适合在项目发布阶段使用
*/
mode: 'development',
entry: './src/main.js', // 入口： 默认是./src/index.html
entry:{
main: './src/main.js', // 入口： 默认是./src/index.html
components: './src/components/index.js' // 组件入口文件
},
// 输出 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
output: {
path: path.join(__dirname, 'dist'), // 输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
filename: "bundle.js" // 默认是 ./dist/main.js
filename: '[name].bundle.js', // 默认是 ./dist/main.js
},
module: {
// ... 其它规则
......@@ -103,5 +107,11 @@ module.exports = {
}),
new VueLoaderPlugin(), // 使用npm 导入使用vue-loader的插件
new webpack.HotModuleReplacementPlugin() // 热更新引入(HMR 绝对不能被用在生产环境)
]
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment