朱兆平 / vue_cli · 提交

转到一个项目

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

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

内嵌 并排对比
正在显示 3 个修改的文件 包含 216 行增加 和 164 行删除
@@ -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 + }else{
  94 + let user = JSON.parse(sessionStorage.getItem('user'));
  95 + if(sessionStorage.getItem('token')){
  96 + axios.defaults.headers.common['Authorization'] = sessionStorage.getItem('token');
  97 + }
  98 +
  99 + if (!jsutil.checkNull(user) && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) {
  100 + next({ path: '/login' })
  101 + }
93 } 102 }
94 - let user = JSON.parse(sessionStorage.getItem('user'));  
95 - if(sessionStorage.getItem('token')){  
96 - axios.defaults.headers.common['Authorization'] = sessionStorage.getItem('token');  
97 - }  
98 - if (jsutil.checkNull(user) && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) {  
99 - next({ path: '/login' })  
100 - } else {  
101 - next()  
102 - } 103 + next()
103 }); 104 });
104 } 105 }
105 } 106 }
不能预览此文件类型
@@ -17,9 +17,9 @@ @@ -17,9 +17,9 @@
17 17
18 <!--列表--> 18 <!--列表-->
19 <el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;" 19 <el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"
20 - row-key="permissionId"  
21 - border  
22 - :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 20 + row-key="permissionId"
  21 + border
  22 + :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
23 > 23 >
24 <el-table-column type="selection" width="55"> 24 <el-table-column type="selection" width="55">
25 </el-table-column> 25 </el-table-column>
@@ -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">  
98 - <el-form-item label="权限名称" prop="name">  
99 - <el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>  
100 - </el-form-item>  
101 - <el-form-item label="权限描述" prop="description">  
102 - <el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>  
103 - </el-form-item>  
104 - <el-form-item label="权限总路径" prop="path">  
105 - <el-input v-model="addForm.path" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>  
106 - </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>  
109 - </el-form-item>  
110 - <el-form-item label="权限排序" prop="permissionOrder">  
111 - <el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input> 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>
112 </el-form-item> 60 </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> 61 + <el-row :gutter="20">
  62 + <el-col :span="12">
  63 + <el-form-item label="权限名称" prop="name">
  64 + <el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>
  65 + </el-form-item>
  66 + </el-col>
  67 + <el-col :span="12">
  68 + <el-form-item label="权限描述" prop="description">
  69 + <el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>
  70 + </el-form-item>
  71 + </el-col>
  72 + </el-row>
  73 + <el-row :gutter="20">
  74 + <el-col>
  75 + <el-form-item label="权限总路径" prop="path">
  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>
  82 + </el-form-item>
  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>
115 </el-form-item> 92 </el-form-item>
116 - <el-form-item label="ismenu" prop="ismenu"> 93 + <el-row :gutter="20">
  94 + <el-col :span="8">
  95 + <el-form-item label="权限排序" prop="permissionOrder">
  96 + <el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input>
  97 + </el-form-item>
  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>
  102 + </el-form-item>
  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
@@ -137,71 +160,73 @@ @@ -137,71 +160,73 @@
137 import util from '../../common/js/util' 160 import util from '../../common/js/util'
138 //import NProgress from 'nprogress' 161 //import NProgress from 'nprogress'
139 import { getList, remove, batchRemove, edit, add } from '../../api/perm_api'; 162 import { getList, remove, batchRemove, edit, add } from '../../api/perm_api';
140 - import moment from 'moment' 163 + import moment from 'moment'
141 export default { 164 export default {
142 data() { 165 data() {
143 return { 166 return {
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,  
150 - pageSize: 100, 173 + pageNum: 1,
  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' } 207 + path: [
  208 + { required: true, message: '请输入总路径', trigger: 'blur' }
  209 + ],
  210 + url: [
  211 + { required: true, message: '请输入权限路径', trigger: 'blur' }
181 ], 212 ],
182 - paht: [  
183 - { required: true, message: '请输入总路径', trigger: 'blur' }  
184 - ],  
185 - url: [  
186 - { required: true, message: '请输入权限路径', trigger: 'blur' }  
187 - ],  
188 - permissionOrder: [  
189 - { required: true, message: '请输入排序字段', trigger: 'blur' }  
190 - ],  
191 - parentId: [  
192 - { required: true, message: '请输入父类ID', trigger: 'blur' }  
193 - ] 213 + permissionOrder: [
  214 + { required: true, message: '请输入排序字段', trigger: 'blur' }
  215 + ]
194 }, 216 },
195 //新增界面数据 217 //新增界面数据
196 addForm: { 218 addForm: {
197 - description: '',  
198 - name: '',  
199 - url: '', 219 + permissionId:'',
  220 + description: '',
  221 + name: '',
  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 }
@@ -211,9 +236,9 @@ @@ -211,9 +236,9 @@
211 formatSex: function (row, column) { 236 formatSex: function (row, column) {
212 return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'; 237 return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
213 }, 238 },
214 - formatState: function (row, column) {  
215 - return row.ismenu == true ? '是' : row.ismenu == false ? '否' : '未知';  
216 - }, 239 + formatState: function (row, column) {
  240 + return row.ismenu == true ? '是' : row.ismenu == false ? '否' : '未知';
  241 + },
217 handleCurrentChange(val) { 242 handleCurrentChange(val) {
218 this.pageNum = val; 243 this.pageNum = val;
219 this.getTableList(); 244 this.getTableList();
@@ -221,30 +246,26 @@ @@ -221,30 +246,26 @@
221 //获取列表 246 //获取列表
222 getTableList() { 247 getTableList() {
223 let para = { 248 let para = {
224 - pageNum: this.pageNum,  
225 - pageSize: this.pageSize,  
226 - name: this.filters.name 249 + pageNum: this.pageNum,
  250 + pageSize: this.pageSize,
  251 + name: this.filters.name
227 }; 252 };
228 this.listLoading = true; 253 this.listLoading = true;
229 //NProgress.start(); 254 //NProgress.start();
230 - getList(para).then((res) => { 255 + getList(para).then((res) => {
231 this.total = res.data.total; 256 this.total = res.data.total;
232 this.tableList = res.data.list; 257 this.tableList = res.data.list;
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;  
238 - if(null!= error.response && error.response!==undefined){  
239 - let status= error.response.status;  
240 - let msg = error.response.statusText;  
241 - alert(status+msg); 261 + this.listLoading = false;
  262 + if(null!= error.response && error.response!==undefined){
  263 + let status= error.response.status;
  264 + let msg = error.response.statusText;
  265 + alert(status+msg);
242 }else { 266 }else {
243 - alert(error); 267 + alert(error);
244 } 268 }
245 -  
246 -  
247 -  
248 }); 269 });
249 270
250 }, 271 },
@@ -256,7 +277,7 @@ @@ -256,7 +277,7 @@
256 this.listLoading = true; 277 this.listLoading = true;
257 //NProgress.start(); 278 //NProgress.start();
258 let para = { permissionId: row.permissionId }; 279 let para = { permissionId: row.permissionId };
259 - remove(para).then((res) => { 280 + remove(para).then((res) => {
260 this.listLoading = false; 281 this.listLoading = false;
261 //NProgress.done(); 282 //NProgress.done();
262 this.$message({ 283 this.$message({
@@ -265,53 +286,55 @@ @@ -265,53 +286,55 @@
265 }); 286 });
266 this.getTableList(); 287 this.getTableList();
267 }).catch((error) => { 288 }).catch((error) => {
268 - this.listLoading = false;  
269 - alert(error); 289 + this.listLoading = false;
  290 + alert(error);
270 }); 291 });
271 }).catch(); 292 }).catch();
272 }, 293 },
273 - /** 294 + /**
274 * 显示编辑界面 295 * 显示编辑界面
275 - * @param index  
276 - * @param row 为这行的数据对象  
277 - */ 296 + * @param index
  297 + * @param row 为这行的数据对象
  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);  
304 - para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');  
305 - this.editLoading = false;  
306 - edit(para).then((res) => { 326 + let para = Object.assign({}, this.addForm);
  327 + para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
  328 + this.addLoading = false;
  329 + edit(para).then((res) => {
307 330
308 //NProgress.done(); 331 //NProgress.done();
309 this.$message({ 332 this.$message({
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 });
@@ -327,7 +350,7 @@ @@ -327,7 +350,7 @@
327 //NProgress.start(); 350 //NProgress.start();
328 let para = Object.assign({}, this.addForm); 351 let para = Object.assign({}, this.addForm);
329 para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd'); 352 para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
330 - add(para).then((res) => { 353 + add(para).then((res) => {
331 this.addLoading = false; 354 this.addLoading = false;
332 //NProgress.done(); 355 //NProgress.done();
333 this.$message({ 356 this.$message({
@@ -354,7 +377,7 @@ @@ -354,7 +377,7 @@
354 this.listLoading = true; 377 this.listLoading = true;
355 //NProgress.start(); 378 //NProgress.start();
356 let para = { ids: ids }; 379 let para = { ids: ids };
357 - batchRemove(para).then((res) => { 380 + batchRemove(para).then((res) => {
358 this.listLoading = false; 381 this.listLoading = false;
359 //NProgress.done(); 382 //NProgress.done();
360 this.$message({ 383 this.$message({
@@ -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>