1 <template>
2 <div class="comPower">
3 <div class="card_header" v-show="!rolePowerVisi">
4 <Row>
5 <Col span="19" offset="1">
6 <div class="title_left">
7 {{powerList.powerType}}
8 </div>
9 </Col>
10 <Col span="4">
11 <div class="title_right">
12 <span class="iconfont icon-tianjia"></span>
13 添加自定义角色
14 </div>
15 </Col>
16 </Row>
17 </div>
18 <div class="card_content" v-show="!rolePowerVisi">
19 <div class="list_item" v-for="(item) in powerList.roleList" :key="item.id" @click="handleLook(item)">
20 <p>{{item.roleName}}</p>
21 <p v-show="item.defaultRole">
22 企业默认角色
23 </p>
24 </div>
25 </div>
26 <!-- 角色详细权限 -->
27 <div v-show="rolePowerVisi" class="powerDetail">
28 <div class="card_header">
29 <Row>
30 <Col span="19" offset="1">
31 <div class="title_left">
32 <span class="title_back" @click="rolePowerVisi = false">{{powerList.powerType}}</span>
33 <span> > </span>
34 <span>{{rolePowerDetail.roleName}}</span>
35 </div>
36 </Col>
37 <Col span="4"></Col>
38 </Row>
39 </div>
40 <div class="power_detail">
41 <ul>
42 <li v-for="(item,index) in roleMenu"
43 :key="item.id"
44 @click="handleSwitch(index)"
45 :class="indexA == index ? 'active':''"
46 v-show="item.show"
47 >
48 {{item.name}}
49 </li>
50 </ul>
51 <div class="roleCheckGroup" v-show="indexA == 1">
52 <Row class="list_item" v-for="(item,index) in rolePowerDetail.rolePower" :key="item.rolePowerTypeId">
53 <Col span="4">
54 <Checkbox
55 :indeterminate="item.rolePowerNow.length !== item.rolePowerList.length"
56 :value="item.rolePowerNow.length == item.rolePowerList.length"
57 class="check_item"
58 @click.prevent.native="handleCheckAll(item)">
59 {{item.rolePowerType}}
60 </Checkbox>
61 </Col>
62 <Col span="20">
63 <CheckboxGroup v-model="item.rolePowerNow" @on-change="checkAllGroupChange(item,index)">
64 <Checkbox
65 class="check_item"
66 v-for="(data) in item.rolePowerList"
67 :label="data.fieldId"
68 :key="data.fieldId"
69 >
70 <span>{{data.name}}</span>
71 </Checkbox>
72 </CheckboxGroup>
73 </Col>
74 </Row>
75 </div>
76 <div class="roleCheckGroup" v-show="indexA == 0">
77 当为自定义角色时,显示基本信息,待完善!
78 </div>
79 </div>
80 </div>
81 </div>
82 </template>
83 <script>
84 export default {
85 name: "ComPower",
86 data(){
87 return {
88 powerList:{
89 powerType: "企业权限",
90 id: "comPower",
91 roleList: [
92 {
93 roleName: "拥有者",
94 id: "comOwners",
95 defaultRole: false, // boolean
96 selfDefinedRole: "sys", // 'sys' or 'self'
97 rolePower: [
98 {
99 rolePowerType: "项目分组管理",
100 rolePowerTypeId: "groupManage",
101 rolePowerNow:[
102 "group_build",
103 "group_del",
104 "group_edit",
105 "group_levelAdjust",
106 "group_memberManage",
107 "group_seeAll",
108 ],
109 rolePowerList: [
110 {
111 name: "创建项目分组",
112 fieldId: "group_build",
113 },
114 {
115 name: "删除项目分组",
116 fieldId: "group_del",
117 },
118 {
119 name: "编辑项目分组",
120 fieldId: "group_edit",
121 },
122 {
123 name: "项目分组层级调整",
124 fieldId: "group_levelAdjust",
125 },
126 {
127 name: "分组成员管理",
128 fieldId: "group_memberManage",
129 },
130 {
131 name: "查看企业所有项目分组",
132 fieldId: "group_seeAll",
133 },
134
135 ]
136 },
137 {
138 rolePowerType: "项目管理",
139 rolePowerTypeId: "projManage",
140 rolePowerNow:[
141 "proj_build",
142 "proj_seeAll",
143 "proj_selfAdd",
144 "proj_lockField",
145 "proj_buildTemp",
146 "proj_manageTemp",
147 "proj_moveIn",
148 "proj_moveOut",
149 ],
150 rolePowerList: [
151 {
152 name: "创建项目",
153 fieldId: "proj_build",
154 },
155 {
156 name: "查看企业所有项目",
157 fieldId: "proj_seeAll",
158 },
159 {
160 name: "全企业内主动加入项目",
161 fieldId: "proj_selfAdd",
162 },
163 {
164 name: "解锁/锁定项目信息字段",
165 fieldId: "proj_lockField",
166 },
167 {
168 name: "创建企业项目模板",
169 fieldId: "proj_buildTemp",
170 },
171 {
172 name: "管理企业模板",
173 fieldId: "proj_manageTemp",
174 },
175 {
176 name: "迁入项目",
177 fieldId: "proj_moveIn",
178 },
179 {
180 name: "迁出项目",
181 fieldId: "proj_moveOut",
182 }
183 ]
184 },
185 {
186 rolePowerType: "成员管理",
187 rolePowerTypeId: "memManage",
188 rolePowerNow: [
189 "mem_add",
190 "mem_addExter",
191 "mem_del",
192 "mem_useBoolean",
193 "mem_editRole",
194 "mem_editInfo",
195 "mem_editDepart",
196 "mem_createGroup",
197 "mem_addGroupMem",
198 ],
199 rolePowerList: [
200 {
201 name: "添加企业成员",
202 fieldId: "mem_add",
203 },
204 {
205 name: "添加企业外部成员",
206 fieldId: "mem_addExter",
207 },
208 {
209 name: "移除企业成员",
210 fieldId: "mem_del",
211 },
212 {
213 name: "启用/停用企业成员",
214 fieldId: "mem_useBoolean",
215 },
216 {
217 name: "修改企业成员的角色",
218 fieldId: "mem_editRole",
219 },
220 {
221 name: "修改企业成员信息",
222 fieldId: "mem_editInfo",
223 },
224 {
225 name: "编辑部门",
226 fieldId: "mem_editDepart",
227 },
228 {
229 name: "创建群组",
230 fieldId: "mem_createGroup",
231 },
232 {
233 name: "添加群组成员",
234 fieldId: "mem_addGroupMem",
235 },
236 ]
237 },
238 {
239 rolePowerType: "权限设置",
240 rolePowerTypeId: "powerSet",
241 rolePowerNow: [
242 "power_build",
243 "power_edit",
244 "power_del",
245 "power_switchDef",
246 ],
247 rolePowerList: [
248 {
249 name: "创建自定义角色",
250 fieldId: "power_build",
251 },
252 {
253 name: "修改自定义角色",
254 fieldId: "power_edit",
255 },
256 {
257 name: "删除自定义角色",
258 fieldId: "power_del",
259 },
260 {
261 name: "选择企业成员的默认角色",
262 fieldId: "power_switchDef",
263 }
264 ]
265 },
266 {
267 rolePowerType: "企业操作",
268 rolePowerTypeId: "comOperate",
269 rolePowerNow: [
270 "com_editInfo",
271 "com_addSelfField",
272 "com_addTaskType",
273 "com_lockeSelfField",
274 "com_updateSelfField",
275 ],
276 rolePowerList: [
277 {
278 name: "修改企业基础信息",
279 fieldId: "com_editInfo",
280 },
281 {
282 name: "新增/管理自定义字段",
283 fieldId: "com_addSelfField",
284 },
285 {
286 name: "新增/管理任务类型",
287 fieldId: "com_addTaskType",
288 },
289 {
290 name: "锁定/取消锁定自定义字段",
291 fieldId: "com_lockeSelfField",
292 },
293 {
294 name: "强制更新自定义字段",
295 fieldId: "com_updateSelfField",
296 }
297 ]
298 }
299 ]
300 },
301 {
302 roleName: "管理员",
303 id: "Administrators",
304 defaultRole: false, // boolean
305 selfDefinedRole: "sys", // 'sys' or 'self'
306 rolePower: [
307 {
308 rolePowerType: "项目分组管理",
309 rolePowerTypeId: "groupManage",
310 rolePowerNow:[
311 "group_build",
312 "group_edit",
313 "group_memberManage",
314
315 ],
316 rolePowerList: [
317 {
318 name: "创建项目分组",
319 fieldId: "group_build",
320 },
321 {
322 name: "删除项目分组",
323 fieldId: "group_del",
324 },
325 {
326 name: "编辑项目分组",
327 fieldId: "group_edit",
328 },
329 {
330 name: "项目分组层级调整",
331 fieldId: "group_levelAdjust",
332 },
333 {
334 name: "分组成员管理",
335 fieldId: "group_memberManage",
336 },
337 {
338 name: "查看企业所有项目分组",
339 fieldId: "group_seeAll",
340 },
341
342 ]
343 },
344 {
345 rolePowerType: "项目管理",
346 rolePowerTypeId: "projManage",
347 rolePowerNow:["proj_build","proj_seeAll","proj_lockField","proj_moveIn"],
348 rolePowerList: [
349 {
350 name: "创建项目",
351 fieldId: "proj_build",
352 },
353 {
354 name: "查看企业所有项目",
355 fieldId: "proj_seeAll",
356 },
357 {
358 name: "全企业内主动加入项目",
359 fieldId: "proj_selfAdd",
360 },
361 {
362 name: "解锁/锁定项目信息字段",
363 fieldId: "proj_lockField",
364 },
365 {
366 name: "创建企业项目模板",
367 fieldId: "proj_buildTemp",
368 },
369 {
370 name: "管理企业模板",
371 fieldId: "proj_manageTemp",
372 },
373 {
374 name: "迁入项目",
375 fieldId: "proj_moveIn",
376 },
377 {
378 name: "迁出项目",
379 fieldId: "proj_moveOut",
380 }
381 ]
382 },
383 {
384 rolePowerType: "成员管理",
385 rolePowerTypeId: "memManage",
386 rolePowerNow: ["mem_addExter","mem_editRole"],
387 rolePowerList: [
388 {
389 name: "添加企业成员",
390 fieldId: "mem_add",
391 },
392 {
393 name: "添加企业外部成员",
394 fieldId: "mem_addExter",
395 },
396 {
397 name: "移除企业成员",
398 fieldId: "mem_del",
399 },
400 {
401 name: "启用/停用企业成员",
402 fieldId: "mem_useBoolean",
403 },
404 {
405 name: "修改企业成员的角色",
406 fieldId: "mem_editRole",
407 },
408 {
409 name: "修改企业成员信息",
410 fieldId: "mem_editInfo",
411 },
412 {
413 name: "编辑部门",
414 fieldId: "mem_editDepart",
415 },
416 {
417 name: "创建群组",
418 fieldId: "mem_createGroup",
419 },
420 {
421 name: "添加群组成员",
422 fieldId: "mem_addGroupMem",
423 },
424 ]
425 },
426 {
427 rolePowerType: "权限设置",
428 rolePowerTypeId: "powerSet",
429 rolePowerNow: ["power_build","power_switchDef"],
430 rolePowerList: [
431 {
432 name: "创建自定义角色",
433 fieldId: "power_build",
434 },
435 {
436 name: "修改自定义角色",
437 fieldId: "power_edit",
438 },
439 {
440 name: "删除自定义角色",
441 fieldId: "power_del",
442 },
443 {
444 name: "选择企业成员的默认角色",
445 fieldId: "power_switchDef",
446 }
447 ]
448 },
449 {
450 rolePowerType: "企业操作",
451 rolePowerTypeId: "comOperate",
452 rolePowerNow: ["com_editInfo","com_addTaskType","com_updateSelfField"],
453 rolePowerList: [
454 {
455 name: "修改企业基础信息",
456 fieldId: "com_editInfo",
457 },
458 {
459 name: "新增/管理自定义字段",
460 fieldId: "com_addSelfField",
461 },
462 {
463 name: "新增/管理任务类型",
464 fieldId: "com_addTaskType",
465 },
466 {
467 name: "锁定/取消锁定自定义字段",
468 fieldId: "com_lockeSelfField",
469 },
470 {
471 name: "强制更新自定义字段",
472 fieldId: "com_updateSelfField",
473 }
474 ]
475 }
476 ]
477 },
478 {
479 roleName: "成员",
480 id: "members",
481 defaultRole: true, // boolean
482 selfDefinedRole: "sys", // 'sys' or 'self'
483 rolePower: [
484 {
485 rolePowerType: "项目分组管理",
486 rolePowerTypeId: "groupManage",
487 rolePowerNow:["group_build","group_del", "group_edit","group_memberManage"],
488 rolePowerList: [
489 {
490 name: "创建项目分组",
491 fieldId: "group_build",
492 },
493 {
494 name: "删除项目分组",
495 fieldId: "group_del",
496 },
497 {
498 name: "编辑项目分组",
499 fieldId: "group_edit",
500 },
501 {
502 name: "项目分组层级调整",
503 fieldId: "group_levelAdjust",
504 },
505 {
506 name: "分组成员管理",
507 fieldId: "group_memberManage",
508 },
509 {
510 name: "查看企业所有项目分组",
511 fieldId: "group_seeAll",
512 },
513
514 ]
515 },
516 {
517 rolePowerType: "项目管理",
518 rolePowerTypeId: "projManage",
519 rolePowerNow:["proj_build","proj_seeAll","proj_selfAdd","proj_lockField","proj_moveIn"],
520 rolePowerList: [
521 {
522 name: "创建项目",
523 fieldId: "proj_build",
524 },
525 {
526 name: "查看企业所有项目",
527 fieldId: "proj_seeAll",
528 },
529 {
530 name: "全企业内主动加入项目",
531 fieldId: "proj_selfAdd",
532 },
533 {
534 name: "解锁/锁定项目信息字段",
535 fieldId: "proj_lockField",
536 },
537 {
538 name: "创建企业项目模板",
539 fieldId: "proj_buildTemp",
540 },
541 {
542 name: "管理企业模板",
543 fieldId: "proj_manageTemp",
544 },
545 {
546 name: "迁入项目",
547 fieldId: "proj_moveIn",
548 },
549 {
550 name: "迁出项目",
551 fieldId: "proj_moveOut",
552 }
553 ]
554 },
555 {
556 rolePowerType: "成员管理",
557 rolePowerTypeId: "memManage",
558 rolePowerNow: ["mem_add","mem_addExter","mem_del","mem_editRole"],
559 rolePowerList: [
560 {
561 name: "添加企业成员",
562 fieldId: "mem_add",
563 },
564 {
565 name: "添加企业外部成员",
566 fieldId: "mem_addExter",
567 },
568 {
569 name: "移除企业成员",
570 fieldId: "mem_del",
571 },
572 {
573 name: "启用/停用企业成员",
574 fieldId: "mem_useBoolean",
575 },
576 {
577 name: "修改企业成员的角色",
578 fieldId: "mem_editRole",
579 },
580 {
581 name: "修改企业成员信息",
582 fieldId: "mem_editInfo",
583 },
584 {
585 name: "编辑部门",
586 fieldId: "mem_editDepart",
587 },
588 {
589 name: "创建群组",
590 fieldId: "mem_createGroup",
591 },
592 {
593 name: "添加群组成员",
594 fieldId: "mem_addGroupMem",
595 },
596 ]
597 },
598 {
599 rolePowerType: "权限设置",
600 rolePowerTypeId: "powerSet",
601 rolePowerNow: ["power_build","power_edit","power_switchDef"],
602 rolePowerList: [
603 {
604 name: "创建自定义角色",
605 fieldId: "power_build",
606 },
607 {
608 name: "修改自定义角色",
609 fieldId: "power_edit",
610 },
611 {
612 name: "删除自定义角色",
613 fieldId: "power_del",
614 },
615 {
616 name: "选择企业成员的默认角色",
617 fieldId: "power_switchDef",
618 }
619 ]
620 },
621 {
622 rolePowerType: "企业操作",
623 rolePowerTypeId: "comOperate",
624 rolePowerNow: ["com_editInfo","com_addSelfField","com_addTaskType","com_updateSelfField"],
625 rolePowerList: [
626 {
627 name: "修改企业基础信息",
628 fieldId: "com_editInfo",
629 },
630 {
631 name: "新增/管理自定义字段",
632 fieldId: "com_addSelfField",
633 },
634 {
635 name: "新增/管理任务类型",
636 fieldId: "com_addTaskType",
637 },
638 {
639 name: "锁定/取消锁定自定义字段",
640 fieldId: "com_lockeSelfField",
641 },
642 {
643 name: "强制更新自定义字段",
644 fieldId: "com_updateSelfField",
645 }
646 ]
647 }
648 ]
649 },
650 {
651 roleName: "外部成员",
652 id: "externalMembers",
653 defaultRole: false, // boolean
654 selfDefinedRole: "self", // 'sys' or 'self'
655 rolePower: [
656 {
657 rolePowerType: "项目分组管理",
658 rolePowerTypeId: "groupManage",
659 rolePowerNow:["group_build"],
660 rolePowerList: [
661 {
662 name: "创建项目分组",
663 fieldId: "group_build",
664 },
665 {
666 name: "删除项目分组",
667 fieldId: "group_del",
668 },
669 {
670 name: "编辑项目分组",
671 fieldId: "group_edit",
672 },
673 {
674 name: "项目分组层级调整",
675 fieldId: "group_levelAdjust",
676 },
677 {
678 name: "分组成员管理",
679 fieldId: "group_memberManage",
680 },
681 {
682 name: "查看企业所有项目分组",
683 fieldId: "group_seeAll",
684 },
685
686 ]
687 },
688 {
689 rolePowerType: "项目管理",
690 rolePowerTypeId: "projManage",
691 rolePowerNow:["proj_build"],
692 rolePowerList: [
693 {
694 name: "创建项目",
695 fieldId: "proj_build",
696 },
697 {
698 name: "查看企业所有项目",
699 fieldId: "proj_seeAll",
700 },
701 {
702 name: "全企业内主动加入项目",
703 fieldId: "proj_selfAdd",
704 },
705 {
706 name: "解锁/锁定项目信息字段",
707 fieldId: "proj_lockField",
708 },
709 {
710 name: "创建企业项目模板",
711 fieldId: "proj_buildTemp",
712 },
713 {
714 name: "管理企业模板",
715 fieldId: "proj_manageTemp",
716 },
717 {
718 name: "迁入项目",
719 fieldId: "proj_moveIn",
720 },
721 {
722 name: "迁出项目",
723 fieldId: "proj_moveOut",
724 }
725 ]
726 },
727 {
728 rolePowerType: "成员管理",
729 rolePowerTypeId: "memManage",
730 rolePowerNow: ["mem_add"],
731 rolePowerList: [
732 {
733 name: "添加企业成员",
734 fieldId: "mem_add",
735 },
736 {
737 name: "添加企业外部成员",
738 fieldId: "mem_addExter",
739 },
740 {
741 name: "移除企业成员",
742 fieldId: "mem_del",
743 },
744 {
745 name: "启用/停用企业成员",
746 fieldId: "mem_useBoolean",
747 },
748 {
749 name: "修改企业成员的角色",
750 fieldId: "mem_editRole",
751 },
752 {
753 name: "修改企业成员信息",
754 fieldId: "mem_editInfo",
755 },
756 {
757 name: "编辑部门",
758 fieldId: "mem_editDepart",
759 },
760 {
761 name: "创建群组",
762 fieldId: "mem_createGroup",
763 },
764 {
765 name: "添加群组成员",
766 fieldId: "mem_addGroupMem",
767 },
768 ]
769 },
770 {
771 rolePowerType: "权限设置",
772 rolePowerTypeId: "powerSet",
773 rolePowerNow: [],
774 rolePowerList: [
775 {
776 name: "创建自定义角色",
777 fieldId: "power_build",
778 },
779 {
780 name: "修改自定义角色",
781 fieldId: "power_edit",
782 },
783 {
784 name: "删除自定义角色",
785 fieldId: "power_del",
786 },
787 {
788 name: "选择企业成员的默认角色",
789 fieldId: "power_switchDef",
790 }
791 ]
792 },
793 {
794 rolePowerType: "企业操作",
795 rolePowerTypeId: "comOperate",
796 rolePowerNow: ["com_editInfo"],
797 rolePowerList: [
798 {
799 name: "修改企业基础信息",
800 fieldId: "com_editInfo",
801 },
802 {
803 name: "新增/管理自定义字段",
804 fieldId: "com_addSelfField",
805 },
806 {
807 name: "新增/管理任务类型",
808 fieldId: "com_addTaskType",
809 },
810 {
811 name: "锁定/取消锁定自定义字段",
812 fieldId: "com_lockeSelfField",
813 },
814 {
815 name: "强制更新自定义字段",
816 fieldId: "com_updateSelfField",
817 }
818 ]
819 }
820 ]
821 },
822 ]
823 },
824 rolePowerVisi:false,
825 rolePowerDetail:{},
826 roleMenu:[
827 {
828 name: "基本信息",
829 id: "badicInfo",
830 show: false
831 },
832 {
833 name: "权限配置",
834 id: "powerSet",
835 show: true
836 }
837 ],
838 indexA: 1,
839 }
840 },
841 methods: {
842 handleLook(item){
843 if(item.selfDefinedRole !== "sys"){
844 this.roleMenu[0].show = true;
845 } else {
846 this.roleMenu[0].show = false;
847 }
848 this.rolePowerVisi = true;
849 this.rolePowerDetail = item;
850 },
851 handleSwitch(index){
852 this.indexA = index;
853 },
854 //
855 handleCheckAll (item) {
856 let allPower = [];
857 item.rolePowerList.map((item,index) => {
858 allPower.push(item.fieldId);
859 })
860
861 if(item.rolePowerNow.length !== item.rolePowerList.length){
862 item.rolePowerNow = allPower;
863 } else {
864 item.rolePowerNow = [];
865 }
866 },
867 checkAllGroupChange (item,index) {
868 let length = item.rolePowerList.length;
869 // console.log( this.rolePowerDetail.rolePower[index].rolePowerNow )
870 let data = this.rolePowerDetail.rolePower[index].rolePowerNow;
871 }
872 //
873 },
874 beforeDestroy(){
875 this.rolePowerVisi = false;
876 }
877 }
878 </script>
879
880 <style lang="scss" scoped>
881 .comPower {
882 .card_header {
883 padding: 26px 0px;
884 border-bottom: 1px solid #e5e5e5;
885 .title_left {
886 font-size: 18px;
887 }
888 .title_right {
889 color: #1b9aee;
890 }
891 .title_back {
892 cursor: pointer;
893 &:hover {
894 color: #1b9aee;
895 }
896 }
897 }
898 .card_content {
899 padding:0px 20px;
900 .list_item {
901 cursor: pointer;
902 padding: 22px 24px;
903 display: -webkit-flex;
904 display: -ms-flexbox;
905 display: flex;
906 -webkit-justify-content: space-between;
907 -ms-flex-pack: justify;
908 justify-content: space-between;
909 border-bottom: 1px solid #e5e5e5;
910 &:hover {
911 background: #f7f7f7;
912 }
913 }
914 }
915 .powerDetail {
916 .power_detail {
917 ul {
918 height: 40px;
919 line-height: 40px;
920 display: flex;
921 justify-content: flex-start;
922 li {
923 margin-left: 20px;
924 cursor: pointer;
925 }
926 .active {
927 color: #262626;
928 box-shadow: inset 0 -4px #1b9aee;
929 }
930 }
931 }
932 }
933 .roleCheckGroup {
934 margin: 20px;
935 .list_item {
936 margin-bottom: 1px;
937 border-bottom: 1px solid #e5e5e5;
938 .check_item {
939 margin:16px 50px 16px 0;
940 }
941 }
942 }
943 }
944 </style>