VUE+ ELEMENT 选人的弹窗组件

**

VUE+ ELEMENT 封装的一个选人的弹窗组件

**
需求如下：

1.要有部门分类

2.能选人（同时可以选择整个部门）

3.保留原选中的人的不去除

4.能搜索，显示搜索结果的时候 不显示部门名称

5.点击部门展开收起，只有本部门时默认展开

<template>
    <div class="list-box">
        <div class="add-l" v-loading="loading">
            <div class="search-body">
                <input type="text" v-model="keyword" placeholder="搜索成员">
                <i class="input-icon bg-icon bg-icon-sousuo"></i>
            </div>
            <div class="name-list" ref="list">
                <template v-if="!isSearch">
                    <div class="group-list" v-for="(team,index) in search_persons" :key="team.id">
                        <div class="group-name" @click="isOpenClick(team)">
                            <i class="bg-icon bg-icon-f10 is-close" 
                            :style="{transform:team.is_open?'rotate(90deg)':'rotate(0deg)'}"></i>
                            <span>{{team.name}}</span>
                            <i class="bg-icon bg-icon-tianjia is-select" @click.stop="selectGroup(team)"></i>
                        </div>
                        <div class="group-person" v-if="team.is_open">
                            <template v-for="person in team.children">
                                <p :key="person.uid" @click="selectPerson(person)" :class="{on:isSelected(person.uid)}">
                                <span class="hdpic">
                                    <el-image :src="'http://pic2.hanmaker.com/staff/small/' + person.head_img" :lazy="search_persons.length>7" :scroll-container="$refs.list"></el-image>
                                </span>
                                    <span class="named">{{person.full_name}}</span>
                                    <i class="bg-icon" :class="{'bg-icon-xzfill':isSelected(person.uid),'bg-icon-weixuanzhongyuanquan':!isSelected(person.uid)}"></i>
                                </p>
                            </template>
                        </div>
                    </div>
                </template>
                <template v-if="isSearch">
                    <div class="group-person">
                        <template v-for="person in search_persons">
                            <p :key="person.uid" @click="selectPerson(person)" :class="{on:isSelected(person.uid)}">
                            <span class="hdpic">
                                <el-image :src="'http://pic2.hanmaker.com/staff/small/' + person.head_img" :lazy="search_persons.length>7" :scroll-container="$refs.list"></el-image>
                            </span>
                                <span class="named">{{person.full_name}}</span>
                                <i class="bg-icon" :class="{'bg-icon-xzfill':isSelected(person.uid),'bg-icon-weixuanzhongyuanquan':!isSelected(person.uid)}"></i>
                            </p>
                        </template>
                    </div>
                </template>
            </div>
        </div>
        <div class="add-r">
            <div class="r-top">已选成员 ：<em>{{selected.length}}</em>人</div>
            <div class="r-list">
                <div class="checked-m">
                    <template v-for="(person, index) in selected">
                        <p v-if="person" :key="person.uid+'_selected'">
                        <span class="hd-img">
                            <el-image :src="'http://pic2.hanmaker.com/staff/small/' + person.head_img"></el-image>
                        </span>
                            <span class="name-txt">{{person.full_name}}</span>
                            <i class="bg-icon bg-icon-qa-close" @click="delPersons(index)"></i>
                        </p>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import '../assets/js/css/add-staff.css'
    export default{
        name:'RpLinkPerson',
        props:{
            isTeam:{
                type:Number,
                default:0
            },
            isObj:{
                Type:Boolean,
                default: false
            },
            value:{
                type:Array,
                default:()=>[]
            },
            isOpenAll:{
                type:Boolean,
                default:false,
            }
        },
        inject: {
            team_staff: {default: null}
        },
        created () {
            if(this.team_staff){
                this.persons = this.team_staff;
                this.search_persons = this.team_staff;
            }else{
                this.getLinkPerson();
            }
        },
        data () {
            return {
                keyword:'',
                persons:[],
                selected:[],
                search_persons:[],
                every_person:[],
                loading:false,
                lazy:true,
                isSearch:false,
                activeStyle:{
                    transform: 'rotate(0deg)',
                },
            }
        },
        methods: {
            getLinkPerson() {
                let _this = this;
                _this.loading = true;
                _this.$api.get('/team/staff', {is_team: this.isTeam}, res => {
                    _this.loading = false;
                    if (res.errcode == 0) {
                        _this.persons = res.data;
                        let search_persons = res.data;
                        search_persons.forEach(person=>{
                            person.is_open = this.isOpenAll;
                        })
                        _this.search_persons = [...search_persons];
                        _this.setDefault(_this.value);
                    }
                });
            },
            isOpenClick(team){
                team.is_open = !team.is_open;
                // this.activeStyle = {
                //     transform: team.is_open?'rotate(90deg)':'rotate(0deg)',
                // }
                this.$forceUpdate();
            },
            // 选择人员
            selectPerson(person){
                let index = this.selected.findIndex(item=> item && item.uid == person.uid);
                if(index>=0){
                    this.selected.splice(index,1);
                }else{
                    this.selected.push({...person});
                }
                this.change();
            },
            //选择整个项目组
            selectGroup(team) {
                for(let i = 0;i<team.children.length;i++){
                    let index = this.selected.findIndex(item=> item && item.uid == team.children[i].uid);
                    if(index<0){
                        this.selected.push({...team.children[i]});
                    }
                }
                this.change();
            },
            delPersons(index){
                this.selected.splice(index,1);
                this.change();
            },
            change(){
                let input = [];
                this.selected.forEach(person => {
                    if(person){
                        if (this.isObj) {
                            input.push({
                                uid: person.uid,
                                name: person.full_name
                            })
                        } else {
                            input.push(person.uid);
                        }
                    }
                });
                this.$emit('input', input);
            },
            setDefault(data){
                let change = [];
                data.forEach(item => {
                    let index = -1; 
                    let c_child = [];   
                    for(let j=0;j<this.persons.length;j++) {
                        c_child = [...c_child,...this.persons[j].children]
                    }    
                    if (typeof item == 'number' || typeof item == 'string') {
                        index = c_child.findIndex(person => person.uid == item)
                    } else {
                        index = c_child.findIndex(person => person.uid == item.uid)
                    }
                    change.push(c_child[index]);
                });
                this.selected = change;
            },
            isSelected(uid) {
                return this.selected.findIndex(item => item && item.uid == uid) >= 0;
            }
        },
        watch:{
            value(val){
                this.setDefault(val);
            },
            keyword(text) {
                this.isSearch = false;
                if (text == '') {
                    this.search_persons= this.persons;
                } else {
                    this.isSearch = true;
                    let search_persons = [];
                    for(let g= 0;g<this.persons.length;g++){
                        let s_child = this.persons[g].children.filter(person => {
                            return person.full_name.indexOf(text) >= 0;
                        })  
                        search_persons = [...search_persons,...s_child];
                    }
                    this.search_persons = [...search_persons];
                }
            }
        }
    }
</script>

<style>
    .list-box .add-r .r-list .checked-m p .bg-icon-qa-close {
        float: right;
        font-size: 18px;
        color: #409EFF;
        position: absolute;
        right: 10px;
        top: 0;
        z-index: 20;
    }
</style>