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 @@
<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;">
<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>
</div>
</div>
......
src/components/collectionTable.vue
......@@ -6,11 +6,14 @@
<!-- <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag"
@click="selectElement">选择元素</el-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">
<span>新增</span>
</el-button>
</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>
<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;">
......@@ -84,6 +87,7 @@ export default {
props: ['activedAction', 'widthResize'],
data () {
return {
selectTable: false,
tableColumn: [],
tableData: [],
SelectTableData: [],
......@@ -190,89 +194,94 @@ export default {
},
// 获取页面元素
selectElement () {
let _this = this
// 定义事件处理函数
function contextMenuHandler (event) {
event.preventDefault(); // 阻止默认的右击菜单
_this.contextMenuListenerAdded = true
//表格展示配置
let targetElement = event.target;
// 检查目标元素是否位于ID为'realcontent'的元素内部
let isInRealContent = targetElement.closest('#realcontent');
// 如果目标元素在'realcontent'内，则阻止默认行为
if (isInRealContent) return;
// 判断元素类型并提取信息
let info = {};
let typeOptions = []
if (targetElement.tagName === 'A') {
// 链接
info = {
xPath: '元素路径',
href: '超链接',
textContent: '文本'
};
typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value };
});
info.typeOptions = []
info.typeOptions = typeOptions
info.xpath = _this.getElementXPath(targetElement)
info.contentText = targetElement.textContent
info.title = 'columnName'
} else if (targetElement.tagName === 'IMG') {
// 图片
info = {
"xPath": '元素路径',
src: '超链接',
alt: '属性'
};
typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value };
});
info.typeOptions = []
info.typeOptions = typeOptions
info.xpath = _this.getElementXPath(targetElement)
info.contentText = targetElement.textContent
info.title = 'columnName'
} else {
// 其他标签
info = {
textContent: '文本'
};
typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value };
});
info.typeOptions = []
info.typeOptions = typeOptions
info.xpath = _this.getElementXPath(targetElement)
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;
// 定义事件处理函数
contextMenuHandler (event) {
let _this = this;
event.preventDefault(); // 阻止默认的右击菜单
_this.contextMenuListenerAdded = true
//表格展示配置
let targetElement = event.target;
// 检查目标元素是否位于ID为'realcontent'的元素内部
let isInRealContent = targetElement.closest('#realcontent');
// 如果目标元素在'realcontent'内，则阻止默认行为
if (isInRealContent) return;
// 判断元素类型并提取信息
let info = {};
let typeOptions = []
if (targetElement.tagName === 'A') {
// 链接
info = {
xPath: '元素路径',
href: '超链接',
textContent: '文本'
};
typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value };
});
info.typeOptions = []
info.typeOptions = typeOptions
info.xpath = _this.getElementXPath(targetElement)
info.contentText = targetElement.textContent
info.title = 'columnName'
} else if (targetElement.tagName === 'IMG') {
// 图片
info = {
"xPath": '元素路径',
src: '超链接',
alt: '属性'
};
typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value };
});
info.typeOptions = []
info.typeOptions = typeOptions
info.xpath = _this.getElementXPath(targetElement)
info.contentText = targetElement.textContent
info.title = 'columnName'
} else {
// 其他标签
info = {
textContent: '文本'
};
typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value };
});
info.typeOptions = []
info.typeOptions = typeOptions
info.xpath = _this.getElementXPath(targetElement)
info.contentText = targetElement.textContent
info.title = 'columnName'
}
if (!_this.contextMenuListenerAdded) {
// 添加事件监听器
document.addEventListener('contextmenu', contextMenuHandler, false);
_this.contextMenuListenerAdded = true;
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;
_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
getElementXPath (element) {
......@@ -384,7 +393,7 @@ export default {
}
</script>
<style >
/* .vxe-select>.vxe-input {
.vxe-select>.vxe-input {
width: 120px !important;
}
......@@ -395,11 +404,4 @@ export default {
.el-tooltip__popper.is-dark {
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>
\ No newline at end of file
src/components/elOutput.vue
......@@ -2,8 +2,8 @@
<div class="elOutput">
<!-- 操作按钮区域 -->
<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" 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="selectElement" v-if="!outputState">选择内容</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect" v-if="outputState">取消选择</el-button>
</div>
<!-- 表单区域 -->
<el-form label-position="right" :model="actionConfig">
......
src/components/elclick.vue
......@@ -3,8 +3,8 @@
<div class="elClick">
<!-- 操作按钮区域 -->
<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" 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="selectElement" v-if="!clickState">选择点击内容</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect" v-if="clickState">取消选择</el-button>
</div>
<!-- 表单区域 -->
<el-form label-position="left" :model="actionConfig">
......
src/components/onInput.vue
......@@ -2,8 +2,8 @@
<div class="onInput">
<!-- 操作按钮区域 -->
<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" 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="selectElement" v-if="!inputState">选择输入框</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect" v-if="inputState">取消选择</el-button>
</div>
<!-- 表单区域 -->
<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