fix(测试跟踪): 功能用例关联侧边栏支持拖拽
--bug=1019694 --user=张大海 【测试跟踪】github #19757，测试计划>>关联测试用例>>在弹出的关联测试用例页面，其左侧模块显示不全，并且左侧显示框也无法向右拖拽调整窗口大小。请调整和测试用例列表显示一样，能拖拽调整窗体显示宽度。 https://www.tapd.cn/55049933/s/1301299
This commit is contained in:
zhangdahai112
zhangdahai112
parent
3ff7a340a1
commit
c9905b7385
|
|
@ -0,0 +1,140 @@
|
|||
<template>
|
||||
<el-aside :width="width" class="ms-aside-container"
|
||||
:id="id"
|
||||
:style="{
|
||||
'margin-left': !asideHidden ? 0 : '-' + width,
|
||||
'min-width': minWidth + 'px',
|
||||
'height': calHeight,
|
||||
}">
|
||||
<div v-if="enableAsideHidden" class="hiddenBottom" :style="{'top': hiddenBottomTop ? hiddenBottomTop : 0}" @click="asideHidden = !asideHidden">
|
||||
<i v-if="!asideHidden" class="el-icon-arrow-left"/>
|
||||
<i v-if="asideHidden" class="el-icon-arrow-right"/>
|
||||
</div>
|
||||
<slot></slot>
|
||||
<ms-horizontal-drag-bar/>
|
||||
</el-aside>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MsHorizontalDragBar from "./dragbar/MsLeft2RightDragBar";
|
||||
import {getUUID} from "../utils";
|
||||
|
||||
export default {
|
||||
name: "MsAsideContainer",
|
||||
components: {MsHorizontalDragBar},
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
enableAsideHidden: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
minWidth: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
enableAutoHeight: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
defaultHiddenBottomTop: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
asideHidden() {
|
||||
this.$emit('setAsideHidden', this.asideHidden);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calHeight() {
|
||||
return this.height ? (this.height + 'px') : (this.enableAutoHeight ? null : 'calc(100vh - 50px)')
|
||||
},
|
||||
containerCalHeight() {
|
||||
return this.height ? (this.height - 30 + 'px') : (this.enableAutoHeight ? null : 'calc(100vh - 50px)')
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.id = getUUID();
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.setHiddenBottomTop();
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
asideHidden: false,
|
||||
hiddenBottomTop: null,
|
||||
id: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setHiddenBottomTop() {
|
||||
if (this.defaultHiddenBottomTop) {
|
||||
this.hiddenBottomTop = this.defaultHiddenBottomTop + 'px';
|
||||
} else {
|
||||
let e = document.getElementById(this.id);
|
||||
if (!e) return;
|
||||
// 默认在 3/1 的位置
|
||||
this.hiddenBottomTop = e.clientHeight / 3 + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.ms-aside-container {
|
||||
border: 1px solid #E6E6E6;
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFF;
|
||||
/*height: calc(100vh - 80px);*/
|
||||
border-right: 0px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.hiddenBottom {
|
||||
width: 8px;
|
||||
height: 50px;
|
||||
/*top: calc((100vh - 80px)/3);*/
|
||||
right: -10px;
|
||||
/*top: 0;*/
|
||||
line-height: 50px;
|
||||
border-radius: 0 15px 15px 0;
|
||||
background-color: #acb7c1;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
font-size: 2px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.hiddenBottom i {
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.hiddenBottom:hover {
|
||||
background-color: #783887;
|
||||
opacity: 0.8;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.hiddenBottom:hover i {
|
||||
margin-left: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,10 +1,100 @@
|
|||
<template>
|
||||
<div>
|
||||
<slot name="header">
|
||||
<el-input :placeholder="$t('test_track.module.search')" v-model="filterText" size="small" :clearable="true"/>
|
||||
</slot>
|
||||
|
||||
<slot name="header">
|
||||
<el-input :placeholder="$t('test_track.module.search')" v-model="filterText" size="small" :clearable="true"/>
|
||||
</slot>
|
||||
<ms-left-2-right-container v-if="scroll">
|
||||
<el-tree
|
||||
class="filter-tree node-tree"
|
||||
:data="extendTreeNodes"
|
||||
:default-expanded-keys="expandedNode"
|
||||
:default-expand-all="defaultExpandAll"
|
||||
node-key="id"
|
||||
@node-drag-end="handleDragEnd"
|
||||
@node-expand="nodeExpand"
|
||||
@node-collapse="nodeCollapse"
|
||||
:filter-node-method="filterNode"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
:draggable="!disabled&&!hideOpretor"
|
||||
ref="tree">
|
||||
|
||||
<template v-slot:default="{node,data}">
|
||||
<span class="custom-tree-node father" @click="handleNodeSelect(node)">
|
||||
|
||||
<span v-if="data.isEdit" @click.stop>
|
||||
<el-input @blur.stop="save(node, data)" @keyup.enter.native.stop="$event.target.blur()" v-model="data.name"
|
||||
class="name-input" size="mini" ref="nameInput" :draggable="true"/>
|
||||
</span>
|
||||
|
||||
<span v-if="!data.isEdit" class="node-icon">
|
||||
<i class="el-icon-folder"/>
|
||||
</span>
|
||||
<el-tooltip class="item" effect="dark" :content="data.name" placement="top-start" :open-delay="1000">
|
||||
<span v-if="!data.isEdit" class="node-title" v-text="isDefault(data) ? getLocalDefaultName() : data.name"/>
|
||||
</el-tooltip>
|
||||
<span class="count-title" v-if="showCaseNum && data.caseNum !== null && data.caseNum !== undefined">
|
||||
<span style="color: var(--primary_color);">{{ data.caseNum }}</span>
|
||||
</span>
|
||||
<span v-if="!disabled" class="node-operate child">
|
||||
<el-tooltip
|
||||
v-if="data.id !== 'root' && data.name !== defaultLabel && !hideOpretor"
|
||||
class="item"
|
||||
effect="dark"
|
||||
v-permission="updatePermission"
|
||||
:open-delay="200"
|
||||
:content="$t('test_track.module.rename')"
|
||||
placement="top">
|
||||
<i @click.stop="edit(node, data)" class="el-icon-edit"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
v-if="data.name === defaultLabel && data.level !== 1 && !hideOpretor"
|
||||
v-permission="updatePermission"
|
||||
class="item"
|
||||
effect="dark"
|
||||
:open-delay="200"
|
||||
:content="$t('test_track.module.rename')"
|
||||
placement="top">
|
||||
<i @click.stop="edit(node, data)" class="el-icon-edit"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:open-delay="200"
|
||||
v-permission="addPermission"
|
||||
v-if="!isDefault(data) && !hideOpretor"
|
||||
:content="$t('test_track.module.add_submodule')"
|
||||
placement="top">
|
||||
<i @click.stop="append(node, data)" class="el-icon-circle-plus-outline"></i>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
v-if="data.name === defaultLabel && data.level !==1 && !hideOpretor"
|
||||
class="item" effect="dark"
|
||||
:open-delay="200"
|
||||
v-permission="deletePermission"
|
||||
:content="$t('commons.delete')"
|
||||
placement="top">
|
||||
<i @click.stop="remove(node, data)" class="el-icon-delete"></i>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
v-if="data.id !== 'root' && data.name !== defaultLabel && !hideOpretor"
|
||||
class="item" effect="dark"
|
||||
:open-delay="200"
|
||||
:content="$t('commons.delete')"
|
||||
v-permission="deletePermission"
|
||||
placement="top">
|
||||
<i @click.stop="remove(node, data)" class="el-icon-delete"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</ms-left-2-right-container>
|
||||
<el-tree
|
||||
v-else
|
||||
class="filter-tree node-tree"
|
||||
:data="extendTreeNodes"
|
||||
:default-expanded-keys="expandedNode"
|
||||
|
|
@ -91,14 +181,16 @@
|
|||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MsLeft2RightContainer from "../MsLeft2RightContainer";
|
||||
|
||||
export default {
|
||||
name: "MsNodeTree",
|
||||
components: {},
|
||||
components: {MsLeft2RightContainer},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
|
|
@ -113,6 +205,15 @@ export default {
|
|||
};
|
||||
},
|
||||
props: {
|
||||
//是否允许拖拽隐藏侧边栏
|
||||
scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
existSlotContainer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "view"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<template v-slot:aside>
|
||||
<node-tree class="node-tree"
|
||||
:scroll="true"
|
||||
v-loading="nodeResult.loading"
|
||||
local-suffix="test_case"
|
||||
default-label="未规划用例"
|
||||
|
|
|
|||
Loading…
Reference in New Issue