Skip to content

V
Vue-WebDriver
Commit 86c28b4e by 郁子恒
Options

优化采集表格

parent fa9ffd96
Showing with 99 additions and 98 deletions
src/components/collectionForm.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="collectionForm"> <div class="collectionForm">
<div style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;"> <div style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
<div style="display: flex;"> <div style="display: flex;">
<el-button style="width: 80px;height: 30px;" size="mini" class="button-new-tag" @click="selectElement">批量选择元素</el-button> <el-button style="width: 80px;height: 30px;" size="mini" class="button-new-tag" @click="selectElement" v-if="!isSelectForm">批量选择元素</el-button>
<el-button style="width: 60px;height: 30px;margin-left: 10px !important;" size="small" class="button-new-tag" @click="cancelSelect" v-if="isSelectForm">取消选择</el-button> <el-button style="width: 60px;height: 30px;margin-left: 10px !important;" size="small" class="button-new-tag" @click="cancelSelect" v-if="isSelectForm">取消选择</el-button>
</div> </div>
</div> </div>
......
src/components/collectionTable.vue
...@@ -6,11 +6,14 @@ ...@@ -6,11 +6,14 @@
<!-- <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" <!-- <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag"
@click="selectElement">选择元素</el-button> --> @click="selectElement">选择元素</el-button> -->
<!-- <vxe-button icon="fa fa-plus">新增</vxe-button> --> <!-- <vxe-button icon="fa fa-plus">新增</vxe-button> -->
<el-button type="primary" size="mini" style="width: 40px;height: 20px;" @click="selectElement"> <el-button type="primary" size="mini" style="width: 40px;height: 20px;" @click="selectElement" v-if="!selectTable">
<img style="width: 10px;height: 10px;vertical-align: bottom;" src="../assets/add.svg"> <img style="width: 10px;height: 10px;vertical-align: bottom;" src="../assets/add.svg">
<span>新增</span> <span>新增</span>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="点击取消选择" placement="top">
<el-button style="width: 50px;height: 20px;" size="small" class="button-new-tag" @click="cancelSelect" v-if="selectTable">取消选择</el-button>
</el-tooltip>
</template> </template>
<el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button> <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
<div style="display: flex;align-items: center;"> <div style="display: flex;align-items: center;">
...@@ -84,6 +87,7 @@ export default { ...@@ -84,6 +87,7 @@ export default {
props: ['activedAction', 'widthResize'], props: ['activedAction', 'widthResize'],
data () { data () {
return { return {
selectTable: false,
tableColumn: [], tableColumn: [],
tableData: [], tableData: [],
SelectTableData: [], SelectTableData: [],
...@@ -190,89 +194,94 @@ export default { ...@@ -190,89 +194,94 @@ export default {
}, },
// 获取页面元素 // 定义事件处理函数
selectElement () { contextMenuHandler (event) {
let _this = this let _this = this;
// 定义事件处理函数 event.preventDefault(); // 阻止默认的右击菜单
function contextMenuHandler (event) { _this.contextMenuListenerAdded = true
event.preventDefault(); // 阻止默认的右击菜单 //表格展示配置
_this.contextMenuListenerAdded = true let targetElement = event.target;
//表格展示配置 // 检查目标元素是否位于ID为'realcontent'的元素内部
let targetElement = event.target; let isInRealContent = targetElement.closest('#realcontent');
// 检查目标元素是否位于ID为'realcontent'的元素内部 // 如果目标元素在'realcontent'内，则阻止默认行为
let isInRealContent = targetElement.closest('#realcontent'); if (isInRealContent) return;
// 如果目标元素在'realcontent'内，则阻止默认行为 // 判断元素类型并提取信息
if (isInRealContent) return; let info = {};
// 判断元素类型并提取信息 let typeOptions = []
let info = {}; if (targetElement.tagName === 'A') {
let typeOptions = [] // 链接
if (targetElement.tagName === 'A') { info = {
// 链接 xPath: '元素路径',
info = { href: '超链接',
xPath: '元素路径', textContent: '文本'
href: '超链接', };
textContent: '文本' typeOptions = Object.entries(info).map(([label, value]) => {
}; return { label, value };
typeOptions = Object.entries(info).map(([label, value]) => { });
return { label, value }; info.typeOptions = []
}); info.typeOptions = typeOptions
info.typeOptions = [] info.xpath = _this.getElementXPath(targetElement)
info.typeOptions = typeOptions info.contentText = targetElement.textContent
info.xpath = _this.getElementXPath(targetElement) info.title = 'columnName'
info.contentText = targetElement.textContent } else if (targetElement.tagName === 'IMG') {
info.title = 'columnName' // 图片
} else if (targetElement.tagName === 'IMG') { info = {
// 图片 "xPath": '元素路径',
info = { src: '超链接',
"xPath": '元素路径', alt: '属性'
src: '超链接', };
alt: '属性' typeOptions = Object.entries(info).map(([label, value]) => {
}; return { label, value };
typeOptions = Object.entries(info).map(([label, value]) => { });
return { label, value }; info.typeOptions = []
}); info.typeOptions = typeOptions
info.typeOptions = [] info.xpath = _this.getElementXPath(targetElement)
info.typeOptions = typeOptions info.contentText = targetElement.textContent
info.xpath = _this.getElementXPath(targetElement) info.title = 'columnName'
info.contentText = targetElement.textContent } else {
info.title = 'columnName' // 其他标签
} else { info = {
// 其他标签 textContent: '文本'
info = { };
textContent: '文本' typeOptions = Object.entries(info).map(([label, value]) => {
}; return { label, value };
typeOptions = Object.entries(info).map(([label, value]) => { });
return { label, value }; info.typeOptions = []
}); info.typeOptions = typeOptions
info.typeOptions = [] info.xpath = _this.getElementXPath(targetElement)
info.typeOptions = typeOptions info.contentText = targetElement.textContent
info.xpath = _this.getElementXPath(targetElement) info.title = 'columnName'
info.contentText = targetElement.textContent
info.title = 'columnName'
}
info.name = 'ID' + _this.index++
info.type = ''
_this.SelectTableData.push(info)
// 将新加入的tableData添加高亮
_this.$refs.xTableColumn.setCurrentRow(_this.SelectTableData[_this.SelectTableData.length - 1])
// 移除先前元素的背景色（如果有）
if (window.currentlyHighlighted) {
window.currentlyHighlighted.style.backgroundColor = '';
}
// 更新背景色并保存当前元素
event.target.style.backgroundColor = 'orange';
window.currentlyHighlighted = event.target;
// 移除事件监听器
document.removeEventListener('contextmenu', contextMenuHandler);
_this.contextMenuListenerAdded = false;
} }
if (!_this.contextMenuListenerAdded) { info.name = 'ID' + _this.index++
// 添加事件监听器 info.type = ''
document.addEventListener('contextmenu', contextMenuHandler, false); _this.SelectTableData.push(info)
_this.contextMenuListenerAdded = true; // 将新加入的tableData添加高亮
_this.$refs.xTableColumn.setCurrentRow(_this.SelectTableData[_this.SelectTableData.length - 1])
// 移除先前元素的背景色（如果有）
if (window.currentlyHighlighted) {
window.currentlyHighlighted.style.backgroundColor = '';
} }
// 更新背景色并保存当前元素
event.target.style.backgroundColor = 'orange';
window.currentlyHighlighted = event.target;
_this.selectTable = false;
// 移除事件监听器
// document.removeEventListener('contextmenu', contextMenuHandler);
// _this.contextMenuListenerAdded = false;
},
// 选择元素按钮调用
selectElement () {
this.selectTable = true;
// 添加事件监听器
document.addEventListener('contextmenu', this.contextMenuHandler, false);
this.contextMenuListenerAdded = true;
},
// 取消按钮调用
cancelSelect () {
this.selectTable = false;
// 在取消按钮点击时移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
this.contextMenuListenerAdded = false;
}, },
// 获取xpath // 获取xpath
getElementXPath (element) { getElementXPath (element) {
...@@ -384,7 +393,7 @@ export default { ...@@ -384,7 +393,7 @@ export default {
} }
</script> </script>
<style > <style >
/* .vxe-select>.vxe-input { .vxe-select>.vxe-input {
width: 120px !important; width: 120px !important;
} }
...@@ -395,11 +404,4 @@ export default { ...@@ -395,11 +404,4 @@ export default {
.el-tooltip__popper.is-dark { .el-tooltip__popper.is-dark {
z-index: 99999 !important; 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-top: 0px !important;
padding-bottom: 0px !important;
} */
</style> </style>
\ No newline at end of file
src/components/elOutput.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div class="elOutput"> <div class="elOutput">
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;"> <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择内容</el-button> <el-button size="small" class="button-new-tag" @click="selectElement" v-if="!outputState">选择内容</el-button>
<el-button size="small" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect" v-if="outputState">取消选择</el-button> <el-button size="small" class="button-new-tag" @click="cancelSelect" v-if="outputState">取消选择</el-button>
</div> </div>
<!-- 表单区域 --> <!-- 表单区域 -->
<el-form label-position="right" :model="actionConfig"> <el-form label-position="right" :model="actionConfig">
......
src/components/elclick.vue
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<div class="elClick"> <div class="elClick">
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;"> <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择点击内容</el-button> <el-button size="small" class="button-new-tag" @click="selectElement" v-if="!clickState">选择点击内容</el-button>
<el-button size="small" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect" v-if="clickState">取消选择</el-button> <el-button size="small" class="button-new-tag" @click="cancelSelect" v-if="clickState">取消选择</el-button>
</div> </div>
<!-- 表单区域 --> <!-- 表单区域 -->
<el-form label-position="left" :model="actionConfig"> <el-form label-position="left" :model="actionConfig">
......
src/components/onInput.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div class="onInput"> <div class="onInput">
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;"> <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择输入框</el-button> <el-button size="small" class="button-new-tag" @click="selectElement" v-if="!inputState">选择输入框</el-button>
<el-button size="small" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect" v-if="inputState">取消选择</el-button> <el-button size="small" class="button-new-tag" @click="cancelSelect" v-if="inputState">取消选择</el-button>
</div> </div>
<!-- 表单区域 --> <!-- 表单区域 -->
<el-form label-position="right" :model="actionConfig"> <el-form label-position="right" :model="actionConfig">
......
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