gdy_qywx_pc/src/views/integral/commonDepartment.vue

<template>
 <el-dialog
     custom-class="department"
     title="选择上级部门"
      width="526px"
      height="100%"
      expand-on-click-node
      :before-close="closeDialog"
      :visible.sync="isDialog"
      :close-on-click-modal="false"
      style="height:100%;"
    >
  <div style=" background-color: #fff;width: 100%;clear:both;">

      <el-row>
      <el-col :span="11" style="margin-bottom:0; padding-right:0;">
        <div class="department_box_left">
           <div style="width: 100%;height: 40px;background: #DCDFE6;
              font-size: 14px; color: #606266;line-height: 40px;
              padding-left: 14px;
              ">

                  所有部门
              </div>
               <div style="margin-bottom:0; padding:15px;" class="inline-block-btn-list">
          <div class="gap-right-8" style="display:inline-block; width:100%; margin-bottom:0;">
            <!-- <el-input
              placeholder="输入关键词查找"
              ref="search-bar"
              v-model="filter.keywords"
              class="input-with-select"
              @keyup.enter.native="onFilterChanged"
            >
              <el-button slot="append" icon="el-icon-search" @click="onFilterChanged"></el-button> -->
            <!-- </el-input> -->
          </div>
        </div>
          <el-scrollbar
            wrap-class="column-wrapper scrollable-items-container dept_tree"
            :native="false"
            style="min-height:320px"
          >
            <div style="">
              <!-- <el-table
                v-loading="loading"
                ref="multipleTable"
                :data="tableData"
                :border="false"
                tooltip-effect="dark"
                @row-click="rowClick"
                @selection-change="handleSelectionChange"
                @select-all="select_all"
                style="width: 100%"
              >
                <el-table-column type="selection" width="42" :selectable="isSelectable"></el-table-column>

                <el-table-column prop="name" label="选择人员">
                  <template slot-scope="scope">
                    <div class="rank_head" style="cursor: pointer;">
                      <img
                        v-if="scope.row.img_url != null"
                        v-bind:src="scope.row.img_url"
                        width="42px"
                        height="42px"
                      >
                      <img
                        v-if="scope.row.img_url == null"
                        src="static/images/head_default.png"
                        width="42px"
                        height="42px"
                      >
                      {{scope.row.name}}
                    </div>
                  </template>
                </el-table-column>
              </el-table> -->
              <div class="department_tree" @click="handleNodeClick({value: 0})">
                 <img src="static/images/two.png" style="width: 16px;height: 16px;vertical-align: text-bottom;margin-right: 8px;" />
                  {{company.name}}
              </div>
               <!-- <el-tree
                node-key="id"
                ref="dept_tree_com"
                highlight-current
                :default-expand-all="true"
                :expand-on-click-node="false"
                :data="deptTree"
                @node-click="handleSelectionChange"

                ></el-tree> -->

                <el-tree ref="menum"
                    node-key="id"
                    :accordion="true"
                    :highlight-current="true"
                    :data="deptTree"
                    :expand-on-click-node= "false"
                    @node-click="handleNodeClick"
                    @check="handleSelectionChange"
                    >
                      <span class="custom-tree-node" slot-scope="{ node, data }">
                        <img src="static/images/one.png" style="width: 20px;height:16px;vertical-align: text-top;margin-right: 4px;" />
                        <span>{{data.name}}</span>
                      </span>

                 </el-tree>


                <!--  -->
            </div>
          </el-scrollbar>
        </div>
        </el-col>

          <div class="line"></div>

        <el-col :span="11">

        <div class="department_box_right"  style="">
          <div style="width: 100%;height: 40px;background: #DCDFE6;
              font-size: 14px; color: #606266;line-height: 40px;
              padding-left: 14px;
              ">
                  已选上级部门
              </div>
          <el-scrollbar
             wrap-class="column-wrapper scrollable-items-container dept_tree"
            :native="false"
            style="min-height:280px"
          >
            <div style="">
                <!--    @header-click="cmultipleSelectionlearEmployee" -->
              <el-table
                :data="multipleSelection"
                :border="false"
                style="width: 100%"
              >

              <!-- （'+(multipleSelection.length)+'人） -->
              <el-table-column prop="label">
                  <template slot-scope="scope">
                    <div class="rank_head" style="cursor: pointer;">
                      <img src="static/images/one.png" style="width: 20px;height: 16x;vertical-align: text-bottom;margin-right: 4px;" />
                      {{scope.row.label}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column

                  width="50"
                  column-key="clear"
                  label-class-name="clearEmployeeBtn"
                >
                  <template slot-scope="scope">
                    <div class="rank_head" style="cursor: pointer; text-align: center;">
                      <a
                        @click="removeEmployee(scope.row.id)"
                        class="el-icon-circle-close"
                        style="color:#ff7d79;"
                      ></a>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-scrollbar>
        </div>
      </el-col>

      <!-- <el-col :span="24" style="border-top:1px solid #eee; margin-bottom:0;">
        <el-pagination
          background
          style="margin-top:0;"
          :page-sizes="[6,20,30,50,100,200]"
          layout="sizes, prev, pager, next"
          @size-change="handleSizeChange"
          :page-size="pageLimit"
          :total="totalCount"
          :current-page.sync="currentPage"
          @current-change="changePage"
        ></el-pagination>
      </!-->
    </el-row>
     <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: 20px;">
        <el-button @click="checkoutEmploye">取 消</el-button>
        <el-button @click="checkout" type="primary" plain>确定</el-button>
      </div>
  </div>
  </el-dialog>
</template>
<script>
export default {
  // multipleSelectionId
  props: {
    employeeSelectorIds: {
      type: Array,
      default: () => {return []}
    },
    isMore: {
      type: Boolean,
      default: true
    },
    isDepart: {
        type: Boolean,
        default: true
    },
    include_admin: {
      type: Boolean,
      default: false
    },
  },

  watch: {
    isDepart() {
        this.isDialog = this.isDepart
        this.loadBaseData()
    },
    tableData(val) {
      this.$nextTick(() => {
        this.pageSelectedId = []
        val.forEach(item => {
          if (this.employeeSelectorIds.indexOf(item.id) >= 0) {
            this.$refs['multipleTable'].toggleRowSelection(item, true)
            this.pageSelectedId.push(item.id)
          }
        })
      })
    },
    employeeSelectorIds(val) {
      this.$nextTick(() => {
        if (!this.tableData) { return }
        this.pageSelectedId = []
        this.tableData.forEach(item => {
          this.$refs['multipleTable'].toggleRowSelection(item, false)
          if (val.indexOf(item.id) >= 0) {
            this.$refs['multipleTable'].toggleRowSelection(item, true)
            this.pageSelectedId.push(item.id)
          }
        })
      })
    }
  },
  data() {
    return {
      loading: false,
      profile: this.$store.getters.user_info,
      accessEnabled: false,
      dialogTableVisible: false,
      filter: {
        dept_id: [],
        status: 1,
        keywords: ''
      },
      isDialog: false,
      totalCount: 0,
      pageLimit: 6,
      currentPage: 1,
      tableData: null,
      multipleSelection: [],
      multipleSelectionId: [],
      multipnew:[],
      multipleSelectionJson: {},

      pageSelectedId: [],
      dialogExcelVisible: false,
      deptTree: [],
      company:[],
      creatorId: '',
      department_list: []
    }
  },
  methods: {
    // 取消
    checkoutEmploye() {
      this.isDialog = false;
      this.$emit('changishow');
    },
    closeDialog() {
      this.isDialog = false;
      this.$emit('changishow');
    },
     checkout() {
      this.isDialog = false;
      this.$emit('changishow');
       this.$nextTick(() => {
        this.$emit('check', this.multipleSelection)
        this.multipleSelection = [];
        // self.$parent.$parent.$parent.$parent.set_target_ids(self.multipleSelection)
      })
    },



    clearEmployee(column, event) {
      const self = this
      if (column.columnKey == 'clear') {
        for (const i in this.tableData) {
          self.$refs['multipleTable'].toggleRowSelection(
            self.tableData[i],
            false
          )
        }
        this.multipleSelectionId = []
        this.multipleSelectionJson = {}
        this.multipleSelection = []
        this.pageSelectedId = []
      }
    },

    removeEmployee(id) {
      console.log()
      console.log(id)
      let newarray = [];
      newarray = this.multipleSelection
      let  array = [];
      for (let i = 0; i < newarray.length; i++) {
          if (newarray[i].id != id ) {
              array.push(newarray[i])
          }
      }
      this.multipleSelection = array;

    },

      handleNodeClick(data){
        // 单选
        if(this.isMore) {

         let self = this;
        let newarray = [];
        let newData =  [];
        if(data.value == 0) {
          this.company.label = this.company.name;
          newarray.push(this.company)
        }else {
           let neobject = {};
                  neobject.count = (data.count)
                  neobject.create_time = (data.create_time)
                  neobject.delete_time = (data.delete_time)
                  neobject.id = (data.id)
                  neobject.label = (data.label)
                  neobject.pid = (data.pid)
                  neobject.site_id = (data.site_id)
                  neobject.sub_count = (data.sub_count)
                  newarray.push(neobject);
        }
       
          self.multipleSelection = newarray;
       

        }else {
          let self = this;
        let newarray = [];
        let newData =  [];
        if(data.value == 0) {
          this.company.label = this.company.name;
          newarray.push(this.company)
        }else {
           let neobject = {};
                  neobject.count = (data.count)
                  neobject.create_time = (data.create_time)
                  neobject.delete_time = (data.delete_time)
                  neobject.id = (data.id)
                  neobject.label = (data.label)
                  neobject.pid = (data.pid)
                  neobject.site_id = (data.site_id)
                  neobject.sub_count = (data.sub_count)
                  newarray.push(neobject);
        }
        if(self.multipleSelection.length == 0) {
          self.multipleSelection = self.multipleSelection.concat(newarray)
        }else {
            newData =  self.multipleSelection;
            newData = newData.concat(newarray)
            console.log(newData)
            for(var i=0; i<newData.length; i++){
                for(var j=i+1; j<newData.length; j++){
                    if(newData[i].id==newData[j].id){       
                        newData.splice(j,1);
                        j--;
                    }
                }
            }
             console.log(newData)
             self.multipleSelection = newData;
        }
        }
        

          // = self.multipleSelection.concat(newarray)
        
         
        
            
             // self.multipleSelection = newcheck;
            

              // for (const i in self.multipleSelection) {
              //    if (newarray.indexOf(this.multipleSelection[i]) < 0) {
              //       multipleSelectionId.push(this.multipleSelection[i])
              //     }
              // }
              
            //  self.multipleSelection = self.multipleSelectionId.concat(check);
              //self.multipleSelection = self.multipleSelection.concat(check)
            //  if(self.multipleSelection.includes(id)) {
            //    console.log("000")
            //  }else {
            //    self.multipleSelection = self.multipleSelection.concat(newarray)
            //  }
            // for (const i in self.multipleSelection) {
            //    if (newarray[0].id.indexOf(self.multipleSelection[i].id) < 0) {
            //        self.multipleSelection = self.multipleSelection.concat(newarray)
            //     }
            // console.log(self.multipleSelection[i].id )
            // console.log(newarray[0].id)
            // if(self.multipleSelection[i].id === newarray[0].id ) {
             
            //  return;
            // }else {
            //   self.multipleSelection = self.multipleSelection.concat(newarray)
            // }
            // if (newarray.indexOf(self.multipleSelection[i]) < 0) {
            //   self.multipleSelection = self.multipleSelection.concat(newarray)
            // }
        //  }
        
         
      
        
        // if(self.multipleSelection.length!=0&&self.multipleSelection[0].id
        //  == data.id
        // ) {
        //   console.log("000")
        // }else {
        //       let newarray = []
        //       if(data.value == 0) {
        //         this.company.label = this.company.name;
        //         newarray.push(this.company)
               
        //       }else if(){
        //         let neobject = {};
        //           neobject.count = (data.count)
        //           neobject.create_time = (data.create_time)
        //           neobject.delete_time = (data.delete_time)
        //           neobject.id = (data.id)
        //           neobject.label = (data.label)
        //           neobject.pid = (data.pid)
        //           neobject.site_id = (data.site_id)
        //           neobject.sub_count = (data.sub_count)
        //           newarray.push(neobject);
        //           console.log(newarray)
        //           console.log("jfvihdu")
        //       }
        //        self.multipleSelection = self.multipleSelection.concat(newarray)
        //       // self.multipleSelection = newarray
             
       // }

       // self.$nextTick(() => {
        // self.$emit('check', self.multipleSelection)
          // self.$parent.$parent.$parent.$parent.set_target_ids(self.multipleSelection)
        //})

    },

    handleSizeChange(val) {
      this.pageLimit = val
      //this.onFilterChanged()
    },
    onFilterChanged: function() {
      this.currentPage = 0
      //this.loadEmployeeList()
    },
    toggleSelection: function(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    select_all(all) {
      const ids = []

      for (const i in all) {
        ids.push(all[i].id)
      }
    },
    //getcompany() {
        //  this.multipleSelection.push(this.company);
        //  this.$emit('check', this.multipleSelection)
    //},
    handleSelectionChange: function(a) {

    },
    rowClick(row, event, column) {
      this.$refs['multipleTable'].toggleRowSelection(row)
    },
    isSelectable: function(row, index) {
      return true
    },
    toSexName: function(row, column, cellValue) {
      return cellValue == '1' ? '女' : '男'
    },
    dateFormatter: function(row, column, cellValue) {
      return this.$moment(cellValue * 1000).format('YYYY年MM月DD日')
    },
    // 获取基本数据
    loadBaseData: function() {
      var self = this
      this.$http('get','' + '/api/department/tree')
        .then(function(response) {
          if (response.data.code == 1) {
            self.company =  response.data.data.company;
            self.deptTree =  response.data.data.list
             for(let i = 0; i < self.deptTree.length; i++) {
                 self.deptTree[i].label = self.deptTree[i].name
            }
            // var jsonData = response.data
            // try {
            //   self.deptTree = jsonData.dept_tree
            //   self.creatorId = jsonData.creator_id

            //   if (self.profile.manager_type < 2) {
            //     self.filter.dept_id = [self.deptTree[0].value]
            //     //self.loadEmployeeList()
            //   }
            // } catch (err) {
            //   console.log(err)
            // }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },

    changePage: function(current) {
      if (isNaN(current) || current < 1) {
        return false
      }
     // this.loadEmployeeList()
    }
  },
  created() {
    this.loadBaseData()
    if (this.profile.manager_type > 1) {
     // this.loadEmployeeList()
    }
  }
}
</script>
<style scoped>
.el-dialog__body {
   clear: both;
   padding: 30px 0;
}
.el-table__footer-wrapper, .el-table__header-wrapper {
    display: none;
}
.el-table td, .el-table th.is-leaf {
    border: none;
}
.el-table::before {
    width: 0%;
}
.el-pagination {
  text-align: center;
  margin-top: 15px;
}
.dept_tree a.on {
  background-color: #f0f7ff;
}
.clearEmployeeBtn {
  cursor: pointer;
  color: #409eff;
  font-weight: normal;
}
.clearEmployeeBtn:hover {
  color: #66b1ff;
}
/* .rank_head img {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  margin-right: 5px;
} */
.rank_head * {
  vertical-align: middle;
}
/deep/ .department .el-dialog__header{
  padding: 30px 35px 27px;
}
/deep/ .department .el-dialog__body{
  padding: 0;
}
/deep/ .department .department_box_left .el-tree--highlight-current{
  overflow-y:auto;
  height:318px;
}

/deep/ .department .department_box_right .el-table__body-wrapper{
  overflow-y:auto;
  height:358px;
}
/deep/ .department .el-tree--highlight-current::-webkit-scrollbar{
  /*background:rgba(236,245,254,1);*/
  background:transparent;
  width:4px;
}
/deep/ .department .el-tree--highlight-current::-webkit-scrollbar-thumb {
  background:#409EFF;
}
.department{
  position:relative;
  display:block;
  text-align: center;
  margin-top:18vh !important;
  padding-bottom:30px;
}
/deep/ .department .el-table__body-wrapper::-webkit-scrollbar{
  /*background:rgba(236,245,254,1);*/
  background:transparent;
  width:4px;
}
/deep/ .department .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background:#409EFF;
}
.department{
  position:relative;
  display:block;
  text-align: center;
  margin-top:18vh !important;
  padding-bottom:30px;
}
.department .department_box_left{
  display:inline-block;
  border-radius:4px;
  width:200px;
  height:420px;
  margin-left:35px;
  border:1px #DCDFE6 solid;
}
.department .department_box_right{
  display:inline-block;
  border-radius:4px;
  width:200px;
  height:420px;
  margin-right:35px;
  border:1px #DCDFE6 solid;
}
.department .el-row{
  position:relative;
  display:block;
  text-align: center;
}
.department .el-row .el-col-11:nth-child(1){
  position:relative;
  display:inline-block;
  text-align: left;
  float:left;
}
.department .el-row .el-col-11:nth-child(3){
  position:relative;
  display:inline-block;
  text-align: left;
  float:right;
}
.department  .department_tree{
  line-height: 36px;
  margin-bottom:2px;
  background: #ECF5FE;
  padding-left: 16px;
  cursor: pointer;
}
.department .line{
  display:inline-block;
  border-right: 1px solid #D8D8D8;
  height: 420px;
  float:none;
}
.department .dialog-footer{
  padding-bottom:30px;
}
/deep/ .department .el-tree-node__expand-icon.is-leaf{
  color: #909399;
  padding:0 6px 0 20px;
  font-size: 16px;
}
/deep/ .department .department_box_right .el-table td{
  padding:4px 0px;
  border-bottom: 1px solid #EBEEF5;
}
.department .rank_head{
  padding-left:6px;
}
.department .rank_head a:before{
  color:#C0C4CC;
}
</style>