pms-front/src/components/SelectUser.vue

<template>
  <el-dialog
    title="选择人员"
    :visible="dialogVisible"
    width="50%"
    @close="handleClose"
  >
    <div class="select-user-container">
      <div class="org-tree">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          default-expand-all
        />
      </div>
      <div class="user-list">
        <CustomTable
          ref="customTableRef"
          :columns="columns"
          :tableData="userData"
          :total="total"
          :show-selection="showSelection"
          :show-index="true"
          :table-height="tableHeight"
          :multiSelect="multiSelect"
          :selectable="selectable"
          @selection-change="handleSelectionChange"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @selected="selectRow"
          @selectAll="selectAll"
          rowKey="userId"
          :rowClick="
            (row) => {
              rowClick(row);
            }
          "
          maxHeight="380"
          :highligt="highligt"
        >
          <template slot="operation" slot-scope="{ row }">
            <div class="operation-buttons">
              <el-button text type="primary" @click="handleEdit(row)"
                >编辑</el-button
              >
              <el-button text type="primary" @click="showTimesheet(row)"
                >工作日志</el-button
              >
              <el-button text type="danger" @click="handleDelete(row)"
                >删除</el-button
              >
            </div>
          </template>
        </CustomTable>
      </div>
    </div>
    <template slot="footer">
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import CustomTable from "@/components/CustomTable.vue";
import { systemApi } from "@/utils/api";

export default {
  components: {
    CustomTable,
  },
  props: {
    multiSelect: {
      type: Boolean,
      default: true,
    },
    dialogVisible: {
      type: Boolean,
      default: true,
    },
    currentSelectedUser: {
      type: Array,
      default: () => [],
    },
    currentSelectedUserName: {
      type: Array,
      default: () => [],
    },
    showSelection: {
      type: Boolean,
      default: false,
    },
    highligt: {
      type: Boolean,
      default: true,
    },
    selectable: {
      type: Function,
      default: () => true,
    },
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectedUsers: [],
      currentDepartment: "",
      tableHeight: "350", // 设置一个合适的高度
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      columns: [
        { prop: "nickName", label: "姓名" },
        {
          prop: "dept",
          label: "部门",
          type: "status",
          callback: (data) => data?.deptName,
        },
        {
          prop: "roles",
          label: "角色",
          type: "status",
          callback: (data) => data.map((ele) => ele.roleName).join(","),
        },
      ],
      userData: [],
      isInternalChange: false,
      selectAllData: [],
    };
  },
  emits: ["close", "confirm"],
  methods: {
    handleNodeClick(data) {
      this.currentDepartment = data.id;
      this.currentPage = 1;
      this.fetchUserList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchUserList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchUserList();
    },
    handleClose() {
      this.$emit("close");
    },
    handleConfirm() {
      if (!this.showSelection) this.$emit("confirm", this.selectedUsers);
      else
        this.$emit(
          "confirm",
          this.selectedUsers.map((ele, index) => ({
            userId: ele.userId,
            nickName: ele.nickName,
          }))
        );

      this.handleClose();
    },
    handleSelectionChange(val) {
      if (this.isInternalChange) return;
      if (!this.multiSelect) {
        this.isInternalChange = true;
        this.$nextTick(() => {
          if (val.length > 0) {
            const lastSelected = val[val.length - 1];
            this.selectedUsers = [lastSelected];
            this.$refs.customTableRef.clearSelection();
            this.$refs.customTableRef.toggleRowSelection(lastSelected, true);
          } else {
            this.selectedUsers = [];
          }
          this.isInternalChange = false;
        });
      } else {
        // this.selectedUsers = val;
      }
    },
    selectRow({ arr, row }) {
      if (!row) return;
      if (this.selectedUsers.filter((ele) => ele.userId == row.userId).length) {
        this.selectedUsers = this.selectedUsers.filter(
          (ele) => ele.userId != row.userId
        );
      } else {
        this.selectedUsers.push({ userId: row.userId, nickName: row.nickName });
      }
    },
    selectAll(arr) {
      let filterArr = this.selectAllData.filter((ele) =>
        !arr.some((item) => item.userId == ele.userId)
      );
      console.log(filterArr,11);
      
      arr.forEach((ele) => {
        if (
          !this.selectedUsers.filter((item) => item.userId == ele.userId).length
        )
          this.selectRow({ row: ele });
      });
      filterArr.forEach((ele) => {

        this.selectRow({ row: ele});
      });


    },
    fetchUserList: async function () {
      const response = await systemApi.getUserList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        deptId: this.currentDepartment,
      });
      this.userData = response.rows;
      this.total = response.total;
    },
    fetchTreeData: async function () {
      const response = await systemApi.getDeptTree();
      this.treeData = response.data;
    },
    currentRow(val) {
      this.selectedUsers = [val];
    },
    rowClick(row) {
      if (!this.showSelection) {
        if (row.userId == this.selectedUsers[0]?.userId)
          this.$refs.customTableRef.$refs.elTableRef.setCurrentRow();
        else this.selectedUsers = [row];
      }
    },
  },
  watch: {
    currentSelectedUser: {
      handler(newVal) {
        this.$nextTick(() => {
          if (!this.showSelection) {
            let row = this.userData.find(
              (ele) => ele.userId == newVal[0]?.userId
            );
            if (row) {
              this.$refs.customTableRef?.setCurrentRow(row);
              this.selectedUsers = [row];
            } else {
              this.selectedUsers = [];
              this.$refs.customTableRef?.setCurrentRow();
            }
          } else {
            if (!newVal.length) {
              this.selectedUsers = [];
              this.$refs.customTableRef?.clearSelection();
            } else {
              // this.$refs.customTableRef?.clearSelection();
              this.selectedUsers = [];
              newVal.forEach((item, index) => {
                this.selectedUsers.push({
                  userId: item,
                  nickName: this.currentSelectedUserName[index],
                });
                let row = this.userData.find((ele) => ele.userId == item);
                if (row) {
                  this.selectAllData.push(row);
                  this.$refs.customTableRef?.toggleRowSelection(row, true);
                }
              });
            }
          }
        });
      },
      immediate: true,
      deep: true,
    },
    userData: {
      handler(newVal) {
        this.$nextTick(() => {
          if (!this.showSelection) {
            let row = this.userData.find(
              (ele) => ele.userId == this.currentSelectedUser[0]?.userId
            );
            if (row) {
              this.selectedUsers = [row];
              this.$refs.customTableRef?.setCurrentRow(row);
            }
          } else {
            this.selectAllData = [];
            this.currentSelectedUser.forEach((item) => {
              let row = newVal.find((ele) => ele.userId == item);
              if (row) {
                this.selectAllData.push(row);

                this.$refs.customTableRef?.toggleRowSelection(row, true);
              }
            });
          }
        });
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.fetchTreeData();
    this.fetchUserList();
  },
};
</script>

<style lang="scss" scoped>
.select-user-container {
  display: flex;
  height: 400px;
}

.org-tree {
  width: 200px;
  border-right: 1px solid #dcdfe6;
  padding-right: 20px;
  overflow-y: auto;
}

.user-list {
  flex: 1;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}

::v-deep .el-dialog__footer {
  padding: 20px 20px 20px 0;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dialog-footer .el-button {
  margin-left: 10px;
}

.dialog-footer .el-button:first-child {
  margin-left: 0;
}
::v-deep .el-table {
  max-height: 360px !important;
}
::v-deep tr.el-table__row.current-row .el-table__cell {
  background-color: #409eff !important;
  color: #fff;
}
</style>