|
@@ -109,11 +109,12 @@
|
|
|
<vxe-column type="radio" width="60"/>
|
|
|
<vxe-table-column field="username" title="用户账号"/>
|
|
|
<vxe-table-column field="nickname" title="用户姓名"/>
|
|
|
- <vxe-table-column field="mailbox" title="邮箱"/>
|
|
|
+ <vxe-table-column field="mailbox" title="用户邮箱"/>
|
|
|
<vxe-table-column field="phonenumber" title="手机号码"/>
|
|
|
- <vxe-table-column field="status" title="状态" :formatter="statusFormat"/>
|
|
|
+ <vxe-table-column field="status" title="用户状态" :formatter="statusFormat"/>
|
|
|
+ <vxe-table-column field="usertype" title="用户类型" :formatter="typeFormat"/>
|
|
|
<vxe-table-column title="操作" width="320">
|
|
|
- <template slot-scope="scope" v-if="scope.row.userId !== 1">
|
|
|
+ <template slot-scope="scope" v-if="scope.row.id !== 1">
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="text"
|
|
@@ -127,6 +128,7 @@
|
|
|
type="text"
|
|
|
icon="el-icon-delete"
|
|
|
@click="handleAuthRole(scope.row)"
|
|
|
+ v-hasPermi="['system:user:role']"
|
|
|
>分配角色
|
|
|
</el-button>
|
|
|
</template>
|
|
@@ -165,7 +167,7 @@
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="邮箱" prop="mailbox">
|
|
|
+ <el-form-item label="用户邮箱" prop="mailbox">
|
|
|
<el-input style="width: 220px" v-model="form.mailbox" placeholder="请输入邮箱" maxlength="50"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
@@ -177,7 +179,7 @@
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="状态">
|
|
|
+ <el-form-item label="用户状态">
|
|
|
<el-select style="width: 220px" v-model="form.status" placeholder="请选择状态">
|
|
|
<el-option
|
|
|
v-for="item in statusOptions"
|
|
@@ -189,14 +191,13 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="角色">
|
|
|
- <el-select style="width: 220px" v-model="form.roleIds" multiple placeholder="请选择角色">
|
|
|
+ <el-form-item label="用户类型">
|
|
|
+ <el-select style="width: 220px" v-model="form.usertype" placeholder="请选择类型">
|
|
|
<el-option
|
|
|
- v-for="item in roleOptions"
|
|
|
- :key="item.roleId"
|
|
|
- :label="item.roleName"
|
|
|
- :value="item.roleId"
|
|
|
- :disabled="item.status == 1"
|
|
|
+ v-for="item in typeOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
@@ -208,6 +209,48 @@
|
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- 分配角色对话框 -->
|
|
|
+ <el-dialog :title="jstitle" :visible.sync="jsopen" width="650px" append-to-body>
|
|
|
+ <el-form width="630px" label-width="80px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="用户账号">
|
|
|
+ <el-input style="width: 220px" v-model="jsusername"
|
|
|
+ maxlength="20" :disabled="true"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="用户姓名">
|
|
|
+ <el-input style="width: 220px" v-model="jsnickname" maxlength="30" :disabled="true"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div style="padding-top: 10px">
|
|
|
+ <vxe-table
|
|
|
+ ref="xTable"
|
|
|
+ align="center"
|
|
|
+ :loading="loading"
|
|
|
+ class="mytable-style"
|
|
|
+ auto-resize
|
|
|
+ border
|
|
|
+ resizable
|
|
|
+ export-config
|
|
|
+ highlight-current-row
|
|
|
+ show-overflow
|
|
|
+ max-height="700"
|
|
|
+ :data="roleList"
|
|
|
+ >
|
|
|
+ <vxe-column type="selection" :reserve-selection="true" width="60"/>
|
|
|
+ <vxe-table-column field="roleName" title="角色名称"/>
|
|
|
+ </vxe-table>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="jssubmitForm">确 定</el-button>
|
|
|
+ <el-button @click="jscancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -217,11 +260,21 @@ export default {
|
|
|
name: "User",
|
|
|
data() {
|
|
|
return {
|
|
|
+ // 角色表格数据
|
|
|
+ jsuserid:'',
|
|
|
+ roleList: [],
|
|
|
+ jsusername:'',
|
|
|
+ jsnickname:'',
|
|
|
+ jsusertype:'',
|
|
|
statusOptions: [
|
|
|
{value: '0', label: '正常'},
|
|
|
{value: '1', label: '锁定'},
|
|
|
{value: '2', label: '注销'}
|
|
|
],
|
|
|
+ typeOptions: [
|
|
|
+ {value: '0', label: '管理员'},
|
|
|
+ {value: '1', label: '普通用户'}
|
|
|
+ ],
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
showTable: true,
|
|
@@ -239,8 +292,12 @@ export default {
|
|
|
userList: null,
|
|
|
// 弹出层标题
|
|
|
title: "",
|
|
|
+ // 角色分配弹出层标题
|
|
|
+ jstitle: "",
|
|
|
// 是否显示弹出层
|
|
|
open: false,
|
|
|
+ // 角色是否显示弹出层
|
|
|
+ jsopen: false,
|
|
|
// 默认密码
|
|
|
initPassword: undefined,
|
|
|
// 角色选项
|
|
@@ -299,8 +356,20 @@ export default {
|
|
|
}
|
|
|
return belongTo
|
|
|
},
|
|
|
+ // 列表状态格式化
|
|
|
+ typeFormat({cellValue}) {
|
|
|
+ let belongTo = '未知的类型'
|
|
|
+ for (let i = 0; i < this.typeOptions.length; i++) {
|
|
|
+ if (cellValue == "0") {
|
|
|
+ belongTo = "管理员"
|
|
|
+ } else if (cellValue == "1") {
|
|
|
+ belongTo = "普通用户"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return belongTo
|
|
|
+ },
|
|
|
/** 查询用户列表 */
|
|
|
- getList:debounce(function(){
|
|
|
+ getList(){
|
|
|
this.loading = true;
|
|
|
var searchParams = {
|
|
|
currentPage: this.currentPage,
|
|
@@ -323,7 +392,7 @@ export default {
|
|
|
}).catch((error) => {
|
|
|
// this.$message.error(error)
|
|
|
})
|
|
|
- },0),
|
|
|
+ },
|
|
|
// 用户状态修改
|
|
|
handleStatusChange(row) {
|
|
|
let text = row.status === "0" ? "启用" : "停用";
|
|
@@ -340,6 +409,10 @@ export default {
|
|
|
this.open = false;
|
|
|
this.reset();
|
|
|
},
|
|
|
+ // 角色取消按钮
|
|
|
+ jscancel() {
|
|
|
+ this.jsopen = false;
|
|
|
+ },
|
|
|
// 表单重置
|
|
|
reset() {
|
|
|
this.edit = false;
|
|
@@ -350,14 +423,15 @@ export default {
|
|
|
phonenumber: undefined,
|
|
|
mailbox: undefined,
|
|
|
status: "0",
|
|
|
+ usertype: "0",
|
|
|
remark: undefined
|
|
|
};
|
|
|
this.resetForm("form");
|
|
|
},
|
|
|
/** 搜索按钮操作 */
|
|
|
- handleQuery() {
|
|
|
- this.getList();
|
|
|
- },
|
|
|
+ handleQuery:debounce(function(){
|
|
|
+ this.getList()
|
|
|
+ },1000),
|
|
|
/** 重置按钮操作 */
|
|
|
resetQuery() {
|
|
|
this.resetForm("queryForm");
|
|
@@ -449,7 +523,7 @@ export default {
|
|
|
})
|
|
|
}).catch(() => {
|
|
|
});
|
|
|
- },1000),
|
|
|
+ },500),
|
|
|
/** 删除按钮操作 */
|
|
|
handleDelete(){
|
|
|
const _selectData = this.$refs.userTable.getRadioRecord(true)
|
|
@@ -460,6 +534,13 @@ export default {
|
|
|
});
|
|
|
return
|
|
|
}
|
|
|
+ if (_selectData.id==1) {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '内置系统管理员不能删除!'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
this.$prompt('请输入密码','鉴别操作',{
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
@@ -472,7 +553,7 @@ export default {
|
|
|
inputErrorMessage: '不能为空,最多可录入20个字符'
|
|
|
}).then(async({value})=>{
|
|
|
this.doDelete(_selectData,value)
|
|
|
- })
|
|
|
+ }).catch((e)=>{})
|
|
|
},
|
|
|
/**
|
|
|
* 删除提交
|
|
@@ -503,7 +584,7 @@ export default {
|
|
|
console.log(error)
|
|
|
this.loading = false
|
|
|
})
|
|
|
- },1000),
|
|
|
+ },500),
|
|
|
/** 修改按钮操作 */
|
|
|
handleUpdate() {
|
|
|
this.reset();
|
|
@@ -575,12 +656,112 @@ export default {
|
|
|
this.loading = false
|
|
|
})
|
|
|
},1000),
|
|
|
-
|
|
|
+ getUserRole(userid){
|
|
|
+ const a = this.$axios
|
|
|
+ return new Promise(function(resolve, reject) {
|
|
|
+ var userRoleParams = {
|
|
|
+ userId: userid
|
|
|
+ }
|
|
|
+ a.get('/sysUserController/getUserRole',
|
|
|
+ {params: userRoleParams}).then(res => {
|
|
|
+ // 返回userRole对象
|
|
|
+ resolve(res.data)
|
|
|
+ })
|
|
|
+ }).catch((error) => {
|
|
|
+ console.error('获取用户角色出错' + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getRoleByType(usertype){
|
|
|
+ // 根据用户类型获取角色列表
|
|
|
+ const a = this.$axios
|
|
|
+ let _this = this
|
|
|
+ return new Promise(function(resolve, reject) {
|
|
|
+ var searchParams = {
|
|
|
+ usertype: usertype
|
|
|
+ }
|
|
|
+ a.get('/sysRoleController/getRoleByType',
|
|
|
+ {params: searchParams}).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ // 返回角色列表
|
|
|
+ _this.roleList = res.data
|
|
|
+ resolve(res.data)
|
|
|
+ } else {
|
|
|
+ // 输出后端返回信息
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: res.data
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error(error)
|
|
|
+ })
|
|
|
+ },
|
|
|
/** 分配角色操作 */
|
|
|
- handleAuthRole: function (row) {
|
|
|
- const userId = row.userId;
|
|
|
- this.$router.push("/system/user-auth/role/" + userId);
|
|
|
- }
|
|
|
+ handleAuthRole:debounce(function(row){
|
|
|
+ this.jsuserid = row.id
|
|
|
+ this.jsusername = row.username
|
|
|
+ this.jsnickname = row.nickname
|
|
|
+ this.jsopen = true;
|
|
|
+ this.title = "分配角色";
|
|
|
+
|
|
|
+ Promise.all([this.getRoleByType(row.usertype),this.getUserRole(this.jsuserid)]).then((res) => {
|
|
|
+ if (res[1]!='' && res[1]!=undefined){
|
|
|
+ const roleTable = this.$refs.xTable.getTableData()
|
|
|
+ for (var i=0;i<roleTable.tableData.length;i++){
|
|
|
+ if (res[1].roleId==roleTable.tableData[i].roleId){
|
|
|
+ // 将原有的角色勾选上
|
|
|
+ this.$refs.xTable.setCheckboxRow(roleTable.tableData[i], true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(e=>{
|
|
|
+ console.log(e)
|
|
|
+ this.$message.error("获取分配角色异常:"+e)
|
|
|
+ })
|
|
|
+ },1000),
|
|
|
+ /** 角色分配提交按钮 */
|
|
|
+ jssubmitForm:debounce(function(){
|
|
|
+ const _selectData = this.$refs.xTable.getCheckboxRecords(true)
|
|
|
+ if (_selectData.length>1){
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '每个用户只能分配一个角色!'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let roleid = '';
|
|
|
+ if (_selectData.length==1){
|
|
|
+ roleid = _selectData[0].roleId
|
|
|
+ }
|
|
|
+
|
|
|
+ // 提交后台角色分配
|
|
|
+ const param = {
|
|
|
+ userId: this.jsuserid,
|
|
|
+ roleId: roleid
|
|
|
+ }
|
|
|
+ this.$axios.post('/sysUserController/authRole', param).then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '角色分配成功!'
|
|
|
+ });
|
|
|
+ this.jscancel()
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: res.data
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: '角色分配失败!'
|
|
|
+ });
|
|
|
+ console.log(error)
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },1000)
|
|
|
}
|
|
|
};
|
|
|
</script>
|