<template>
|
<div>
|
<el-input v-model="filterText" placeholder="输入关键字进行过滤" />
|
<el-tree
|
ref="tree"
|
:data="deptTree"
|
:check-strictly="true"
|
show-checkbox
|
accordion
|
node-key="id"
|
highlight-current
|
default-expand-all
|
:filter-node-method="filterNode"
|
@node-click="nodeClick"
|
/>
|
<el-button type="primary" @click="sureChoose">确定</el-button>
|
<el-button type="danger" @click="cancleChoose">取消</el-button>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
filterText: '',
|
headerHeight: '70px',
|
advancedQueryShow: false,
|
deptTree: [],
|
dept: this.initDept()
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val)
|
}
|
},
|
mounted() {
|
this.initDeptTree()
|
},
|
methods: {
|
initDept() {
|
return {
|
deptId: '',
|
deptName: '',
|
parentId: null,
|
orderNum: 0
|
}
|
},
|
initDeptTree() {
|
this.$get('system/dept').then((r) => {
|
this.deptTree = r.data.data.rows
|
})
|
},
|
filterNode(value, data) {
|
if (!value) return true
|
return data.label.indexOf(value) !== -1
|
},
|
nodeClick(data) {
|
this.dept.parentId = data.parentId
|
if (this.dept.parentId === '0') {
|
this.dept.parentId = null
|
}
|
this.dept.orderNum = data.orderNum
|
this.dept.deptName = data.label
|
this.dept.deptId = data.id
|
},
|
sureChoose() {
|
this.$emit('selectedDept', this.$refs.tree.getCheckedNodes())
|
},
|
cancleChoose() {
|
this.$emit('cancleChooseDept')
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.el-aside {
|
padding: 20px;
|
background: #f3f5f8;
|
height: 600px;
|
|
.el-tree {
|
height: 100%;
|
}
|
}
|
|
body {
|
height: 600px;
|
}
|
|
#searchTable {
|
margin-top: 10px;
|
border-collapse: collapse;
|
width: 100%;
|
}
|
|
#searchTable td,
|
#searchTable th {
|
border: 1px solid #cad9ea;
|
color: #666;
|
height: 30px;
|
}
|
|
#ygxq table {
|
border-collapse: collapse;
|
margin: 0 auto;
|
text-align: center;
|
width: 100%;
|
margin-top: 20px;
|
}
|
|
#ygxq table td,
|
#ygxq table th {
|
border: 1px solid #DDDCDC;
|
color: #666;
|
height: 30px;
|
}
|
|
#ygxq table thead th {
|
background-color: #CCE8EB;
|
width: 100px;
|
}
|
|
#ygxq table tr:nth-child(odd) {
|
background: #fff;
|
}
|
|
#ygxq table tr:nth-child(even) {
|
background: #F5FAFA;
|
}
|
|
.tdTitle {
|
font-size: 14px;
|
font-weight: 700;
|
text-align: left;
|
}
|
|
.link_button {
|
color: #169BD5;
|
}
|
|
.del_button {
|
color: #D9001B;
|
}
|
</style>
|
