朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 f56ae9ab939c0e6a526b23afa112ef4046864cf3 1 个父辈 f963f72b

组织机构新增配置数据权限＋数据权限界面优化

内嵌 并排对比
正在显示 2 个修改的文件 包含 162 行增加 和 67 行删除
@@ -8,47 +8,52 @@ @@ -8,47 +8,52 @@
8 </el-form> 8 </el-form>
9 </el-col> 9 </el-col>
10 </el-row> 10 </el-row>
11 - <el-table :data="tableList" style="width: 100%"> 11 + <el-table :data="tableList"
  12 + tooltip-effect="dark"
  13 + style="border-radius: 10px 10px 0px 0px;line-height: 25px"
  14 + height="600px"
  15 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
  16 + border>
12 <el-table-column type="expand"> 17 <el-table-column type="expand">
13 <template slot-scope="scope"> 18 <template slot-scope="scope">
14 - <el-form label-position="left" class="demo-table-expand" :inline="true">  
15 - <el-form-item label="创建时间"> 19 + <el-form label-position="left" label-width="80px" class="demo-table-expand" :inline="true">
  20 + <el-form-item label="创建时间" style="margin-left: 20px">
16 <span>{{ scope.row.create_time }}</span> 21 <span>{{ scope.row.create_time }}</span>
17 </el-form-item> 22 </el-form-item>
18 - <el-form-item label="更新时间"> 23 + <el-form-item label="更新时间" style="margin-left: -250px">
19 <span>{{ scope.row.update_time }}</span> 24 <span>{{ scope.row.update_time }}</span>
20 </el-form-item> 25 </el-form-item>
21 - <el-form-item label="创建人"> 26 + <el-form-item label="创建人" style="margin-left: 20px">
22 <span>{{ scope.row.create_user }}</span> 27 <span>{{ scope.row.create_user }}</span>
23 </el-form-item> 28 </el-form-item>
24 - <el-form-item label="接口描述"> 29 + <el-form-item label="接口描述" style="margin-left: -250px">
25 <span>{{ scope.row.perm_des }}</span> 30 <span>{{ scope.row.perm_des }}</span>
26 </el-form-item> 31 </el-form-item>
27 - <el-form-item label="路由ID"> 32 + <el-form-item label="路由ID" style="margin-left: 20px">
28 <span>{{ scope.row.permission_id }}</span> 33 <span>{{ scope.row.permission_id }}</span>
29 </el-form-item> 34 </el-form-item>
30 - <el-form-item label="路由地址"> 35 + <el-form-item label="路由地址" style="margin-left: -250px">
31 <span>{{ scope.row.path }}</span> 36 <span>{{ scope.row.path }}</span>
32 </el-form-item> 37 </el-form-item>
33 - <el-form-item label="路由名称"> 38 + <el-form-item label="路由名称" style="margin-left: 20px">
34 <span>{{ scope.row.interface_name }}</span> 39 <span>{{ scope.row.interface_name }}</span>
35 </el-form-item> 40 </el-form-item>
36 - <el-form-item label="服务名称"> 41 + <el-form-item label="服务名称" style="margin-left: -250px">
37 <span>{{ scope.row.service_name }}</span> 42 <span>{{ scope.row.service_name }}</span>
38 </el-form-item> 43 </el-form-item>
39 - <el-form-item label="列条件"> 44 + <el-form-item label="列条件" style="margin-left: 20px">
40 <span>{{ scope.row.cols_list }}</span> 45 <span>{{ scope.row.cols_list }}</span>
41 </el-form-item> 46 </el-form-item>
42 - <el-form-item label="服务描述"> 47 + <el-form-item label="服务描述" style="margin-left: -250px">
43 <span>{{ scope.row.service_name_des }}</span> 48 <span>{{ scope.row.service_name_des }}</span>
44 </el-form-item> 49 </el-form-item>
45 </el-form> 50 </el-form>
46 </template> 51 </template>
47 </el-table-column> 52 </el-table-column>
48 <!-- 表格列配置 --> 53 <!-- 表格列配置 -->
49 - <el-table-column prop="data_perm_id" label="ID"></el-table-column>  
50 - <el-table-column prop="perm_name" label="名称"></el-table-column>  
51 - <el-table-column prop="perm_sort" label="排序"></el-table-column> 54 + <el-table-column prop="data_perm_id" label="ID" fixed="left"></el-table-column>
  55 + <el-table-column prop="perm_name" label="名称" width="200px"></el-table-column>
  56 + <el-table-column prop="perm_sort" label="排序" width="50px"></el-table-column>
52 <el-table-column prop="row_condition" label="行条件"></el-table-column> 57 <el-table-column prop="row_condition" label="行条件"></el-table-column>
53 <el-table-column prop="row_condition_property" label="属性名"></el-table-column> 58 <el-table-column prop="row_condition_property" label="属性名"></el-table-column>
54 <el-table-column prop="cols_list" label="列条件" show-overflow-tooltip></el-table-column> 59 <el-table-column prop="cols_list" label="列条件" show-overflow-tooltip></el-table-column>
@@ -60,7 +65,7 @@ @@ -60,7 +65,7 @@
60 <el-tag type="danger" v-else>禁用</el-tag> 65 <el-tag type="danger" v-else>禁用</el-tag>
61 </template> 66 </template>
62 </el-table-column> 67 </el-table-column>
63 - <el-table-column label="操作" width="200"> 68 + <el-table-column label="操作" width="150" fixed="right">
64 <template slot-scope="scope"> 69 <template slot-scope="scope">
65 <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button> 70 <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
66 <el-button size="mini" type="danger" @click="handleDelete(scope.row.data_perm_id)">删除</el-button> 71 <el-button size="mini" type="danger" @click="handleDelete(scope.row.data_perm_id)">删除</el-button>
@@ -153,33 +153,64 @@ @@ -153,33 +153,64 @@
153 </div> 153 </div>
154 </el-dialog> 154 </el-dialog>
155 155
  156 +
  157 +
156 <!--权限设置界面--> 158 <!--权限设置界面-->
157 <el-dialog title="岗位的权限设置" 159 <el-dialog title="岗位的权限设置"
158 :visible.sync="PermFormVisible" 160 :visible.sync="PermFormVisible"
159 :close-on-click-modal="false" 161 :close-on-click-modal="false"
160 top="5vh" width="75%" 162 top="5vh" width="75%"
161 > 163 >
162 - <el-row>  
163 - <el-col :span="4" >  
164 - <el-button type="primary" @click.native="treeMerge(false)">合并节点</el-button>  
165 - </el-col>  
166 - <el-col :span="4">  
167 - <el-button type="success" @click.native="treeMerge(true)">展开节点</el-button>  
168 - </el-col>  
169 - </el-row>  
170 - <el-divider></el-divider>  
171 - <el-form :model="permForm" style="width: 95%" ref="permForm">  
172 - <el-tree :data="permissons" :props="treeDefaultProps"  
173 - @check="clickDeal"  
174 - :default-expand-all = "treeExpand"  
175 - show-checkbox highlight-current  
176 - node-key="permissionId" ref="tree">  
177 - </el-tree>  
178 - </el-form>  
179 - <div slot="footer" class="dialog-footer">  
180 - <el-button @click.native="PermFormVisible = false">取消</el-button>  
181 - <el-button type="primary" @click.native="setPermSubmit" :loading="addLoading">提交</el-button>  
182 - </div> 164 + <template>
  165 + <el-tabs style="border: 0px;background-color: rgba(0,0,0,0)" v-model="activeName" @tab-click="handleClick">
  166 + <el-tab-pane style="border: 0px;background-color: rgba(0,0,0,0)" label="权限管理" name="first">
  167 + <el-row>
  168 + <el-col :span="4" >
  169 + <el-button type="primary" @click.native="treeMerge(false)">合并节点</el-button>
  170 + </el-col>
  171 + <el-col :span="4">
  172 + <el-button type="success" @click.native="treeMerge(true)">展开节点</el-button>
  173 + </el-col>
  174 + </el-row>
  175 + <el-divider></el-divider>
  176 + <el-form :model="permForm" style="width: 95%" ref="permForm">
  177 + <el-tree :data="permissons" :props="treeDefaultProps"
  178 + @check="clickDeal"
  179 + :default-expand-all = "treeExpand"
  180 + show-checkbox highlight-current
  181 + node-key="permissionId" ref="tree">
  182 + </el-tree>
  183 + </el-form>
  184 + <div align="center" class="dialog-footer" style="margin-bottom: 20px">
  185 + <el-button @click.native="PermFormVisible = false">取消</el-button>
  186 + <el-button type="primary" @click.native="setPermSubmit" :loading="addLoading">提交</el-button>
  187 + </div>
  188 + </el-tab-pane>
  189 + <el-tab-pane label="数据权限" name="second">
  190 +<!-- <el-row>-->
  191 +<!-- <el-col :span="4" >-->
  192 +<!-- <el-button type="primary" @click.native="treeMerges(false)">合并节点</el-button>-->
  193 +<!-- </el-col>-->
  194 +<!-- <el-col :span="4">-->
  195 +<!-- <el-button type="success" @click.native="treeMerges(true)">展开节点</el-button>-->
  196 +<!-- </el-col>-->
  197 +<!-- </el-row>-->
  198 + <el-divider></el-divider>
  199 + <el-form :model="permForms" style="width: 95%" ref="permForm">
  200 + <el-tree :data="departmentNameList" :props="treeDefaultPropss"
  201 + @check="clickDeal"
  202 + :default-expand-all = "treeExpands"
  203 + show-checkbox highlight-current
  204 + node-key="dataPermId" ref="trees">
  205 + </el-tree>
  206 + </el-form>
  207 + <div align="center" class="dialog-footer" style="margin-bottom: 20px">
  208 + <el-button @click.native="PermFormVisible = false">取消</el-button>
  209 + <el-button type="primary" :loading="addLoading">提交</el-button>
  210 + </div>
  211 + </el-tab-pane>
  212 + </el-tabs>
  213 + </template>
183 </el-dialog> 214 </el-dialog>
184 </section> 215 </section>
185 </template> 216 </template>
@@ -188,13 +219,16 @@ @@ -188,13 +219,16 @@
188 import util from '../../common/js/util' 219 import util from '../../common/js/util'
189 import NProgress from 'nprogress' 220 import NProgress from 'nprogress'
190 import { getList, remove, batchRemove, edit, add, updateRolePerm } from '../../api/role_api'; 221 import { getList, remove, batchRemove, edit, add, updateRolePerm } from '../../api/role_api';
191 - import { getList as getDepartmentList} from '../../api/department'; 222 + import { getList as getDepartmentList } from '@/api/user/data_perm_api.js'
  223 +
  224 + // import { getList as getDepartmentList} from '../../api/department';
192 import { getList as permList } from '../../api/perm_api'; 225 import { getList as permList } from '../../api/perm_api';
193 import moment from 'moment' 226 import moment from 'moment'
194 export default { 227 export default {
195 name:'Role', 228 name:'Role',
196 data() { 229 data() {
197 return { 230 return {
  231 + activeName: 'first',
198 filters: { 232 filters: {
199 roleName: '' 233 roleName: ''
200 }, 234 },
@@ -224,11 +258,17 @@ @@ -224,11 +258,17 @@
224 children: 'children', 258 children: 'children',
225 label: 'name', 259 label: 'name',
226 }, 260 },
  261 + treeDefaultPropss: {
  262 + children: 'children',
  263 + label: 'perm_des',
  264 + },
227 treeExpand: true, 265 treeExpand: true,
228 - departmentNameList:[], 266 + treeExpands: true,
229 roles: [], 267 roles: [],
230 permissons: [], 268 permissons: [],
  269 + departmentNameList:[],
231 permIds: [], 270 permIds: [],
  271 + permIdss: [],
232 total: 0, 272 total: 0,
233 pageNum: 1, 273 pageNum: 1,
234 pageSize: 5, 274 pageSize: 5,
@@ -272,7 +312,14 @@ @@ -272,7 +312,14 @@
272 roleName: '', 312 roleName: '',
273 roleSign: 1, 313 roleSign: 1,
274 permissions: [] 314 permissions: []
275 - } 315 + },
  316 + permForms: {
  317 + roleId: 1,
  318 + description: '',
  319 + roleName: '',
  320 + roleSign: 1,
  321 + departmentNameList: []
  322 + },
276 323
277 } 324 }
278 }, 325 },
@@ -310,6 +357,12 @@ @@ -310,6 +357,12 @@
310 this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand; 357 this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand;
311 } 358 }
312 }, 359 },
  360 + treeMerges: function (expand) {
  361 + this.treeExpands = expand;
  362 + for(var i=0;i<this.$refs.trees.store._getAllNodes().length;i++){
  363 + this.$refs.trees.store._getAllNodes()[i].expanded=this.treeExpands;
  364 + }
  365 + },
313 handleCurrentChange(val) { 366 handleCurrentChange(val) {
314 this.pageNum = val; 367 this.pageNum = val;
315 this.getRoles(); 368 this.getRoles();
@@ -342,31 +395,46 @@ @@ -342,31 +395,46 @@
342 395
343 }, 396 },
344 397
345 - //获取部门列表  
346 - getdepartmentNames() {  
347 -  
348 - this.listLoading = true;  
349 - //NProgress.start();  
350 - getDepartmentList().then((res) => {  
351 - this.total = res.data.total;  
352 - this.departmentNameList = res.data.list;  
353 - this.listLoading = false;  
354 - //NProgress.done();  
355 - }).catch((error) => {  
356 -  
357 - this.listLoading = false;  
358 - if(null!= error.response && error.response!==undefined){  
359 - let status= error.response.status;  
360 - let msg = error.response.statusText;  
361 - alert(status+msg);  
362 - }else {  
363 - alert(error);  
364 - }  
365 -  
366 - });  
367 -  
368 - },  
369 - 398 + //获取数据权限列表
  399 + // getdepartmentNames() {
  400 + //
  401 + // this.listLoading = true;
  402 + // //NProgress.start();
  403 + // getDepartmentList().then((res) => {
  404 + // // this.total = res.data.total;
  405 + // this.departmentNameList = res.data.list;
  406 + // console.log(this.departmentNameList);
  407 + //
  408 + // this.listLoading = false;
  409 + // //NProgress.done();
  410 + // }).catch((error) => {
  411 + //
  412 + // this.listLoading = false;
  413 + // if(null!= error.response && error.response!==undefined){
  414 + // let status= error.response.status;
  415 + // let msg = error.response.statusText;
  416 + // alert(status+msg);
  417 + // }else {
  418 + // alert(error);
  419 + // }
  420 + //
  421 + // });
  422 + //
  423 + // },
  424 + getDataList() {
  425 + let para = {
  426 + pageNum: 1,
  427 + pageSize: 700
  428 + };
  429 + getDepartmentList(para).then(res => {
  430 + this.$message.success('获取列表成功')
  431 + this.departmentNameList = res.list
  432 + console.log(this.departmentNameList);
  433 + // this.total = res.total
  434 + }).catch(error => {
  435 + this.$message.error(error)
  436 + })
  437 + },
370 //获取权限列表 438 //获取权限列表
371 getPermList() { 439 getPermList() {
372 let para = { 440 let para = {
@@ -426,6 +494,7 @@ @@ -426,6 +494,7 @@
426 this.addForm = Object.assign({}, row); 494 this.addForm = Object.assign({}, row);
427 // this.getdepartmentNames(); 495 // this.getdepartmentNames();
428 }, 496 },
  497 + // 配置权限管理
429 setPerm: function (index, row) { 498 setPerm: function (index, row) {
430 this.PermFormVisible = true; 499 this.PermFormVisible = true;
431 this.getPermList(); 500 this.getPermList();
@@ -440,13 +509,32 @@ @@ -440,13 +509,32 @@
440 } 509 }
441 }); 510 });
442 } 511 }
443 -  
444 this.$nextTick(() => { 512 this.$nextTick(() => {
445 -  
446 //反向适配 513 //反向适配
447 this.$refs.tree.setCheckedKeys(this.permIds); 514 this.$refs.tree.setCheckedKeys(this.permIds);
448 }); 515 });
449 }, 516 },
  517 + // 配置数据权限
  518 + handleClick(tab, row) {
  519 + if (tab.name === 'second'){
  520 + this.getDataList();
  521 + var _this = this;
  522 + this.permIdss = [];
  523 + this.permForms = Object.assign({}, row);
  524 + let rolePermss = this.permForms.departmentNameList;
  525 + if (util.checkNull(rolePermss)){
  526 + rolePermss.forEach(function (perm,v_index,v_arr) {
  527 + if(util.checkNull(perm)){
  528 + _this.permIdss[v_index] = perm.dataPermId;
  529 + }
  530 + });
  531 + }
  532 + this.$nextTick(() => {
  533 + //反向适配
  534 + this.$refs.trees.setCheckedKeys(this.permIdss);
  535 + });
  536 + }
  537 + },
450 //显示新增界面，每次点开初始化数据 538 //显示新增界面，每次点开初始化数据
451 handleAdd: function (index,row) { 539 handleAdd: function (index,row) {
452 this.addFormVisible = true; 540 this.addFormVisible = true;
@@ -675,6 +763,8 @@ @@ -675,6 +763,8 @@
675 } 763 }
676 }; 764 };
677 this.isExpansion=true; 765 this.isExpansion=true;
  766 + // this.getdepartmentNames();
  767 +
678 } 768 }
679 } 769 }
680 770