Skip to content

V
Vue-WebDriver
Commit 77bcf741 by 高源
Options

表格优化

parent 4ca0469f
Showing with 61 additions and 17 deletions
src/App.vue
......@@ -35,8 +35,8 @@
</div>
</div>
<div style="width: 10%;margin-right: 15px;display:flex;align-items: center;justify-content: flex-end;">
<el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction">
<img style="width: 12px;height: 12px;" src="./assets/add.svg">
<el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction" id="addButton">
<img style="width: 12px;height: 12px;" src="./assets/add.svg" id="addImg">
</el-button>
</div>
</div>
......
src/components/collectionTable.vue
<template>
<div class="collectionTable">
<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;">
<template v-if="isSelectTable">
<el-tooltip class="item" effect="dark" content="点击新增,右击页面元素添加数据" placement="top">
<!-- <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag"
......@@ -12,13 +13,16 @@
</el-button>
</el-tooltip>
</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;">
<span style="margin-left: 45px;font-size: 13px;" v-if="isSelectTable">表名:</span>
<vxe-input style="margin-left: 10px;" v-if="isSelectTable" v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
<vxe-input style="margin-left: 10px;" v-if="isSelectTable" v-model="tableName" placeholder="请填写表名"
size="mini"></vxe-input>
</div>
<!-- <el-button style="padding-right: 15px;" size="small" class="button-new-tag" @click="getTable" v-if="isSelectTable">获取表格信息</el-button> -->
<el-button size="mini" style="width: 74px;height: 20px;margin-right: 7px;" @click="getTable" v-if="isSelectTable">获取表格信息</el-button>
<el-button size="mini" style="width: 74px;height: 20px;margin-right: 7px;" @click="getTable"
v-if="isSelectTable">获取表格信息</el-button>
</div>
<!-- 全部表格信息 -->
<div style="overflow: auto;height: 290px;" :style="{ width: widthResize + 'px' }">
......@@ -57,15 +61,16 @@
</vxe-column>
<vxe-column title="操作" min-width="70" fixed="right">
<template #default="{ row }">
<img style="width: 50px;height: 28px;vertical-align: bottom;" src="../assets/close.svg"
@click="columnDelete(row)">
<!-- <vxe-button status="danger" content="删除" @click="columnDelete(row)"
style="width: 50px;"></vxe-button> -->
<el-tooltip class="item" effect="dark" content="删除" placement="top">
<img style="width: 38px;height: 28px;vertical-align: bottom;cursor: pointer;"
src="../assets/close.svg" @click="columnDelete(row)">
</el-tooltip>
</template>
</vxe-column>
</vxe-table>
<vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220" v-else>
<vxe-table-column show-overflow="ellipsis" v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>
<vxe-table-column show-overflow="ellipsis" v-for="(config, index) in tableColumn" :key="index"
v-bind="config"></vxe-table-column>
</vxe-table>
</div>
......@@ -100,22 +105,29 @@ export default {
info.name = this.activedAction.table.cells[i].name;
info.title = this.activedAction.table.cells[i].title;
info.typeOptions = this.activedAction.table.cells[i].types;
info.xPath = this.activedAction.table.cells[i].xpath;
info.xpath = this.activedAction.table.cells[i].xpath;
this.SelectTableData.push(info)
}
this.tableName = this.activedAction.table.name;
}
},
mounted () {
let _this = this
document.addEventListener('click', function (event) {
document.addEventListener('click', function handleClick (event) {
// 如果点击的不是当前高亮的元素，移除高亮
if (event.target !== window.currentlyHighlighted) {
if (window.currentlyHighlighted) {
window.currentlyHighlighted.style.backgroundColor = '';
}
window.currentlyHighlighted = null;
}
if (event.target.id == 'addImg' || event.target.id == 'addButton') {
_this.setElementBackgroundColor(_this.selectedRow.xpath, '');
_this.selectedRow = null;
document.removeEventListener('click', handleClick);
return;
// 移除监听器的代码已经移动到函数开头
}
});
},
......@@ -149,6 +161,18 @@ export default {
columnBack () {
let _this = this
_this.isSelectTable = true
let tablePath = _this.table.xpath.split('/');
tablePath.pop()
tablePath = tablePath.join("/")
_this.setElementBackgroundColor(tablePath, '')
for (let i = 0; i < _this.table.cells.length; i++) {
for (let k = 1; k <= _this.tableData.length; k++) {
let path = _this.table.cells[i].tableXpath + '[' + k + ']/' + _this.table.cells[i].relativeXpath
console.log(path)
_this.setElementBackgroundColor(path, '')
}
}
_this.tableData = []
},
// 行选中事件
......@@ -339,10 +363,23 @@ export default {
// 防止父级改变，子级未改变重新赋值
_this.activedAction.table = _this.table;
_this.$emit('dataChanged', _this.activedAction);
// _this.setElementBackgroundColor('/HTML/BODY/DIV[3]', 'orange')
// 选中表格区域
let tablePath = _this.table.xpath.split('/');
tablePath.pop()
tablePath = tablePath.join("/")
_this.setElementBackgroundColor(tablePath, 'green')
console.log(_this.tableData)
console.log(_this.table)
for (let i = 0; i < _this.table.cells.length; i++) {
for (let k = 1; k <= _this.tableData.length; k++) {
let path = _this.table.cells[i].tableXpath + '[' + k + ']/' + _this.table.cells[i].relativeXpath
console.log(path)
_this.setElementBackgroundColor(path, 'orange')
if (_this.selectedRow == null) return
_this.setElementBackgroundColor(this.selectedRow.xpath, '')
}
}
// if (_this.selectedRow == null) return
// _this.setElementBackgroundColor(_this.selectedRow.xpath, '')
}
},
}
......@@ -359,4 +396,10 @@ 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: 0 !important;
}
</style>
\ No newline at end of file
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