Files
xkrs_ms/ruoyi-ui/src/views/system/role/authUser.vue

214 lines
6.8 KiB
Vue

<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>