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

@@ -90,16 +90,17 @@ var axois_init = {
                 sessionStorage.removeItem('user');
                 sessionStorage.removeItem('menu');
                 sessionStorage.removeItem('token');
-            }
+            }else{
                 let user = JSON.parse(sessionStorage.getItem('user'));
                 if(sessionStorage.getItem('token')){
                     axios.defaults.headers.common['Authorization'] = sessionStorage.getItem('token');
                 }
-            if (jsutil.checkNull(user) && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) {
+
+                if (!jsutil.checkNull(user) && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) {
                     next({ path: '/login' })
-            } else {
-                next()
                 }
+            }
+            next()
         });
     }
 }

@@ -50,86 +50,109 @@
 			</el-pagination>
 		</el-col>
 
-		<!--编辑界面-->
-		<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
-			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
-				<el-form-item label="ID">
-					<span>{{editForm.permissionId}}</span>
-				</el-form-item>
-				<el-form-item label="权限名称" prop="name">
-					<el-input v-model="editForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>
-				</el-form-item>
-				<el-form-item label="权限描述" prop="description">
-					<el-input v-model="editForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>
-				</el-form-item>
-				<el-form-item label="权限总路径" prop="path">
-					<el-input v-model="editForm.path" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>
-				</el-form-item>
-				<el-form-item label="权限路径" prop="url">
-					<el-input v-model="editForm.url" auto-complete="off" placeholder="请输入权限描述：例如:/user/update"></el-input>
-				</el-form-item>
-				<el-form-item label="权限排序" prop="permissionOrder">
-					<el-input v-model="editForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input>
-				</el-form-item>
-				<el-form-item label="父目录ID" prop="parentId">
-					<el-input v-model="editForm.parentId" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>
-				</el-form-item>
-				<el-form-item label="ismenu" prop="ismenu">
-					<el-switch
-							v-model="editForm.ismenu"
-							active-color="#13ce66"
-							inactive-color="#ff4949"
-							active-text="是"
-							inactive-text="否"
-							active-value="1"
-							inactive-value="0">
-					</el-switch>
-				</el-form-item>
-			</el-form>
-			<div slot="footer" class="dialog-footer">
-				<el-button @click.native="editFormVisible = false">取消</el-button>
-				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
-			</div>
-		</el-dialog>
 
 		<!--新增界面-->
-		<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
-			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
+		<el-dialog :title="dialogMap[dialogStatus]" :visible.sync="addFormVisible" :close-on-click-modal="false">
+			<el-form :model="addForm" label-width="110px" :rules="addFormRules" ref="addForm">
+
+				<el-form-item label="ID">
+					<span>{{addForm.permissionId}}</span>
+				</el-form-item>
+				<el-row :gutter="20">
+					<el-col :span="12">
 						<el-form-item label="权限名称" prop="name">
 							<el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>
 						</el-form-item>
+					</el-col>
+					<el-col :span="12">
 						<el-form-item label="权限描述" prop="description">
 							<el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>
 						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row :gutter="20">
+					<el-col>
 						<el-form-item label="权限总路径" prop="path">
-					<el-input v-model="addForm.path" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>
+							<el-input v-model="addForm.path" auto-complete="off" placeholder="设置为前端router的path值"></el-input>
+							<el-cascader-panel
+									v-model="addForm.path"
+									:options="cascaderOptions"
+									:props="pannelProps"
+							></el-cascader-panel>
 						</el-form-item>
-				<el-form-item label="权限路径" prop="url">
-					<el-input v-model="addForm.url" auto-complete="off" placeholder="请输入权限描述：例如:/user/update"></el-input>
+					</el-col>
+				</el-row>
+				<el-form-item label="具体访问路径" prop="url">
+					<el-input v-model="addForm.url" auto-complete="off" placeholder="设置为后端微服务路径：例如:/cloud-user-center/user/update"></el-input>
+					<el-cascader-panel
+							v-model="addForm.url"
+							:options="tableList"
+							:props="pannelUrlProps"
+					></el-cascader-panel>
 				</el-form-item>
+				<el-row :gutter="20">
+					<el-col :span="8">
 						<el-form-item label="权限排序" prop="permissionOrder">
 							<el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input>
 						</el-form-item>
-				<el-form-item label="父目录ID" prop="parentId">
-					<el-input v-model="addForm.parentId" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>
+					</el-col>
+					<el-col :span="8">
+						<el-form-item label="设置权限上级" prop="parentId">
+							<el-input v-model="addForm.parentId" auto-complete="off" placeholder="请输入或者选择适配权限"></el-input>
 						</el-form-item>
-				<el-form-item label="ismenu" prop="ismenu">
+					</el-col>
+					<el-col :span="8">
+						<el-button type="info" size="mini" @click="drawer = true">设置权限上级</el-button>
+					</el-col>
+				</el-row>
+
+
+				<el-form-item label="是否是目录" prop="ismenu">
 					<el-switch
 							v-model="addForm.ismenu"
 							active-color="#13ce66"
 							inactive-color="#ff4949"
 							active-text="是"
 							inactive-text="否"
-							active-value="1"
-							inactive-value="0">
+					>
 					</el-switch>
 				</el-form-item>
 			</el-form>
 			<div slot="footer" class="dialog-footer">
 				<el-button @click.native="addFormVisible = false">取消</el-button>
-				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
+				<el-button type="primary" @click.native="dialogStatus==='create'?addSubmit():editSubmit()" :loading="addLoading">提交</el-button>
 			</div>
 		</el-dialog>
+
+		<el-drawer
+				title="设置权限上级"
+				:visible.sync="drawer"
+				append-to-body
+				withHeader>
+			<el-row>
+				<el-col :span="7" :offset="1">
+					<span style="color:#E6A23C">不设置为顶级权限</span>
+				</el-col>
+				<el-col :span="8" >
+					<el-button type="primary" @click.native="treeMerge(false)">合并节点</el-button>
+				</el-col>
+				<el-col :span="8">
+					<el-button type="primary" @click.native="treeMerge(true)">展开节点</el-button>
+				</el-col>
+
+
+
+
+			</el-row>
+			<el-tree :data="tableList" :props="treeDefaultProps"
+					 @check="clickDeal"
+					 :default-expand-all = "treeExpand"
+					 show-checkbox
+					 highlight-current
+					 check-strictly
+					 node-key="permissionId" ref="tree">
+			</el-tree>
+		</el-drawer>
 	</section>
 </template>
 
@@ -144,42 +167,44 @@
 				filters: {
 					name: ''
 				},
+				cascaderOptions:[],
 				tableList: [],
 				total: 0,
 				pageNum: 1,
-                pageSize: 100,
+				pageSize: 500,
 				listLoading: false,
 				sels: [],//列表选中列
-				//编辑界面是否显示
-				editFormVisible: false,
-				editLoading: false,
-				editFormRules: {
-                    roleName: [
-						{ required: true, message: '请输入权限名称', trigger: 'blur' }
-					]
+				treeDefaultProps: {
+					children: 'children',
+					label: 'name',
 				},
-				//编辑界面数据
-				editForm: {
-                    permissionId:'',
-                    description: '',
-                    name: '',
-                    url: '',
-                    path: '',
-                    parentId: '',
-                    ismenu: '',
-                    permissionOrder:''
+				pannelProps: {
+					children: 'children',
+					label: 'name',
+					value: 'path',
+					checkStrictly: true,
 				},
-
+				pannelUrlProps: {
+					children: 'children',
+					label: 'name',
+					value: 'url',
+					checkStrictly: true,
+					emitPath: false
+				},
+				treeExpand: true,
 				addFormVisible: false,//新增界面是否显示
+				dialogMap: {
+					update: '编辑',
+					create: '新增',
+				},
+				dialogStatus: 'create',
+				drawer: false,
 				addLoading: false,
 				addFormRules: {
 					name: [
 						{ required: true, message: '请输入权限名称', trigger: 'blur' }
 					],
-                    description: [
-                        { required: true, message: '请输入权限描述', trigger: 'blur' }
-					],
-                    paht: [
+					path: [
 						{ required: true, message: '请输入总路径', trigger: 'blur' }
 					],
 					url: [
@@ -187,21 +212,21 @@
 					],
 					permissionOrder: [
 						{ required: true, message: '请输入排序字段', trigger: 'blur' }
-                    ],
-                    parentId: [
-                        { required: true, message: '请输入父类ID', trigger: 'blur' }
 					]
 				},
 				//新增界面数据
 				addForm: {
+					permissionId:'',
 					description: '',
 					name: '',
 					url: '',
 					path: '',
-					parentId: '',
-                    ismenu: '',
-                    permissionOrder:''
-
+					parentId: 0,
+					ismenu: true,
+					permissionOrder: '0',
+					chidren: [],
+					component: '',
+					method: ''
 				}
 
 			}
@@ -233,7 +258,6 @@
 					this.listLoading = false;
 					//NProgress.done();
 				}).catch((error) => {
-
 					this.listLoading = false;
 					if(null!= error.response && error.response!==undefined){
 						let status= error.response.status;
@@ -242,9 +266,6 @@
 					}else {
 						alert(error);
 					}
-
-
-
 				});
 
 			},
@@ -276,33 +297,35 @@
 			 * @param row 为这行的数据对象
 			 */
 			handleEdit: function (index, row) {
-				this.editFormVisible = true;
-				this.editForm = Object.assign({}, row);
+				this.addFormVisible = true;
+				this.dialogStatus= 'update',
+				this.addForm = Object.assign({}, row);
 			},
 			//显示新增界面，每次点开初始化数据
 			handleAdd: function () {
 				this.addFormVisible = true;
+				this.dialogStatus= 'create',
 				this.addForm = {
-                    username: '',
-                    password: '',
-                    sex: 1,
-                    address: '',
-                    realname: '',
-                    email:	'',
-                    mobilephone: '',
-                    age: 1
+					description: '',
+					name: '',
+					url: '',
+					path: '',
+					parentId: 0,
+					ismenu: '',
+					permissionOrder:'0'
+
 				};
 			},
 			//编辑
 			editSubmit: function () {
-				this.$refs.editForm.validate((valid) => {
+				this.$refs.addForm.validate((valid) => {
 					if (valid) {
 						this.$confirm('确认提交吗？', '提示', {}).then(() => {
-							this.editLoading = true;
+							this.addLoading = true;
 							//NProgress.start();
-							let para = Object.assign({}, this.editForm);
+							let para = Object.assign({}, this.addForm);
 							para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
-                            this.editLoading = false;
+							this.addLoading = false;
 							edit(para).then((res) => {
 
 								//NProgress.done();
@@ -310,8 +333,8 @@
 									message: '提交成功',
 									type: 'success'
 								});
-								this.$refs['editForm'].resetFields();
-								this.editFormVisible = false;
+								this.$refs['addForm'].resetFields();
+								this.addFormVisible = false;
 								this.getTableList();
 							}).catch(error => alert(error));
 						});
@@ -366,15 +389,43 @@
 				}).catch(() => {
 
 				});
+			},
+			showDrawer: function(){
+				this.drawer = true;
+				this.$nextTick(() => {
+					//反向适配
+					this.$refs.tree.setCheckedKeys([this.addForm.parentId]);
+				});
+			},
+			clickDeal: function (currentObj, treeStatus) {
+				this.addForm.parentId = currentObj.permissionId;
+				this.$refs.tree.setCheckedKeys([currentObj.permissionId]);
+				// this.drawer = false;
+			},
+			treeMerge: function (expand) {
+				this.treeExpand = expand;
+				for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
+					this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand;
+				}
 			}
 		},
 		mounted() {
 			this.getTableList();
+			this.cascaderOptions = this.$router.options.routes;
 		}
 	}
 
 </script>
 
-<style scoped>
+<style rel="stylesheet/scss" lang="scss">
+	.el-drawer.rtl {
+		overflow: scroll
+	}
+	.el-row{
+		.el-col {
+			margin-right: 0px;
+		}
+	}
+
 
 </style>
\ No newline at end of file