cnas/client/src/views/employee/userselet.vue

  <template>
    <div class="app-container">

      <el-row :gutter="20">
        <el-col :span="4">
          <el-input placeholder="输入关键字进行过滤"
                    v-model="filterText">
          </el-input>

          <el-tree class="filter-tree"
                   :data="orgList"
                   :props="defaultProps"
                   default-expand-all
                   :expand-on-click-node="false"
                   :filter-node-method="filterNode"
                   @node-click="handleOrgClick"
                   ref="tree">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </el-col>
       
        <el-col :span="13">
          
          <el-table ref="staffTable"
                    v-loading="listLoading"
                    :key="tableKey"
                    :data="staffList"
                    border
                    fit
                    highlight-current-row
                    @selection-change="handleStaffChange">
            <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
            <el-table-column label="姓名" align="center">
              <template slot-scope="{row}">
                <span>{{ row.user.name }}</span>
              </template>
            </el-table-column>

            <el-table-column label="职务" align="center">
              <template slot-scope="{row}">
                <span>{{ row.user.position }}</span>
              </template>
            </el-table-column>
            <el-table-column label="部门" align="center">
              <template slot-scope="{row}">
                <span>{{ row.user.dept_name }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="2" style="text-align:center;margin-top:20px">
          <el-button @click="addStaff"
                     type="primary"
                     :disabled="!staffData.length"
                     icon="el-icon-arrow-right"
                     circle></el-button>
          <!--<el-button @click="removeStaff"
                     type="primary"
                     :disabled="!selectedStaffData.length"
                     icon="el-icon-arrow-left"
                     circle
                     style="margin-left: 0;margin-top: 10px;"></el-button>-->
        </el-col>
        <el-col :span="5">
          <el-table ref="selectedStaffTable"
                    v-loading="listLoading"
                    :data="selectedStaffList"
                    border
                    fit
                    highlight-current-row
                   >
         
            <el-table-column label="姓名" align="center">
              <template slot-scope="{row}">
                <span>{{ row.user.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" circle @click.native.prevent="deleteRow(scope.$index, selectedStaffList)"></el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="20" >
          <el-button  type="primary" @click="modifyStaff">提交</el-button>
      
      </el-row>
    </div>
  </template>
<script>
  import { getEmployeeList, deleteEmployee } from "@/api/employee"
  import { genTree } from "@/utils"
  import { getOrgAll } from "@/api/org"
  import "@riophae/vue-treeselect/dist/vue-treeselect.css"

  
export default {
     components: {},
  props: [],
data() {
  return {
    
  
  dialogVisible: false,
    listLoading: true,
    staffTemp: {
        name: "",
        email: "",
        staffTypeId: ""
      },
      filterText: '',
      orgList: [],
    staffList: [],
   userlist:{count:0},
   listQuery: {
        page: 1,
        page_size: 20
      },
    selectedStaffList: [],
    staffData: [],
   defaultProps: {
          "label": "name",
          "children": "children"
        },
    selectedStaffData: [],
    tableKey: 0,
    rowKey: "rowKey",
   
  }
},
    watch: {
     
         filterText(val) {
         this.$refs.tree.filter(val);
     },
     
       },
    created() {
    this.getStaffList(),
    this.getList()
            },
methods: {
    // 从后台获取左边表格的数据
  
    filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
    getList() {
     
      getOrgAll().then(response => {
        this.orgList = genTree(response.data);
        
        this.listLoading = false
      })
    },
    deleteRow(index, rows) {
        rows.splice(index, 1);
      }
   ,
   handleOrgClick(obj, node, vue) {
      this.listQuery.page = 1;
      this.listQuery.user__dept = obj.id;
      this.getStaffList();
    },
    getStaffList() {
       getEmployeeList(this.listQuery).then(response => {
     
          this.staffList = response.data.results;
        
      });
   this.listLoading = false;
      
    },
    // 将左边表格选择项存入staffData中
    handleStaffChange(rows) {
      this.staffData = [];
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.staffData.push(row);
          }
        });
      }
    },
    // 左边表格选择项移到右边
    addStaff() {
      setTimeout(() => {
        this.$refs["staffTable"].clearSelection();
        this.$refs["selectedStaffTable"].clearSelection();
      }, 0);
      let repeat = false;
      this.selectedStaffList.forEach(item => {
        if (this.staffData[0] && item.id === this.staffData[0].id) {
          repeat = true;
          alert("此员工已添加");
          return;
        }
      });
      if (repeat === false) {
        this.staffData.forEach(item => {
          this.selectedStaffList.push(item);
        });
        for (let i = 0; i < this.staffList.length; i++) {
          for (let j = 0; j < this.staffData.length; j++) {
            if (
              this.staffList[i] &&
              this.staffData[j] &&
              this.staffList[i].name === this.staffData[j].name
            ) {
              this.staffList.splice(i, 1);
            }
          }
        }
      }
    },
    // 右边表格选择项移到左边
    removeStaff() {
      setTimeout(() => {
        this.$refs["staffTable"].clearSelection();
        this.$refs["selectedStaffTable"].clearSelection();
      }, 0);
      this.selectedStaffData.forEach(item => {
        this.staffList.push(item);
      });
      for (let i = 0; i < this.selectedStaffList.length; i++) {
        for (let j = 0; j < this.selectedStaffData.length; j++) {
          if (
            this.selectedStaffList[i] &&
            this.selectedStaffData[j] &&
            this.selectedStaffList[i].name === this.selectedStaffData[j].name
          ) {
            this.selectedStaffList.splice(i, 1);
          }
        }
      }
     


    },
    // 将右边表格选择项存入selectedStaffData中
    //handleSelectedStaffChange(rows) {
    //  this.selectedStaffData = [];
    //  if (rows) {
    //    rows.forEach(row => {
    //      if (row) {
    //        this.selectedStaffData.push(row);
    //      }
    //    });
    //  }
    //},
    // 提交
    modifyStaff() {

      console.log(this.selectedStaffList);
     
      var userlist = [];
     
       var arrContact = new Array();
      for (let i = 0; i < this.selectedStaffList.length; i++) {
         var reVal = new Object();
            reVal["id"]=this.selectedStaffList[i].id
            reVal["name"]=this.selectedStaffList[i].user.name
            arrContact.push(reVal);
         
      }
     
       
       userlist=arrContact;
              
      this.$emit('closeMoule',userlist,)
           

     this.dialogVisible = false
              
          
      
    }
}
  }
</script>