<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(100vh - 102px);
|
background-color: #09152f;
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
.title {
|
line-height: 60px;
|
}
|
|
.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>
|
