dd_pc/src/components/publics/EmployeeSelector1.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">
              <el-button slot="append" icon="el-icon-search" class="manager_button"></el-button>
              <el-input v-model="keyword" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="dept_path">
            <a
              href="javascript:void(0);"
              @click="back_by_index(0)"
              style="cursor: pointer;color: inherit;text-decoration: none;"
            >全公司</a>
            <a
              v-for="(item, index) in pid_list_arr"
              :key="index"
              href="javascript:void(0);"
              @click="back_by_index(index + 1)"
            >
              <i class="el-icon-arrow-right"></i>
              {{item.name}}
            </a>
          </div>
          <el-checkbox
            v-if="isChecKedAll"
            v-model="checked"
            @change="checkedChange"
            :indeterminate="indeterminate"
          >全选</el-checkbox>
          <el-scrollbar
            wrap-class="column-wrapper scrollable-items-container"
            :native="false"
            style="height: 354px;"
          >
            <div class="choose_left">
              <a href="javascript:void(0)" v-for="(item,index) in dept_list" :key="index">
                <div
                  class="employee_cell"
                  @click="select_dept(item)"
                  v-show="item.pid == pid && item.name.indexOf(keyword) >= 0 && dept_not_select.indexOf(item.id) < 0"
                >
                  <i class="el-icon-caret-right" style=" display: inline-block;"></i>
                  <div class="employee_checkbox" v-if="can_select_dept">
                    <el-checkbox v-model="item.checked"></el-checkbox>
                  </div>
                  <div class="employee_name">{{item.name}}</div>

                  <div v-if="can_select_dept" class="dept_child_cell">
                    <span
                      href="javascript:void(0);"
                      class="child_btn"
                      @click.stop="show_child(item)"
                    >| 下级</span>
                  </div>

                  <div class="employee_cell_clear"></div>
                </div>
              </a>

              <div class="persons_box" style="padding-top:4px;">
                <a
                  class="employee_cell_a"
                  href="javascript:void(0)"
                  v-for="(item,index) in list"
                  :key="index"
                  v-show="item.show"
                >


                 <!-- class="employee_cell flex-box flex-v-ce" -->
                  <div
                    class="employee_cell"
                    v-if="can_select_employee"
                    @click.prevent.stop="select_employee(item)"
                    v-show="employee_not_select.indexOf(item.id) < 0"
                  >
                    <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" />
                      <!-- <userImage
                      :user_name="item.name"
                      :img_url="item.img_url"
                      width="30px"
                      height="30px"
                    ></userImage> -->
                    </div>
                    <div class="employee_name">{{item.name}}</div>
                    <div class="employee_cell_clear"></div>
                  </div>
                </a>
              </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">
            <span
              style="line-height: 40px; padding-left: 10px;"
              class="fl"
              v-show="multi"
            >已选择{{employee_selected_list.length}}个员工</span>
            <el-button type="type" @click="clear_data">清空</el-button>
          </div>
          <!-- <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" 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"
              >
                <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="static/images/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>

            <!-- <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>

    <!--    <span slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
    </span>-->
  </div>
</template>

<script>
export default {
  props: {
    append_body: {
      type: Boolean,
      default: false,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    can_select_dept: {
      type: Boolean,
      default: true,
    },
    can_select_employee: {
      type: Boolean,
      default: true,
    },
    employee_not_select: {
      type: Array,
      default: () => {
        return [];
      },
    },
    dept_not_select: {
      type: Array,
      default: () => {
        return [];
      },
    },
    selected: {
      type: Object,
      default: () => {
        return {
          employee: [],
          dept: [],
        };
      },
    },
    multi: {
      type: Boolean,
      default: true,
    },
    dept_multi: {
      type: Boolean,
      default: true,
    },
    employee_list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    close_clear_data: {
      type: Boolean,
      default: true,
    },
    max: {
      type: Number,
      default: 0,
    },
    user_no_select: {
      type: Boolean,
      default: false,
    },
    isChecKedAll: {
      type: Boolean,
      default: true,
    },
  },
  name: "EmployeeSelector1",
  data() {
    let selected = JSON.parse(JSON.stringify(this.selected));
    let user_no_select = JSON.parse(JSON.stringify(this.user_no_select));
    return {
      dialogVisible: true,
      employee_selected_list: selected.employee,
      dept_selected_list: selected.dept,
      employee_selected: [],
      dept_selected: [],
      com_height: "100%",
      company_info: {},
      actions_show: false,
      dept_name: "",
      dept_id: 0,
      list: [],
      dept_list: [],//部门分类
      keyword: "",
      owner_id: 0,
      user_info: this.$store.getters.user_info,
      pid: 0,
      pid_list: [],
      selected_box_width: "0",
      pid_list_arr: [],
      checked: false,
      indeterminate: false,
      not_user: user_no_select,
    };
  },
  watch: {
    max(val) {
      this.set_button_width();
    },
    selected(val) {
      console.log(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;z
      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);
      }
      this.set_button_width();
    },
    visible(val) {
      // this.visible_ = JSON.parse(JSON.stringify(val))
      // if(val){
      setTimeout(() => {
        if (this.$route.query.pid) {
          this.pid = this.$route.query.pid;
        }
        this.get_user_list();
        this.get_dept_list();
      }, 200);
      // }
      this.set_button_width();
    },
    employee_selected_list() {
      let l =
        this.employee_selected_list.length + this.dept_selected_list.length;
      let width = 0.9 * l;
      this.selected_box_width = width + "rem";
      this.set_button_width();
    },
    dept_selected_list() {
      let l =
        this.employee_selected_list.length + this.dept_selected_list.length;
      let width = 0.9 * l;
      this.selected_box_width = width + "rem";
      this.set_button_width();
    },
    //搜索
    keyword() {
      this.get_user_list(function () {});
    },
  },
  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]);
            }
          }
          // 未处理好 20200713
          // this.lsit.length == total?this.indeterminate = true:this.indeterminate = false
        });
      } else {
        this.clear_data();
      }
    },
    close_before(done) {
      this.close();
    },
    set_button_width() {},
    back() {
      this.pid = this.pid_list[this.pid_list.length - 1];
      this.pid_list.splice(this.pid_list.length - 1);
      this.pid_list_arr.splice(this.pid_list_arr.length - 1);
      this.get_user_list();
    },
    back_by_index(index) {
      if (index == this.pid_list.length) {
        return false;
      }
      this.pid = this.pid_list[index];
      this.pid_list.splice(index, 100);
      this.pid_list_arr.splice(index, 100);
      this.get_user_list(function () {});
    },
    show_child(item) {
      this.pid_list.push(this.pid);
      this.pid_list_arr.push(item);
      this.pid = item.id;
      this.get_user_list(function () {});
    },
    //添加或移除已添加的员工
    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);
        }
      });
    },
    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 (this.employee_not_select.indexOf(item.id) >= 0) {
        return false;
      }
      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;
      }
    },

    select_dept(item) {
      if (!this.can_select_dept) {
        this.show_child(item);
        return false;
      }
      if (item.checked) {
        item.checked = false;
        this.dept_cancel(item);
      } else {
        if (!this.dept_multi) {
          this.dept_selected = [];
          this.dept_selected_list = [];
          for (let i in this.dept_list) {
            this.$set(this.dept_list[i], "checked", false);
          }
        }
        this.dept_selected.push(item.id);
        this.dept_selected_list.push({
          dept_id: item.id,
          dept_name: item.name,
          avatar: "static/images/e66f.jpg",
          // avatar: "@/assets/image/e66f.jpg",
        });
        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() {
      //this.visible = false
      this.$emit("update:visible", false);
      this.$emit("cancel");
      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_dept_list() {
      if (this.employee_list.length > 0) {
        return;
      }

      this.$axios
        .get("/api/department/index", {
          params: {
            pid: this.pid,
            keyword: this.keyword,
          },
        })
        .then((res) => {
          console.log(res)
          for (let i in res.data.data.list) {
            res.data.data.list[i]["checked"] = false;
            if (this.dept_selected.indexOf(res.data.data.list[i].id) >= 0) {
              res.data.data.list[i]["checked"] = true;
            }
          }
          this.dept_list = res.data.data.list;
          this.owner_id = res.data.data.owner_id;
          this.company_info = res.data.data.company_info;
          if (res.data.data.dept_info == null) {
            this.dept_name = JSON.parse(
              JSON.stringify(res.data.data.company_info.name)
            );
            this.dept_id = 0;
          } else {
            this.dept_name = JSON.parse(
              JSON.stringify(res.data.data.dept_info.name)
            );
            this.dept_id = res.data.data.dept_info.id;
          }
        })
        .catch((e) => {});
    },
    //获取员工详情
    get_user_list() {
      var _this = 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", {
          params: {
            dept_id: this.pid, //员工ID
            keywords: this.keyword, //搜索关键字
            page: 0,
            page_size: 2000,
          },
        })
        .then((res) => {
          var employee = res.data.data.list || [];
          employee.map((item) => {
            if (this.not_user && item.is_creator == 1) {
              item["show"] = false;
            } else {
              item["show"] = true;
            }
            item["checked"] = false;
            if (item.img_url == "") {
              item.img_url = "static/images/head_default.png";
            }
            for (var i in employee_selected_list) {
              //判断传进来的员工是否是员工集合里的，是就设为已点击状态
              if (employee_selected_list[i].id == item.id) {
                item["checked"] = true;
              }
            }
          });
          if (employee.length == employee_selected_list.length) {
            this.checked = true;
          }
          _this.list = employee;
        })
        .catch((e) => {
          _this.$message.error(e.data.msg);
        });
    },
  },
  created() {
    if (document.documentElement.style.height) {
      this.com_height = document.documentElement.style.height;
    }
    setTimeout(() => {
      if (this.$route.query.pid) {
        this.pid = this.$route.query.pid;
      }
      this.get_user_list();
      this.get_dept_list();
    }, 200);
  },
};
</script>

<style scoped>
.employee_selector_box {
  width: 600px;
  padding: 24px;
}

/* 搜索框 */
.employee_selector_box .search {
  width: 82%;
  position: relative;
  display: flex;
  left: 10%;
  padding: 0;
  border: 1px #c0c4cc solid;
  border-radius: 18.5px;
}

.employee_selector_box .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 .search-box /deep/ .el-input {
  display: inline-block;
  width: 84%;
  padding: 0 24px 0 6px;
  background: none;
  border-radius: 0px;
  border: none;
}

.employee_selector_box .search-box /deep/ .el-input input {
  padding: 0;
  line-height: 34px;
  border: none;
}

/* /搜索框 */

/* 左边框 */
.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 /deep/ .el-scrollbar__thumb {
  width: 2px;
  margin: 15px 0 0 6px;
  background: #409eff;
}

/* 左边框 */

/* 右边距 */
.employee_selector_box .option-box {
  display: flex;
    justify-content: space-between;
  padding: 14px 0;
}

.employee_selector_box .option-box button {
  margin-right: 16px;
}

.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
  /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
  /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 /deep/ .employee_cell {
  padding: 8px 0;
}

.employee_selector_box /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;
}
/* .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: 14px 5px;
  border-bottom: 1px solid #eee;
  margin: 0 -5px;
}

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

.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>