朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 9a56211e937f70eb82a3d18ecfab551503131855 1 个父辈 72665096

权限配置优化

内嵌 并排对比
正在显示 3 个修改的文件 包含 96 行增加 和 34 行删除
@@ -15,6 +15,7 @@ import 'font-awesome/css/font-awesome.min.css' @@ -15,6 +15,7 @@ import 'font-awesome/css/font-awesome.min.css'
15 15
16 import * as socketApi from './api/socket' 16 import * as socketApi from './api/socket'
17 import '@/styles/index.scss' 17 import '@/styles/index.scss'
  18 +import '@/styles/element-ui.scss'
18 import sys_init from '@/common/init/sys_init' 19 import sys_init from '@/common/init/sys_init'
19 20
20 21
@@ -83,3 +83,7 @@ @@ -83,3 +83,7 @@
83 display: block 83 display: block
84 } 84 }
85 } 85 }
  86 +
  87 +.el-col {
  88 + margin-right: 0px;
  89 +}
@@ -52,7 +52,7 @@ @@ -52,7 +52,7 @@
52 52
53 <!--编辑界面--> 53 <!--编辑界面-->
54 <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false"> 54 <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
55 - <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"> 55 + <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
56 <el-form-item label="ID"> 56 <el-form-item label="ID">
57 <span>{{editForm.permissionId}}</span> 57 <span>{{editForm.permissionId}}</span>
58 </el-form-item> 58 </el-form-item>
@@ -81,8 +81,7 @@ @@ -81,8 +81,7 @@
81 inactive-color="#ff4949" 81 inactive-color="#ff4949"
82 active-text="是" 82 active-text="是"
83 inactive-text="否" 83 inactive-text="否"
84 - active-value="1"  
85 - inactive-value="0"> 84 + >
86 </el-switch> 85 </el-switch>
87 </el-form-item> 86 </el-form-item>
88 </el-form> 87 </el-form>
@@ -94,25 +93,46 @@ @@ -94,25 +93,46 @@
94 93
95 <!--新增界面--> 94 <!--新增界面-->
96 <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false"> 95 <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> 96 + <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
  97 + <el-row>
  98 + <el-col :span="12">
  99 + <el-form-item label="权限名称" prop="name">
  100 + <el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>
  101 + </el-form-item>
  102 + </el-col>
  103 + <el-col :span="12">
  104 + <el-form-item label="权限描述" prop="description">
  105 + <el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>
  106 + </el-form-item>
  107 + </el-col>
  108 + </el-row>
  109 +
104 <el-form-item label="权限总路径" prop="path"> 110 <el-form-item label="权限总路径" prop="path">
105 <el-input v-model="addForm.path" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input> 111 <el-input v-model="addForm.path" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>
106 </el-form-item> 112 </el-form-item>
107 <el-form-item label="权限路径" prop="url"> 113 <el-form-item label="权限路径" prop="url">
108 <el-input v-model="addForm.url" auto-complete="off" placeholder="请输入权限描述：例如:/user/update"></el-input> 114 <el-input v-model="addForm.url" auto-complete="off" placeholder="请输入权限描述：例如:/user/update"></el-input>
109 </el-form-item> 115 </el-form-item>
110 - <el-form-item label="权限排序" prop="permissionOrder">  
111 - <el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input>  
112 - </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>  
115 - </el-form-item> 116 + <el-row>
  117 + <el-col :span="8">
  118 + <el-form-item label="权限排序" prop="permissionOrder">
  119 + <el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input>
  120 + </el-form-item>
  121 + </el-col>
  122 +
  123 + </el-row>
  124 + <el-row>
  125 + <el-col :span="24">
  126 + <el-form-item label="设置权限上级" prop="parentId">
  127 + <el-input v-model="addForm.parentId" auto-complete="off" placeholder="请输入或者选择适配权限"></el-input>
  128 + <div style ="float:left">
  129 + <el-button type="text" @click="drawer = true">设置权限上级</el-button>
  130 + </div>
  131 + </el-form-item>
  132 + </el-col>
  133 + </el-row>
  134 +
  135 +
116 <el-form-item label="ismenu" prop="ismenu"> 136 <el-form-item label="ismenu" prop="ismenu">
117 <el-switch 137 <el-switch
118 v-model="addForm.ismenu" 138 v-model="addForm.ismenu"
@@ -130,6 +150,24 @@ @@ -130,6 +150,24 @@
130 <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button> 150 <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
131 </div> 151 </div>
132 </el-dialog> 152 </el-dialog>
  153 +
  154 + <el-drawer
  155 + title="设置权限上级"
  156 + :visible.sync="drawer"
  157 + append-to-body
  158 + withHeader>
  159 + <el-button type="primary" @click.native="treeMerge(false)">合并节点</el-button>
  160 + <el-button type="primary" @click.native="treeMerge(true)">展开节点</el-button>
  161 + <span style="color:#E6A23C">不设置为顶级权限</span>
  162 + <el-tree :data="tableList" :props="treeDefaultProps"
  163 + @check="clickDeal"
  164 + :default-expand-all = "treeExpand"
  165 + show-checkbox
  166 + highlight-current
  167 + check-strictly
  168 + node-key="permissionId" ref="tree">
  169 + </el-tree>
  170 + </el-drawer>
133 </section> 171 </section>
134 </template> 172 </template>
135 173
@@ -147,7 +185,7 @@ @@ -147,7 +185,7 @@
147 tableList: [], 185 tableList: [],
148 total: 0, 186 total: 0,
149 pageNum: 1, 187 pageNum: 1,
150 - pageSize: 100, 188 + pageSize: 500,
151 listLoading: false, 189 listLoading: false,
152 sels: [],//列表选中列 190 sels: [],//列表选中列
153 //编辑界面是否显示 191 //编辑界面是否显示
@@ -166,11 +204,19 @@ @@ -166,11 +204,19 @@
166 url: '', 204 url: '',
167 path: '', 205 path: '',
168 parentId: '', 206 parentId: '',
169 - ismenu: '',  
170 - permissionOrder:'' 207 + ismenu: true,
  208 + permissionOrder:'',
  209 + chidren: [],
  210 + component: '',
  211 + method: ''
171 }, 212 },
172 - 213 + treeDefaultProps: {
  214 + children: 'children',
  215 + label: 'name',
  216 + },
  217 + treeExpand: true,
173 addFormVisible: false,//新增界面是否显示 218 addFormVisible: false,//新增界面是否显示
  219 + drawer: false,
174 addLoading: false, 220 addLoading: false,
175 addFormRules: { 221 addFormRules: {
176 name: [ 222 name: [
@@ -187,9 +233,6 @@ @@ -187,9 +233,6 @@
187 ], 233 ],
188 permissionOrder: [ 234 permissionOrder: [
189 { required: true, message: '请输入排序字段', trigger: 'blur' } 235 { required: true, message: '请输入排序字段', trigger: 'blur' }
190 - ],  
191 - parentId: [  
192 - { required: true, message: '请输入父类ID', trigger: 'blur' }  
193 ] 236 ]
194 }, 237 },
195 //新增界面数据 238 //新增界面数据
@@ -198,9 +241,9 @@ @@ -198,9 +241,9 @@
198 name: '', 241 name: '',
199 url: '', 242 url: '',
200 path: '', 243 path: '',
201 - parentId: '', 244 + parentId: 0,
202 ismenu: '', 245 ismenu: '',
203 - permissionOrder:'' 246 + permissionOrder:'0'
204 247
205 } 248 }
206 249
@@ -283,14 +326,14 @@ @@ -283,14 +326,14 @@
283 handleAdd: function () { 326 handleAdd: function () {
284 this.addFormVisible = true; 327 this.addFormVisible = true;
285 this.addForm = { 328 this.addForm = {
286 - username: '',  
287 - password: '',  
288 - sex: 1,  
289 - address: '',  
290 - realname: '',  
291 - email: '',  
292 - mobilephone: '',  
293 - age: 1 329 + description: '',
  330 + name: '',
  331 + url: '',
  332 + path: '',
  333 + parentId: 0,
  334 + ismenu: '',
  335 + permissionOrder:'0'
  336 +
294 }; 337 };
295 }, 338 },
296 //编辑 339 //编辑
@@ -366,6 +409,17 @@ @@ -366,6 +409,17 @@
366 }).catch(() => { 409 }).catch(() => {
367 410
368 }); 411 });
  412 + },
  413 + clickDeal: function (currentObj, treeStatus) {
  414 + this.addForm.parentId = currentObj.permissionId;
  415 + this.$refs.tree.setCheckedKeys([currentObj.permissionId]);
  416 + // this.drawer = false;
  417 + },
  418 + treeMerge: function (expand) {
  419 + this.treeExpand = expand;
  420 + for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
  421 + this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand;
  422 + }
369 } 423 }
370 }, 424 },
371 mounted() { 425 mounted() {
@@ -375,6 +429,9 @@ @@ -375,6 +429,9 @@
375 429
376 </script> 430 </script>
377 431
378 -<style scoped> 432 +<style rel="stylesheet/scss" lang="scss">
  433 + .el-drawer.rtl {
  434 + overflow: scroll
  435 + }
379 436
380 </style> 437 </style>