fix: BUG修改

This commit is contained in:
kun 2024-04-08 15:09:54 +08:00
parent 285cb814b8
commit 3a520a0d1f
2 changed files with 131 additions and 103 deletions

View File

@ -2075,11 +2075,6 @@ export default {
editGroupForm: {
groupId: "",
},
treeData: [
{ id: 1, label: "一级 1", children: [{ id: 11, label: "二级 1-1" }] },
{ id: 2, label: "一级 2", children: [{ id: 21, label: "二级 2-1" }] },
{ id: 3, label: "一级 3", children: [{ id: 31, label: "二级 3-1" }] },
],
selectTreeProps: {
children: "children",
label: "label",

View File

@ -1,30 +1,108 @@
<template>
<div class="reportForm">
<div class="main-content">
<div class="left">
<div class="menu-list">
<div
class="menu-item"
:class="{ 'active-menu': activeNav == 1 }"
@click="checkNav(1)"
>
<!-- 实时数据 -->
{{ $t("message.unload.realData") }}
<div class="left-title">
科目类别
</div>
<div class="left-tree">
<el-tree
:data="level1CompanyData"
:highlight-current="true"
:check-on-click-node="false"
:props="defaultProps"
style="margin-top: 10px;"
ref="groupTree"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span
style="
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
"
class="courseName"
:title="node.label"
>{{ node.label }}</span
>
</span>
</el-tree>
</div>
</div>
<div class="right">
<div class="reportTable">
</div>
<div class="reportTable"></div>
</div>
</div>
</template>
<script>
export default {
name: "reportForm",
name: "questionManagement",
data() {
return {
activeNav: 1
activeNav: 1,
level1CompanyData: [
{
label: "一级 1",
children: [
{
label: "二级 1-1",
children: [
{
label: "三级 1-1-1",
},
],
},
],
},
{
label: "一级 2",
children: [
{
label: "二级 2-1",
children: [
{
label: "三级 2-1-1",
},
],
},
{
label: "二级 2-2",
children: [
{
label: "三级 2-2-1",
},
],
},
],
},
{
label: "一级 3",
children: [
{
label: "二级 3-1",
children: [
{
label: "三级 3-1-1",
},
],
},
{
label: "二级 3-2",
children: [
{
label: "三级 3-2-1",
},
],
},
],
},
],
defaultProps: {
children: "children",
label: "label",
},
};
},
methods: {
@ -36,102 +114,57 @@ export default {
</script>
<style lang="less" scoped>
.reportForm {
width: 100%;
height: 100%;
.left {
float: left;
width: 188px;
margin-right: 0;
padding-top: 28px;
box-sizing: border-box;
height: 100%;
background: #fff;
.menu-list {
.menu-item {
color: #7c829e;
padding-left: 28px;
width: 100%;
height: 30px;
box-sizing: border-box;
line-height: 30px;
margin-bottom: 10px;
cursor: pointer;
position: relative;
}
.menu-item:hover {
background: rgba(78, 124, 255, 0.1);
color: #4e7cff;
}
.active-menu {
background: rgba(78, 124, 255, 0.25) !important;
color: #4e7cff;
}
.active-menu::before {
content: "";
width: 3px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #4e7cff;
}
}
}
.right {
float: right;
width: calc(100% - 208px);
height: 100%;
margin-left: 20px;
}
.flex() {
display: flex;
align-items: center;
}
.reportTable {
.flexColumn() {
display: flex;
flex-direction: column;
}
.main-content {
width: 100%;
height: 100%;
.flex();
> div {
background: #ffffff;
}
.left {
float: left;
width: 188px;
margin-right: 0;
padding-top: 28px;
box-sizing: border-box;
width: 280px;
height: 100%;
background: #fff;
.menu-list {
.menu-item {
color: #7c829e;
padding-left: 28px;
margin-right: 20px;
.flexColumn();
&-title {
height: 18px;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #272d45;
border-left: 2px solid #5c81ee;
padding-left: 5px;
margin: 15px 20px 12px 20px;
}
&-tree {
flex: 1;
margin: 0px 20px 20px 20px;
background: #f7f7f7;
.custom-tree-node {
width: 100%;
height: 30px;
box-sizing: border-box;
line-height: 30px;
margin-bottom: 10px;
cursor: pointer;
position: relative;
.courseName {
font-size: 16px;
font-weight: bold;
display: inline-block;
width: 192px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.menu-item:hover {
background: rgba(78, 124, 255, 0.1);
color: #4e7cff;
}
.active-menu {
background: rgba(78, 124, 255, 0.25) !important;
color: #4e7cff;
}
.active-menu::before {
content: "";
width: 3px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #4e7cff;
}
}
}
.right {
float: right;
width: calc(100% - 208px);
width: calc(100% - 300px);
height: 100%;
margin-left: 20px;
}
}
</style>