<template>
|
<div class="user-choose">
|
<div style="margin-bottom: 10px">
|
<el-button
|
:size="size"
|
:icon="icon"
|
:type="type"
|
@click="userModalVisible = true"
|
>
|
{{ text }}
|
</el-button>
|
<span v-show="selectUsers.length>0" class="clear" @click="clearData">清空已选</span>
|
</div>
|
<el-collapse>
|
<el-collapse-item class="select-collapse" :title="`已选择 ${selectUsers.length}人`" name="1">
|
<div class="tags-box">
|
<el-tag
|
v-for="(item,i) in selectUsers"
|
:key="i"
|
closable
|
@close="handleTagClose(item)"
|
:type="item.userId">
|
{{item.username}}
|
</el-tag>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
<el-drawer
|
title="选择用户!"
|
wrapperClosable
|
:visible.sync="userModalVisible"
|
size="32%"
|
custom-class="user-choose-drawer"
|
>
|
<div class="demo-drawer__content">
|
<el-form ref="searchForm" :model="searchForm" label-width="70px">
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="用户名">
|
<el-input v-model.trim="searchForm.username" clearable placeholder="请输入用户名"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="部门">
|
<department-tree-choose
|
@on-change="handleSelectDep"
|
:flat="false"
|
:multiple="false"
|
width="250px"
|
ref="depTree"
|
:placeholder="'点击选择部门'"
|
></department-tree-choose>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label-width="20px">
|
<el-button @click="handleSearchUser" type="primary">搜索</el-button>
|
<el-button @click="handleResetUser">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
|
</el-form>
|
<el-alert
|
type="success"
|
show-icon>
|
已选择
|
<span>{{selectUsers.length}}项</span>
|
<a style="margin-left: 10px" @click="clearData">清空已选</a>
|
</el-alert>
|
<el-table border :data="userData">
|
<el-table-column
|
type="index"
|
width="60">
|
</el-table-column>
|
<el-table-column
|
property="username"
|
label="用户名"
|
width="100">
|
</el-table-column>
|
<el-table-column
|
property="deptName"
|
label="所属部门"
|
width="100">
|
</el-table-column>
|
<el-table-column
|
label="头像"
|
width="80">
|
<template slot-scope="scope">
|
<img class="table-touxiang" :src="scope.row.avatar" alt="">
|
</template>
|
</el-table-column>
|
<el-table-column
|
property="phone"
|
label="手机"
|
width="110">
|
</el-table-column>
|
<el-table-column label="操作" width="120">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="primary"
|
@click="chooseUser(scope.row)"
|
>添加该用户</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="footer-box">
|
<el-pagination
|
@size-change="sizeChangeHandle"
|
@current-change="currentChangeHandle"
|
:current-page="searchForm.currentPage"
|
:page-sizes="[5, 10, 20, 30]"
|
:page-size="searchForm.size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="totalUser">
|
</el-pagination>
|
</div>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import departmentTreeChoose from "./department-tree-choose";
|
import {fetchList} from '@/api/admin/user'
|
export default {
|
name: "user-choose",
|
props:{
|
text: {
|
type: String,
|
default:'选择用户'
|
},
|
size: {
|
type: String,
|
default: 'medium'
|
},
|
icon: {
|
type: String,
|
default: "el-icon-s-custom",
|
},
|
type: String,
|
},
|
components: {
|
departmentTreeChoose,
|
},
|
data() {
|
return {
|
selectUsers:[],
|
userModalVisible:false, //侧边抽屉
|
searchForm: {
|
userId: "",
|
username: "",
|
type: "",
|
status: "",
|
current: 1, // 当前页数
|
size: 5, // 页面大小
|
},
|
totalUser: 0,
|
userData:[], //侧边表格数据回显
|
}
|
},
|
mounted() {
|
this.getDataList();
|
},
|
methods: {
|
getDataList() {
|
fetchList(this.searchForm).then((res) => {
|
this.userData = res.data.data.records
|
this.totalUser = res.data.data.total
|
|
});
|
},
|
initData(val) {
|
this.selectUsers = val
|
},
|
handleSelectDep(v) {
|
this.searchForm.deptId = v;
|
},
|
clearData() { //清空
|
this.selectUsers = []
|
this.$emit("on-change", this.selectUsers)
|
this.$emit("callBack", this.selectUsers);
|
},
|
handleTagClose(tag) {
|
this.selectUsers.splice(this.selectUsers.indexOf(tag),1)
|
},
|
chooseUser(v) { //添加该用户
|
try {
|
this.selectUsers.forEach(item => {
|
if(v.userId == item.userId) {
|
throw "已经添加过啦，请勿重复选择";
|
}
|
})
|
}catch(e) {
|
return this.$Message.warning(e)
|
}
|
let u = {
|
userId:v.userId + '',
|
username:v.username,
|
deptName:v.deptName
|
}
|
this.selectUsers.push(u)
|
this.$emit("on-change", this.selectUsers);
|
this.$emit("callBack", this.selectUsers);
|
this.$Message.success(`添加用户 ${v.username} 成功`);
|
},
|
handleSearchUser() { //搜索
|
this.getDataList();
|
},
|
handleResetUser() { //重置
|
this.$refs.searchForm.resetFields();
|
this.searchForm.pageNumber = 1;
|
this.searchForm.pageSize = 10;
|
this.searchForm.deptId = "";
|
this.$refs.depTree.initData('')
|
// 重新加载数据
|
this.getDataList();
|
},
|
// 每页数
|
sizeChangeHandle (val) {
|
this.searchForm.size = val;
|
this.getDataList();
|
},
|
// 当前页
|
currentChangeHandle (val) {
|
this.searchForm.current = val;
|
this.getDataList();
|
},
|
}
|
}
|
</script>
|
|
<style>
|
.demo-drawer__content .el-alert__icon.is-big{
|
font-size: 16px;
|
}
|
.select-collapse .el-collapse-item__header{
|
font-weight: 600;
|
color: #40a9ff;
|
}
|
.tags-box .el-tag{
|
margin: 5px;
|
}
|
.user-choose-drawer{
|
padding:20px;
|
}
|
</style>
|
<style scoped>
|
|
.footer-box{
|
margin-top: 20px;
|
display: flex;
|
}
|
.table-touxiang{
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
}
|
.clear {
|
font-size: 12px;
|
margin-left: 15px;
|
color: #40a9ff;
|
cursor: pointer;
|
}
|
/*.select-count{*/
|
/* position: absolute;*/
|
/* left: 57px;*/
|
/* top: 12px;*/
|
/*}*/
|
/*.select-collapse{*/
|
/* position: relative;*/
|
/*}*/
|
</style>
|
