朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 f963f72bf4955d0c5c3bed080c80159a6ff9382f 1 个父辈 d59eb5fc

权限配置样式优化

内嵌 并排对比
正在显示 2 个修改的文件 包含 46 行增加 和 9 行删除
@@ -157,7 +157,7 @@ @@ -157,7 +157,7 @@
157 <el-dialog title="岗位的权限设置" 157 <el-dialog title="岗位的权限设置"
158 :visible.sync="PermFormVisible" 158 :visible.sync="PermFormVisible"
159 :close-on-click-modal="false" 159 :close-on-click-modal="false"
160 - top="5vh" 160 + top="5vh" width="75%"
161 > 161 >
162 <el-row> 162 <el-row>
163 <el-col :span="4" > 163 <el-col :span="4" >
@@ -168,11 +168,11 @@ @@ -168,11 +168,11 @@
168 </el-col> 168 </el-col>
169 </el-row> 169 </el-row>
170 <el-divider></el-divider> 170 <el-divider></el-divider>
171 - <el-form :model="permForm" label-width="80px" ref="permForm"> 171 + <el-form :model="permForm" style="width: 95%" ref="permForm">
172 <el-tree :data="permissons" :props="treeDefaultProps" 172 <el-tree :data="permissons" :props="treeDefaultProps"
173 @check="clickDeal" 173 @check="clickDeal"
174 :default-expand-all = "treeExpand" 174 :default-expand-all = "treeExpand"
175 - show-checkbox highlight-current check-on-click-node check-strictly 175 + show-checkbox highlight-current
176 node-key="permissionId" ref="tree"> 176 node-key="permissionId" ref="tree">
177 </el-tree> 177 </el-tree>
178 </el-form> 178 </el-form>
@@ -224,7 +224,7 @@ @@ -224,7 +224,7 @@
224 children: 'children', 224 children: 'children',
225 label: 'name', 225 label: 'name',
226 }, 226 },
227 - treeExpand: false, 227 + treeExpand: true,
228 departmentNameList:[], 228 departmentNameList:[],
229 roles: [], 229 roles: [],
230 permissons: [], 230 permissons: [],
@@ -376,6 +376,7 @@ @@ -376,6 +376,7 @@
376 NProgress.start(); 376 NProgress.start();
377 permList(para).then((res) => { 377 permList(para).then((res) => {
378 this.permissons = res.data.list; 378 this.permissons = res.data.list;
  379 + console.log(this.permissons);
379 NProgress.done(); 380 NProgress.done();
380 }).catch((error) => { 381 }).catch((error) => {
381 if(null!= error.response && error.response!==undefined){ 382 if(null!= error.response && error.response!==undefined){
@@ -623,7 +624,6 @@ @@ -623,7 +624,6 @@
623 return; 624 return;
624 } 625 }
625 }, 626 },
626 -  
627 // 统一处理子节点为相同的勾选状态 627 // 统一处理子节点为相同的勾选状态
628 uniteChildSame(treeList, isSelected){ 628 uniteChildSame(treeList, isSelected){
629 this.$refs.tree.setChecked(treeList.permissionId, isSelected); 629 this.$refs.tree.setChecked(treeList.permissionId, isSelected);
@@ -684,7 +684,44 @@ @@ -684,7 +684,44 @@
684 684
685 </style> 685 </style>
686 686
  687 +
687 <style lang="scss"> 688 <style lang="scss">
  689 + /*//一级节点选择器*!*!*/
  690 + .el-tree-node>.el-tree-node__content {
  691 + font-weight: 900;
  692 + color: #000000;
  693 + }
  694 + /*//二级节点选择器*!*!*/
  695 + .el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__content>.el-tree-node__label {
  696 + font-size: 14px;
  697 + color: #000000;
  698 + font-weight: 500;
  699 + width: 800px;
  700 + }
  701 + .el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__content>.el-tree-node__label {
  702 + font-size: 13px;
  703 + color: #777777;
  704 + width: 100px;
  705 + /*flex-direction: column;*/
  706 + }
  707 + .el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__content>.el-tree-node__label {
  708 + font-size: 14px;
  709 + color: #777777;
  710 + width: 300px;
  711 + /*flex-direction: column;*/
  712 + }
  713 + /* 控制树形节点横向显示 */
  714 + .el-tree-node.is-expanded>.el-tree-node__children{
  715 + display:flex;
  716 + flex-wrap: wrap; /* flex横向布局换行显示 */
  717 + }
  718 +
  719 + /* 去除点击收缩图标时：横向显示的数据会先晃动成纵向显示的再收缩的现象*/
  720 + .collapse-transition{
  721 + transition:none !important;
  722 + }
  723 +
  724 +
688 .grid-content { 725 .grid-content {
689 height: 36px; 726 height: 36px;
690 line-height: 36px; 727 line-height: 36px;
@@ -4,12 +4,12 @@ @@ -4,12 +4,12 @@
4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;"> 4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
5 <el-form :inline="true" :model="filters"> 5 <el-form :inline="true" :model="filters">
6 <el-form-item> 6 <el-form-item>
7 - <el-input v-model="filters.realName" placeholder="真实姓名"> 7 + <el-input v-model="filters.realName" placeholder="真实姓名" style="width: 200px">
8 <template slot="prepend">姓名</template> 8 <template slot="prepend">姓名</template>
9 </el-input> 9 </el-input>
10 </el-form-item> 10 </el-form-item>
11 <el-form-item> 11 <el-form-item>
12 - <el-input v-model="filters.userName" placeholder="登录账号"> 12 + <el-input v-model="filters.userName" placeholder="登录账号" style="width: 200px">
13 <template slot="prepend">账号</template> 13 <template slot="prepend">账号</template>
14 </el-input> 14 </el-input>
15 </el-form-item> 15 </el-form-item>
@@ -17,7 +17,7 @@ @@ -17,7 +17,7 @@
17 <div class="my-text-area"> 17 <div class="my-text-area">
18 <div class="el-input-group__prepend prepand">状态</div> 18 <div class="el-input-group__prepend prepand">状态</div>
19 <el-select v-model="filters.userStatus" 19 <el-select v-model="filters.userStatus"
20 - clearable placeholder="请选择" style="width: 225px"> 20 + clearable placeholder="请选择" style="width: 125px">
21 <el-option 21 <el-option
22 v-for="item in userStatusOption" 22 v-for="item in userStatusOption"
23 :key="item.code" 23 :key="item.code"
@@ -223,7 +223,7 @@ @@ -223,7 +223,7 @@
223 </el-dialog> 223 </el-dialog>
224 224
225 <!--权限设置--> 225 <!--权限设置-->
226 - <el-dialog title="权限设置" :visible.sync="roleFormVisible" :close-on-click-modal="false" class="roleDialog"> 226 + <el-dialog title="权限设置" :visible.sync="roleFormVisible" :close-on-click-modal="false" class="roleDialog" width="65%">
227 <el-form :model="roleEditForm" label-width="80px" ref="roleEditForm" > 227 <el-form :model="roleEditForm" label-width="80px" ref="roleEditForm" >
228 <el-form-item label="ID"> 228 <el-form-item label="ID">
229 <span>{{roleEditForm.userId}}</span> 229 <span>{{roleEditForm.userId}}</span>