eep_page/src/views/create_project/selectProjectMembers.vue

<template>
  <el-dialog :visible="visible" :title="title" class="select-members" width="900px" @close="dialogClose">
    <div class="query-criteria">
      <span class="criteria-label">真实姓名</span>
      <el-input v-model="real_name" placeholder="请输入姓名" @change="getUserList" />
      <span>所属机构</span>
      <el-select v-model="org_id_list" placeholder="请选择机构" multiple @change="getUserList">
        <el-option v-for="item in org_list" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <span class="query-button">
        <el-button type="primary" @click="getUserList">查询</el-button>
      </span>
    </div>

    <el-table ref="user" :data="user_list">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="real_name" label="真实姓名" width="140" />
      <el-table-column prop="user_name" label="用户名" width="140" />
      <el-table-column prop="email" label="邮箱" width="200" />
      <el-table-column prop="phone" label="电话" width="120" />
      <el-table-column prop="org_name" label="所属机构" />
    </el-table>
    <PaginationPage :total="total" @getList="getUserList" />

    <div class="member-container">
      <div class="top">
        <span class="title">已选成员</span>
        <span class="link" @click="addSelectedUsers">添加</span>
      </div>
      <div class="member-list">
        <div class="member-header">
          <span class="header-item">序号</span>
          <span class="header-item">真实姓名</span>
          <span class="header-item">用户名</span>
          <span class="header-item">邮箱</span>
          <span class="header-item">电话</span>
          <span class="header-item">操作</span>
        </div>
        <div v-for="(user, index) in selectedUsers" :key="user.id" class="member-row">
          <span class="item">{{ index + 1 }}</span>
          <span class="item">{{ user.real_name }}</span>
          <span class="item">{{ user.user_name }}</span>
          <span class="item">{{ user.email }}</span>
          <span class="item">{{ user.phone }}</span>
          <span class="item button">
            <el-button type="text" @click="removeUser(index)">删除</el-button>
          </span>
        </div>
      </div>
    </div>

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

<script>
import { queryUserList } from '@/api/list';
import { orgIndexList } from '@/api/user';

import PaginationPage from '@/components/PaginationPage.vue';

export default {
  name: 'SelectProjectMembers',
  components: {
    PaginationPage,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      default: '选择项目成员',
    },
  },
  data() {
    return {
      real_name: '', // 真实姓名
      org_list: [], // 机构列表
      org_id_list: [], // 机构id列表
      user_list: [], // 用户列表
      total: 0,
      page_capacity: 10,
      cur_page: 1,
      selectedUsers: [], // 选中的用户
    };
  },
  created() {
    this.getOrgIndexList();
    this.getUserList();
  },
  methods: {
    getUserList(data) {
      const params = {
        real_name: this.real_name,
        org_id_list: this.org_id_list,
        page_capacity: this.page_capacity,
        cur_page: this.cur_page,
      };
      queryUserList({ ...params, ...data }).then(({ user_list, total_count, cur_page }) => {
        this.user_list = user_list;
        this.total = total_count;
        this.page_capacity = data?.page_capacity || this.page_capacity;
        this.cur_page = cur_page;
      });
    },
    getOrgIndexList() {
      orgIndexList().then(({ org_list }) => {
        this.org_list = org_list;
      });
    },
    // 添加选中的用户
    addSelectedUsers() {
      // 获取选中的用户
      const selected = this.$refs.user.selection;
      if (selected.length === 0) {
        this.$message.warning('请至少选择一名成员');
        return;
      }
      // 通过 id 去重
      const uniqueSelectedUsers = selected.filter(({ id }) => {
        return this.selectedUsers.findIndex((user) => user.id === id) === -1;
      });
      // 合并选中的用户
      this.selectedUsers = [...this.selectedUsers, ...uniqueSelectedUsers];
      // 清空选中的用户
      this.$refs.user.clearSelection();
    },
    // 删除用户
    removeUser(index) {
      this.selectedUsers.splice(index, 1);
    },
    dialogClose() {
      this.$emit('update:visible', false);
      this.real_name = '';
      this.org_id_list = [];
      this.selectedUsers = [];
      this.$refs.user.clearSelection();
    },
    confirm() {
      this.$emit('confirm', this.selectedUsers);
      this.dialogClose();
    },
  },
};
</script>

<style lang="scss" scoped>
.select-members {
  .query-criteria {
    display: flex;
    column-gap: 8px;
    align-items: center;
    margin-bottom: 12px;

    .criteria-label {
      white-space: nowrap;
    }

    .el-input {
      width: 200px;
    }

    .el-select {
      width: 360px;
    }

    :deep .el-input__inner {
      background-color: #fff;
      border-color: #dcdcdc;
    }

    .query-button {
      display: flex;
      flex: 1;
      justify-content: flex-end;
    }
  }

  .member-container {
    padding: 8px 0;
    margin-top: 12px;
    border-top: 1px solid #dcdcdc;

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
    }

    .member-list {
      margin-top: 10px;

      .member-header {
        display: flex;
        font-size: 15px;
        font-weight: bold;
        text-align: center;
        background-color: $main-background-color;
        border: $border;

        .header-item {
          padding: 8px 12px;

          &:first-child {
            width: 55px;
          }

          &:nth-child(2) {
            width: 140px;
          }

          &:nth-child(3) {
            width: 140px;
          }

          &:nth-child(4) {
            width: 200px;
          }

          &:nth-child(5) {
            width: 200px;
          }

          &:last-child {
            flex: 1;
          }
        }
      }

      .member-row {
        display: flex;
        align-items: center;
        text-align: center;

        .item {
          height: 40px;
          padding: 8px 12px;
          border-bottom: 1px solid #dcdcdc;

          &:first-child {
            width: 55px;
          }

          &:nth-child(2) {
            width: 140px;
          }

          &:nth-child(3) {
            width: 140px;
          }

          &:nth-child(4) {
            width: 200px;
          }

          &:nth-child(5) {
            width: 200px;
          }

          &:last-child {
            flex: 1;
          }

          &.button {
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
}
</style>