RuoYi
4 years ago
parent
ce6bea4ba0
commit
90c41d498c
@ -0,0 +1,213 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true"> |
||||
<el-form-item label="用户名称" prop="userName"> |
||||
<el-input |
||||
v-model="queryParams.userName" |
||||
placeholder="请输入用户名称" |
||||
clearable |
||||
size="small" |
||||
style="width: 240px" |
||||
@keyup.enter.native="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="手机号码" prop="phonenumber"> |
||||
<el-input |
||||
v-model="queryParams.phonenumber" |
||||
placeholder="请输入手机号码" |
||||
clearable |
||||
size="small" |
||||
style="width: 240px" |
||||
@keyup.enter.native="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<el-button |
||||
type="primary" |
||||
plain |
||||
icon="el-icon-plus" |
||||
size="mini" |
||||
@click="openSelectUser" |
||||
v-hasPermi="['system:role:add']" |
||||
>添加用户</el-button> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<el-button |
||||
type="danger" |
||||
plain |
||||
icon="el-icon-circle-close" |
||||
size="mini" |
||||
:disabled="multiple" |
||||
@click="cancelAuthUserAll" |
||||
v-hasPermi="['system:role:remove']" |
||||
>批量取消授权</el-button> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<el-button |
||||
type="warning" |
||||
plain |
||||
icon="el-icon-close" |
||||
size="mini" |
||||
@click="handleClose" |
||||
>关闭</el-button> |
||||
</el-col> |
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
||||
</el-row> |
||||
|
||||
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"> |
||||
<el-table-column type="selection" width="55" align="center" /> |
||||
<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="状态" align="center" prop="status"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag :options="statusOptions" :value="scope.row.status"/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.createTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-circle-close" |
||||
@click="cancelAuthUser(scope.row)" |
||||
v-hasPermi="['system:role:remove']" |
||||
>取消授权</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total>0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
<select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role"; |
||||
import selectUser from "./selectUser"; |
||||
|
||||
export default { |
||||
name: "AuthUser", |
||||
components: { selectUser }, |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中用户组 |
||||
userIds: [], |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 用户表格数据 |
||||
userList: [], |
||||
// 状态数据字典 |
||||
statusOptions: [], |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
roleId: undefined, |
||||
userName: undefined, |
||||
phonenumber: undefined |
||||
} |
||||
}; |
||||
}, |
||||
created() { |
||||
const roleId = this.$route.params && this.$route.params.roleId; |
||||
if (roleId) { |
||||
this.queryParams.roleId = roleId; |
||||
this.getList(); |
||||
this.getDicts("sys_normal_disable").then(response => { |
||||
this.statusOptions = response.data; |
||||
}); |
||||
} |
||||
}, |
||||
methods: { |
||||
/** 查询授权用户列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
allocatedUserList(this.queryParams).then(response => { |
||||
this.userList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
} |
||||
); |
||||
}, |
||||
// 返回按钮 |
||||
handleClose() { |
||||
this.$store.dispatch("tagsView/delView", this.$route); |
||||
this.$router.push({ path: "/system/role" }); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.resetForm("queryForm"); |
||||
this.handleQuery(); |
||||
}, |
||||
// 多选框选中数据 |
||||
handleSelectionChange(selection) { |
||||
this.userIds = selection.map(item => item.userId) |
||||
this.multiple = !selection.length |
||||
}, |
||||
/** 打开授权用户表弹窗 */ |
||||
openSelectUser() { |
||||
this.$refs.select.show(); |
||||
}, |
||||
/** 取消授权按钮操作 */ |
||||
cancelAuthUser(row) { |
||||
const roleId = this.queryParams.roleId; |
||||
this.$confirm('确认要取消该用户"' + row.userName + '"角色吗？', "警告", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning" |
||||
}).then(function() { |
||||
return authUserCancel({ userId: row.userId, roleId: roleId }); |
||||
}).then(() => { |
||||
this.getList(); |
||||
this.msgSuccess("取消授权成功"); |
||||
}).catch(() => {}); |
||||
}, |
||||
/** 批量取消授权按钮操作 */ |
||||
cancelAuthUserAll(row) { |
||||
const roleId = this.queryParams.roleId; |
||||
const userIds = this.userIds.join(","); |
||||
this.$confirm('是否取消选中用户授权数据项?', "警告", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning" |
||||
}).then(() => { |
||||
return authUserCancelAll({ roleId: roleId, userIds: userIds }); |
||||
}).then(() => { |
||||
this.getList(); |
||||
this.msgSuccess("取消授权成功"); |
||||
}).catch(() => {}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,142 @@ |
||||
<template> |
||||
<!-- 授权用户 --> |
||||
<el-dialog title="选择用户" :visible.sync="visible" width="800px" top="5vh" append-to-body> |
||||
<el-form :model="queryParams" ref="queryForm" :inline="true"> |
||||
<el-form-item label="用户名称" prop="userName"> |
||||
<el-input |
||||
v-model="queryParams.userName" |
||||
placeholder="请输入用户名称" |
||||
clearable |
||||
size="small" |
||||
@keyup.enter.native="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="手机号码" prop="phonenumber"> |
||||
<el-input |
||||
v-model="queryParams.phonenumber" |
||||
placeholder="请输入手机号码" |
||||
clearable |
||||
size="small" |
||||
@keyup.enter.native="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-row> |
||||
<el-table @row-click="clickRow" ref="table" :data="userList" @selection-change="handleSelectionChange" height="260px"> |
||||
<el-table-column type="selection" width="55"></el-table-column> |
||||
<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="状态" align="center" prop="status"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag :options="statusOptions" :value="scope.row.status"/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.createTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<pagination |
||||
v-show="total>0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
</el-row> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="primary" @click="handleSelectUser">确 定</el-button> |
||||
<el-button @click="visible = false">取 消</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
import { unallocatedUserList, authUserSelectAll } from "@/api/system/role"; |
||||
export default { |
||||
props: { |
||||
// 角色编号 |
||||
roleId: { |
||||
type: Number |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
visible: false, |
||||
// 选中数组值 |
||||
userIds: [], |
||||
// 总条数 |
||||
total: 0, |
||||
// 未授权用户数据 |
||||
userList: [], |
||||
// 状态数据字典 |
||||
statusOptions: [], |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
roleId: undefined, |
||||
userName: undefined, |
||||
phonenumber: undefined |
||||
} |
||||
}; |
||||
}, |
||||
created() { |
||||
this.getDicts("sys_normal_disable").then(response => { |
||||
this.statusOptions = response.data; |
||||
}); |
||||
}, |
||||
methods: { |
||||
// 显示弹框 |
||||
show() { |
||||
this.queryParams.roleId = this.roleId; |
||||
this.getList(); |
||||
this.visible = true; |
||||
}, |
||||
clickRow(row) { |
||||
this.$refs.table.toggleRowSelection(row); |
||||
}, |
||||
// 多选框选中数据 |
||||
handleSelectionChange(selection) { |
||||
this.userIds = selection.map(item => item.userId); |
||||
}, |
||||
// 查询表数据 |
||||
getList() { |
||||
unallocatedUserList(this.queryParams).then(res => { |
||||
this.userList = res.rows; |
||||
this.total = res.total; |
||||
}); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.resetForm("queryForm"); |
||||
this.handleQuery(); |
||||
}, |
||||
/** 选择授权用户操作 */ |
||||
handleSelectUser() { |
||||
const roleId = this.queryParams.roleId; |
||||
const userIds = this.userIds.join(","); |
||||
authUserSelectAll({ roleId: roleId, userIds: userIds }).then(res => { |
||||
this.msgSuccess(res.msg); |
||||
if (res.code === 200) { |
||||
this.visible = false; |
||||
this.$emit("ok"); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
Loading…
Reference in new issue