dd_pc/src789/components/EmployeeSelector.vue

<template>
	<div>
		<div class="employee_selector_box">
			<el-row :gutter="10">
				<el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box one">
					<div class="search-box">
						<div class="search flex-box" style="margin-bottom: 7px;">
							<el-input v-model="keyword" placeholder="请输入姓名" clearable></el-input>
						</div>
						<div class="search flex-box" v-if="can_select_dept">
						    <el-cascader class="date-picker-width" v-model="dept_id" :options="dept_list" :props="{ checkStrictly: true,value:'id',label:'name',children:'_child'}" ref="dept"	clearable filterable placeholder="全公司"></el-cascader>
						</div>
					</div>
					<div class="flex-box" style="padding: 10px;border-bottom: 1px solid #f1f1f1;">
						<div class="flex-1"></div>
						<el-checkbox v-if="isChecKedAll&&multi" v-model="checked" @change="checkedChange" :indeterminate="indeterminate">全选</el-checkbox>
					</div>
					<el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 354px;" v-loading="table_loading">
						<div class="choose_left">
							<div class="persons_box" style="padding-top:4px;" v-if="list.length > 0">
								<a class="employee_cell_a" href="javascript:void(0)" v-for="(item, index) in list" :key="index">
									<div class="employee_cell flex-box flex-v-ce" v-if="can_select_employee" @click.prevent.stop="select_employee(item)">
										<div class="employee_checkbox"><el-checkbox v-model="item.checked"></el-checkbox></div>
										<userImage :user_name="item.name" :img_url="item.img_url" width="30px" height="30px"></userImage>
										<div class="employee_name">{{ item.name }}</div>
										<div class="employee_cell_clear"></div>
									</div>
								</a>
							</div>
							<div v-else class="fontColorF" style="text-align: center;margin-top: 50px;">暂无可选人员，请先在<span class="blue"> “设置-组织架构” </span>中为员工【开启积分管理】</div>
						</div>
					</el-scrollbar>
				</el-col>
				<el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" class="col-line"><span style="opacity: 0;">空</span></el-col>
				<el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box">
					<div class="option-box flex-box flex-v-ce">
						<div class="fontColorF flex-1" v-show="multi">已选择{{ employee_selected_list.length }}个员工</div>
						<el-button type="type" @click="clear_data()">清空</el-button>
					</div>
					<el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 400px;">
						<div class="choose_right">
							<div class="employee_cell flex-box flex-v-ce" v-for="(item, index) in dept_selected_list" :key="index">
								<div class="employee_name">{{ item.dept_name }}</div>
								<div class="employee_delete"><el-button type="default" size="mini" @click="dept_cancel(item)" icon="el-icon-close" circle></el-button></div>
								<div class="employee_cell_clear"></div>
							</div>

							<div class="employee_cell" v-for="(item, index) in employee_selected_list" :key="index">
								<userImage :user_name="item.name" :img_url="item.img_url" width="30px" height="30px"></userImage>
								<div class="employee_name">{{ item.name }}</div>
								<div class="employee_delete">
									<el-button type="default" size="mini" @click="employee_cancel(item, true)" icon="el-icon-close" circle></el-button>
								</div>
								<div class="employee_cell_clear"></div>
							</div>
						</div>
					</el-scrollbar>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>

export default {
  props: {
    can_select_dept: {//是否能选择公司
      type: Boolean,
      default: true
    },
    can_select_employee: {//是否能选择员工
      type: Boolean,
      default: true
    },
    dept_not_select: {//排除部门的ID，包含ID时不出现在选择列表中
      type: Array,
      default: () => {
        return []
      }
    },
    selected: {//已经选择的员工和部门
      type: Object,
      default: () => {
        return {
          employee: [],
          dept: []
        }
      }
    },
    multi: {//指定员工是否能多选
      type: Boolean,
      default: true
    },
    dept_multi: {//指定部门是否能多选
      type: Boolean,
      default: true
    },
    employee_list: {//指定显示的员工列表，注意：传值后组件的员工数据将不是统一向服务器获取的，而是指定的员工列表，格式是：[{id: 1, name: “张三”, img_url: “”}]
      type: Array,
      default: () => {
        return []
      }
    },
    close_clear_data: {//关闭时是否清空选择的数据
      type: Boolean,
      default: true
    },
    max: {//当multi为true时，用来限制选择人数，0不生效
      type: Number,
      default: 0
    },
    user_no_select:{//是否能选择创始人
      type: Boolean,
      default: true
    },
    isChecKedAll:{//是否能全人员
      type: Boolean,
      default: true
     },
	 my_no_select:{//当前设置人的id
		  type: Number,
		  default: 0
	 },
  },
  name: "EmployeeSelector",
  data() {
    let selected = JSON.parse(JSON.stringify(this.selected));
    let user_no_select = JSON.parse(JSON.stringify(this.user_no_select));
    return {
      table_loading:false,
      employee_selected_list: selected.employee,
      dept_selected_list: selected.dept,
      employee_selected: [],
      dept_selected: [],
      com_height: '100%',

      list: [],//人员列表
	  dept_name: '',//部门名称
	  dept_id: 0,//部门ID
	  pid:0,//部门ID实传
      dept_list: [],//部门列表
	  dept_list_arr: [],//收集的部门
      keyword: '',//搜索值
      checked: false,//是否全选
      indeterminate: false,
      not_user: user_no_select
    }
  },
  watch: {
	dept_id(val){
		if(val.length>1){
			this.pid=val[val.length-1];
		}else{
			this.pid=val[0];
		}
		this.get_user_list();
		this.checked=false;
	},
    selected(val) {
      let selected = JSON.parse(JSON.stringify(val))
      this.employee_selected = []
      this.dept_selected = []
      this.employee_selected_list = selected.employee
      this.dept_selected_list = selected.dept
      for (let i in selected.employee) {
        this.employee_selected.push(selected.employee[i].id)
      }
      for (let i in selected.dept) {
        this.dept_selected.push(selected.dept[i].dept_id)
      }
    },
    //搜索
    keyword(val) {
      this.get_user_list();
	  this.checked=false;
    }
  },
  methods: {
    //全选择
    checkedChange(val){
      if (val) {
        for (let i in this.list) {
          this.$set(this.list[i], 'checked', true)
        }
        this.$nextTick(() => {
          let employeeSelectedList = JSON.parse(JSON.stringify(this.employee_selected_list))
          let employeeSelectedIds = [], total = 0
          employeeSelectedList.forEach(element => {
            employeeSelectedIds.push(element.id)
          });
          for (const i in this.list) {
            if (employeeSelectedIds.includes(this.list[i].id)) {
              total += 1
            }else{
              this.employee_selected_list.push(this.list[i])
            }
          }
          this.list.length == total?this.indeterminate = true:this.indeterminate = false
        })
      }else{
        this.clear_data()
      }
    },
    //添加或移除已添加的员工
    employee_cancel(item) {
      this.employee_selected_list.map((arr,index)=>{
          if(arr.id==item.id){
            this.employee_selected_list.splice(index,1);
          }
      })
      this.list.map((arr,index)=>{
          if(arr.id==item.id){
           this.$set(arr, 'checked', false)
          }
      })
    },
	//获取部门
	get_dept_list() {
		this.$axios('get','/api/department/tree').then(res => {
			this.dept_list =this.getTreeData(res.data.data.list);
		});
	},
	 // 递归判断列表，把最后的children设为undefined
	 getTreeData(data) {
		for (var i = 0; i < data.length; i++) {
			if (data[i]._child.length < 1) {
				// children若为空数组，则将children设为undefined
				data[i]._child = undefined;
			} else {
				// children若不为空数组，则继续 递归调用 本方法
				this.getTreeData(data[i]._child);
			}
		}
		return data;
	 },
    //选择部门
    dept_cancel(item) {
      this.dept_selected.splice(this.dept_selected.indexOf(item.id), 1)
      let delete_index = -1
      for (let i in this.dept_selected_list) {
        if (this.dept_selected.indexOf(this.dept_selected_list[i].id) < 0) {
          delete_index = i
        }
      }
      if (delete_index >= 0) {
        this.dept_selected_list.splice(delete_index, 1)
        for (let i in this.dept_list) {
          if (this.dept_list[i].dept_id == item.id) {
            this.$set(this.dept_list[i], 'checked', false)
          }
        }
      }
    },
    //选择员工
    select_employee(item) {
      if (item.checked) {
        item.checked = false
        this.employee_cancel(item)
      } else {
        if (!this.multi) {
          this.employee_selected = []
          this.employee_selected_list = []
          for (let i in this.list) {
            this.$set(this.list[i], 'checked', false)
          }
        }
        if (this.max > 0 && this.employee_selected_list.length == this.max && this.multi) {
          this.$message.error('最多只能选择' + this.max + '人')
          return false
        }
        this.employee_selected.push(item.id)
        this.employee_selected_list.push({
          id: item.id,
          name: item.name,
          img_url: item.img_url
        })
        item.checked = true
      }
    },

    clear_data() {
      this.employee_selected = []
      this.employee_selected_list = []
      this.dept_selected = []
      this.dept_selected_list = []
      this.checked = false
      for (let i in this.list) {
        this.$set(this.list[i], 'checked', false)
      }
      for (let i in this.dept_list) {
        this.$set(this.dept_list[i], 'checked', false)
      }
    },

    close() {
      if (this.close_clear_data) {
        this.employee_selected = []
        this.employee_selected_list = []
        this.dept_selected = []
        this.dept_selected_list = []
        for (let i in this.list) {
          this.$set(this.list[i], 'checked', false)
        }
        for (let i in this.dept_list) {
          this.$set(this.dept_list[i], 'checked', false)
        }
      }
    },
    confirm() {
      this.$emit('confirm', {
        employee: this.employee_selected_list,
        dept: this.dept_selected_list
      })
      this.close()
    },
    //获取员工详情
    get_user_list() {
      this.table_loading = true;
      var that=this;
      var employee_selected_list=this.employee_selected_list;
      if (this.employee_list.length > 0) {
        let list = this.employee_list
        for (let i in list) {
          list[i]['letter_index'] = '#';
          if (this.$store.getters.employee_map[list[i].id]) {
            list[i]['letter_index'] = this.$store.getters.employee_map[list[i].id].letter_index;
            if (this.$store.getters.employee_map[list[i].id].img_url == '') {
              list[i]['img_url'] = 'static/images/head_default.png';
            } else {
              list[i]['img_url'] = this.$store.getters.employee_map[list[i].id].img_url;
            }
          }

          list[i]['checked'] = false
          if (this.employee_selected.indexOf(list[i].id) >= 0) {
            list[i]['checked'] = true
          }
        }
        this.list = list.sort((a, b) => {
          return a.letter_index.charCodeAt(0) - b.letter_index.charCodeAt(0)
        })
        return false
      }
	  
      this.list = []
      this.$axios('get','/api/employee/index',{ dept_id: this.pid,keywords: this.keyword, page: 0,page_size: 2000}).then((res) => {
        var employee=res.data.data.list||[];
		var userAll=[];
        employee.forEach((item,i)=>{
			  if(!this.not_user && item.is_creator == 1){//过滤创始人
				  return null;
			  }else if(this.my_no_select==item.id){//过滤掉当前设置人
				  return null;
			  }else if(item.is_official==1){
				  userAll.push(item);
			  }
        })
	    userAll.map((item)=>{
			 item['checked'] = false;
			 for(var i in employee_selected_list){//判断传进来的员工是否是员工集合里的，是就设为已点击状态
			   if(employee_selected_list[i].id==item.id){
				 item['checked'] = true;
			   }
			 }
	    })
        // if (userAll.length == employee_selected_list.length) { this.checked = true};
		that.list = userAll
	   }).finally(() => {
		  that.table_loading = false;
	   })
	}
  },
  created() {
	var that=this;
	that.checked=false;
    if (document.documentElement.style.height) {
      this.com_height = document.documentElement.style.height
    }
    setTimeout(() => {
      that.get_user_list();
	  if(that.can_select_dept){
		  that.get_dept_list();
	  }
    }, 200)
  }
}
</script>

<style scoped>
a {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
}
.employee_selector_box {
	width: 600px;
	padding: 20px;
	box-sizing: border-box;
	margin: 0 auto;
}

/* 搜索框 */
.employee_selector_box .search {
	margin: 0 auto;
	width: 80%;
}


/* 左边框 */
.employee_selector_box .choose_left {
	padding: 8px 10px 8px 10px;
}

.employee_selector_box .choose_left .employee_cell {
	border-bottom: 1px #f8f8f8 solid;
}

.employee_selector_box .choose_left .employee_cell_a .employee_cell {
	border-bottom: none;
}

.employee_selector_box .choose_left .employee_checkbox {
	padding-left: 8px;
}

.employee_selector_box .choose_left .employee_img_url {
	padding-left: 8px;
}

.employee_selector_box .choose_left .employee_name {
	padding-left: 8px;
}

.employee_selector_box ::v-deep .el-scrollbar__thumb {
	width: 2px;
	margin: 15px 0 0 6px;
	background: #409eff;
}

/* 左边框 */

/* 右边距 */
.employee_selector_box .option-box {
	padding: 14px;
}

.employee_selector_box .choose_right {
	padding: 8px 10px;
}

.employee_selector_box .choose_right .employee_delete .el-button {
	transform: scale(0.5);
	background: #c0c4cc;
}

.employee_selector_box .choose_right .employee_delete .el-button ::v-deep .el-icon-close {
	color: #fff;
}

.employee_selector_box .choose_right .employee_delete .el-button:active {
	background: #409eff;
}

.employee_selector_box .choose_right .employee_delete .el-button:active ::v-deep .el-icon-close {
	color: #fff;
}

.employee_selector_box .choose_right .employee_cell .employee_name {
	padding-left: 8px;
}

.employee_selector_box .choose_right .employee_cell .employee_img_url {
	padding-left: 8px;
}

/* 右边距 */

.employee_selector_box ::v-deep .employee_cell {
	padding: 8px 0;
}

.employee_selector_box ::v-deep .employee_cell:hover {
	background: #ecf5ff;
}

.employee_cell {
	display: -webkit-inline-box;
	cursor: pointer;
	width: 100%;
	color: #606266;
	padding: 8px 0;
	background-color: transparent;
}

.employee_cell .employee_cell_clear {
	clear: both;
}

.employee_cell .employee_img_url {
	display: table-cell;
	vertical-align: middle;
	width: 30px;
	padding-left: 0px;
}

.employee_cell .employee_img_url img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

.employee_cell .employee_checkbox {
	display: table-cell;
	vertical-align: middle;
	width: 30px;
	text-align: center;
}

.employee_cell .employee_name {
	display: table-cell;
	vertical-align: middle;
	color: #606266;
}

.employee_delete {
	display: table-cell;
	text-align: right;
	padding-right: 0px;
}

.employee_cell_a {
	display: block;
}

.employee_cell_a:hover {
	background-color: #ecf5ff;
	border-radius: 4px;
}

.dept_child_cell {
	display: table-cell;
	vertical-align: middle;
}

.dept_child_cell span {
	float: right;
	padding-right: 8px;
}

.dept_child_cell span:hover {
	color: #1c1c1c;
}

.dept_child_cell span:active {
	color: #1c1c1c;
}

.scroller-box {
	height: 440px;
	padding: 0px !important;
	background-color: #fdfdfd;
	border: 1px solid #eee;
	border-radius: 4px;
	overflow: hidden;
}
/* .scroller-box.one{
    height: 440px;
  } */

.col-line {
	position: relative;
	height: 400px;
}

.col-line:before {
	content: ' ';
	width: 1px;
	height: 400px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	background-color: #eee;
}

.search-box {
	background-color: #fff;
	padding: 10px 5px;
	border-bottom: 1px solid #eee;
}

.option-box {
	padding: 5px;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	margin: 0 -5px;
}

.child_btn {
	color: #409eff;
}
.dept_path {
	margin: 10px 0;
	display: block;
	white-space: nowrap;
	overflow: auto;
}

/*滚动条的宽度*/

.dept_path::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

.dept_path::-webkit-scrollbar-track {
	width: 6px;
	background-color: #fff0;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

/*滚动条的设置*/

.dept_path::-webkit-scrollbar-thumb {
	background-color: #fff0;
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
/*滚动条移上去的背景*/

.dept_path:hover::-webkit-scrollbar-thumb {
	background-color: rgba(144, 147, 153, 0.3);
}
</style>