VUE+ ELEMENT 选人的弹窗组件

el/2024/2/26 0:03:38

**

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>

http://www.ngui.cc/el/4893948.html

相关文章

vue+ element 小白初次实践踩坑(一)-路由与location

vue+ element 小白初次实践踩坑(一)-路由与location 1.需求:列表页跳转到详情页,但是详情页根据不同的路径进入,状态不同 2.分析:首先列表页会根据id不同跳到详情页,这个时候一个详情页就可以了。然后根据id可以拿到不同的数据; 第二版需求升级,要求加审核页面,审…

vue+ element 小白初次实践踩坑(二)-数据刷新,页面没改变

vue+ element 小白初次实践踩坑(二)-数据刷新,页面没改变 在使用vue的时候一个页面会有多个组件构建,所以会发生数据刷新,但是页面上的变化不完全 1.第一种:一个页面可以跳转到另一个页面,但是两个页面是共用的,点击跳转之后,必须强刷浏览器,数据才会更新 解决: …

vue 小白初次实践踩坑(二)-路由与location

vue 小白初次实践踩坑(二)-路由与location 需求: 第一种:要求点击不同的导航跳转到另一个页面,在另一个页面上也有通用的导航,刚刚点击的那个导航应该处于选中状态(高亮) <template><div><ul class="header-menu" ref="MainHeader&qu…

vue + element 新手指引

直接上代码 template-(Guide.vue) <template><div><!-- 新手指引 --><div id"mask"></div><div id"searchTip"><div class"stepA"><el-button type"primary" size"small" c…

vue+element 表头说明文字

vueelement 表头说明文字 第一种直接hover 表头出现说明文字 html&#xff1a; <el-table-column prop"last_result" label"上次评估结果" width"120" :render-header"renderHeader"></el-table-column>js: methods: …

jquery封装选人插件(结合layer)

html <button class="layui-btn" id="transfer">添加</button><!-- 选人弹窗主体框架 satrt--> <div class="layer-transfer" id="layer-transfer" style="display:none"><div class="lay…

element表格点击一行给行添加border

由于element ui有一套自己的样式&#xff0c;在实际工作中&#xff0c;我们可能不会照搬&#xff0c;一般会根据需求和设计对element ui进行调整&#xff0c;但是有时候自己写的样式会被element ui影响&#xff0c;不能成功应用。 这次我的工作就是给element表格点击一行给行添…

layui 布局 高度不一致时导致的错乱问题解决

这个问题找了很久&#xff0c;因为需求是要类似于瀑布流那样的布局&#xff0c;但是因为用的是layui所以又不想弃用&#xff0c;单独写&#xff0c;所以有了以下解决方案&#xff1a; html&#xff1a; <div class"layui-row list-body"><div class"…

超简单的jquery 点击文本复制文本

有点仿蓝湖的点击代码就复制的功能&#xff0c;直接点击你想复制的文本&#xff0c;就可以复制成功了 html: <ul class"info-list"><li><div class"info"><em>1</em><span class"link-addr"title"12333…

vue 不在同一处(不是同一个页面)的数据使用(数据传输)

vue 不在同一处&#xff08;不是同一个页面&#xff09;的数据使用&#xff08;数据传输&#xff09; 整理下最近在做vue项目时遇到的几个关于数据传输的问题&#xff1a; 有的时候我们在同一个页面想要调用不同的组件&#xff0c;不同的组件可能只是结构不太一样&#xff0c;…