朱兆平 / vue_cli · 提交

转到一个项目

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

用户的权限配置

内嵌 并排对比
正在显示 4 个修改的文件 包含 121 行增加 和 10 行删除
@@ -67,3 +67,12 @@ export const addUser = params => { return axios({ @@ -67,3 +67,12 @@ export const addUser = params => { return axios({
67 'Content-Type': 'application/json;charset=UTF-8' 67 'Content-Type': 'application/json;charset=UTF-8'
68 } 68 }
69 })}; 69 })};
  70 +
  71 +export const setUserRole = params => { return axios({
  72 + method: 'PUT',
  73 + url: `/user/roleset`,
  74 + data: params,
  75 + headers: {
  76 + 'Content-Type': 'application/json;charset=UTF-8'
  77 + }
  78 +})};
  1 +export const checkNull = params => {
  2 + if (params!=null && !params && typeof(params)!="undefined"){
  3 + return true;
  4 + }else {
  5 + return false;
  6 + }
  7 +};
@@ -56,6 +56,14 @@ export default { @@ -56,6 +56,14 @@ export default {
56 return null; 56 return null;
57 } 57 }
58 58
  59 + },
  60 + checkNull: params => {
  61 + if (params!==null && typeof(params)!="undefined"){
  62 + return true;
  63 + }else {
  64 + return false;
  65 + }
59 } 66 }
60 67
  68 +
61 }; 69 };
@@ -32,20 +32,21 @@ @@ -32,20 +32,21 @@
32 </el-table-column> 32 </el-table-column>
33 <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable> 33 <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
34 </el-table-column> 34 </el-table-column>
35 - <el-table-column prop="mobilephone" label="电话" width="125" sortable> 35 + <el-table-column prop="mobilephone" label="电话" width="125">
36 </el-table-column> 36 </el-table-column>
37 <el-table-column prop="creattime" label="创建时间" width="170" sortable> 37 <el-table-column prop="creattime" label="创建时间" width="170" sortable>
38 </el-table-column> 38 </el-table-column>
39 <el-table-column prop="updatetime" label="更新时间" width="170" sortable> 39 <el-table-column prop="updatetime" label="更新时间" width="170" sortable>
40 </el-table-column> 40 </el-table-column>
41 - <el-table-column prop="address" label="地址" min-width="180" sortable> 41 + <el-table-column prop="address" label="地址" min-width="180">
42 </el-table-column> 42 </el-table-column>
43 - <el-table-column prop="email" label="Email" min-width="180" sortable> 43 + <el-table-column prop="email" label="Email" min-width="180">
44 </el-table-column> 44 </el-table-column>
45 <el-table-column prop="state" label="启用" width="100" :formatter="formatState" sortable> 45 <el-table-column prop="state" label="启用" width="100" :formatter="formatState" sortable>
46 </el-table-column> 46 </el-table-column>
47 - <el-table-column label="操作" width="150"> 47 + <el-table-column label="操作" width="250">
48 <template slot-scope="scope"> 48 <template slot-scope="scope">
  49 + <el-button size="small" @click="roleEdit(scope.$index, scope.row)">权限配置</el-button>
49 <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> 50 <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
50 <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button> 51 <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
51 </template> 52 </template>
@@ -69,7 +70,7 @@ @@ -69,7 +70,7 @@
69 <span>{{editForm.username}}</span> 70 <span>{{editForm.username}}</span>
70 </el-form-item> 71 </el-form-item>
71 <el-form-item label="密码" prop="password"> 72 <el-form-item label="密码" prop="password">
72 - <el-input v-model="editForm.password" auto-complete="off" show-password></el-input> 73 + <el-input v-model="editForm.password" auto-complete="off" type="password" show-password></el-input>
73 </el-form-item> 74 </el-form-item>
74 <el-form-item label="姓名" prop="realname"> 75 <el-form-item label="姓名" prop="realname">
75 <el-input v-model="editForm.realname" auto-complete="off"></el-input> 76 <el-input v-model="editForm.realname" auto-complete="off"></el-input>
@@ -144,13 +145,33 @@ @@ -144,13 +145,33 @@
144 <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button> 145 <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
145 </div> 146 </div>
146 </el-dialog> 147 </el-dialog>
  148 +
  149 + <!--权限设置-->
  150 + <el-dialog title="权限设置" v-model="roleFormVisible" :close-on-click-modal="false">
  151 + <el-form :model="roleEditForm" label-width="80px" ref="roleEditForm" >
  152 + <el-form-item label="ID">
  153 + <span>{{roleEditForm.userId}}</span>
  154 + </el-form-item>
  155 + <el-form-item label="账号">
  156 + <span>{{roleEditForm.username}}</span>
  157 + </el-form-item>
  158 + <el-checkbox-group v-model="roleIds" size="small">
  159 + <el-checkbox-button v-for="role in roles" :label="role.roleId" :key="role.roleId" >{{role.description}}</el-checkbox-button>
  160 + </el-checkbox-group>
  161 + </el-form>
  162 + <div slot="footer" class="dialog-footer">
  163 + <el-button @click.native="roleFormVisible = false">取消</el-button>
  164 + <el-button type="primary" @click.native="roleEditSubmit" :loading="addLoading">提交</el-button>
  165 + </div>
  166 + </el-dialog>
147 </section> 167 </section>
148 </template> 168 </template>
149 169
150 <script> 170 <script>
151 import util from '../../common/js/util' 171 import util from '../../common/js/util'
152 - //import NProgress from 'nprogress'  
153 - import { getUserList, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api'; 172 + import NProgress from 'nprogress'
  173 + import { getUserList, removeUser, batchRemoveUser, editUser, addUser, setUserRole } from '../../api/api';
  174 + import { getList} from '../../api/role_api';
154 import moment from 'moment' 175 import moment from 'moment'
155 export default { 176 export default {
156 data() { 177 data() {
@@ -194,6 +215,8 @@ @@ -194,6 +215,8 @@
194 { required: true, message: '请输入姓名', trigger: 'blur' } 215 { required: true, message: '请输入姓名', trigger: 'blur' }
195 ] 216 ]
196 }, 217 },
  218 + //用户角色配置
  219 + roleFormVisible: false,
197 //新增界面数据 220 //新增界面数据
198 addForm: { 221 addForm: {
199 username: '', 222 username: '',
@@ -204,7 +227,14 @@ @@ -204,7 +227,14 @@
204 email: '', 227 email: '',
205 mobilephone: '', 228 mobilephone: '',
206 age: 1 229 age: 1
207 - } 230 + },
  231 + roleEditForm: {
  232 + userId: 1,
  233 + username: "",
  234 + roles: []
  235 + },
  236 + roles: [],
  237 + roleIds: []
208 238
209 } 239 }
210 }, 240 },
@@ -228,7 +258,6 @@ @@ -228,7 +258,6 @@
228 username: this.filters.username 258 username: this.filters.username
229 }; 259 };
230 this.listLoading = true; 260 this.listLoading = true;
231 - //NProgress.start();  
232 getUserList(para).then((res) => { 261 getUserList(para).then((res) => {
233 this.total = res.data.total; 262 this.total = res.data.total;
234 this.users = res.data.list; 263 this.users = res.data.list;
@@ -273,6 +302,42 @@ @@ -273,6 +302,42 @@
273 this.editFormVisible = true; 302 this.editFormVisible = true;
274 this.editForm = Object.assign({}, row); 303 this.editForm = Object.assign({}, row);
275 }, 304 },
  305 + roleEdit: function (index, row) {
  306 + var _this = this;
  307 + _this.roleIds = [];
  308 + this.roleEditForm = Object.assign({}, row);
  309 + let userRoles = this.roleEditForm.roles;
  310 + if (util.checkNull(userRoles)){
  311 + userRoles.forEach(function (role,v_index,v_arr) {
  312 + _this.roleIds[v_index] = role.roleId;
  313 + });
  314 + }
  315 + this.getRoles();
  316 + },
  317 + getRoles() {
  318 + let para = {
  319 + pageNum: 1,
  320 + pageSize: 100
  321 + };
  322 + NProgress.start();
  323 + getList(para).then((res) => {
  324 + this.roles = res.data.list;
  325 + this.roleFormVisible = true;
  326 + NProgress.done();
  327 + }).catch((error) => {
  328 + if(null!= error.response && error.response!==undefined){
  329 + let status= error.response.status;
  330 + let msg = error.response.statusText;
  331 + alert(status+msg);
  332 + }else {
  333 + alert(error);
  334 + }
  335 +
  336 +
  337 +
  338 + });
  339 +
  340 + },
276 //显示新增界面，每次点开初始化数据 341 //显示新增界面，每次点开初始化数据
277 handleAdd: function () { 342 handleAdd: function () {
278 this.addFormVisible = true; 343 this.addFormVisible = true;
@@ -299,6 +364,7 @@ @@ -299,6 +364,7 @@
299 para.authorities = null; 364 para.authorities = null;
300 para.permissions = null; 365 para.permissions = null;
301 para.roles = null; 366 para.roles = null;
  367 + para.username=null;//后端不能也不接收针对username的更新
302 // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd'); 368 // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
303 /* 369 /*
304 查询之后格式this.filters.column.create_start_date中日期发生变化; 370 查询之后格式this.filters.column.create_start_date中日期发生变化;
@@ -343,7 +409,10 @@ @@ -343,7 +409,10 @@
343 this.$refs['addForm'].resetFields(); 409 this.$refs['addForm'].resetFields();
344 this.addFormVisible = false; 410 this.addFormVisible = false;
345 this.getUsers(); 411 this.getUsers();
346 - }).catch(error => alert(error)); 412 + }).catch(error => {
  413 + this.addLoading = false;
  414 + alert(error.message);
  415 + });
347 }); 416 });
348 } 417 }
349 }); 418 });
@@ -372,6 +441,24 @@ @@ -372,6 +441,24 @@
372 }).catch(() => { 441 }).catch(() => {
373 442
374 }); 443 });
  444 + },
  445 + roleEditSubmit: function () {
  446 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  447 +// this.editLoading = true;
  448 + let userId = this.roleEditForm.userId;
  449 + let roleIds = this.roleIds;
  450 + let para = {userId,roleIds};
  451 + setUserRole(para).then((res) => {
  452 + if (res.status ===200) {
  453 + alert("ok");
  454 + }
  455 + this.getUsers();
  456 + this.roleFormVisible = false;
  457 + }).catch(err => {
  458 + alert(err);
  459 + });
  460 + console.log(para);
  461 + });
375 } 462 }
376 }, 463 },
377 mounted() { 464 mounted() {