| | |
| | | <template>
|
| | | <div>
|
| | | <el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
| | | </el-input>
|
| | | <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-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() {
|
| | | 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 {
|
| | | filterText: '',
|
| | | headerHeight: '70px',
|
| | | advancedQueryShow: false,
|
| | | deptTree: [],
|
| | | dept: this.initDept(),
|
| | | deptId: '',
|
| | | deptName: '',
|
| | | parentId: null,
|
| | | orderNum: 0
|
| | | }
|
| | | },
|
| | | watch: {
|
| | | filterText(val) {
|
| | | this.$refs.tree.filter(val);
|
| | | }
|
| | | initDeptTree() {
|
| | | this.$get('system/dept').then((r) => {
|
| | | this.deptTree = r.data.data.rows
|
| | | })
|
| | | },
|
| | | mounted() {
|
| | | this.initDeptTree()
|
| | | filterNode(value, data) {
|
| | | if (!value) return true
|
| | | return data.label.indexOf(value) !== -1
|
| | | },
|
| | | 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')
|
| | | 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 {
|
| | |
| | | .del_button {
|
| | | color: #D9001B;
|
| | | }
|
| | | </style> |
| | | </style>
|