settle_down_web/src/views/components/userSelectCompon.vue

<template>
<!-- @hide="popoverHide" -->
    <el-popover
        ref="reference"
        placement="bottom-start"
        :width="width?width:'400'"
        trigger="click"
        :disabled="disab"
    >
        <el-tabs v-model="activeName" :width="width?width:'400'" type="card" @tab-click="handleClick">
            <el-input v-model="checkLabel" size="mini" placeholder="请输入搜索内容" :disabled="disab">
                <i slot="suffix" class="el-icon-edit el-input__icon" />
            </el-input>
            <el-tab-pane label="按组织" name="1" style="height: 300px; overflow-y:auto;">
                <el-tree v-loading="loading" ref="tree_1" :default-expanded-keys="expandedKeys" :default-checked-keys="selectValue" :data="data_1" show-checkbox node-key="id" empty-text="没有数据了" :props="defaultProps" :filter-node-method="filterNode" @check="handleNodeChange" />
            </el-tab-pane>
            <el-tab-pane label="按岗位" name="2" style="height: 300px; overflow-y:auto;">
                <el-tree v-loading="loading" ref="tree_2" :default-expanded-keys="expandedKeys" :default-checked-keys="selectValue" :data="data_2" show-checkbox node-key="id" empty-text="没有数据了" :props="defaultProps" :filter-node-method="filterNode" @check="handleNodeChange" />
            </el-tab-pane>
            <el-tab-pane label="我的下属" name="3" style="height: 300px; overflow-y:auto;">
                <el-tree v-loading="loading" ref="tree_3" :default-expanded-keys="expandedKeys" :default-checked-keys="selectValue" :data="data_3" show-checkbox node-key="id" empty-text="没有数据了" :props="defaultProps" :filter-node-method="filterNode" @check="handleNodeChange" />
            </el-tab-pane>
            <el-tab-pane label="我的部门" name="4" style="height: 300px; overflow-y:auto;">
                <el-tree v-loading="loading" ref="tree_4" :default-expanded-keys="expandedKeys" :default-checked-keys="selectValue" :data="data_4" show-checkbox node-key="id" empty-text="没有数据了" :props="defaultProps" :filter-node-method="filterNode" @check="handleNodeChange" />
            </el-tab-pane>
        </el-tabs>

        <div slot="reference" data-v-51add840="" style="width: 100%;" class="col-input el-col el-col-20" @click="search">
            <div data-v-51add840="" class="el-form-item">
                <div class="el-form-item__content">
                    <div data-v-51add840="" class="el-select">
                        <div class="el-input el-input--suffix is-focus">
                            <input v-model="selectLabel" type="text" autocomplete="off" placeholder="请选择人员" readonly class="el-input__inner">
                            <span class="el-input__suffix">
                                <span class="el-input__suffix-inner">
                                <i :class="classType==1?class_up:class_dow" style="" />
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </el-popover>
</template>

<script>
export default {
    props: {
        defaultSelect: Array,
        width: String,
        multiple: Boolean,

        disab: Boolean,
        groupId: String,
        parentData: String
    },
    data() {
        return {
            loading: false,
            classType: 1,
            checkLabel: '',
            selectLabel: '',
            selectValue: [],
            labels: [],
            selectTree: [],
            expandedKeys: ['0'],
            activeName: '1',
            class_up: 'el-select__caret el-input__icon el-icon-arrow-up',
            class_dow: 'el-select__caret el-input__icon el-icon-arrow-up is-reverse',

            data_1: [],
            data_2: [],
            data_3: [],
            data_4: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    watch: {
        checkLabel(val) {
            this.$refs['tree_' + this.activeName].filter(val)
        }
    },
    mounted() {
        this.selectValue = this.defaultSelect;
        this.initData();
    },
    methods: {
        initData: function(){
            // this.getTreeDate();
            this.initTreeDate();
        },
        search: function() {
            if (this.classType === 1) {
                this.classType = 2
            } else {
                this.classType = 1
            }
        },

        handleClick: function() {
            this.getTreeDate()
        },

        handleNodeChange: function(data, checked, indeterminate) {
            if (!this.multiple) {
                if (checked) {
                    this.$refs['tree_' + this.activeName].setCheckedKeys([])
                    this.$refs['tree_' + this.activeName].setChecked(data, true)
                    if (data.children == null) {
                        this.selectValue = [data.id]
                        this.labels = [data.label]
                    }
                }
            } else {
                if (this.selectValue.indexOf(data.id) > -1) {
                    this.selectValue = this.selectValue.filter(item => item !== data.id)
                    this.labels = this.labels.filter(item => item !== data.label)
                }
                if (data.children != null && data.children.length > 0) {
                    this.deleteSelect(data.children)
                }
            }
            this.popoverHide()
        },
        deleteSelect(data) {
            data.forEach(it => {
                if (it.children != null && it.children.length > 0) {
                    this.deleteSelect(it.children)
                }
                this.selectValue = this.selectValue.filter(item => item !== it.id)
                this.labels = this.labels.filter(item => item !== it.label)
            })
        },

        popoverHide: function() {
            const sectd = this.$refs['tree_' + this.activeName].getCheckedNodes()
            const seachId = []
            const seachVal = []
            sectd.forEach(element => {
                if (element.selectType && this.selectValue.indexOf(element.id) === -1) {
                    seachId.push(element.id)
                    seachVal.push(element.label)
                }
            })
            if (seachVal.length > 0) {
                seachVal.forEach(ii => {
                    this.labels.push(ii)
                })
            }
            this.selectLabel = this.labels.toString()
            if (seachId.length > 0) {
                seachId.forEach(ij => {
                    this.selectValue.push(ij)
                })
            }
            if (this.parentData) {
                const parent = {
                    selectValue: this.selectValue,
                    parentData: this.parentData
                }
                this.$emit('selectValue', parent)
            } else {
                this.$emit('selectValue', this.selectValue)
            }
        },

        // 数据回显
        popoverShow: function() {
            const sectd = this.$refs['tree_' + this.activeName].getCheckedNodes()
            const seachVal = []
            sectd.forEach(element => {
                if (element.selectType) {
                    seachVal.push(element.label)
                }
            })
            if (seachVal.length > 0) {
                seachVal.forEach(ii => {
                    this.labels.push(ii)
                })
            }
            this.selectLabel = this.labels.toString();
        },

        filterNode: function(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },

        // 获取树级数据
        getTreeDate: function() {
            this.loading = true;
            const postData = {
                groupType: this.activeName,
                groupId: this.groupId
            }
            this['data_' + this.activeName] = []
            const _this = this;
            this.baseUserRequest('getUserListGroupType', postData).then((res) => {
                if (res.data) {
                    _this['data_' + this.activeName] = res.data.data
                }
                _this.loading = false
                 this.$nextTick(() => {
                    this.popoverHide()
                })
            }).catch(() => {
            })
        },

        initTreeDate: function() {
            this.loading = true;
            const postData = {
                groupType: this.activeName,
                groupId: this.groupId
            }
            this['data_' + this.activeName] = []
            const _this = this;
            this.baseUserRequest('getUserListGroupType', postData).then((res) => {
                if (res.data) {
                    _this['data_' + this.activeName] = res.data.data
                }
                _this.loading = false
                this.$nextTick(() => {
                    this.popoverShow();
                })
            }).catch(() => {
            })
        },

        // getData(data) {
        //     data.map(item => {
        //         this.getLeadKeys(item)
        //     })
        // },
        // getLeadKeys(node) {
        //     if (node.children && node.children.length > 0) {
        //         node.disabled = true
        //         node.children.forEach(item => {
        //             this.getLeadKeys(item)
        //         })
        //     } else {
        //         if (node.selectType) {
        //             node.disabled = false
        //         } else {
        //             node.disabled = true
        //         }
        //     }
        // },

        baseUserRequest(opUrl, postData) {
            return this.$channel.globleRequest('FrameExclusiveUserController', opUrl, postData, 'project')
        }

    }
}
</script>