dd_jx_pc/src/components/public/EmployeeSelector.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible_"
    :close-on-click-modal="false"
    :before-close="close_before"
    append-to-body
    @open="openDialog"
    width="640px"
    top="5%"
    class="employee_select_dialog"
  >
    <slot name="header"></slot>
    <div class="search-box flex-box-ce" v-if="can_select_employee">
      <div class="search flex-box">
        <el-cascader
          v-show="can_select_employee && deptId == 0"
          v-model="dept_id"
          ref="dept"
          :options="dept_list"
          :props="{ checkStrictly: true, value: 'dept_id', label: 'name', children: '_child' }"
          clearable
          :disabled="deptId > 0"
          placeholder="全公司"
        ></el-cascader>
      </div>
      <div class="search flex-box"><el-input prefix-icon="el-icon-search" v-model="keyword" placeholder="请输入姓名" clearable></el-input></div>
    </div>
    <div class="dept_path scroll-bar flex-box flex-d-wrap" v-if="can_select_dept">
      <template v-if="pid_list_arr.length > 0">
        <div @click="back_by_index(0)" class="blue" style="cursor: pointer;">全公司</div>
        <div v-for="(item, index) in pid_list_arr" :key="index" @click="back_by_index(index + 1, item)" class="font-flex-word" style="max-width: 120px;">
          <i class="el-icon-arrow-right"></i>
          <span class="blue" style="cursor: pointer;">{{ item.name }}</span>
        </div>
      </template>
    </div>
    <div class="employee_selector_box" v-if="visible_">
      <div class="flex-box-ce">
        <div class="scroller-box flex-1">
          <!-- 人员 -->
          <div v-if="can_select_employee && isChecKedAll && multi" class="option-box flex-box flex-box-ce" style="padding-left: 22px;">
            <el-checkbox v-model="checked" @change="checkedChange">全选</el-checkbox>
          </div>
          <el-scrollbar :native="false" v-loading="table_loading" :style="styleObject">
            <div class="choose_left">
              <template v-if="can_select_dept">
                <div class="persons_box" v-if="dept_list.length > 0">
                  <div v-for="(item, index) in dept_list" :key="index">
                    <div class="flex-box flex-v-ce deptList" @click="select_dept(item, index)" v-show="item.name.indexOf(keyword) >= 0">
                      <div :class="[item.checked ? 'showCheckbox' : '']" class="checkbox"><span class="isCheckbox"></span></div>
                      <div class="employee_name flex-1 font-flex-word">{{ item.name }}</div>
                      <div v-if="item._child" class="blue" @click.stop="show_child(item)">| 下级</div>
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="can_select_employee">
                <div class="persons_box" v-if="list.length > 0">
                  <div class="employee_cell" @click.prevent.stop="select_employee(item)" v-for="(item, index) in list" :key="index" v-show="item.id">
                    <div class="employee_checkbox"><el-checkbox v-model="item.checked"></el-checkbox></div>
                    <div class="employee_img_url"><img :src="item.img_url" class="employee_cell_head_img" /></div>
                    <div class="employee_name">{{ item.name }}</div>
                    <div class="employee_cell_clear"></div>
                  </div>
                </div>
                <div v-else class="fontColorC" style="text-align: center;margin-top: 50px;">暂无可选人员</div>
              </template>
            </div>
          </el-scrollbar>
        </div>
        <div class="col-line"><span style="opacity: 0;">空</span></div>
        <div class="scroller-box flex-1">
          <div class="option-box flex-box-ce flex-d-center">
            <span v-if="multi && can_select_employee">
              已选择
              <span class="blue" style="padding: 0 2px;">{{ employee_selected_list.length }}</span>
              个员工
            </span>
            <span></span>
            <el-button size="small" class="dangerBtn" @click="clear_data">清空</el-button>
          </div>
          <el-scrollbar :native="false" style="height: 405px;">
            <div class="choose_right">
              <div class="employee_cell" 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_delete(item, index)" 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">
                <div class="employee_img_url" v-if="item.img_url"><img :src="item.img_url" class="employee_cell_head_img" /></div>
                <div class="employee_img_url" v-else><img src="@/assets/image/head_default.png" class="employee_cell_head_img" /></div>
                <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>
        </div>
      </div>
    </div>
    <!-- <div class="fontColorD" style="text-align: center;">以上人员列表只显示“在职”人员</div> -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      // 标题
      type: String,
      default: '选择部门和员工'
    },
    deptId: {
      //指定部门ID,人员列表就是该部门的
      type: Number,
      default: 0
    },
    visible: {
      // 是否显示组件
      type: Boolean,
      default: false
    },
    can_select_dept: {
      // 是否只能选择部门(单选择部门，不能选择人员)
      type: Boolean,
      default: false
    },
    dept_not_select: {
      // 排除部门ID
      type: Array,
      default: () => {
        return [];
      }
    },
    dept_multi: {
      // 指定部门是否能多选
      type: Boolean,
      default: true
    },
    dept_children: {
      //选择部门时是否包含子部门
      type: Boolean,
      default: true
    },
    can_select_employee: {
      // 指定是否能选择员工
      type: Boolean,
      default: true
    },
    employee_not_select: {
      // 排除员工的ID，包含ID时不出现在选择列表中
      type: Array,
      default: () => {
        return [];
      }
    },
    selected: {
      // 已经选择的员工和部门
      type: Object,
      default: () => {
        return { employee: [], dept: [] };
      }
    },
	isChecKedAll: {
	  //是否全选
	  type: Boolean,
	  default: true
	},
    multi: {
      // 指定员工是否能多选
      type: Boolean,
      default: true
    },
	max: {
	  //选择的人数限制
	  type: Number,
	  default: 0
	},
    is_employee_list: {
      // 为true时，employee_list才生效
      type: Boolean,
      default: false
    },
    employee_list: {
      // 指定显示的员工列表，注意：传值后组件的员工数据将不是统一向服务器获取的，而是指定的员工列表，格式是：[{id: 1, name: “张三”, img_url: “”}]
      type: Array,
      default: () => {
        return [];
      }
    },
    close_clear_data: {
      //关闭时是否清除选择的数据
      type: Boolean,
      default: true
    },
    is_filtration_creator: {
      //是否去除创始人
      type: Boolean,
      default: true
    },
    include_self: {
      //是否显示自己
      type: Boolean,
      default: true
    },
    isRequired: {
      //是否必须选择人员或者部门
      type: Boolean,
      default: false
    }
  },
  name: 'EmployeeSelector',
  data() {
    return {
      // 基础配置
      table_loading: false,
      searchBox: [], //用于搜索的全部人员
      keyword: '',
      checked: false,
      visible_: false,
      // 选择人员相关
      employee_selected_list: [],
      employee_selected: [],
      list: [],
      // 选择部门相关
      dept_selected_list: [],
      dept_name: '',
      dept_id: [],
      dept_select_id: 0,
      dept_list: [],
      dept_list_all: [], //备用全部部门
      pid_list_arr: [],
      styleObject: {
        height: '405px'
      }
    };
  },
  watch: {
    visible(val) {
      this.visible_ = JSON.parse(JSON.stringify(val));
      if (val) {
        setTimeout(() => {
          this.get_user_list();
          this.get_dept_list();
        }, 200);
      }
    },
    dept_id(val) {
      this.dept_select_id = val[val.length - 1];
      this.$nextTick(() => {
        if (this.can_select_employee) {
          this.$refs.dept.dropDownVisible = false;
        }
        this.get_user_list();
        this.checked = false;
      });
    },
    keyword(val) {
      this.list = this.searchBox.filter(item => item.name.includes(this.keyword));
      if (!val) {
        this.checked = false;
      }
    }
  },
  methods: {
    //打开Dialog的回调，用刷每次打开都初始化selected
    openDialog() {
      if (this.deptId != 0) {
        this.dept_id = [this.deptId];
        this.dept_select_id = this.deptId;
      }
      let selected = this.selected;
      this.employee_selected = [];
      this.employee_selected_list = JSON.parse(JSON.stringify(selected.employee));
      this.dept_selected_list = JSON.parse(JSON.stringify(selected.dept));
      for (let i in selected.employee) {
        this.employee_selected.push(selected.employee[i].id);
      }
      if (this.can_select_employee && this.isChecKedAll && this.multi) {
        this.styleObject = {
          height: '405px'
        };
      } else {
        this.styleObject = {
          height: '455px'
        };
      }
    },
    close_before(done) {
      this.close();
      done();
    },
    // 全选（只用选择人员）
    checkedChange(val) {
      if (val) {
        this.$nextTick(() => {
          let employeeSelectedList = JSON.parse(JSON.stringify(this.employee_selected_list)); //获取选择的人员
          let employeeSelectedIds = [],total = 0;
          employeeSelectedList.forEach(element => {
            employeeSelectedIds.push(element.id);
          });
          for (let i in this.list) {
            this.$set(this.list[i], 'checked', true);
            if (!employeeSelectedIds.includes(this.list[i].id)) {
              //去除已经选择的人员
              this.employee_selected_list.push(this.list[i]);
            }
          }
        });
      } else {
        this.employee_selected_list = [];
        this.employee_selected = [];
        for (let i in this.list) {
          this.$set(this.list[i], 'checked', false);
        }
      }
    },
    // 点击部门导航
    back_by_index(index, item) {
      this.pid_list_arr.splice(index, 100);
      if (index == 0) {
        this.dept_list = this.dept_list_all;
        return false;
      }
      if (item._child) {
        this.dept_list = item._child;
      }
    },
    //下一级
    show_child(item) {
      if (item._child) {
        this.dept_list = item._child;
      }
      this.pid_list_arr.push(item);
    },
    //获取一个部门的下的所有子部门
    getChildrens(list) {
      var dept_list = [];
      list.forEach(item => {
        item.checked = true;
        dept_list.push({ dept_id: item.dept_id, dept_name: item.name, avatar: '@/assets/image/e66f.jpg' });
        if (item._child) {
          dept_list.push(...this.getChildrens(item._child));
        }
      });
      return dept_list;
    },
    //选择部门
    select_dept(item, index) {
      if (item.checked) {
        this.dept_cancel(item);
      } else {
        if (!this.dept_multi) {
          //是否能多选
          this.dept_selected_list = [];
          for (let i in this.dept_list_all) {
            this.dept_cancel(this.dept_list_all[i], true);
          }
        }
        item.checked = true;
        if (item._child && this.dept_children) {
          //是否存在子部门
          this.dept_selected_list.push({ dept_id: item.dept_id, dept_name: item.name, avatar: '@/assets/image/e66f.jpg' });
          var arr = this.getChildrens(item._child);
          this.dept_selected_list.push(...arr);
        } else {
          this.dept_selected_list.push({ dept_id: item.dept_id, dept_name: item.name, avatar: '@/assets/image/e66f.jpg' });
        }
      }
    },
    //清除选择的部门
    dept_cancel(item, is) {
      item.checked = false;
      if (item._child) {
        //左边
        item._child.forEach(childrens => {
          this.dept_cancel(childrens);
        });
      }
      if (is) {
        return false;
      }
      var deptSelectedList = this.dept_selected_list;
      deptSelectedList.forEach((dept, index) => {
        //右边
        if (dept.dept_id == item.dept_id) {
          deptSelectedList.splice(index, 1);
        }
      });
    },
    //删除部门
    dept_delete(item) {
      var dept_list = this.dept_list;
      var obj = this.getDeptz(item.dept_id, dept_list); //递归找到所属部门
      this.dept_cancel(obj);
    },
    // 递归获取指定ID部门
    getDeptz(id, arr) {
      var obj = {};
      for (let i = 0; i < arr.length; i++) {
        if (id == arr[i].dept_id) {
          obj = arr[i];
          break;
        } else if (arr[i]._child) {
          if (this.getDeptz(id, arr[i]._child).dept_id) {
            obj = this.getDeptz(id, arr[i]._child);
          }
        }
      }
      return obj;
    },

    //清除选择的人员
    employee_cancel(item) {
      this.checked = false;
      this.employee_selected.splice(this.employee_selected.indexOf(item.id), 1);
      let delete_index = -1;
      for (let i in this.employee_selected_list) {
        if (this.employee_selected.indexOf(this.employee_selected_list[i].id) < 0) {
          delete_index = i;
        }
      }
      if (delete_index >= 0) {
        for (let i in this.list) {
          if (this.list[i].id == item.id) {
            this.$set(this.list[i], 'checked', false);
          }
        }
        for (let i in this.employee_selected_list) {
          if (this.employee_selected_list[i].id == item.id) {
            this.employee_selected_list.splice(i, 1);
          }
        }
      }
    },
    //选择人员
    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.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.checked = false;
      this.employee_selected = [];
      this.employee_selected_list = [];
      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);
      }
    },
    //关闭||清空数据
    close() {
      this.$emit('update:visible', false);
      if (this.close_clear_data) {
        this.checked = false;
        this.keyword = '';
        this.employee_selected = [];
        this.employee_selected_list = [];
        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() {
      if (this.isRequired) {
        if (this.employee_selected_list.length == 0) {
          this.$message.error('请选择人员');
          return false;
        }
      }
      this.$emit('confirm', {
        employee: this.employee_selected_list,
        dept: this.dept_selected_list
      });
      this.close();
    },
    // 获取部门
    get_dept_list() {
      this.$axios('get', '/api/per/user/department').then(res => {
        var list = res.data.data.dept_tree;
        var dept_list = [];
        // 排除部门
        if (this.dept_not_select.length > 0) {
          dept_list = list.filter(item => {
            return this.dept_not_select.indexOf(item.id) == -1;
          });
        } else {
          dept_list = list;
        }
        dept_list = this.getTreeData(dept_list); //过滤children
        //默认选中部门
        if (this.dept_selected_list.length > 0) {
          this.dept_selected_list.forEach(item => {
            this.setDeptChecked(item.dept_id, dept_list);
          });
        }
        this.dept_list = dept_list;
        this.dept_list_all = this.dept_list;
      });
    },
    //设置默认部门
    setDeptChecked(id, arr) {
      for (let i = 0; i < arr.length; i++) {
        if (id == arr[i].dept_id) {
          arr[i].checked = true;
          break;
        } else if (arr[i]._child) {
          this.setDeptChecked(id, arr[i]._child);
        }
      }
    },
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        data[i].checked = false;
        if (data[i]._child.length < 1) {
          // _child若为空数组，则将_child设为undefined
          data[i]._child = undefined;
        } else {
          // _child若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i]._child);
        }
      }
      return data;
    },

    // 默认选择中的人勾上
    parse_list(data) {
      let _list = [];
      data.map(item => {
        item['checked'] = false;
        for (var i in this.employee_selected_list) {
          //判断传进来的员工是否是员工集合里的，是就设为已点击状态
          if (this.employee_selected_list[i].id == item.id) {
            item['checked'] = true;
          }
        }
        if (item.img_url == '') {
          item.img_url = require('@/assets/image/head_default.png');
        }
      });
      this.searchBox = data;
      this.list = data;
    },
    //获取人员
    get_user_list() {
      this.table_loading = true;
      this.$axios('get', '/api/per/user/employee_list', { dept_id: this.dept_select_id,page: 1, page_size: 10000,official:1})
        .then(res => {
          let list = this.filtration(res.data.data.list);
          // 当有指定显示列表时
          if (this.is_employee_list) {
            var employee_list = this.employee_list;
            var userData = [];
            list.map(item => {
              // 列表数据是否是自己的管理范围
              employee_list.map(item2 => {
                if (item.id == item2.id) {
                  userData.push(item);
                }
              });
            });
            this.parse_list(userData);
          } else {
            // 没有指定人员列表
            this.parse_list(list);
          }
        })
        .finally(() => {
          this.table_loading = false;
        });
    },
    // 过滤各种条件：如：自己，创始人
    filtration(data) {
      var list = data;
	  
      // 过滤自己
      if (!this.include_self) {
        const currUserId = this.$getUserData().id;
        for (let i = 0; i < list.length; i++) {
          if (list[i].id == currUserId) {
            list.splice(i, 1);
            i--;
          }
        }
      }
      // 过滤创始人
      if (this.is_filtration_creator) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].is_creator == 1) {
            list.splice(i, 1);
            i--;
          }
        }
      }
      //过滤指定人员[]
      if (this.employee_not_select.length > 0) {
        for (let i = 0; i < list.length; i++) {
          if (this.employee_not_select.indexOf(list[i].id) >= 0) {
            list.splice(i, 1);
            i--;
          }
        }
      }
      return list;
    }
  },
  created() {}
};
</script>

<style scoped>
::v-deep .el-dialog__header {
  text-align: center;
  background-color: #ecf5ff;
}
::v-deep .el-dialog__body {
  padding: 20px;
}
.showCheckbox .isCheckbox {
  height: 7px;
  width: 7px;
  background-color: #26a2ff;
  display: inline-block;
  border-radius: 2px;
  line-height: 14px;
  position: relative;
  top: -3px;
}
.showCheckbox {
  border: 1px solid #26a2ff !important;
}
.checkbox {
  height: 14px;
  width: 14px;
  border: 1px solid #dcdfe6;
  background: #fff;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  text-align: center;
}
.deptList {
  padding: 12px 0;
  border-bottom: 1px solid #f1f1f1;
  cursor: pointer;
}
.employee_selector_box {
  width: 600px;
  box-sizing: border-box;
  margin: 0 auto;
}

/* 搜索框 */
.search {
  min-height: 36px;
  margin-right: 10px;
}
.search-box button {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  width: auto;
  padding: 0;
  background: none;
  border-radius: 0px;
  border: none;
}
/* 左边框 */
.employee_selector_box .choose_left {
  padding: 8px 10px 8px 10px;
}

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

.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 .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: 10px 0;
  border-bottom: 1px #f1f1f1 solid;
}

.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-right: 0px !important;
  background-color: #fdfdfd;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}
.col-line {
  position: relative;
  height: 400px;
  padding: 0 10px;
}

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

.search-box {
  background-color: #fff;
  margin-bottom: 20px;
}

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

.child_btn {
  color: #409eff;
}
.dept_path {
  padding: 10px 0;
  min-height: 37px;
}

.scrollbarHeight1 {
  height: 310px;
}
.scrollbarHeight2 {
  height: 350px;
}
</style>