朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 f90fd5dafca476890f969e1da0254b32a6ad140b 1 个父辈 42d88262

优化权限界面交互,修复未登陆显示整个main界面问题

内嵌 并排对比
正在显示 3 个修改的文件 包含 159 行增加 和 107 行删除
@@ -90,16 +90,17 @@ var axois_init = { @@ -90,16 +90,17 @@ var axois_init = {
90 sessionStorage.removeItem('user'); 90 sessionStorage.removeItem('user');
91 sessionStorage.removeItem('menu'); 91 sessionStorage.removeItem('menu');
92 sessionStorage.removeItem('token'); 92 sessionStorage.removeItem('token');
93 - } 93 + }else{
94 let user = JSON.parse(sessionStorage.getItem('user')); 94 let user = JSON.parse(sessionStorage.getItem('user'));
95 if(sessionStorage.getItem('token')){ 95 if(sessionStorage.getItem('token')){
96 axios.defaults.headers.common['Authorization'] = sessionStorage.getItem('token'); 96 axios.defaults.headers.common['Authorization'] = sessionStorage.getItem('token');
97 } 97 }
98 - if (jsutil.checkNull(user) && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) { 98 +
  99 + if (!jsutil.checkNull(user) && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) {
99 next({ path: '/login' }) 100 next({ path: '/login' })
100 - } else {  
101 - next()  
102 } 101 }
  102 + }
  103 + next()
103 }); 104 });
104 } 105 }
105 } 106 }
不能预览此文件类型
@@ -50,86 +50,109 @@ @@ -50,86 +50,109 @@
50 </el-pagination> 50 </el-pagination>
51 </el-col> 51 </el-col>
52 52
53 - <!--编辑界面-->  
54 - <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">  
55 - <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">  
56 - <el-form-item label="ID">  
57 - <span>{{editForm.permissionId}}</span>  
58 - </el-form-item>  
59 - <el-form-item label="权限名称" prop="name">  
60 - <el-input v-model="editForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>  
61 - </el-form-item>  
62 - <el-form-item label="权限描述" prop="description">  
63 - <el-input v-model="editForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>  
64 - </el-form-item>  
65 - <el-form-item label="权限总路径" prop="path">  
66 - <el-input v-model="editForm.path" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>  
67 - </el-form-item>  
68 - <el-form-item label="权限路径" prop="url">  
69 - <el-input v-model="editForm.url" auto-complete="off" placeholder="请输入权限描述：例如:/user/update"></el-input>  
70 - </el-form-item>  
71 - <el-form-item label="权限排序" prop="permissionOrder">  
72 - <el-input v-model="editForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input>  
73 - </el-form-item>  
74 - <el-form-item label="父目录ID" prop="parentId">  
75 - <el-input v-model="editForm.parentId" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>  
76 - </el-form-item>  
77 - <el-form-item label="ismenu" prop="ismenu">  
78 - <el-switch  
79 - v-model="editForm.ismenu"  
80 - active-color="#13ce66"  
81 - inactive-color="#ff4949"  
82 - active-text="是"  
83 - inactive-text="否"  
84 - active-value="1"  
85 - inactive-value="0">  
86 - </el-switch>  
87 - </el-form-item>  
88 - </el-form>  
89 - <div slot="footer" class="dialog-footer">  
90 - <el-button @click.native="editFormVisible = false">取消</el-button>  
91 - <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>  
92 - </div>  
93 - </el-dialog>  
94 53
95 <!--新增界面--> 54 <!--新增界面-->
96 - <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">  
97 - <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm"> 55 + <el-dialog :title="dialogMap[dialogStatus]" :visible.sync="addFormVisible" :close-on-click-modal="false">
  56 + <el-form :model="addForm" label-width="110px" :rules="addFormRules" ref="addForm">
  57 +
  58 + <el-form-item label="ID">
  59 + <span>{{addForm.permissionId}}</span>
  60 + </el-form-item>
  61 + <el-row :gutter="20">
  62 + <el-col :span="12">
98 <el-form-item label="权限名称" prop="name"> 63 <el-form-item label="权限名称" prop="name">
99 <el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input> 64 <el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>
100 </el-form-item> 65 </el-form-item>
  66 + </el-col>
  67 + <el-col :span="12">
101 <el-form-item label="权限描述" prop="description"> 68 <el-form-item label="权限描述" prop="description">
102 <el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input> 69 <el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>
103 </el-form-item> 70 </el-form-item>
  71 + </el-col>
  72 + </el-row>
  73 + <el-row :gutter="20">
  74 + <el-col>
104 <el-form-item label="权限总路径" prop="path"> 75 <el-form-item label="权限总路径" prop="path">
105 - <el-input v-model="addForm.path" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input> 76 + <el-input v-model="addForm.path" auto-complete="off" placeholder="设置为前端router的path值"></el-input>
  77 + <el-cascader-panel
  78 + v-model="addForm.path"
  79 + :options="cascaderOptions"
  80 + :props="pannelProps"
  81 + ></el-cascader-panel>
106 </el-form-item> 82 </el-form-item>
107 - <el-form-item label="权限路径" prop="url">  
108 - <el-input v-model="addForm.url" auto-complete="off" placeholder="请输入权限描述：例如:/user/update"></el-input> 83 + </el-col>
  84 + </el-row>
  85 + <el-form-item label="具体访问路径" prop="url">
  86 + <el-input v-model="addForm.url" auto-complete="off" placeholder="设置为后端微服务路径：例如:/cloud-user-center/user/update"></el-input>
  87 + <el-cascader-panel
  88 + v-model="addForm.url"
  89 + :options="tableList"
  90 + :props="pannelUrlProps"
  91 + ></el-cascader-panel>
109 </el-form-item> 92 </el-form-item>
  93 + <el-row :gutter="20">
  94 + <el-col :span="8">
110 <el-form-item label="权限排序" prop="permissionOrder"> 95 <el-form-item label="权限排序" prop="permissionOrder">
111 <el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input> 96 <el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input>
112 </el-form-item> 97 </el-form-item>
113 - <el-form-item label="父目录ID" prop="parentId">  
114 - <el-input v-model="addForm.parentId" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input> 98 + </el-col>
  99 + <el-col :span="8">
  100 + <el-form-item label="设置权限上级" prop="parentId">
  101 + <el-input v-model="addForm.parentId" auto-complete="off" placeholder="请输入或者选择适配权限"></el-input>
115 </el-form-item> 102 </el-form-item>
116 - <el-form-item label="ismenu" prop="ismenu"> 103 + </el-col>
  104 + <el-col :span="8">
  105 + <el-button type="info" size="mini" @click="drawer = true">设置权限上级</el-button>
  106 + </el-col>
  107 + </el-row>
  108 +
  109 +
  110 + <el-form-item label="是否是目录" prop="ismenu">
117 <el-switch 111 <el-switch
118 v-model="addForm.ismenu" 112 v-model="addForm.ismenu"
119 active-color="#13ce66" 113 active-color="#13ce66"
120 inactive-color="#ff4949" 114 inactive-color="#ff4949"
121 active-text="是" 115 active-text="是"
122 inactive-text="否" 116 inactive-text="否"
123 - active-value="1"  
124 - inactive-value="0"> 117 + >
125 </el-switch> 118 </el-switch>
126 </el-form-item> 119 </el-form-item>
127 </el-form> 120 </el-form>
128 <div slot="footer" class="dialog-footer"> 121 <div slot="footer" class="dialog-footer">
129 <el-button @click.native="addFormVisible = false">取消</el-button> 122 <el-button @click.native="addFormVisible = false">取消</el-button>
130 - <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button> 123 + <el-button type="primary" @click.native="dialogStatus==='create'?addSubmit():editSubmit()" :loading="addLoading">提交</el-button>
131 </div> 124 </div>
132 </el-dialog> 125 </el-dialog>
  126 +
  127 + <el-drawer
  128 + title="设置权限上级"
  129 + :visible.sync="drawer"
  130 + append-to-body
  131 + withHeader>
  132 + <el-row>
  133 + <el-col :span="7" :offset="1">
  134 + <span style="color:#E6A23C">不设置为顶级权限</span>
  135 + </el-col>
  136 + <el-col :span="8" >
  137 + <el-button type="primary" @click.native="treeMerge(false)">合并节点</el-button>
  138 + </el-col>
  139 + <el-col :span="8">
  140 + <el-button type="primary" @click.native="treeMerge(true)">展开节点</el-button>
  141 + </el-col>
  142 +
  143 +
  144 +
  145 +
  146 + </el-row>
  147 + <el-tree :data="tableList" :props="treeDefaultProps"
  148 + @check="clickDeal"
  149 + :default-expand-all = "treeExpand"
  150 + show-checkbox
  151 + highlight-current
  152 + check-strictly
  153 + node-key="permissionId" ref="tree">
  154 + </el-tree>
  155 + </el-drawer>
133 </section> 156 </section>
134 </template> 157 </template>
135 158
@@ -144,42 +167,44 @@ @@ -144,42 +167,44 @@
144 filters: { 167 filters: {
145 name: '' 168 name: ''
146 }, 169 },
  170 + cascaderOptions:[],
147 tableList: [], 171 tableList: [],
148 total: 0, 172 total: 0,
149 pageNum: 1, 173 pageNum: 1,
150 - pageSize: 100, 174 + pageSize: 500,
151 listLoading: false, 175 listLoading: false,
152 sels: [],//列表选中列 176 sels: [],//列表选中列
153 - //编辑界面是否显示  
154 - editFormVisible: false,  
155 - editLoading: false,  
156 - editFormRules: {  
157 - roleName: [  
158 - { required: true, message: '请输入权限名称', trigger: 'blur' }  
159 - ] 177 + treeDefaultProps: {
  178 + children: 'children',
  179 + label: 'name',
160 }, 180 },
161 - //编辑界面数据  
162 - editForm: {  
163 - permissionId:'',  
164 - description: '',  
165 - name: '',  
166 - url: '',  
167 - path: '',  
168 - parentId: '',  
169 - ismenu: '',  
170 - permissionOrder:'' 181 + pannelProps: {
  182 + children: 'children',
  183 + label: 'name',
  184 + value: 'path',
  185 + checkStrictly: true,
171 }, 186 },
172 - 187 + pannelUrlProps: {
  188 + children: 'children',
  189 + label: 'name',
  190 + value: 'url',
  191 + checkStrictly: true,
  192 + emitPath: false
  193 + },
  194 + treeExpand: true,
173 addFormVisible: false,//新增界面是否显示 195 addFormVisible: false,//新增界面是否显示
  196 + dialogMap: {
  197 + update: '编辑',
  198 + create: '新增',
  199 + },
  200 + dialogStatus: 'create',
  201 + drawer: false,
174 addLoading: false, 202 addLoading: false,
175 addFormRules: { 203 addFormRules: {
176 name: [ 204 name: [
177 { required: true, message: '请输入权限名称', trigger: 'blur' } 205 { required: true, message: '请输入权限名称', trigger: 'blur' }
178 ], 206 ],
179 - description: [  
180 - { required: true, message: '请输入权限描述', trigger: 'blur' }  
181 - ],  
182 - paht: [ 207 + path: [
183 { required: true, message: '请输入总路径', trigger: 'blur' } 208 { required: true, message: '请输入总路径', trigger: 'blur' }
184 ], 209 ],
185 url: [ 210 url: [
@@ -187,21 +212,21 @@ @@ -187,21 +212,21 @@
187 ], 212 ],
188 permissionOrder: [ 213 permissionOrder: [
189 { required: true, message: '请输入排序字段', trigger: 'blur' } 214 { required: true, message: '请输入排序字段', trigger: 'blur' }
190 - ],  
191 - parentId: [  
192 - { required: true, message: '请输入父类ID', trigger: 'blur' }  
193 ] 215 ]
194 }, 216 },
195 //新增界面数据 217 //新增界面数据
196 addForm: { 218 addForm: {
  219 + permissionId:'',
197 description: '', 220 description: '',
198 name: '', 221 name: '',
199 url: '', 222 url: '',
200 path: '', 223 path: '',
201 - parentId: '',  
202 - ismenu: '',  
203 - permissionOrder:''  
204 - 224 + parentId: 0,
  225 + ismenu: true,
  226 + permissionOrder: '0',
  227 + chidren: [],
  228 + component: '',
  229 + method: ''
205 } 230 }
206 231
207 } 232 }
@@ -233,7 +258,6 @@ @@ -233,7 +258,6 @@
233 this.listLoading = false; 258 this.listLoading = false;
234 //NProgress.done(); 259 //NProgress.done();
235 }).catch((error) => { 260 }).catch((error) => {
236 -  
237 this.listLoading = false; 261 this.listLoading = false;
238 if(null!= error.response && error.response!==undefined){ 262 if(null!= error.response && error.response!==undefined){
239 let status= error.response.status; 263 let status= error.response.status;
@@ -242,9 +266,6 @@ @@ -242,9 +266,6 @@
242 }else { 266 }else {
243 alert(error); 267 alert(error);
244 } 268 }
245 -  
246 -  
247 -  
248 }); 269 });
249 270
250 }, 271 },
@@ -276,33 +297,35 @@ @@ -276,33 +297,35 @@
276 * @param row 为这行的数据对象 297 * @param row 为这行的数据对象
277 */ 298 */
278 handleEdit: function (index, row) { 299 handleEdit: function (index, row) {
279 - this.editFormVisible = true;  
280 - this.editForm = Object.assign({}, row); 300 + this.addFormVisible = true;
  301 + this.dialogStatus= 'update',
  302 + this.addForm = Object.assign({}, row);
281 }, 303 },
282 //显示新增界面，每次点开初始化数据 304 //显示新增界面，每次点开初始化数据
283 handleAdd: function () { 305 handleAdd: function () {
284 this.addFormVisible = true; 306 this.addFormVisible = true;
  307 + this.dialogStatus= 'create',
285 this.addForm = { 308 this.addForm = {
286 - username: '',  
287 - password: '',  
288 - sex: 1,  
289 - address: '',  
290 - realname: '',  
291 - email: '',  
292 - mobilephone: '',  
293 - age: 1 309 + description: '',
  310 + name: '',
  311 + url: '',
  312 + path: '',
  313 + parentId: 0,
  314 + ismenu: '',
  315 + permissionOrder:'0'
  316 +
294 }; 317 };
295 }, 318 },
296 //编辑 319 //编辑
297 editSubmit: function () { 320 editSubmit: function () {
298 - this.$refs.editForm.validate((valid) => { 321 + this.$refs.addForm.validate((valid) => {
299 if (valid) { 322 if (valid) {
300 this.$confirm('确认提交吗？', '提示', {}).then(() => { 323 this.$confirm('确认提交吗？', '提示', {}).then(() => {
301 - this.editLoading = true; 324 + this.addLoading = true;
302 //NProgress.start(); 325 //NProgress.start();
303 - let para = Object.assign({}, this.editForm); 326 + let para = Object.assign({}, this.addForm);
304 para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss'); 327 para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
305 - this.editLoading = false; 328 + this.addLoading = false;
306 edit(para).then((res) => { 329 edit(para).then((res) => {
307 330
308 //NProgress.done(); 331 //NProgress.done();
@@ -310,8 +333,8 @@ @@ -310,8 +333,8 @@
310 message: '提交成功', 333 message: '提交成功',
311 type: 'success' 334 type: 'success'
312 }); 335 });
313 - this.$refs['editForm'].resetFields();  
314 - this.editFormVisible = false; 336 + this.$refs['addForm'].resetFields();
  337 + this.addFormVisible = false;
315 this.getTableList(); 338 this.getTableList();
316 }).catch(error => alert(error)); 339 }).catch(error => alert(error));
317 }); 340 });
@@ -366,15 +389,43 @@ @@ -366,15 +389,43 @@
366 }).catch(() => { 389 }).catch(() => {
367 390
368 }); 391 });
  392 + },
  393 + showDrawer: function(){
  394 + this.drawer = true;
  395 + this.$nextTick(() => {
  396 + //反向适配
  397 + this.$refs.tree.setCheckedKeys([this.addForm.parentId]);
  398 + });
  399 + },
  400 + clickDeal: function (currentObj, treeStatus) {
  401 + this.addForm.parentId = currentObj.permissionId;
  402 + this.$refs.tree.setCheckedKeys([currentObj.permissionId]);
  403 + // this.drawer = false;
  404 + },
  405 + treeMerge: function (expand) {
  406 + this.treeExpand = expand;
  407 + for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
  408 + this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand;
  409 + }
369 } 410 }
370 }, 411 },
371 mounted() { 412 mounted() {
372 this.getTableList(); 413 this.getTableList();
  414 + this.cascaderOptions = this.$router.options.routes;
373 } 415 }
374 } 416 }
375 417
376 </script> 418 </script>
377 419
378 -<style scoped> 420 +<style rel="stylesheet/scss" lang="scss">
  421 + .el-drawer.rtl {
  422 + overflow: scroll
  423 + }
  424 + .el-row{
  425 + .el-col {
  426 + margin-right: 0px;
  427 + }
  428 + }
  429 +
379 430
380 </style> 431 </style>