Skip to content

V
Vue-WebDriver
Commit 4d9f974c by 高源
Options

界面优化

parent 47687b56
Showing with 254 additions and 385 deletions
.DS_Store
No preview for this file type
src/App.vue
......@@ -25,21 +25,35 @@
<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;" @click="showInput">新建动作</el-button>
<el-button size="mini" style="width: 60px;height: 25px;" @click="newAction">新建动作</el-button>
</div>
</div>
<el-divider></el-divider>
<!-- 动作集合 -->
<!-- 动作添加 -->
<div style="max-height: 102px;width: 490px;white-space: wrap;display: flex;margin-left: 10px;">
<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>
<el-tag class="boxtags" :key="tag.tagId" v-for="tag in dynamicTags" closable
:disable-transitions="false" @close="handleClose(tag)" @click="selectTag(tag)">
<span style="margin-left: 3px;">{{ tag.actionName }}</span>
<!-- <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
:disable-transitions="false" @close="handleClose(tag)" @click="selectTag(tag)"
v-if="ischTree == false && childrenTree.length >= 0">
{{ tag.actionName }}
</el-tag>
<el-tag class="boxtags" v-if="childrenTree.length > 0 || ischTree == true" :key="item.Kvid"
v-for="item in childrenTree" closable :disable-transitions="false" @close="handleClose(item)"
@click="selectTag(item)">
{{ item.actionName }}
</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>
......@@ -56,11 +70,15 @@
</div>
<div style="margin-right: 5px;">
<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">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div v-if="actionType == 'actions'">
<el-button @click="toActions">进入容器</el-button>
</div>
</div>
<!-- 点击动作 -->
<div style="background-color: white;" v-if="actionType == 'elClick'">
......@@ -70,8 +88,8 @@
</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 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)"
......@@ -182,17 +200,24 @@ export default {
}, {
value: 'pageClose',
label: '关闭页面'
}, {
value: 'actions',
label: '容器'
}],
tableData: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
{ id: 10005, name: 'Test5', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
],
tableData: [],
drag: false,
allData: [],
tagId: 0,
dynamicTagObj: {},
tableDataID: 0,
parentTree: [],
childrenTree: [],
kvid: null,
parentKvid: null,
ischTree: false,
allArray: [
],
selectr: {}
}
},
......@@ -226,16 +251,212 @@ export default {
}
}
// 可以在这里执行自定义逻辑
},
actionType (newVal, oldVal) {
// 可以在这里执行自定义逻辑
}
},
computed: {},
methods: {
handleChange (val) {
console.log(val)
this.actionType == val
let _this = this
// 在输入值发生变化时触发
if (val) {
const targetObject = this.dynamicTags.find(obj => obj.tagId === this.dynamicTagObj.tagId);
if (targetObject) {
// 找到匹配的对象
targetObject.actionType = val; // 设置新的id值
_this.dynamicTagObj.actionType = val
} else {
// 未找到匹配的对象
console.log("未找到匹配的对象");
}
}
},
// 树结构添加数据
addDataToParent (tree, parentKvid, newData) {
let _this = this
_this.childrenTree = []
// 递归函数，用于在树的每一级中查找合适的父节点并添加数据
function addToNode (node, parentKvid, newData) {
if (node.children == undefined) {
node.children = []
}
// 如果当前节点的 kvid 等于 parentKvid，将 newData 添加到当前节点的 children 中
if (node.Kvid === parentKvid) {
node.children.push(newData);
console.log(node)
_this.ischTree = true
for (let i = 0; i < node.children.length; i++) {
_this.childrenTree.push(node.children[i])
}
return true; // 表示数据已添加成功
}
// 递归查找子节点
for (var i = 0; i < node.children.length; i++) {
if (addToNode(node.children[i], parentKvid, newData)) {
return true; // 如果子节点中添加成功，返回 true
}
}
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 () {
this.parentKvid = null
let parentKvid = null
for (let i = 0; i < this.childrenTree.length; i++) {
this.childrenTree[i].actionType == 'actions'
parentKvid = this.childrenTree[i].parentKvid
}
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
} else {
this.childrenTree = ab
}
// ab.children = []
},
// 根据parentKvid找当前节点
findHierarchyByParentKvid (tree, parentKvid) {
let _this = this
for (var i = 0; i < tree.length; i++) {
var node = tree[i];
if (node.Kvid === parentKvid) {
return [node]; // 找到匹配的节点，返回包含该节点的数组
}
if (node.children && node.children.length > 0) {
var result = _this.findHierarchyByParentKvid(node.children, parentKvid);
if (result.length > 0) {
return node.children; // 将当前节点与子级层级连接起来
}
}
}
return []; // 未找到匹配的节点，返回空数组
},
// 根据Kvid找节点
findObjectByKvid (array, kvid) {
let _this = this
for (var i = 0; i < array.length; i++) {
var obj = array[i];
if (obj.Kvid === kvid) {
return obj; // 如果当前对象的 kvid 等于目标 kvid，返回当前对象
}
if (obj.children && obj.children.length > 0) {
var result = _this.findObjectByKvid(obj.children, kvid); // 递归查找子级数组中的对象
if (result) {
return result; // 如果在子级数组中找到了目标对象，返回结果
}
}
}
return null; // 如果没有找到目标对象，返回 null
},
// 进入容器
toActions () {
if (this.actionType == 'actions') {
this.parentKvid = this.Kvid
this.selectr = this.dynamicTagObj
console.log('abc')
console.log(this.Kvid)
console.log(this.allArray)
let ab = this.findObjectByKvid(this.allArray, this.Kvid);
console.log(ab)
ab.children = []
console.log(this.allArray)
} 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)
},
// 单击标签
selectTag (item) {
this.parentTree = item
console.log(item.children)
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
}
console.log(item)
this.dynamicTagObj = item
this.actionName = item.actionName
this.actionType = item.actionType
this.inputVisible = true
},
// 删除标签
handleClose (tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
this.inputVisible = false
......@@ -247,7 +468,7 @@ export default {
},
async deleteRowEvent (row) {
console.log(row)
this.tableData = this.tableData.filter(item => item.name !== row.name)
this.tableData = this.tableData.filter(item => item.tableDataID !== row.tableDataID)
},
//开始拖拽事件
onStart () {
......@@ -258,23 +479,7 @@ export default {
this.drag = false;
console.log(this.dynamicTags)
},
showInput () {
this.inputVisible = true;
this.dynamicTagObj = {}
this.actionName = "新建动作"
this.actionType = ""
let obj = {}
obj.taskName = this.taskName
obj.taskAddress = this.taskAddress
this.dynamicTagObj.actionName = '新建动作'
this.dynamicTagObj.actionType = this.actionType
this.dynamicTagObj.tagId = this.tagId++
console.log(this.actionType)
obj.dynamicTags = []
obj.dynamicTags.push(this.dynamicTagObj)
this.dynamicTags.push(this.dynamicTagObj)
this.allData.push(obj)
},
// 创建动作
submitForm (formName) {
console.log(this.actionName)
......@@ -309,14 +514,22 @@ export default {
document.oncontextmenu = () => true;
document.oncontextmenu = function (e) {
e.preventDefault()
// console.log(e)
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);
......@@ -325,6 +538,7 @@ export default {
obj.xpath = xpath;
obj.content = element.textContent;
// _this.data.push(obj);
// _this.addRow(obj)
} else {
......@@ -404,602 +618,257 @@ export default {
<style>
/* 拖拽窗口大小 */
.tooldrag {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #3384FF;
text-align: center;
font-size: 15px;
color: white;
}
.tooltips {
min-width: 500px;
min-height: 444px;
background-color: white;
position: fixed;
z-index: 9999;
right: 30px;
bottom: 30px;
font-size: 13px !important;
font-weight: normal !important;
border: solid #3384FF 3px;
border-radius: 10px;
-webkit-user-select: none;
/* 文字不可被选中 */
}
.el-card__body,
.el-main {
padding: 0px !important;
}
.el-input__icon {
line-height: 0px !important;
}
/* 分割线 */
.el-divider--horizontal {
margin-top: 0px !important;
margin-bottom: 0px !important;
background-color: #409EFF !important;
}
.el-tag .el-tag__close {
color: #ffffff !important;
}
.el-tag {
background-color: #409EFF !important;
color: #ffffff !important;
padding: 0 !important;
margin-left: 5px;
margin-right: 5px;
margin-top: 1px;
margin-bottom: 1px;
width: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.el-tag .el-icon-close {
line-height: 17px !important;
right: 0px !important;
}
/* .el-tag+.el-tag {
.el-tag+.el-tag {
margin-left: 10px;
} */
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
.innercontent {
text-align: left;
padding-top: 5px !important;
padding-left: 12px !important;
}
.innercontent a {
display: inline-block;
text-decoration: none;
margin-top: 2px !important;
font-size: 13px;
color: #3384FF !important;
cursor: pointer;
text-decoration: none !important;
}
.innercontent a:hover {
color: #3384FF !important;
}
.innercontent span {
font-size: 20px;
color: #3384FF;
line-height: normal;
padding-left: 5px !important;
}
.tooltips button {
font-size: 13px;
border-radius: 5px;
border: solid 1px #409EFF;
background-color: #409EFF;
color: #ffffff;
width: 100px;
height: 30px;
cursor: pointer;
/* margin-left: 15px !important; */
padding: 0 !important;
}
/* 输入框样式 */
.tooltips input[type=text] {
/* display: block; */
/* margin-top: 3px !important; */
/* padding-left: 5px !important; */
/* margin-bottom: 7px !important; */
font-size: 13px;
/* border-radius: 5px; */
/* border: solid 1px #DCDFE6; */
width: 190px;
width: 145px;
height: 20px;
}
.el-input--small .el-input__inner {
width: 130px !important;
width: 140px !important;
}
.el-select .el-input__inner {
width: 110px !important;
}
.tooltips select {
display: block;
margin-top: 7px !important;
padding-left: 5px !important;
margin-bottom: 7px !important;
font-size: 15px;
border-radius: 5px;
border: solid 2px #3384FF;
width: 204px;
height: 30px;
}
.tooltips button:hover {
color: #3384FF;
}
/* 下面用来对冻结表格首行元素和固定表格宽度和高度设定样式 */
.toolkitcontain {
border: 1px solid #cdd !important;
/*width: 280px !important;*/
/* 上面的宽度设定很重要 */
height: 150px;
overflow: auto;
margin-top: 10px !important;
position: relative;
}
.toolkitcontain table {
table-layout: fixed;
border-spacing: 0 !important;
word-break: break-all;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
margin-top: 0px !important;
white-space: nowrap;
width: 100%;
}
.toolkitcontain th,
.toolkitcontain td,
.toolkitcontain tr {
border: 1px solid rgb(78, 78, 78) !important;
height: 25px !important;
width: 100px !important;
text-align: center !important;
font-weight: normal !important;
overflow: hidden !important;
font-size: 11px !important;
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
vertical-align: middle !important;
white-space: nowrap;
}
.toolkitcontain th span {
font-size: 15px;
font-weight: bold;
cursor: pointer;
/*position: absolute;*/
/*position: ;*/
margin-right: 10px;
vertical-align: text-bottom !important;
}
.toolkitcontain th div {
display: inline-block !important;
overflow: hidden !important;
max-width: 90% !important;
}
.toolkitcontain .toolkittb2 {
position: sticky;
top: 0px;
margin-bottom: 0px;
background-color: azure;
z-index: 1000;
}
.toolkitcontain .toolkittb4 {
position: absolute;
}
#closeButton {
position: absolute;
bottom: 0;
right: 0;
cursor: pointer;
padding: 5px;
opacity: 0.05;
}
#closeButton:hover {
opacity: 1.0;
}
.el-select-dropdown {
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: 2px 0 !important;
}
.item {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
/*选中样式*/
.chosen {
border: solid 2px #3089dc !important;
}
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
background-color: #FFFFFF;
}
/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
background-color: #bfbfbf;
border-radius: 5px;
border: 1px solid #F1F1F1;
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
background-color: #A8A8A8;
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
background-color: #787878;
}
/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
background-color: #FFFFFF;
}
</style>
src/main.js
......@@ -113,7 +113,7 @@ function generateToolkit () {
}, 3000);
}
// window.onload = function () {
window.onload = function () {
let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
......@@ -147,5 +147,5 @@ document.addEventListener("DOMContentLoaded", function () {
// 执行其他操作
});
generateToolkit();
// }
}
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