123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319 |
- <template>
- <el-dialog
- :visible="visible"
- :title="title"
- class="select-members"
- width="900px"
- :close-on-click-modal="false"
- @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" height="240">
- <el-table-column type="selection" width="55" align="center" header-align="center" class-name="index-column" />
- <el-table-column prop="real_name" label="真实姓名" width="140" header-align="center" />
- <el-table-column prop="user_name" label="用户名" width="140" header-align="center" />
- <el-table-column prop="email" label="邮箱" width="200" header-align="center" />
- <el-table-column prop="phone" label="电话" width="120" header-align="center" />
- <el-table-column prop="org_name" label="所属机构" header-align="center" />
- </el-table>
- <PaginationPage :total="total" @getList="getUserList" />
- <div v-if="isMember" 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: '选择项目成员',
- },
- type: {
- type: String,
- required: true,
- },
- selectedList: {
- type: Array,
- default: () => [],
- },
- },
- data() {
- return {
- real_name: '', // 真实姓名
- org_list: [], // 机构列表
- org_id_list: [], // 机构id列表
- user_list: [], // 用户列表
- total: 0,
- page_capacity: 10,
- cur_page: 1,
- selectedUsers: [], // 选中的用户
- };
- },
- computed: {
- isMember() {
- return this.type === 'member';
- },
- },
- watch: {
- selectedList: {
- handler(newVal) {
- this.selectedUsers = newVal;
- },
- immediate: true,
- },
- },
- 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,
- org_manager_status: -1,
- };
- 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() {
- if (this.selectedUsers.length === 0 && this.isMember) {
- this.$message.warning('请至少选择一名成员');
- return;
- }
- if (this.isMember) {
- this.$emit('confirm', this.selectedUsers);
- } else {
- this.$emit('confirm', this.$refs.user.selection);
- }
- 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 {
- max-height: 300px;
- margin-top: 10px;
- overflow-y: auto;
- .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>
|