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 {
  name:'Userselet',
  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>