Skip to content

V
Vue-WebDriver
Commit a0757b67 by 高源
Options

动作流功能初版

parent 4d9f974c
Showing with 225 additions and 161 deletions
.DS_Store
No preview for this file type
src/App.vue
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
<!-- <router-view></router-view> <!-- <router-view></router-view>
--> -->
<div id="realcontent"> <div id="realcontent">
<div id="EasySpiderResizer" <div id="EasySpiderResizer" style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;"> </div>
style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;"> </div>
<div> <div>
<!-- 页头信息 --> <!-- 页头信息 -->
<div class="tooldrag"> <div class="tooldrag">
...@@ -23,34 +22,38 @@ ...@@ -23,34 +22,38 @@
</div> </div>
</div> </div>
<div style="display: flex;flex-direction: column;"> <div style="display: flex;flex-direction: column;">
<el-button size="mini" style="width: 60px;height: 25px;margin-bottom: 5px;margin-left: 10px;" <el-button size="mini" style="width: 60px;height: 25px;margin-bottom: 5px;margin-left: 10px;" @click="submitForm">保存任务</el-button>
@click="submitForm">保存任务</el-button>
<el-button size="mini" style="width: 60px;height: 25px;" @click="newAction">新建动作</el-button> <el-button size="mini" style="width: 60px;height: 25px;" @click="newAction">新建动作</el-button>
</div> </div>
</div> </div>
<el-divider></el-divider> <el-divider></el-divider>
<!-- 动作集合 --> <!-- 动作集合 -->
<div>
<div <div style="height: 35px;display: flex;justify-content: flex-start;align-items: center;margin-left: 15px;">
style="margin-bottom: 5px;margin-left: 15px;margin-right: 15px;width: 470px;overflow: auto;white-space: nowrap;display: flex;"> <span>动作集合:</span>
<el-button @click="goback">返回</el-button> <span style="margin-left: 10px;" @click="onBreadcrumb(item)" v-for="item in actionAll" :key="item.kvid">
<draggable v-model="dynamicTags" chosenClass="chosen" forceFallback="true" group="people" animation="1000" <span id="Breadcrumb" style="color: blue;">{{ item.name }}</span> /
@start="onStart" @end="onEnd"> </span>
</div>
</div>
<!-- 动作标签 -->
<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">
<transition-group> <transition-group>
<!-- <div class="item" v-for="element in myArray" :key="element.id">{{ element.name }}</div> --> <!-- <div class="item" v-for="element in myArray" :key="element.id">{{ element.name }}</div> -->
<el-tag class="boxtags" :key="tag.Kvid" v-for="tag in allArray" closable <el-tag class="boxtags" :key="tag.Kvid" v-for="(tag, index) in allArray" @click="selectTag(tag)" v-if="ischTree == false && childrenTree.length >= 0">
:disable-transitions="false" @close="handleClose(tag)" @click="selectTag(tag)" <div style="display: flex;align-items: center;">
v-if="ischTree == false && childrenTree.length >= 0"> <span style="margin-left: 3px;">{{ tag.actionName }}</span>
{{ tag.actionName }} <img id="closeimg" @click="handleClose(index)" style="width: 15px;" src="./assets/close.png">
</div>
</el-tag> </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)">
<el-tag class="boxtags" v-if="childrenTree.length > 0 || ischTree == true" :key="item.Kvid" <div style="display: flex;align-items: center;">
v-for="item in childrenTree" closable :disable-transitions="false" @close="handleClose(item)" <span style="margin-left: 3px;">{{ item.actionName }}</span>
@click="selectTag(item)"> <img id="closeimg" @click="handleClose(index)" style="width: 15px;" src="./assets/close.png">
{{ item.actionName }} </div>
</el-tag> </el-tag>
<!-- <el-tag class="boxtags" :key="index" v-for="(item, index) in dynamicTags" closable :disable-transitions="false" @close="handleClose(index)"> <!-- <el-tag class="boxtags" :key="index" v-for="(item, index) in dynamicTags" closable :disable-transitions="false" @close="handleClose(index)">
{{ item.actionName }} {{ item.actionName }}
</el-tag> --> </el-tag> -->
...@@ -70,8 +73,7 @@ ...@@ -70,8 +73,7 @@
</div> </div>
<div style="margin-right: 5px;"> <div style="margin-right: 5px;">
<span style="width: 90px;">动作类型:</span> <span style="width: 90px;">动作类型:</span>
<el-select id="eventType" name="eventType" v-model="actionType" placeholder="请选择类型" <el-select id="eventType" name="eventType" v-model="actionType" placeholder="请选择类型" @change="handleChange" filterable remote>
@change="handleChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
...@@ -80,8 +82,8 @@ ...@@ -80,8 +82,8 @@
<el-button @click="toActions">进入容器</el-button> <el-button @click="toActions">进入容器</el-button>
</div> </div>
</div> </div>
<!-- 点击动作 --> <!-- 选择动作 -->
<div style="background-color: white;" v-if="actionType == 'elClick'"> <div style="background-color: white;" v-if="actionType == 'select'">
<div style="height: 35px;margin-left: 15px;text-align: left;"> <div style="height: 35px;margin-left: 15px;text-align: left;">
<el-button size="small" style="" class="button-new-tag" @click="selectElement">选择元素</el-button> <el-button size="small" style="" class="button-new-tag" @click="selectElement">选择元素</el-button>
<span style="margin-left: 3px;">元素信息如下:</span> <span style="margin-left: 3px;">元素信息如下:</span>
...@@ -92,56 +94,86 @@ ...@@ -92,56 +94,86 @@
<vxe-column field="content" title="content"></vxe-column> <vxe-column field="content" title="content"></vxe-column>
<vxe-column title="操作" width="100"> <vxe-column title="操作" width="100">
<template #default="{ row }"> <template #default="{ row }">
<vxe-button status="danger" content="删除" @click="deleteRowEvent(row)" <vxe-button status="danger" content="删除" @click="deleteRowEvent(row)" style="margin-right: 20px;width: 50px;"></vxe-button>
style="margin-right: 20px;width: 50px;"></vxe-button>
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
</div> </div>
<!-- 右击动作 --> <!-- 点击动作 -->
<div v-if="actionType == 'rightclick'"> <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 == 'submit'">
提交动作
</div> </div>
<!-- 等待动作 --> <!-- 等待动作 -->
<div v-if="actionType == 'wait'"> <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>
<!-- 输入动作 --> <!-- 输入动作 -->
<div v-if="actionType == 'input'"> <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 v-if="actionType == 'select'">
选择动作
</div> </div>
<!-- 鼠标移动 -->
<div v-if="actionType == 'mouseMove'">
鼠标移动
</div> </div>
<!-- 脚本执行 -->
<div v-if="actionType == 'pageJavascipt'">
脚本执行
</div> </div>
<!-- 循环点击 --> <!-- 循环点击 -->
<div v-if="actionType == 'loopClick'"> <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>
<!-- 采集单元素 --> <!-- 采集单元素 -->
<div v-if="actionType == 'collectSingleElements'"> <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> </div>
<!-- 采集表 --> <!-- 表格信息 -->
<div v-if="actionType == 'collectionTable'"> <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>
<!-- 关闭页面 --> <!-- 关闭页面 -->
<div v-if="actionType == 'pageClose'"> <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> </div>
</el-card> </el-card>
...@@ -150,13 +182,13 @@ ...@@ -150,13 +182,13 @@
</template> </template>
<script> <script>
import VXETable from 'vxe-table' import VXETable, { t } from 'vxe-table'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
export default { export default {
name: 'App', name: 'App',
components: { draggable }, components: { draggable },
props: {}, props: {},
data () { data() {
return { return {
taskName: '', taskName: '',
taskAddress: 'https://k5.kivii.org/storages/app/files/bundle.js', taskAddress: 'https://k5.kivii.org/storages/app/files/bundle.js',
...@@ -165,23 +197,26 @@ export default { ...@@ -165,23 +197,26 @@ export default {
dynamicTags: [], dynamicTags: [],
inputVisible: false, inputVisible: false,
options: [{ options: [{
value: 'select',
label: '选择'
}, {
value: 'elClick', value: 'elClick',
label: '点击' label: '点击'
}, { }, {
value: 'rightclick',
label: '右击'
}, {
value: 'submit',
label: '提交'
}, {
value: 'wait', value: 'wait',
label: '等待' label: '等待'
}, { }, {
value: 'input', value: 'input',
label: '输入' label: '输入'
}, { }, {
value: 'select', value: 'loopClick',
label: '选择' label: '循环点击'
}, {
value: 'collectSingleElements',
label: '采集单元素'
}, {
value: 'pageClose',
label: '关闭页面'
}, { }, {
value: 'mouseMove', value: 'mouseMove',
label: '鼠标移动' label: '鼠标移动'
...@@ -189,17 +224,11 @@ export default { ...@@ -189,17 +224,11 @@ export default {
value: 'pageJavascipt', value: 'pageJavascipt',
label: '脚本执行' label: '脚本执行'
}, { }, {
value: 'loopClick',
label: '循环点击'
}, {
value: 'collectSingleElements',
label: '采集单元素'
}, {
value: 'collectionTable', value: 'collectionTable',
label: '采集表' label: '采集表'
}, { }, {
value: 'pageClose', value: 'submit',
label: '关闭页面' label: '提交'
}, { }, {
value: 'actions', value: 'actions',
label: '容器' label: '容器'
...@@ -217,12 +246,13 @@ export default { ...@@ -217,12 +246,13 @@ export default {
ischTree: false, ischTree: false,
allArray: [ allArray: [
], ],
selectr: {} selectr: {},
actionAll: []
} }
}, },
created () { }, created() { },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
window.addEventListener('resize', this.onResize); window.addEventListener('resize', this.onResize);
}); });
...@@ -233,7 +263,7 @@ export default { ...@@ -233,7 +263,7 @@ export default {
}, },
watch: { watch: {
actionName (newVal, oldVal) { actionName(newVal, oldVal) {
// 在输入值发生变化时触发 // 在输入值发生变化时触发
if (newVal !== oldVal) { if (newVal !== oldVal) {
console.log(newVal) console.log(newVal)
...@@ -252,7 +282,7 @@ export default { ...@@ -252,7 +282,7 @@ export default {
} }
// 可以在这里执行自定义逻辑 // 可以在这里执行自定义逻辑
}, },
actionType (newVal, oldVal) { actionType(newVal, oldVal) {
// 可以在这里执行自定义逻辑 // 可以在这里执行自定义逻辑
...@@ -260,8 +290,7 @@ export default { ...@@ -260,8 +290,7 @@ export default {
}, },
computed: {}, computed: {},
methods: { methods: {
handleChange (val) { handleChange(val) {
console.log(val)
this.actionType == val this.actionType == val
let _this = this let _this = this
// 在输入值发生变化时触发 // 在输入值发生变化时触发
...@@ -279,24 +308,31 @@ export default { ...@@ -279,24 +308,31 @@ export default {
} }
}, },
// 根据 Kvid 找到对应的对象，并将匹配到的对象后面的所有对象数据删除
deleteObjectsAfterKvid(dataArray, targetKvid) {
const index = dataArray.findIndex(obj => obj.Kvid === targetKvid);
if (index !== -1) {
// 找到匹配的对象
dataArray.splice(index + 1);
} else {
console.log("未找到匹配的对象");
}
},
// 树结构添加数据 // 树结构添加数据
addDataToParent (tree, parentKvid, newData) { addDataToParent(tree, parentKvid, newData) {
let _this = this let _this = this
_this.childrenTree = [] _this.childrenTree = []
// 递归函数，用于在树的每一级中查找合适的父节点并添加数据 // 递归函数，用于在树的每一级中查找合适的父节点并添加数据
function addToNode (node, parentKvid, newData) { function addToNode(node, parentKvid, newData) {
if (node.children == undefined) { if (node.children == undefined) {
node.children = [] node.children = []
} }
// 如果当前节点的 kvid 等于 parentKvid，将 newData 添加到当前节点的 children 中 // 如果当前节点的 kvid 等于 parentKvid，将 newData 添加到当前节点的 children 中
if (node.Kvid === parentKvid) { if (node.Kvid === parentKvid) {
node.children.push(newData); node.children.push(newData);
console.log(node)
_this.ischTree = true _this.ischTree = true
for (let i = 0; i < node.children.length; i++) { for (let i = 0; i < node.children.length; i++) {
_this.childrenTree.push(node.children[i]) _this.childrenTree.push(node.children[i])
} }
return true; // 表示数据已添加成功 return true; // 表示数据已添加成功
} }
...@@ -307,7 +343,6 @@ export default { ...@@ -307,7 +343,6 @@ export default {
return true; // 如果子节点中添加成功，返回 true return true; // 如果子节点中添加成功，返回 true
} }
} }
return false; // 表示未找到合适的父节点 return false; // 表示未找到合适的父节点
} }
...@@ -325,45 +360,33 @@ export default { ...@@ -325,45 +360,33 @@ export default {
// 返回上一级目录 // 返回上一级目录
goback () { goback() {
this.parentKvid = null this.parentKvid = null
let parentKvid = null this.childrenTree = []
for (let i = 0; i < this.childrenTree.length; i++) { let activeItem = this.findObjectByKvid(this.allArray, this.Kvid);
this.childrenTree[i].actionType == 'actions' let activeParentItem = this.findObjectByKvid(this.allArray, activeItem.parentKvid);
parentKvid = this.childrenTree[i].parentKvid let activeParentsItem = this.findObjectByKvid(this.allArray, activeParentItem.parentKvid);
} if (activeParentsItem == null) {
console.log(parentKvid)
// bug
let ab = this.findHierarchyByParentKvid(this.allArray, parentKvid);
console.log(ab)
if (ab.length == 0) return
if (ab[0].parentKvid == undefined || ab[0].parentKvid == null) {
this.childrenTree = this.allArray this.childrenTree = this.allArray
} else { } else {
this.childrenTree = ab for (let i = 0; i < activeParentsItem.children.length; i++) {
this.childrenTree.push(activeParentsItem.children[i])
// }
}
this.Kvid = activeParentItem.Kvid
} }
// ab.children = []
}, },
// 根据parentKvid找当前节点 // 根据parentKvid找当前节点
findHierarchyByParentKvid (tree, parentKvid) { findHierarchyByParentKvid(tree, parentKvid) {
let _this = this let _this = this
for (var i = 0; i < tree.length; i++) { for (var i = 0; i < tree.length; i++) {
var node = tree[i]; var node = tree[i];
if (node.Kvid === parentKvid) { if (node.Kvid === parentKvid) {
return [node]; // 找到匹配的节点，返回包含该节点的数组 return [node]; // 找到匹配的节点，返回包含该节点的数组
} }
if (node.children && node.children.length > 0) { if (node.children && node.children.length > 0) {
var result = _this.findHierarchyByParentKvid(node.children, parentKvid); var result = _this.findHierarchyByParentKvid(node.children, parentKvid);
if (result.length > 0) { if (result.length > 0) {
return node.children; // 将当前节点与子级层级连接起来 return node.children; // 将当前节点与子级层级连接起来
} }
} }
...@@ -372,18 +395,15 @@ export default { ...@@ -372,18 +395,15 @@ export default {
return []; // 未找到匹配的节点，返回空数组 return []; // 未找到匹配的节点，返回空数组
}, },
// 根据Kvid找节点 // 根据Kvid找节点
findObjectByKvid (array, kvid) { findObjectByKvid(array, kvid) {
let _this = this let _this = this
for (var i = 0; i < array.length; i++) { for (var i = 0; i < array.length; i++) {
var obj = array[i]; var obj = array[i];
if (obj.Kvid === kvid) { if (obj.Kvid === kvid) {
return obj; // 如果当前对象的 kvid 等于目标 kvid，返回当前对象 return obj; // 如果当前对象的 kvid 等于目标 kvid，返回当前对象
} }
if (obj.children && obj.children.length > 0) { if (obj.children && obj.children.length > 0) {
var result = _this.findObjectByKvid(obj.children, kvid); // 递归查找子级数组中的对象 var result = _this.findObjectByKvid(obj.children, kvid); // 递归查找子级数组中的对象
if (result) { if (result) {
return result; // 如果在子级数组中找到了目标对象，返回结果 return result; // 如果在子级数组中找到了目标对象，返回结果
} }
...@@ -393,24 +413,45 @@ export default { ...@@ -393,24 +413,45 @@ export default {
return null; // 如果没有找到目标对象，返回 null return null; // 如果没有找到目标对象，返回 null
}, },
// 进入容器 // 进入容器
toActions () { toActions() {
if (this.actionType == 'actions') { if (this.actionType == 'actions') {
this.parentKvid = this.Kvid this.parentKvid = this.Kvid
this.selectr = this.dynamicTagObj this.selectr = this.dynamicTagObj
console.log('abc') let activeItem = this.findObjectByKvid(this.allArray, this.Kvid);
console.log(this.Kvid)
console.log(this.allArray) let activeParentItem = this.findObjectByKvid(this.allArray, activeItem.parentKvid);
let ab = this.findObjectByKvid(this.allArray, this.Kvid); activeItem.children = []
console.log(ab) if (activeParentItem == null) {
ab.children = [] let obj = {}
console.log(this.allArray) 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 { } else {
this.parentKvid = null this.parentKvid = null
} }
}, },
// 新建动作 // 新建动作
newAction () { newAction() {
this.inputVisible = true; this.inputVisible = true;
this.dynamicTagObj = {} this.dynamicTagObj = {}
...@@ -424,7 +465,6 @@ export default { ...@@ -424,7 +465,6 @@ export default {
this.dynamicTagObj.actionName = '新建动作' this.dynamicTagObj.actionName = '新建动作'
this.dynamicTagObj.actionType = this.actionType this.dynamicTagObj.actionType = this.actionType
this.dynamicTagObj.tagId = this.tagId++ this.dynamicTagObj.tagId = this.tagId++
this.Kvid = Math.floor(Math.random() * 100001); this.Kvid = Math.floor(Math.random() * 100001);
this.dynamicTagObj.Kvid = this.Kvid this.dynamicTagObj.Kvid = this.Kvid
if (this.parentKvid != null) { if (this.parentKvid != null) {
...@@ -437,10 +477,35 @@ export default { ...@@ -437,10 +477,35 @@ export default {
this.addDataToParent(this.allArray, this.parentKvid, this.dynamicTagObj) this.addDataToParent(this.allArray, this.parentKvid, this.dynamicTagObj)
console.log(this.allArray) console.log(this.allArray)
}, },
// 根据 Kvid 匹配，如果有相同的就返回，没有就 push
findOrPushObject(dataArray, newObj) {
const existingObj = dataArray.find(obj => obj.Kvid === newObj.Kvid);
if (existingObj) {
// 已经存在相同的 Kvid，返回该对象
return existingObj;
} else {
// 不存在相同的 Kvid，将新对象推送到数组
this.actionAll.push(newObj);
return newObj;
}
},
// 单击标签 // 单击标签
selectTag (item) { selectTag(item) {
this.parentTree = item this.parentTree = item
console.log(item.children) 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) { if (item.children != undefined && item.children.length > 0) {
this.childrenTree = [] this.childrenTree = []
...@@ -450,58 +515,53 @@ export default { ...@@ -450,58 +515,53 @@ export default {
} }
this.ischTree = true this.ischTree = true
} }
console.log(item)
this.dynamicTagObj = item this.dynamicTagObj = item
this.actionName = item.actionName this.actionName = item.actionName
this.actionType = item.actionType this.actionType = item.actionType
this.inputVisible = true this.inputVisible = true
}, },
// 导航标签
onBreadcrumb(item) {
this.deleteObjectsAfterKvid(this.actionAll, item.Kvid)
this.childrenTree = []
this.childrenTree = item.children
},
// 删除标签 // 删除标签
handleClose (tag) { handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1); 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 this.inputVisible = false
}, },
getTableData () { getTableData() {
const $table = this.$refs.xTable const $table = this.$refs.xTable
const removeRecords = $table.getRemoveRecords() const removeRecords = $table.getRemoveRecords()
}, },
async deleteRowEvent (row) { async deleteRowEvent(row) {
console.log(row)
this.tableData = this.tableData.filter(item => item.tableDataID !== row.tableDataID) this.tableData = this.tableData.filter(item => item.tableDataID !== row.tableDataID)
}, },
//开始拖拽事件 //开始拖拽事件
onStart () { onStart() {
this.drag = true; this.drag = true;
}, },
//拖拽结束事件 //拖拽结束事件
onEnd () { onEnd() {
this.drag = false; this.drag = false;
console.log(this.dynamicTags)
}, },
// 创建动作 // 创建动作
submitForm (formName) { submitForm(formName) {
console.log(this.actionName)
// let obj = {}
// let dynamicTag = {}
// obj.taskName = this.taskName
// obj.taskAddress = this.taskAddress
// dynamicTag.actionName = this.actionName
// dynamicTag.actionType = this.actionType
// dynamicTag.tagId = this.tagId++
// console.log(this.actionType)
// obj.dynamicTags = []
// obj.dynamicTags.push(dynamicTag)
// this.dynamicTags.push(dynamicTag)
// this.allData.push(obj)
console.log(this.allData)
this.inputVisible = true this.inputVisible = true
}, },
btnRightClick () { btnRightClick() {
console.log("测试"); console.log("测试");
}, },
handleInputConfirm () { handleInputConfirm() {
let actionName = this.actionName; let actionName = this.actionName;
if (actionName) { if (actionName) {
this.dynamicTags.push(actionName); this.dynamicTags.push(actionName);
...@@ -509,7 +569,7 @@ export default { ...@@ -509,7 +569,7 @@ export default {
this.inputVisible = true; this.inputVisible = true;
this.actionName = ''; this.actionName = '';
}, },
selectElement () { selectElement() {
let _this = this let _this = this
document.oncontextmenu = () => true; document.oncontextmenu = () => true;
document.oncontextmenu = function (e) { document.oncontextmenu = function (e) {
...@@ -548,45 +608,40 @@ export default { ...@@ -548,45 +608,40 @@ export default {
} }
}, },
docClose () { docClose() {
console.log('222')
document.oncontextmenu = () => false; document.oncontextmenu = () => false;
}, },
// // 根据xpath获取元素信息 // // 根据xpath获取元素信息
getElementByXPath (xpath) { getElementByXPath(xpath) {
const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
const element = result.singleNodeValue; const element = result.singleNodeValue;
return element; return element;
}, },
// 获取元素xpath // 获取元素xpath
getElementXPath (element) { getElementXPath(element) {
if (element && element.id) { if (element && element.id) {
// 如果元素有ID，则使用ID作为XPath的一部分 // 如果元素有ID，则使用ID作为XPath的一部分
return `id("${element.id}")`; return `id("${element.id}")`;
} }
if (element === document.body) { if (element === document.body) {
// 如果已经到达根元素（body），停止递归 // 如果已经到达根元素（body），停止递归
return element.tagName; return element.tagName;
} }
let siblings = element.parentNode.children; let siblings = element.parentNode.children;
let index = 1; let index = 1;
for (let i = 0; i < siblings.length; i++) { for (let i = 0; i < siblings.length; i++) {
const sibling = siblings[i]; const sibling = siblings[i];
if (sibling === element) { if (sibling === element) {
// 如果是目标元素，递归调用并添加位置信息 // 如果是目标元素，递归调用并添加位置信息
return `${this.getElementXPath(element.parentNode)}/${element.tagName}[${index}]`; return `${this.getElementXPath(element.parentNode)}/${element.tagName}[${index}]`;
} }
if (sibling.nodeType === 1 && sibling.tagName === element.tagName) { if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
// 如果是相同类型的兄弟节点，增加索引 // 如果是相同类型的兄弟节点，增加索引
index++; index++;
} }
} }
}, },
btnRightClick () { btnRightClick() {
let _this = this let _this = this
document.oncontextmenu = function (e) { document.oncontextmenu = function (e) {
e.preventDefault() e.preventDefault()
...@@ -617,6 +672,15 @@ export default { ...@@ -617,6 +672,15 @@ export default {
</script> </script>
<style> <style>
/* 删除时鼠标手势 */
#closeimg {
cursor: pointer;
}
#Breadcrumb {
cursor: pointer;
}
/* 拖拽窗口大小 */ /* 拖拽窗口大小 */
.tooldrag { .tooldrag {
width: 100%; width: 100%;
......
src/main.js
...@@ -20,7 +20,7 @@ let timer; ...@@ -20,7 +20,7 @@ let timer;
function generateToolkit () { function generateToolkit () {
// global.app = new Vue(ToolKit); // global.app = new Vue(ToolKit);
let h = $(".tooldrag").height(); let h = $(".tooldrag").height();
console.log(h) // console.log(h)
let difference = 26 - h; //获得高度值差 let difference = 26 - h; //获得高度值差
if (difference > 0) { if (difference > 0) {
$(".tooldrag").css("cssText", "height:" + (26 + difference) + "px!important") $(".tooldrag").css("cssText", "height:" + (26 + difference) + "px!important")
...@@ -60,7 +60,7 @@ function generateToolkit () { ...@@ -60,7 +60,7 @@ function generateToolkit () {
// 拖拽右下角改变大小 // 拖拽右下角改变大小
const wrapperToolkit = document.getElementById('wrapperToolkit'); const wrapperToolkit = document.getElementById('wrapperToolkit');
const EasySpiderResizer = document.getElementById('EasySpiderResizer'); const EasySpiderResizer = document.getElementById('EasySpiderResizer');
console.log(EasySpiderResizer) // console.log(EasySpiderResizer)
let mousedown = false; let mousedown = false;
let startX, startY, startWidth, startHeight; let startX, startY, startWidth, startHeight;
......
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