RuoYi
4 years ago
13 changed files with 681 additions and 7 deletions
@ -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