|
@@ -0,0 +1,124 @@
|
|
|
+<template>
|
|
|
+ <el-dialog v-model="dialogVisible" title="人员选择" :width="680" destroy-on-close append-to-body @closed="emit('closed')">
|
|
|
+ <div class="sc-user-select">
|
|
|
+ <div class="sc-user-select__left">
|
|
|
+ <div class="sc-user-select__search">
|
|
|
+ <el-input v-model="keyword" prefix-icon="Search" placeholder="搜索成员">
|
|
|
+ <template #append>
|
|
|
+ <el-button icon="Search" @click="search"></el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="sc-user-select__select">
|
|
|
+ <div v-loading="showGrouploading" class="sc-user-select__tree">
|
|
|
+ <el-scrollbar>
|
|
|
+ <el-tree
|
|
|
+ ref="groupTree"
|
|
|
+ class="menu"
|
|
|
+ :data="group"
|
|
|
+ :node-key="groupProps.key"
|
|
|
+ :props="groupProps"
|
|
|
+ highlight-current
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :current-node-key="groupId"
|
|
|
+ @node-click="groupClick"
|
|
|
+ />
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <div v-loading="showUserloading" class="sc-user-select__user">
|
|
|
+ <div class="sc-user-select__user__list">
|
|
|
+ <el-scrollbar ref="userScrollbar">
|
|
|
+ <el-tree
|
|
|
+ ref="userTree"
|
|
|
+ class="menu"
|
|
|
+ :data="user"
|
|
|
+ :node-key="userProps.key"
|
|
|
+ :props="userProps"
|
|
|
+ :default-checked-keys="selectedIds"
|
|
|
+ show-checkbox
|
|
|
+ check-on-click-node
|
|
|
+ @check-change="userClick"
|
|
|
+ ></el-tree>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <footer>
|
|
|
+ <el-pagination
|
|
|
+ v-model:currentPage="currentPage"
|
|
|
+ background
|
|
|
+ layout="prev,next"
|
|
|
+ small
|
|
|
+ :total="total"
|
|
|
+ :page-size="pageSize"
|
|
|
+ @current-change="paginationChange"
|
|
|
+ ></el-pagination>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sc-user-select__toicon">
|
|
|
+ <el-icon><arrow-right /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="sc-user-select__selected">
|
|
|
+ <header>已选 ({{ selected.length }})</header>
|
|
|
+ <ul style="margin: 0; padding: 0">
|
|
|
+ <el-scrollbar>
|
|
|
+ <li v-for="(item, index) in selected" :key="item.id">
|
|
|
+ <span class="name">
|
|
|
+ <el-avatar size="small">{{ item.name.substring(0, 1) }}</el-avatar>
|
|
|
+ <label>{{ item.name }}</label>
|
|
|
+ </span>
|
|
|
+ <span class="delete">
|
|
|
+ <el-button type="danger" icon="Delete" circle size="small" @click="deleteSelected(index)" />
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ </el-scrollbar>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="save">确 认</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+const emit = defineEmits(['closed'])
|
|
|
+
|
|
|
+const groupTreeRef = ref()
|
|
|
+
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const keyword = ref('')
|
|
|
+const groupId = ref('')
|
|
|
+const currentPage = ref(1)
|
|
|
+const showUserloading = ref(false)
|
|
|
+
|
|
|
+const search = () => {
|
|
|
+ groupId.value = ''
|
|
|
+ groupTreeRef.value.setCurrentKey(groupId.value)
|
|
|
+ currentPage.value = 1
|
|
|
+ getUser()
|
|
|
+}
|
|
|
+
|
|
|
+const getUser = () =>{
|
|
|
+ this.showUserloading = true
|
|
|
+ var params = {
|
|
|
+ data: {
|
|
|
+ keyword: this.keyword || null,
|
|
|
+ departmentId: this.groupId || null
|
|
|
+ },
|
|
|
+ page: this.currentPage,
|
|
|
+ pageSize: this.pageSize
|
|
|
+ }
|
|
|
+ var res = await user.userPageApi(params)
|
|
|
+ this.showUserloading = false
|
|
|
+ this.user = res.records
|
|
|
+ this.total = res.total || 0
|
|
|
+ this.$refs.userScrollbar.setScrollTop(0)
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss"></style>
|