朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 6d996def63309c23265967003702c20621f3fbfa 1 个父辈 01c8403f

用户的权限配置

内嵌 并排对比
正在显示 4 个修改的文件 包含 122 行增加 和 11 行删除
... ... @@ -66,4 +66,13 @@ export const addUser = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
export const setUserRole = params => { return axios({
method: 'PUT',
url: `/user/roleset`,
data: params,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
... ...
export const checkNull = params => {
if (params!=null && !params && typeof(params)!="undefined"){
return true;
}else {
return false;
}
};
... ...
... ... @@ -56,6 +56,14 @@ export default {
return null;
}
},
checkNull: params => {
if (params!==null && typeof(params)!="undefined"){
return true;
}else {
return false;
}
}
};
... ...
... ... @@ -32,20 +32,21 @@
</el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
</el-table-column>
<el-table-column prop="mobilephone" label="电话" width="125" sortable>
<el-table-column prop="mobilephone" label="电话" width="125">
</el-table-column>
<el-table-column prop="creattime" label="创建时间" width="170" sortable>
</el-table-column>
<el-table-column prop="updatetime" label="更新时间" width="170" sortable>
</el-table-column>
<el-table-column prop="address" label="地址" min-width="180" sortable>
<el-table-column prop="address" label="地址" min-width="180">
</el-table-column>
<el-table-column prop="email" label="Email" min-width="180" sortable>
<el-table-column prop="email" label="Email" min-width="180">
</el-table-column>
<el-table-column prop="state" label="启用" width="100" :formatter="formatState" sortable>
</el-table-column>
<el-table-column label="操作" width="150">
<el-table-column label="操作" width="250">
<template slot-scope="scope">
<el-button size="small" @click="roleEdit(scope.$index, scope.row)">权限配置</el-button>
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
... ... @@ -69,7 +70,7 @@
<span>{{editForm.username}}</span>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="editForm.password" auto-complete="off" show-password></el-input>
<el-input v-model="editForm.password" auto-complete="off" type="password" show-password></el-input>
</el-form-item>
<el-form-item label="姓名" prop="realname">
<el-input v-model="editForm.realname" auto-complete="off"></el-input>
... ... @@ -144,13 +145,33 @@
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
<!--权限设置-->
<el-dialog title="权限设置" v-model="roleFormVisible" :close-on-click-modal="false">
<el-form :model="roleEditForm" label-width="80px" ref="roleEditForm" >
<el-form-item label="ID">
<span>{{roleEditForm.userId}}</span>
</el-form-item>
<el-form-item label="账号">
<span>{{roleEditForm.username}}</span>
</el-form-item>
<el-checkbox-group v-model="roleIds" size="small">
<el-checkbox-button v-for="role in roles" :label="role.roleId" :key="role.roleId" >{{role.description}}</el-checkbox-button>
</el-checkbox-group>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="roleFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="roleEditSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
</section>
</template>
<script>
import util from '../../common/js/util'
//import NProgress from 'nprogress'
import { getUserList, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
import NProgress from 'nprogress'
import { getUserList, removeUser, batchRemoveUser, editUser, addUser, setUserRole } from '../../api/api';
import { getList} from '../../api/role_api';
import moment from 'moment'
export default {
data() {
... ... @@ -194,6 +215,8 @@
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
},
//用户角色配置
roleFormVisible: false,
//新增界面数据
addForm: {
username: '',
... ... @@ -204,7 +227,14 @@
email: '',
mobilephone: '',
age: 1
}
},
roleEditForm: {
userId: 1,
username: "",
roles: []
},
roles: [],
roleIds: []
}
},
... ... @@ -228,7 +258,6 @@
username: this.filters.username
};
this.listLoading = true;
//NProgress.start();
getUserList(para).then((res) => {
this.total = res.data.total;
this.users = res.data.list;
... ... @@ -273,6 +302,42 @@
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
},
roleEdit: function (index, row) {
var _this = this;
_this.roleIds = [];
this.roleEditForm = Object.assign({}, row);
let userRoles = this.roleEditForm.roles;
if (util.checkNull(userRoles)){
userRoles.forEach(function (role,v_index,v_arr) {
_this.roleIds[v_index] = role.roleId;
});
}
this.getRoles();
},
getRoles() {
let para = {
pageNum: 1,
pageSize: 100
};
NProgress.start();
getList(para).then((res) => {
this.roles = res.data.list;
this.roleFormVisible = true;
NProgress.done();
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
},
//显示新增界面，每次点开初始化数据
handleAdd: function () {
this.addFormVisible = true;
... ... @@ -299,6 +364,7 @@
para.authorities = null;
para.permissions = null;
para.roles = null;
para.username=null;//后端不能也不接收针对username的更新
// para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
/*
查询之后格式this.filters.column.create_start_date中日期发生变化;
... ... @@ -343,7 +409,10 @@
this.$refs['addForm'].resetFields();
this.addFormVisible = false;
this.getUsers();
}).catch(error => alert(error));
}).catch(error => {
this.addLoading = false;
alert(error.message);
});
});
}
});
... ... @@ -372,7 +441,25 @@
}).catch(() => {
});
}
},
roleEditSubmit: function () {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
// this.editLoading = true;
let userId = this.roleEditForm.userId;
let roleIds = this.roleIds;
let para = {userId,roleIds};
setUserRole(para).then((res) => {
if (res.status ===200) {
alert("ok");
}
this.getUsers();
this.roleFormVisible = false;
}).catch(err => {
alert(err);
});
console.log(para);
});
}
},
mounted() {
this.getUsers();
... ...