Skip to content

V
Vue-WebDriver
Commit a24ec526 by 郁子恒
Options

采集表界面表格自适应，优化样式

parent 9aa7aabe
Showing with 67 additions and 27 deletions
package.json
...@@ -32,7 +32,8 @@ ...@@ -32,7 +32,8 @@
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"jquery": "^3.7.1", "jquery": "^3.7.1",
"less": "^3.9.0", "less": "^3.9.0",
"less-loader": "^4.1.0", "less-loader": "^7.3.0",
"resize-observer-polyfill": "^1.5.1",
"url-loader": "^4.1.1", "url-loader": "^4.1.1",
"vue-router": "^3.5.2", "vue-router": "^3.5.2",
"vuedraggable": "^2.24.3", "vuedraggable": "^2.24.3",
......
src/App.vue
<template> <template>
<div id="realcontent"> <div id="realcontent" ref="myDiv">
<div id="KiviiWebTool" style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;"> <div id="KiviiWebTool" style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;">
<img style="width: 25px;height: 25px;" src="./assets/enlarge.svg"> <img style="width: 25px;height: 25px;" src="./assets/enlarge.svg">
</div> </div>
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
</div> </div>
<div style="margin-right: 15px;"> <div style="margin-right: 15px;">
<span style="width: 90px;">动作类型:</span> <span style="width: 90px;">动作类型:</span>
<el-select id="eventType" name="eventType" v-model="activedAction.Alias" placeholder="请选择类型" @change="handleChange" filterable remote> <el-select id="eventType" name="eventType" v-model="activedAction.Alias" placeholder="请选择类型" @change="handleChange" @visible-change="handleVisibleChange" ref="mySelect" filterable remote>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
<div style="margin-left: 15px;margin-top: 10px;" v-if="activedAction.Alias == 'actions'"> <div style="margin-left: 15px;margin-top: 10px;" v-if="activedAction.Alias == 'actions'">
<el-button @click="toActions">进入容器</el-button> <el-button @click="toActions">进入容器</el-button>
</div> </div>
<component :is="dynamicComponent" @dataChanged="handleDataChange" :activedAction="activedAction" v-if="activedAction.Alias !== ''"> <component :is="dynamicComponent" @dataChanged="handleDataChange" :activedAction="activedAction" :widthResize="widthResize" v-if="activedAction.Alias !== ''">
</component> </component>
</div> </div>
</div> </div>
...@@ -93,6 +93,7 @@ ...@@ -93,6 +93,7 @@
<script> <script>
// 导出json文件使用的库 // 导出json文件使用的库
import ResizeObserver from 'resize-observer-polyfill';
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import { pageNavigate, elClick, sysSleep, onInput, elOutput, pageJavascript, collectionTable, actions } from './components/index.js' import { pageNavigate, elClick, sysSleep, onInput, elOutput, pageJavascript, collectionTable, actions } from './components/index.js'
...@@ -117,6 +118,7 @@ export default { ...@@ -117,6 +118,7 @@ export default {
actionType: '', actionType: '',
winHeight: window.outerHeight, winHeight: window.outerHeight,
isShowAction: false, isShowAction: false,
widthResize: '',
options: [{ options: [{
value: 'page.navigate', value: 'page.navigate',
label: '页面跳转' label: '页面跳转'
...@@ -154,6 +156,15 @@ export default { ...@@ -154,6 +156,15 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
window.addEventListener('resize', this.onResize); window.addEventListener('resize', this.onResize);
}); });
// 使用 ResizeObserver 监测 div 的宽度变化
this.resizeObserver = new ResizeObserver(this.handleResize);
this.resizeObserver.observe(this.$refs.myDiv);
},
destroyed () {
// 在组件销毁时停止观察
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
}, },
watch: { watch: {
"currentAction.actions": { "currentAction.actions": {
...@@ -165,6 +176,14 @@ export default { ...@@ -165,6 +176,14 @@ export default {
}, },
computed: {}, computed: {},
methods: { methods: {
handleResize (entries) {
// entries 是 ResizeObserverEntry 的数组，包含了观察目标的变化信息
for (let entry of entries) {
let { target, contentRect } = entry;
//变化的宽度传入子组件
this.widthResize = contentRect.width;
}
},
handleScroll (event) { handleScroll (event) {
// 检测鼠标滚轮事件 // 检测鼠标滚轮事件
if (event.deltaY !== 0) { if (event.deltaY !== 0) {
...@@ -321,6 +340,28 @@ export default { ...@@ -321,6 +340,28 @@ export default {
_this.$forceUpdate(); _this.$forceUpdate();
} }
}, },
// 下拉框中选择动作后失去焦点
handleVisibleChange (visible) {
if (visible) {
// 当下拉框展开时，添加全局点击事件监听器
window.addEventListener('click', this.handleClickOutside);
} else {
// 当下拉框关闭时，移除全局点击事件监听器
window.removeEventListener('click', this.handleClickOutside);
}
if (!visible && this.$refs.mySelect) {
// 检查 mySelect 是否存在
this.$nextTick(() => {
this.$refs.mySelect.blur();
});
}
},
handleClickOutside (event) {
// 点击其他地方时，关闭下拉框并失去焦点
if (this.$refs.mySelect && !this.$refs.mySelect.$el.contains(event.target)) {
this.$refs.mySelect.blur();
}
},
// 导航标签 // 导航标签
onBreadcrumb (item) { onBreadcrumb (item) {
this.currentAction = item; this.currentAction = item;
......
src/components/collectionTable.vue
...@@ -7,39 +7,38 @@ ...@@ -7,39 +7,38 @@
<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> </div>
<!-- 全部表格信息 --> <!-- 全部表格信息 -->
<div style="width: 460px;overflow: auto;"> <div style="overflow: auto;" :style="{ width: widthResize + 'px' }">
<vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="250" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;"> <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="250" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;">
<vxe-column field="" title="列名" width="150"> <vxe-column field="" title="列名" min-width="150">
<template v-slot="{ row }"> <template v-slot="{ row }">
<!-- {{ row.text }} --> <div style="display: flex;flex-direction: column;">
<div style="display: flex;"> <span style="width: 68px;"></span> <vxe-input v-model="row.title" placeholder="请填写列名" size="mini"></vxe-input> <span>选中内容:{{ row.contentText }}</span>
<vxe-input v-model="row.title" placeholder="请填写列名" size="mini"></vxe-input>
</div> </div>
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="" title="属性名" width="150"> <vxe-column field="" title="属性名" min-width="150">
<template v-slot="{ row }"> <template v-slot="{ row }">
<div style="display: flex;"> <span style="width: 68px;"></span> <vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input> <div style="display: flex;flex-direction: column;">
<span>选中内容:{{ row.contentText }}</span>
<vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input>
</div> </div>
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="" title="值类型" width="150"> <vxe-column field="" title="值类型" min-width="170">
<template v-slot="{ row }"> <template v-slot="{ row }">
<div style="display: flex;"> <span style="width: 68px;line-height: 12px;"> <div style="display: flex;flex-direction: column;">
</span> <vxe-select v-model="row.type" placeholder="选择值类型" placement="bottom" v-if="row.typeOptions.length > 1"> <span>选中内容:{{ row.contentText }}</span>
<vxe-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value" :label="num.label"></vxe-option> <el-select style="height: 28px;" v-model="row.type" placeholder="选择值类型" v-if="row.typeOptions.length > 1" :popper-append-to-body="false" filterable remote>
</vxe-select> <el-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value" :label="num.label"></el-option>
<vxe-input v-model="row.type" :placeholder="row.typeOptions[0].label" size="mini" v-else disabled></vxe-input> </el-select>
<vxe-input style="width: 100% !important;" v-model="row.type" :placeholder="row.typeOptions[0].label" size="mini" v-else disabled></vxe-input>
</div> </div>
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="" title="当前选中文本值" width="150"> <vxe-column title="操作" min-width="70" fixed="right">
<template v-slot="{ row }">
{{ row.contentText }}
</template>
</vxe-column>
<vxe-column title="操作" width="100">
<template #default="{ row }"> <template #default="{ row }">
<vxe-button status="danger" content="删除" @click="columnDelete(row)" style="margin-right: 20px;width: 50px;"></vxe-button> <vxe-button status="danger" content="删除" @click="columnDelete(row)" style="width: 50px;"></vxe-button>
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
...@@ -47,9 +46,7 @@ ...@@ -47,9 +46,7 @@
<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> </vxe-table>
</div> </div>
<div style="width: 100%;text-align: right;"> <el-button size="small" class="button-new-tag" @click="getTable" style="position: absolute;bottom: 10px;right: 15px;">获取表格信息</el-button>
<el-button size="small" class="button-new-tag" @click="getTable" style="margin-right: 5px;">获取表格信息</el-button>
</div>
</div> </div>
</template> </template>
...@@ -59,7 +56,7 @@ import { cell, table } from '../sdk-table' ...@@ -59,7 +56,7 @@ import { cell, table } from '../sdk-table'
export default { export default {
name: 'collectionTable', name: 'collectionTable',
components: {}, components: {},
props: ['activedAction'], props: ['activedAction', 'widthResize'],
data () { data () {
return { return {
tableColumn: [], tableColumn: [],
...@@ -90,6 +87,7 @@ export default { ...@@ -90,6 +87,7 @@ export default {
watch: {}, watch: {},
computed: {}, computed: {},
methods: { methods: {
getTable () { getTable () {
let _this = this let _this = this
_this.table = new table() _this.table = new table()
......
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