Skip to content

V
Vue-WebDriver
Commit a0757b67 by 高源
Options

动作流功能初版

parent 4d9f974c
Showing with 940 additions and 876 deletions
.DS_Store
No preview for this file type
src/App.vue
<template> <template>
<!-- <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"> <img style="width: 20px;height: 20px;" src="./assets/logo.png">
<img style="width: 20px;height: 20px;" src="./assets/logo.png"> <span style="padding-left: 3px;">K5 网页自动化工具</span>
<span style="padding-left: 3px;">K5 网页自动化工具</span> </div>
</div> <!-- 任务信息 -->
<!-- 任务信息 --> <div style="display: flex;align-items: center;height: 60px;">
<div style="display: flex;align-items: center;height: 60px;"> <div style="width: 85%;display: flex;flex-direction: column;text-align: left;">
<div style="width: 85%;display: flex;flex-direction: column;text-align: left;"> <div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;">
<div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;"> <span style="width: 95px;padding-left: 5px;">任务名称：</span>
<span style="width: 95px;padding-left: 5px;">任务名称：</span> <el-input v-model="taskName" placeholder="请输入内容" style="height: 20px;"></el-input>
<el-input v-model="taskName" placeholder="请输入内容" style="height: 20px;"></el-input> </div>
</div> <div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;">
<div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;"> <span style="width: 95px; padding-left: 5px;">任务地址：</span>
<span style="width: 95px; padding-left: 5px;">任务地址：</span> <el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input>
<el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input> </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;" @click="submitForm">保存任务</el-button>
<el-button size="mini" style="width: 60px;height: 25px;margin-bottom: 5px;margin-left: 10px;" <el-button size="mini" style="width: 60px;height: 25px;" @click="newAction">新建动作</el-button>
@click="submitForm">保存任务</el-button> </div>
<el-button size="mini" style="width: 60px;height: 25px;" @click="newAction">新建动作</el-button> </div>
</div> <el-divider></el-divider>
</div> <!-- 动作集合 -->
<el-divider></el-divider> <div>
<!-- 动作集合 --> <div style="height: 35px;display: flex;justify-content: flex-start;align-items: center;margin-left: 15px;">
<span>动作集合:</span>
<div <span style="margin-left: 10px;" @click="onBreadcrumb(item)" v-for="item in actionAll" :key="item.kvid">
style="margin-bottom: 5px;margin-left: 15px;margin-right: 15px;width: 470px;overflow: auto;white-space: nowrap;display: flex;"> <span id="Breadcrumb" style="color: blue;">{{ item.name }}</span> /
<el-button @click="goback">返回</el-button> </span>
<draggable v-model="dynamicTags" chosenClass="chosen" forceFallback="true" group="people" animation="1000" </div>
@start="onStart" @end="onEnd"> </div>
<transition-group> <!-- 动作标签 -->
<!-- <div class="item" v-for="element in myArray" :key="element.id">{{ element.name }}</div> --> <div style="margin-bottom: 5px;margin-left: 15px;margin-right: 15px;width: 470px;overflow: auto;white-space: nowrap;display: flex;">
<el-tag class="boxtags" :key="tag.Kvid" v-for="tag in allArray" closable <!-- <el-button @click="goback">返回</el-button> -->
:disable-transitions="false" @close="handleClose(tag)" @click="selectTag(tag)" <draggable v-model="dynamicTags" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
v-if="ischTree == false && childrenTree.length >= 0"> <transition-group>
{{ tag.actionName }} <!-- <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> <div style="display: flex;align-items: center;">
<span style="margin-left: 3px;">{{ tag.actionName }}</span>
<el-tag class="boxtags" v-if="childrenTree.length > 0 || ischTree == true" :key="item.Kvid" <img id="closeimg" @click="handleClose(index)" style="width: 15px;" src="./assets/close.png">
v-for="item in childrenTree" closable :disable-transitions="false" @close="handleClose(item)" </div>
@click="selectTag(item)"> </el-tag>
{{ item.actionName }} <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> <div style="display: flex;align-items: center;">
<span style="margin-left: 3px;">{{ item.actionName }}</span>
<!-- <el-tag class="boxtags" :key="index" v-for="(item, index) in dynamicTags" closable :disable-transitions="false" @close="handleClose(index)"> <img id="closeimg" @click="handleClose(index)" style="width: 15px;" src="./assets/close.png">
{{ item.actionName }} </div>
</el-tag> --> </el-tag>
</transition-group> <!-- <el-tag class="boxtags" :key="index" v-for="(item, index) in dynamicTags" closable :disable-transitions="false" @close="handleClose(index)">
</draggable> {{ item.actionName }}
</div> </el-tag> -->
<el-divider></el-divider> </transition-group>
<!-- 动作配置 --> </draggable>
<el-card class="box-card" v-if="inputVisible"> </div>
<div style="height: 35px;display: flex;justify-content: space-evenly;align-items: center;"> <el-divider></el-divider>
<span>动作配置:</span> <!-- 动作配置 -->
<div style="width: 211px;display: flex;align-items: center;"> <el-card class="box-card" v-if="inputVisible">
<span style="width: 90px;">动作名称:</span> <div style="height: 35px;display: flex;justify-content: space-evenly;align-items: center;">
<!-- ref="saveTagInput" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" --> <span>动作配置:</span>
<el-input class="input-new-tag dongzuo" v-model="actionName" size="small" placeholder="请输入动作名称"> <div style="width: 211px;display: flex;align-items: center;">
</el-input> <span style="width: 90px;">动作名称:</span>
</div> <!-- ref="saveTagInput" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" -->
<div style="margin-right: 5px;"> <el-input class="input-new-tag dongzuo" v-model="actionName" size="small" placeholder="请输入动作名称">
<span style="width: 90px;">动作类型:</span> </el-input>
<el-select id="eventType" name="eventType" v-model="actionType" placeholder="请选择类型" </div>
@change="handleChange"> <div style="margin-right: 5px;">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <span style="width: 90px;">动作类型:</span>
</el-option> <el-select id="eventType" name="eventType" v-model="actionType" placeholder="请选择类型" @change="handleChange" filterable remote>
</el-select> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</div> </el-option>
<div v-if="actionType == 'actions'"> </el-select>
<el-button @click="toActions">进入容器</el-button> </div>
</div> <div v-if="actionType == 'actions'">
</div> <el-button @click="toActions">进入容器</el-button>
<!-- 点击动作 --> </div>
<div style="background-color: white;" v-if="actionType == 'elClick'"> </div>
<div style="height: 35px;margin-left: 15px;text-align: left;"> <!-- 选择动作 -->
<el-button size="small" style="" class="button-new-tag" @click="selectElement">选择元素</el-button> <div style="background-color: white;" v-if="actionType == 'select'">
<span style="margin-left: 3px;">元素信息如下:</span> <div style="height: 35px;margin-left: 15px;text-align: left;">
</div> <el-button size="small" style="" class="button-new-tag" @click="selectElement">选择元素</el-button>
<!-- 表格信息 --> <span style="margin-left: 3px;">元素信息如下:</span>
<vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220"> </div>
<vxe-column field="xpath" title="xpath"></vxe-column> <!-- 表格信息 -->
<vxe-column field="content" title="content"></vxe-column> <vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220">
<vxe-column title="操作" width="100"> <vxe-column field="xpath" title="xpath"></vxe-column>
<template #default="{ row }"> <vxe-column field="content" title="content"></vxe-column>
<vxe-button status="danger" content="删除" @click="deleteRowEvent(row)" <vxe-column title="操作" width="100">
style="margin-right: 20px;width: 50px;"></vxe-button> <template #default="{ row }">
</template> <vxe-button status="danger" content="删除" @click="deleteRowEvent(row)" style="margin-right: 20px;width: 50px;"></vxe-button>
</vxe-column> </template>
</vxe-table> </vxe-column>
</vxe-table>
</div>
<!-- 右击动作 --> </div>
<div v-if="actionType == 'rightclick'"> <!-- 点击动作 -->
右击 <div v-if="actionType == 'elClick'">
</div> <div style="margin-left: 15px;">
<!-- 提交动作 --> <el-button size="small" class="button-new-tag">选择点击元素</el-button>
<div v-if="actionType == 'submit'"> </div>
提交动作 </div>
</div> <!-- 等待动作 -->
<!-- 等待动作 --> <div v-if="actionType == 'wait'" style="display: flex;justify-content: center;margin-top: 10px;">
<div v-if="actionType == 'wait'"> <div style="display: flex;align-items: center;">
等待动作 <span style="width: 130px;">输入等待时间:</span>
</div> <!-- ref="saveTagInput" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" -->
<!-- 输入动作 --> <el-input class="input-new-tag dongzuo" size="small" placeholder="输入等待时间">
<div v-if="actionType == 'input'"> <template slot="suffix">单位:s</template>
输入动作 </el-input>
</div> </div>
<!-- 选择动作 --> </div>
<div v-if="actionType == 'select'"> <!-- 输入动作 -->
选择动作 <div v-if="actionType == 'input'">
</div> <div style="margin-left: 15px;">
<!-- 鼠标移动 --> <el-button size="small" class="button-new-tag">选择输入框</el-button>
<div v-if="actionType == 'mouseMove'"> <div style="display: flex;justify-content: center;">
鼠标移动 <div style="display: flex;align-items: center;margin-top: 10px;">
</div> <span style="width: 80px;">输入内容:</span>
<!-- 脚本执行 --> <!-- ref="saveTagInput" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" -->
<div v-if="actionType == 'pageJavascipt'"> <el-input class="input-new-tag dongzuo" size="small" placeholder="输入内容">
脚本执行 </el-input>
</div> </div>
<!-- 循环点击 --> </div>
<div v-if="actionType == 'loopClick'"> </div>
循环点击 </div>
</div> <!-- 循环点击 -->
<!-- 采集单元素 --> <div v-if="actionType == 'loopClick'">
<div v-if="actionType == 'collectSingleElements'"> <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 == 'collectionTable'"> <!-- 采集单元素 -->
采集表 <div style="background-color: white;" v-if="actionType == 'collectSingleElements'">
</div> <div style="height: 35px;margin-left: 15px;text-align: left;">
<!-- 关闭页面 --> <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
<div v-if="actionType == 'pageClose'"> <span style="margin-left: 3px;">元素信息如下:</span>
关闭页面 </div>
</div> <!-- 表格信息 -->
</el-card> <vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220">
<vxe-column field="name" title="xpath"></vxe-column>
</div> <vxe-column field="sex" title="content"></vxe-column>
</div> <vxe-column title="操作" width="100">
</template> <template #default="{ row }">
<vxe-button status="danger" content="删除" @click="deleteRowEvent(row)" style="margin-right: 20px;width: 50px;"></vxe-button>
<script> </template>
import VXETable from 'vxe-table' </vxe-column>
import draggable from 'vuedraggable' </vxe-table>
export default { </div>
name: 'App', <!-- 关闭页面 -->
components: { draggable }, <div v-if="actionType == 'pageClose'">
props: {}, <div style="margin-left: 15px;">
data () { <el-button size="small" class="button-new-tag">点击关闭页面</el-button>
return { </div>
taskName: '', </div>
taskAddress: 'https://k5.kivii.org/storages/app/files/bundle.js', <!-- 提交动作 -->
actionName: '', <div v-if="actionType == 'submit'">
actionType: '', <el-empty description="提交动作暂无"></el-empty>
dynamicTags: [], </div>
inputVisible: false, <!-- 鼠标移动 -->
options: [{ <div v-if="actionType == 'mouseMove'">
value: 'elClick', <el-empty description="鼠标移动暂无"></el-empty>
label: '点击' </div>
}, { <!-- 脚本执行 -->
value: 'rightclick', <div v-if="actionType == 'pageJavascipt'">
label: '右击' <el-empty description="脚本执行暂无"></el-empty>
}, { </div>
value: 'submit', <!-- 采集表 -->
label: '提交' <div v-if="actionType == 'collectionTable'">
}, { <el-empty description="采集表暂无"></el-empty>
value: 'wait', </div>
label: '等待' </el-card>
}, {
value: 'input', </div>
label: '输入' </div>
}, { </template>
value: 'select',
label: '选择' <script>
}, { import VXETable, { t } from 'vxe-table'
value: 'mouseMove', import draggable from 'vuedraggable'
label: '鼠标移动' export default {
}, { name: 'App',
value: 'pageJavascipt', components: { draggable },
label: '脚本执行' props: {},
}, { data() {
value: 'loopClick', return {
label: '循环点击' taskName: '',
}, { taskAddress: 'https://k5.kivii.org/storages/app/files/bundle.js',
value: 'collectSingleElements', actionName: '',
label: '采集单元素' actionType: '',
}, { dynamicTags: [],
value: 'collectionTable', inputVisible: false,
label: '采集表' options: [{
}, { value: 'select',
value: 'pageClose', label: '选择'
label: '关闭页面' }, {
}, { value: 'elClick',
value: 'actions', label: '点击'
label: '容器' }, {
}], value: 'wait',
tableData: [], label: '等待'
drag: false, }, {
allData: [], value: 'input',
tagId: 0, label: '输入'
dynamicTagObj: {}, }, {
tableDataID: 0, value: 'loopClick',
parentTree: [], label: '循环点击'
childrenTree: [], }, {
kvid: null, value: 'collectSingleElements',
parentKvid: null, label: '采集单元素'
ischTree: false, }, {
allArray: [ value: 'pageClose',
], label: '关闭页面'
selectr: {} }, {
value: 'mouseMove',
} label: '鼠标移动'
}, }, {
created () { }, value: 'pageJavascipt',
mounted () { label: '脚本执行'
this.$nextTick(() => { }, {
window.addEventListener('resize', this.onResize); value: 'collectionTable',
}); label: '采集表'
}, {
this.$watch('dynamicTagObj.actionName', (newVal, oldVal) => { value: 'submit',
this.dynamicTagObj.actionName = newVal label: '提交'
}); }, {
value: 'actions',
}, label: '容器'
watch: { }],
actionName (newVal, oldVal) { tableData: [],
// 在输入值发生变化时触发 drag: false,
if (newVal !== oldVal) { allData: [],
console.log(newVal) tagId: 0,
console.log(this.dynamicTags) dynamicTagObj: {},
const targetObject = this.dynamicTags.find(obj => obj.tagId === this.dynamicTagObj.tagId); tableDataID: 0,
parentTree: [],
if (targetObject) { childrenTree: [],
// 找到匹配的对象 kvid: null,
targetObject.actionName = newVal; // 设置新的id值 parentKvid: null,
this.dynamicTagObj.actionName = newVal ischTree: false,
console.log(this.dynamicTags) allArray: [
} else { ],
// 未找到匹配的对象 selectr: {},
console.log("未找到匹配的对象"); actionAll: []
}
} }
// 可以在这里执行自定义逻辑 },
}, created() { },
actionType (newVal, oldVal) { mounted() {
this.$nextTick(() => {
window.addEventListener('resize', this.onResize);
// 可以在这里执行自定义逻辑 });
}
}, this.$watch('dynamicTagObj.actionName', (newVal, oldVal) => {
computed: {}, this.dynamicTagObj.actionName = newVal
methods: { });
handleChange (val) {
console.log(val) },
this.actionType == val watch: {
let _this = this actionName(newVal, oldVal) {
// 在输入值发生变化时触发 // 在输入值发生变化时触发
if (val) { if (newVal !== oldVal) {
const targetObject = this.dynamicTags.find(obj => obj.tagId === this.dynamicTagObj.tagId); console.log(newVal)
if (targetObject) { console.log(this.dynamicTags)
// 找到匹配的对象 const targetObject = this.dynamicTags.find(obj => obj.tagId === this.dynamicTagObj.tagId);
targetObject.actionType = val; // 设置新的id值
_this.dynamicTagObj.actionType = val if (targetObject) {
// 找到匹配的对象
} else { targetObject.actionName = newVal; // 设置新的id值
// 未找到匹配的对象 this.dynamicTagObj.actionName = newVal
console.log("未找到匹配的对象"); console.log(this.dynamicTags)
} } else {
// 未找到匹配的对象
} console.log("未找到匹配的对象");
}, }
// 树结构添加数据 }
addDataToParent (tree, parentKvid, newData) { // 可以在这里执行自定义逻辑
let _this = this },
_this.childrenTree = [] actionType(newVal, oldVal) {
// 递归函数，用于在树的每一级中查找合适的父节点并添加数据
function addToNode (node, parentKvid, newData) {
if (node.children == undefined) { // 可以在这里执行自定义逻辑
node.children = [] }
} },
// 如果当前节点的 kvid 等于 parentKvid，将 newData 添加到当前节点的 children 中 computed: {},
if (node.Kvid === parentKvid) { methods: {
node.children.push(newData); handleChange(val) {
console.log(node) this.actionType == val
_this.ischTree = true let _this = this
// 在输入值发生变化时触发
for (let i = 0; i < node.children.length; i++) { if (val) {
_this.childrenTree.push(node.children[i]) const targetObject = this.dynamicTags.find(obj => obj.tagId === this.dynamicTagObj.tagId);
if (targetObject) {
} // 找到匹配的对象
return true; // 表示数据已添加成功 targetObject.actionType = val; // 设置新的id值
} _this.dynamicTagObj.actionType = val
// 递归查找子节点 } else {
for (var i = 0; i < node.children.length; i++) { // 未找到匹配的对象
if (addToNode(node.children[i], parentKvid, newData)) { console.log("未找到匹配的对象");
return true; // 如果子节点中添加成功，返回 true }
}
} }
},
return false; // 表示未找到合适的父节点 // 根据 Kvid 找到对应的对象，并将匹配到的对象后面的所有对象数据删除
} deleteObjectsAfterKvid(dataArray, targetKvid) {
const index = dataArray.findIndex(obj => obj.Kvid === targetKvid);
// 遍历初始树结构，尝试添加数据 if (index !== -1) {
for (var i = 0; i < tree.length; i++) { // 找到匹配的对象
if (addToNode(tree[i], parentKvid, newData)) { dataArray.splice(index + 1);
return; // 如果在当前节点中添加成功，结束函数 } else {
} console.log("未找到匹配的对象");
} }
},
// 如果在整个树中都未找到合适的父节点，可以选择不添加数据或抛出错误 // 树结构添加数据
// console.error('Parent node not found for kvid: ' + parentKvid); addDataToParent(tree, parentKvid, newData) {
tree.push(newData); let _this = this
}, _this.childrenTree = []
// 递归函数，用于在树的每一级中查找合适的父节点并添加数据
function addToNode(node, parentKvid, newData) {
// 返回上一级目录 if (node.children == undefined) {
goback () { node.children = []
this.parentKvid = null }
let parentKvid = null // 如果当前节点的 kvid 等于 parentKvid，将 newData 添加到当前节点的 children 中
for (let i = 0; i < this.childrenTree.length; i++) { if (node.Kvid === parentKvid) {
this.childrenTree[i].actionType == 'actions' node.children.push(newData);
parentKvid = this.childrenTree[i].parentKvid _this.ischTree = true
} for (let i = 0; i < node.children.length; i++) {
console.log(parentKvid) _this.childrenTree.push(node.children[i])
}
// bug return true; // 表示数据已添加成功
let ab = this.findHierarchyByParentKvid(this.allArray, parentKvid); }
console.log(ab)
if (ab.length == 0) return // 递归查找子节点
if (ab[0].parentKvid == undefined || ab[0].parentKvid == null) { for (var i = 0; i < node.children.length; i++) {
this.childrenTree = this.allArray if (addToNode(node.children[i], parentKvid, newData)) {
} else { return true; // 如果子节点中添加成功，返回 true
this.childrenTree = ab }
} }
return false; // 表示未找到合适的父节点
}
// ab.children = [] // 遍历初始树结构，尝试添加数据
}, for (var i = 0; i < tree.length; i++) {
// 根据parentKvid找当前节点 if (addToNode(tree[i], parentKvid, newData)) {
findHierarchyByParentKvid (tree, parentKvid) { return; // 如果在当前节点中添加成功，结束函数
let _this = this }
for (var i = 0; i < tree.length; i++) { }
var node = tree[i];
// 如果在整个树中都未找到合适的父节点，可以选择不添加数据或抛出错误
if (node.Kvid === parentKvid) { // console.error('Parent node not found for kvid: ' + parentKvid);
tree.push(newData);
return [node]; // 找到匹配的节点，返回包含该节点的数组 },
}
if (node.children && node.children.length > 0) { // 返回上一级目录
var result = _this.findHierarchyByParentKvid(node.children, parentKvid); goback() {
this.parentKvid = null
if (result.length > 0) { this.childrenTree = []
let activeItem = this.findObjectByKvid(this.allArray, this.Kvid);
return node.children; // 将当前节点与子级层级连接起来 let activeParentItem = this.findObjectByKvid(this.allArray, activeItem.parentKvid);
} let activeParentsItem = this.findObjectByKvid(this.allArray, activeParentItem.parentKvid);
} if (activeParentsItem == null) {
} this.childrenTree = this.allArray
} else {
return []; // 未找到匹配的节点，返回空数组 for (let i = 0; i < activeParentsItem.children.length; i++) {
}, this.childrenTree.push(activeParentsItem.children[i])
// 根据Kvid找节点 // }
findObjectByKvid (array, kvid) { }
let _this = this this.Kvid = activeParentItem.Kvid
for (var i = 0; i < array.length; i++) { }
var obj = array[i]; },
// 根据parentKvid找当前节点
if (obj.Kvid === kvid) { findHierarchyByParentKvid(tree, parentKvid) {
return obj; // 如果当前对象的 kvid 等于目标 kvid，返回当前对象 let _this = this
} for (var i = 0; i < tree.length; i++) {
var node = tree[i];
if (obj.children && obj.children.length > 0) { if (node.Kvid === parentKvid) {
var result = _this.findObjectByKvid(obj.children, kvid); // 递归查找子级数组中的对象 return [node]; // 找到匹配的节点，返回包含该节点的数组
}
if (result) { if (node.children && node.children.length > 0) {
return result; // 如果在子级数组中找到了目标对象，返回结果 var result = _this.findHierarchyByParentKvid(node.children, parentKvid);
} if (result.length > 0) {
} return node.children; // 将当前节点与子级层级连接起来
} }
}
return null; // 如果没有找到目标对象，返回 null }
},
// 进入容器 return []; // 未找到匹配的节点，返回空数组
toActions () { },
if (this.actionType == 'actions') { // 根据Kvid找节点
this.parentKvid = this.Kvid findObjectByKvid(array, kvid) {
this.selectr = this.dynamicTagObj let _this = this
console.log('abc') for (var i = 0; i < array.length; i++) {
console.log(this.Kvid) var obj = array[i];
console.log(this.allArray) if (obj.Kvid === kvid) {
let ab = this.findObjectByKvid(this.allArray, this.Kvid); return obj; // 如果当前对象的 kvid 等于目标 kvid，返回当前对象
console.log(ab) }
ab.children = [] if (obj.children && obj.children.length > 0) {
console.log(this.allArray) var result = _this.findObjectByKvid(obj.children, kvid); // 递归查找子级数组中的对象
} else { if (result) {
this.parentKvid = null return result; // 如果在子级数组中找到了目标对象，返回结果
} }
}
}, }
// 新建动作
newAction () { return null; // 如果没有找到目标对象，返回 null
},
this.inputVisible = true; // 进入容器
this.dynamicTagObj = {} toActions() {
this.actionName = "新建动作" if (this.actionType == 'actions') {
this.actionType = "" this.parentKvid = this.Kvid
this.tableDataID = 0 this.selectr = this.dynamicTagObj
this.kvid = null let activeItem = this.findObjectByKvid(this.allArray, this.Kvid);
let obj = {}
obj.taskName = this.taskName let activeParentItem = this.findObjectByKvid(this.allArray, activeItem.parentKvid);
obj.taskAddress = this.taskAddress activeItem.children = []
this.dynamicTagObj.actionName = '新建动作' if (activeParentItem == null) {
this.dynamicTagObj.actionType = this.actionType let obj = {}
this.dynamicTagObj.tagId = this.tagId++ obj.name = '根'
obj.Kvid = 123
this.Kvid = Math.floor(Math.random() * 100001); obj.children = []
this.dynamicTagObj.Kvid = this.Kvid for (let i = 0; i < this.allArray.length; i++) {
if (this.parentKvid != null) { obj.children.push(this.allArray[i])
this.dynamicTagObj.parentKvid = this.parentKvid
}
} // this.actionAll.push(obj)
obj.dynamicTags = [] this.findOrPushObject(this.actionAll, obj)
obj.dynamicTags.push(this.dynamicTagObj) } else {
this.dynamicTags.push(this.dynamicTagObj) let obj = {}
this.addDataToParent(this.allArray, this.parentKvid, this.dynamicTagObj) obj.name = activeParentItem.actionName
console.log(this.allArray) obj.Kvid = activeParentItem.Kvid
}, obj.children = []
// 单击标签 for (let i = 0; i < activeParentItem.children.length; i++) {
selectTag (item) { obj.children.push(activeParentItem.children[i])
this.parentTree = item
console.log(item.children) }
// this.actionAll.push(obj)
if (item.children != undefined && item.children.length > 0) { this.findOrPushObject(this.actionAll, obj)
this.childrenTree = [] }
for (let i = 0; i < item.children.length; i++) {
this.childrenTree.push(item.children[i]) } else {
this.parentKvid = null
} }
this.ischTree = true
} },
console.log(item) // 新建动作
this.dynamicTagObj = item newAction() {
this.actionName = item.actionName
this.actionType = item.actionType this.inputVisible = true;
this.inputVisible = true this.dynamicTagObj = {}
}, this.actionName = "新建动作"
// 删除标签 this.actionType = ""
handleClose (tag) { this.tableDataID = 0
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1); this.kvid = null
this.inputVisible = false let obj = {}
}, obj.taskName = this.taskName
getTableData () { obj.taskAddress = this.taskAddress
const $table = this.$refs.xTable this.dynamicTagObj.actionName = '新建动作'
const removeRecords = $table.getRemoveRecords() this.dynamicTagObj.actionType = this.actionType
this.dynamicTagObj.tagId = this.tagId++
}, this.Kvid = Math.floor(Math.random() * 100001);
async deleteRowEvent (row) { this.dynamicTagObj.Kvid = this.Kvid
console.log(row) if (this.parentKvid != null) {
this.tableData = this.tableData.filter(item => item.tableDataID !== row.tableDataID) this.dynamicTagObj.parentKvid = this.parentKvid
},
//开始拖拽事件 }
onStart () { obj.dynamicTags = []
this.drag = true; obj.dynamicTags.push(this.dynamicTagObj)
}, this.dynamicTags.push(this.dynamicTagObj)
//拖拽结束事件 this.addDataToParent(this.allArray, this.parentKvid, this.dynamicTagObj)
onEnd () { console.log(this.allArray)
this.drag = false; },
console.log(this.dynamicTags) // 根据 Kvid 匹配，如果有相同的就返回，没有就 push
}, findOrPushObject(dataArray, newObj) {
const existingObj = dataArray.find(obj => obj.Kvid === newObj.Kvid);
// 创建动作
submitForm (formName) { if (existingObj) {
console.log(this.actionName) // 已经存在相同的 Kvid，返回该对象
// let obj = {} return existingObj;
// let dynamicTag = {} } else {
// obj.taskName = this.taskName // 不存在相同的 Kvid，将新对象推送到数组
// obj.taskAddress = this.taskAddress this.actionAll.push(newObj);
// dynamicTag.actionName = this.actionName return newObj;
// dynamicTag.actionType = this.actionType }
// dynamicTag.tagId = this.tagId++ },
// console.log(this.actionType) // 单击标签
// obj.dynamicTags = [] selectTag(item) {
// obj.dynamicTags.push(dynamicTag) this.parentTree = item
// this.dynamicTags.push(dynamicTag) if (item.actionType == 'actions') {
// this.allData.push(obj) let obj = {}
console.log(this.allData) obj.name = item.actionName
this.inputVisible = true obj.Kvid = item.Kvid
}, obj.children = []
btnRightClick () { for (let i = 0; i < item.children.length; i++) {
console.log("测试"); obj.children.push(item.children[i])
},
handleInputConfirm () { }
let actionName = this.actionName;
if (actionName) { this.findOrPushObject(this.actionAll, obj)
this.dynamicTags.push(actionName); }
} this.Kvid = item.Kvid
this.inputVisible = true;
this.actionName = ''; if (item.children != undefined && item.children.length > 0) {
}, this.childrenTree = []
selectElement () { for (let i = 0; i < item.children.length; i++) {
let _this = this this.childrenTree.push(item.children[i])
document.oncontextmenu = () => true;
document.oncontextmenu = function (e) { }
e.preventDefault() this.ischTree = true
console.log(e.target.style) }
var targetElement = e.target; this.dynamicTagObj = item
e.target.style.backgroundColor = "red" this.actionName = item.actionName
console.log('右键点击发生在元素：', targetElement); this.actionType = item.actionType
console.log(e) this.inputVisible = true
const xpath = _this.getElementXPath(targetElement); },
console.log("XPath:", xpath); // 导航标签
const element = _this.getElementByXPath(xpath); onBreadcrumb(item) {
console.log(element) this.deleteObjectsAfterKvid(this.actionAll, item.Kvid)
_this.docClose() this.childrenTree = []
let obj = {} this.childrenTree = item.children
obj.xpath = xpath; },
obj.content = e.target.innerText // 删除标签
obj.tableDataID = _this.tableDataID++; handleClose(tag) {
_this.tableData.push(obj) console.log(tag)
if (this.childrenTree.length > 0) {
if (element) { this.childrenTree.splice(this.childrenTree.indexOf(tag), 1);
// 执行你的操作，例如获取元素的文本内容或属性 } else {
console.log("元素文本内容:", element.textContent); this.allArray.splice(this.allArray.indexOf(tag), 1);
console.log("元素属性值:", element.getAttribute("yourAttribute")); }
let obj = {} this.inputVisible = false
obj.xpath = xpath; },
obj.content = element.textContent; getTableData() {
const $table = this.$refs.xTable
const removeRecords = $table.getRemoveRecords()
// _this.data.push(obj);
// _this.addRow(obj) },
} else { async deleteRowEvent(row) {
console.log("未找到匹配的元素"); this.tableData = this.tableData.filter(item => item.tableDataID !== row.tableDataID)
} },
//开始拖拽事件
} onStart() {
this.drag = true;
}, },
docClose () { //拖拽结束事件
console.log('222') onEnd() {
document.oncontextmenu = () => false; this.drag = false;
},
// // 根据xpath获取元素信息 },
getElementByXPath (xpath) {
const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); // 创建动作
const element = result.singleNodeValue; submitForm(formName) {
return element; this.inputVisible = true
}, },
// 获取元素xpath btnRightClick() {
getElementXPath (element) { console.log("测试");
if (element && element.id) { },
// 如果元素有ID，则使用ID作为XPath的一部分 handleInputConfirm() {
return `id("${element.id}")`; let actionName = this.actionName;
} if (actionName) {
this.dynamicTags.push(actionName);
if (element === document.body) { }
// 如果已经到达根元素（body），停止递归 this.inputVisible = true;
return element.tagName; this.actionName = '';
} },
selectElement() {
let siblings = element.parentNode.children; let _this = this
let index = 1; document.oncontextmenu = () => true;
document.oncontextmenu = function (e) {
for (let i = 0; i < siblings.length; i++) { e.preventDefault()
const sibling = siblings[i]; console.log(e.target.style)
if (sibling === element) { var targetElement = e.target;
// 如果是目标元素，递归调用并添加位置信息 e.target.style.backgroundColor = "red"
return `${this.getElementXPath(element.parentNode)}/${element.tagName}[${index}]`; console.log('右键点击发生在元素：', targetElement);
} console.log(e)
const xpath = _this.getElementXPath(targetElement);
if (sibling.nodeType === 1 && sibling.tagName === element.tagName) { console.log("XPath:", xpath);
// 如果是相同类型的兄弟节点，增加索引 const element = _this.getElementByXPath(xpath);
index++; console.log(element)
} _this.docClose()
} let obj = {}
}, obj.xpath = xpath;
btnRightClick () { obj.content = e.target.innerText
let _this = this obj.tableDataID = _this.tableDataID++;
document.oncontextmenu = function (e) { _this.tableData.push(obj)
e.preventDefault()
// console.log(e) if (element) {
var targetElement = e.target; // 执行你的操作，例如获取元素的文本内容或属性
console.log('右键点击发生在元素：', targetElement); console.log("元素文本内容:", element.textContent);
const xpath = _this.getElementXPath(targetElement); console.log("元素属性值:", element.getAttribute("yourAttribute"));
console.log("XPath:", xpath); let obj = {}
const element = _this.getElementByXPath(xpath); obj.xpath = xpath;
console.log(element) obj.content = element.textContent;
if (element) {
// 执行你的操作，例如获取元素的文本内容或属性
console.log("元素文本内容:", element.textContent); // _this.data.push(obj);
console.log("元素属性值:", element.getAttribute("yourAttribute")); // _this.addRow(obj)
let obj = {} } else {
obj.xpath = xpath; console.log("未找到匹配的元素");
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);
</script> const element = result.singleNodeValue;
return element;
<style> },
/* 拖拽窗口大小 */ // 获取元素xpath
.tooldrag { getElementXPath(element) {
width: 100%; if (element && element.id) {
display: flex; // 如果元素有ID，则使用ID作为XPath的一部分
justify-content: center; return `id("${element.id}")`;
align-items: center; }
background-color: #3384FF; if (element === document.body) {
text-align: center; // 如果已经到达根元素（body），停止递归
font-size: 15px; return element.tagName;
color: white; }
} let siblings = element.parentNode.children;
let index = 1;
.tooltips { for (let i = 0; i < siblings.length; i++) {
min-width: 500px; const sibling = siblings[i];
min-height: 444px; if (sibling === element) {
background-color: white; // 如果是目标元素，递归调用并添加位置信息
position: fixed; return `${this.getElementXPath(element.parentNode)}/${element.tagName}[${index}]`;
z-index: 9999; }
right: 30px; if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
bottom: 30px; // 如果是相同类型的兄弟节点，增加索引
font-size: 13px !important; index++;
font-weight: normal !important; }
border: solid #3384FF 3px; }
border-radius: 10px; },
-webkit-user-select: none; btnRightClick() {
/* 文字不可被选中 */ let _this = this
} document.oncontextmenu = function (e) {
e.preventDefault()
.el-card__body, // console.log(e)
.el-main { var targetElement = e.target;
padding: 0px !important; console.log('右键点击发生在元素：', targetElement);
} const xpath = _this.getElementXPath(targetElement);
console.log("XPath:", xpath);
.el-input__icon { const element = _this.getElementByXPath(xpath);
line-height: 0px !important; console.log(element)
} if (element) {
// 执行你的操作，例如获取元素的文本内容或属性
/* 分割线 */ console.log("元素文本内容:", element.textContent);
.el-divider--horizontal { console.log("元素属性值:", element.getAttribute("yourAttribute"));
margin-top: 0px !important; let obj = {}
margin-bottom: 0px !important; obj.xpath = xpath;
background-color: #409EFF !important; obj.content = element.textContent;
} // _this.data.push(obj);
// _this.addRow(obj)
.el-tag .el-tag__close { } else {
color: #ffffff !important; console.log("未找到匹配的元素");
} }
.el-tag { }
background-color: #409EFF !important; },
color: #ffffff !important; },
} }
</script>
.el-tag+.el-tag {
margin-left: 10px; <style>
} /* 删除时鼠标手势 */
#closeimg {
.button-new-tag { cursor: pointer;
margin-left: 10px; }
height: 32px;
line-height: 30px; #Breadcrumb {
padding-top: 0; cursor: pointer;
padding-bottom: 0; }
}
/* 拖拽窗口大小 */
.input-new-tag { .tooldrag {
width: 90px; width: 100%;
margin-left: 10px; display: flex;
vertical-align: bottom; justify-content: center;
} align-items: center;
background-color: #3384FF;
.innercontent { text-align: center;
text-align: left; font-size: 15px;
padding-top: 5px !important; color: white;
padding-left: 12px !important; }
}
.tooltips {
.innercontent a { min-width: 500px;
display: inline-block; min-height: 444px;
text-decoration: none; background-color: white;
margin-top: 2px !important; position: fixed;
font-size: 13px; z-index: 9999;
color: #3384FF !important; right: 30px;
cursor: pointer; bottom: 30px;
text-decoration: none !important; font-size: 13px !important;
} font-weight: normal !important;
border: solid #3384FF 3px;
.innercontent a:hover { border-radius: 10px;
color: #3384FF !important; -webkit-user-select: none;
} /* 文字不可被选中 */
}
.innercontent span {
font-size: 20px; .el-card__body,
color: #3384FF; .el-main {
line-height: normal; padding: 0px !important;
padding-left: 5px !important; }
}
.el-input__icon {
.tooltips button { line-height: 0px !important;
font-size: 13px; }
border-radius: 5px;
border: solid 1px #409EFF; /* 分割线 */
background-color: #409EFF; .el-divider--horizontal {
color: #ffffff; margin-top: 0px !important;
width: 100px; margin-bottom: 0px !important;
height: 30px; background-color: #409EFF !important;
cursor: pointer; }
/* margin-left: 15px !important; */
padding: 0 !important; .el-tag .el-tag__close {
} color: #ffffff !important;
}
/* 输入框样式 */
.tooltips input[type=text] { .el-tag {
/* display: block; */ background-color: #409EFF !important;
/* margin-top: 3px !important; */ color: #ffffff !important;
/* padding-left: 5px !important; */ }
/* margin-bottom: 7px !important; */
font-size: 13px; .el-tag+.el-tag {
/* border-radius: 5px; */ margin-left: 10px;
/* border: solid 1px #DCDFE6; */ }
width: 145px;
height: 20px; .button-new-tag {
} margin-left: 10px;
height: 32px;
.el-input--small .el-input__inner { line-height: 30px;
width: 140px !important; padding-top: 0;
} padding-bottom: 0;
}
.el-select .el-input__inner {
width: 110px !important; .input-new-tag {
} width: 90px;
margin-left: 10px;
.tooltips select { vertical-align: bottom;
display: block; }
margin-top: 7px !important;
padding-left: 5px !important; .innercontent {
margin-bottom: 7px !important; text-align: left;
font-size: 15px; padding-top: 5px !important;
border-radius: 5px; padding-left: 12px !important;
border: solid 2px #3384FF; }
width: 204px;
height: 30px; .innercontent a {
} display: inline-block;
text-decoration: none;
.tooltips button:hover { margin-top: 2px !important;
color: #3384FF; font-size: 13px;
} color: #3384FF !important;
cursor: pointer;
text-decoration: none !important;
/* 下面用来对冻结表格首行元素和固定表格宽度和高度设定样式 */ }
.toolkitcontain { .innercontent a:hover {
border: 1px solid #cdd !important; color: #3384FF !important;
/*width: 280px !important;*/ }
/* 上面的宽度设定很重要 */
height: 150px; .innercontent span {
overflow: auto; font-size: 20px;
margin-top: 10px !important; color: #3384FF;
position: relative; line-height: normal;
} padding-left: 5px !important;
}
.toolkitcontain table {
table-layout: fixed; .tooltips button {
border-spacing: 0 !important; font-size: 13px;
word-break: break-all; border-radius: 5px;
word-wrap: break-word; border: solid 1px #409EFF;
text-overflow: ellipsis; background-color: #409EFF;
overflow: hidden; color: #ffffff;
margin-top: 0px !important; width: 100px;
white-space: nowrap; height: 30px;
width: 100%; cursor: pointer;
} /* margin-left: 15px !important; */
padding: 0 !important;
.toolkitcontain th, }
.toolkitcontain td,
.toolkitcontain tr { /* 输入框样式 */
border: 1px solid rgb(78, 78, 78) !important; .tooltips input[type=text] {
height: 25px !important; /* display: block; */
width: 100px !important; /* margin-top: 3px !important; */
text-align: center !important; /* padding-left: 5px !important; */
font-weight: normal !important; /* margin-bottom: 7px !important; */
overflow: hidden !important; font-size: 13px;
font-size: 11px !important; /* border-radius: 5px; */
padding-left: 10px !important; /* border: solid 1px #DCDFE6; */
padding-right: 10px !important; width: 145px;
padding-top: 0px !important; height: 20px;
padding-bottom: 0px !important; }
vertical-align: middle !important;
white-space: nowrap; .el-input--small .el-input__inner {
} width: 140px !important;
}
.toolkitcontain th span {
font-size: 15px; .el-select .el-input__inner {
font-weight: bold; width: 110px !important;
cursor: pointer; }
/*position: absolute;*/
/*position: ;*/ .tooltips select {
margin-right: 10px; display: block;
vertical-align: text-bottom !important; margin-top: 7px !important;
} padding-left: 5px !important;
margin-bottom: 7px !important;
.toolkitcontain th div { font-size: 15px;
display: inline-block !important; border-radius: 5px;
overflow: hidden !important; border: solid 2px #3384FF;
max-width: 90% !important; width: 204px;
} height: 30px;
}
.toolkitcontain .toolkittb2 {
position: sticky; .tooltips button:hover {
top: 0px; color: #3384FF;
margin-bottom: 0px; }
background-color: azure;
z-index: 1000;
} /* 下面用来对冻结表格首行元素和固定表格宽度和高度设定样式 */
.toolkitcontain .toolkittb4 { .toolkitcontain {
position: absolute; border: 1px solid #cdd !important;
} /*width: 280px !important;*/
/* 上面的宽度设定很重要 */
#closeButton { height: 150px;
position: absolute; overflow: auto;
bottom: 0; margin-top: 10px !important;
right: 0; position: relative;
cursor: pointer; }
padding: 5px;
opacity: 0.05; .toolkitcontain table {
} table-layout: fixed;
border-spacing: 0 !important;
#closeButton:hover { word-break: break-all;
opacity: 1.0; word-wrap: break-word;
} text-overflow: ellipsis;
overflow: hidden;
.el-select-dropdown { margin-top: 0px !important;
z-index: 99999 !important; white-space: nowrap;
} width: 100%;
}
.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis), .toolkitcontain th,
.vxe-table--render-default .vxe-header--column:not(.col--ellipsis) { .toolkitcontain td,
padding: 2px 0 !important; .toolkitcontain tr {
} border: 1px solid rgb(78, 78, 78) !important;
height: 25px !important;
.item { width: 100px !important;
padding: 6px; text-align: center !important;
background-color: #fdfdfd; font-weight: normal !important;
border: solid 1px #eee; overflow: hidden !important;
margin-bottom: 10px; font-size: 11px !important;
cursor: move; padding-left: 10px !important;
} padding-right: 10px !important;
padding-top: 0px !important;
/*选中样式*/ padding-bottom: 0px !important;
.chosen { vertical-align: middle !important;
border: solid 2px #3089dc !important; white-space: nowrap;
} }
</style>
.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;
}
</style>
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