<template>
|
<div class="aside">
|
<div class="title">组织机构</div>
|
<div class="input">
|
<el-input
|
placeholder="输入组织机构名称, 按下enter键搜索"
|
v-model="searchArea"
|
@change="filterTreeNode"
|
></el-input>
|
</div>
|
<div class="menu">
|
<el-tree
|
ref="department"
|
:filter-node-method="filterNode"
|
:data="areaData"
|
:props="defaultProps"
|
@node-click="nodeClick"
|
></el-tree>
|
</div>
|
</div>
|
</template>
|
<script>
|
import department from "@/api/system/department";
|
|
export default {
|
name: "departmentAside",
|
data() {
|
return {
|
searchArea: null,
|
areaData: [],
|
defaultProps: {
|
children: "children",
|
label: "regionName",
|
},
|
};
|
},
|
|
created() {
|
if (sessionStorage.getItem("area")) {
|
this.areaData = JSON.parse(sessionStorage.getItem("area"));
|
} else {
|
department
|
.getDepartmentList()
|
.then((res) => {
|
this.areaData = res;
|
sessionStorage.setItem("area", JSON.stringify(this.areaData));
|
})
|
.catch((err) => this.$message.error(err));
|
}
|
},
|
|
methods: {
|
filterTreeNode() {
|
this.$refs.department.filter(this.searchArea);
|
},
|
|
filterNode(value, data) {
|
if (!value) return true;
|
return data.regionName.indexOf(value) !== -1;
|
},
|
nodeClick(data, node, props) {
|
if (node.level > 1) {
|
this.$emit("selectedDepartment", data);
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.aside {
|
width: 200px;
|
height: calc(103vh - 102px);
|
background-color: #ffffff;
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
.title {
|
line-height: 60px;
|
color: #333;
|
}
|
|
.input {
|
line-height: 30px;
|
|
&::v-deep .el-input__inner {
|
// background-color: #09152f;
|
//border: 1px solid #17324c;
|
}
|
}
|
|
.menu {
|
margin-top: 20px;
|
flex: 1;
|
.el-tree {
|
height: 100%;
|
// background-color: #09152f;
|
// &::v-deep .el-tree-node:focus>.el-tree-node__content{
|
// background-color: #092c4a;
|
// }
|
// &::v-deep .el-tree-node__content:hover{
|
// background-color: #092c4a;
|
// }
|
}
|
}
|
}
|
</style>
|
