Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
67655b34 by 任超
Options

style:菜单

2 parents 8712b1bd b16b26e4
Inline Side-by-side
Showing 7 changed files with 541 additions and 642 deletions
1 <template> 1 <template>
2 <el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox editDialogBox mainCenter" 2 <el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox dataReporting editDialogBox mainCenter"
3 :visible.sync="dialogVisible" width="92%"> 3 :visible.sync="dialogVisible" width="92%">
4 <div slot="title" class="dialog_title" ref="dialogTitle"> 4 <div slot="title" class="dialog_title" ref="dialogTitle">
5 {{ title || '详情' }} 5 {{ title || '详情' }}
...@@ -335,194 +335,11 @@ ...@@ -335,194 +335,11 @@
335 } 335 }
336 </script> 336 </script>
337 <style scoped lang="scss"> 337 <style scoped lang="scss">
338 // @import "~@/styles/mixin.scss";
339 // @import "~@/styles/dialogBox.scss";
340
341 /deep/.el-dialog__body {
342 display: flex;
343 flex-direction: column;
344 padding-bottom: 30px;
345 }
346
347 /deep/ .el-tabs {
348 color: #cef8ff;
349 }
350
351 .d-center {
352 z-index: 1000;
353 }
354
355 .sjmx {
356 display: flex;
357 flex-direction: column;
358 height: 49vh;
359
360 /deep/.el-tabs__item {
361 height: 50px;
362 padding-top: 6px;
363 }
364 }
365
366 .result {
367 flex: 1;
368 height: 100%;
369 }
370
371 .editDialogBox-con {
372 flex: 1;
373 height: 100%;
374 overflow-y: hidden;
375 }
376
377 /deep/.el-tabs__item {
378 color: #cef8ff !important;
379
380 display: flex;
381 flex-direction: row;
382 justify-content: center;
383 background: url("~@/image/tabitem.png") no-repeat;
384 background-size: 100% 100%;
385 border: none !important;
386 }
387
388 .obligee-item-name {
389 background: #05275b;
390 color: #ffffff;
391 background: url("~@/image/itembg.png") no-repeat;
392 background-size: 100% 100%;
393 }
394
395 /deep/.el-tabs__nav-scroll {
396 background: none;
397 }
398
399 /deep/.el-tabs__nav {
400 display: flex;
401 border: none !important;
402 }
403
404 /deep/.el-tabs__item.is-top {
405 border: 1px solid #dfe4ed;
406 border-top: 1px solid #dfe4ed;
407 border-bottom: 1px solid transparent;
408 }
409
410 /deep/.el-tabs__header {
411 border: none;
412 margin-bottom: 0;
413 }
414
415 /deep/.el-tabs__item.is-top:not(:last-child) {
416 margin-right: 5px;
417 }
418
419 /deep/.el-tabs__item.is-top {
420 background-color: none !important;
421 }
422
423 /deep/.el-tabs__item.is-active {
424 background: url("~@/image/tabitemse.png") no-repeat;
425 background-size: 100% 100%;
426 }
427
428 .success-images {
429 width: 30px;
430 height: 30px;
431 position: relative;
432 top: 10px;
433 right: 3px;
434 }
435
436 .tab-pane-item {
437 line-height: 20px;
438 color: #02d9fd;
439
440 p {
441 text-align: center;
442 }
443 }
444
445 .edit-content {
446 overflow-y: auto;
447 overflow-x: hidden;
448 padding-right: 1px;
449 border-top: none;
450 }
451
452 /deep/.editDialogBox { 338 /deep/.editDialogBox {
453 border-radius: 8px;
454 overflow: hidden;
455 min-width: 1228px;
456
457 .el-dialog__header { 339 .el-dialog__header {
458 display: flex; 340 display: flex;
459 margin-bottom: 10px; 341 margin-bottom: 10px;
460 } 342 }
461
462 .dialog_footer {
463 flex-direction: column;
464
465 .dialog_button {
466 margin-top: 8px;
467 }
468 }
469
470 .divider {
471 width: 100%;
472 border-bottom: 1px solid #ccc;
473 }
474 }
475
476 .el-dialog__wrapper {
477 overflow: hidden;
478 }
479
480 .dialog-from {
481 padding-top: 0;
482
483 .el-col {
484 justify-content: space-between;
485 }
486
487 .bz {
488 height: 100%;
489 position: relative;
490 top: 3px;
491 }
492
493 /deep/.el-select {
494 padding-right: 15px;
495 }
496
497 /deep/.el-icon-circle-close {
498 display: none;
499 }
500
501 /deep/.el-input__suffix {
502 right: -25px !important;
503 top: -5px;
504 }
505
506 /deep/.el-select,
507 /deep/.el-input {
508 flex: 1;
509 width: 100%;
510 }
511
512 /deep/.el-textarea__inner {
513 border: none !important;
514 margin: 0;
515 }
516
517 &_header {
518 margin: 0 -5px !important;
519 }
520
521 &_title {
522 font-size: 18px;
523 color: #d7eaee;
524 margin: 3px 0;
525 }
526 } 343 }
527 </style> 344 </style>
528 345
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
5 background: none !important; 5 background: none !important;
6 } 6 }
7 7
8 // 列表样式
8 .tableClass { 9 .tableClass {
9 .el-table { 10 .el-table {
10 border: none !important; 11 border: none !important;
...@@ -52,6 +53,7 @@ ...@@ -52,6 +53,7 @@
52 background-color: rgba(0, 0, 0, 0); 53 background-color: rgba(0, 0, 0, 0);
53 } 54 }
54 55
56 // 查询表单样式
55 .from-clues { 57 .from-clues {
56 height: 100%; 58 height: 100%;
57 width: 100%; 59 width: 100%;
...@@ -264,7 +266,7 @@ ...@@ -264,7 +266,7 @@
264 } 266 }
265 } 267 }
266 268
267 // 角色配置 269 // 角色管理人员菜单配置弹框样式
268 .roleconfiguration { 270 .roleconfiguration {
269 .el-dialog__body { 271 .el-dialog__body {
270 display: flex; 272 display: flex;
...@@ -358,82 +360,7 @@ ...@@ -358,82 +360,7 @@
358 border-top: none; 360 border-top: none;
359 } 361 }
360 362
361 .editDialogBox {
362 border-radius: 8px;
363 overflow: hidden;
364 min-width: 1228px;
365 height: 825px !important;
366
367 .dialog-from {
368 padding: 13px;
369 border-radius: 2px;
370 box-sizing: border-box;
371
372 .el-row {
373 display: flex;
374 flex-wrap: nowrap;
375 }
376 363
377 .el-col {
378 line-height: 18px;
379 display: flex;
380 align-items: center;
381 margin-bottom: 3px;
382 color: #b5d6dc;
383 border-radius: 2px;
384 border: 1px solid #224c7c;
385 margin: 5px;
386
387 span {
388 display: inline-block;
389 padding: 3px;
390 border-radius: 3px;
391 overflow: hidden;
392 white-space: nowrap;
393 text-align: left;
394 color: #02d9fd;
395 }
396
397 p {
398 flex: 1;
399 width: 100%;
400 padding-left: 5px;
401 line-height: 20px;
402 color: #c0c4cc;
403 cursor: not-allowed;
404 white-space: nowrap;
405 margin-right: 5px;
406 text-align: right;
407 }
408 }
409 }
410
411 .dialog_title {
412 display: flex;
413 position: relative;
414 font-size: 24px;
415 top: -8px;
416 width: 38%;
417 height: 40px;
418 margin-left: 28px;
419 justify-content: center;
420 }
421
422 .el-dialog__header {
423 display: flex;
424 margin-bottom: 10px;
425 }
426
427 .el-dialog__footer {
428 padding-right: 40px;
429 }
430
431 .divider {
432 width: 100%;
433 border-bottom: 1px solid #ccc;
434 }
435
436 }
437 364
438 .el-dialog__wrapper { 365 .el-dialog__wrapper {
439 overflow: hidden; 366 overflow: hidden;
...@@ -514,16 +441,7 @@ ...@@ -514,16 +441,7 @@
514 font-size: 12px; 441 font-size: 12px;
515 } 442 }
516 443
517 .button:hover { 444 // 按钮样式
518 // width: 76px;
519 // height: 32px;
520 // color: #ffffff;
521 // cursor: pointer;
522 // border: 0;
523 // font-size: 12px;
524 // background: none;
525 }
526
527 .cx { 445 .cx {
528 background: url("../image/btn.png") no-repeat 0 -34px; 446 background: url("../image/btn.png") no-repeat 0 -34px;
529 background-size: cover; 447 background-size: cover;
...@@ -627,7 +545,7 @@ ...@@ -627,7 +545,7 @@
627 } 545 }
628 546
629 .item-content-input { 547 .item-content-input {
630 /deep/.el-input__inner { 548 .el-input__inner {
631 border: none !important; 549 border: none !important;
632 text-align: right; 550 text-align: right;
633 } 551 }
...@@ -742,6 +660,7 @@ ...@@ -742,6 +660,7 @@
742 } 660 }
743 661
744 } 662 }
663
745 .contentCenter { 664 .contentCenter {
746 position: absolute; 665 position: absolute;
747 top: 50%; 666 top: 50%;
...@@ -761,3 +680,347 @@ ...@@ -761,3 +680,347 @@
761 } 680 }
762 } 681 }
763 682
683 // 登簿日志弹出框
684 .entryJournal {
685 .el-tabs__header {
686 margin: 0;
687 }
688
689 .el-dialog {
690 display: flex;
691 flex-direction: column;
692 }
693
694 .el-dialog__body {
695 display: flex;
696 flex-direction: column;
697 padding-bottom: 30px;
698 height: 100%;
699 flex: 1;
700 position: relative;
701 }
702
703 .regularHeight {
704 display: flex;
705 flex-direction: column;
706 height: 87vh;
707 margin-bottom: 5px;
708
709 .editDialogBox-con,
710 .JsonEditor {
711 flex: 1;
712 }
713 }
714
715 .d-center {}
716
717 .dialog_title {
718 top: -6px
719 }
720
721 .el-tabs__item {
722 color: #CEF8FF !important;
723
724 display: flex;
725 flex-direction: row;
726 justify-content: center;
727 background: url("~@/image/tabitem.png") no-repeat;
728 background-size: 100% 100%;
729 border: none !important;
730 }
731
732 .el-tabs__nav {
733 display: flex;
734 border: none !important;
735 }
736
737 .el-tabs__item.is-top:not(:last-child) {
738 margin-right: 5px;
739 }
740
741 .el-icon-circle-close {
742 display: none;
743 }
744
745 .el-tabs__item.is-active {
746 background: url("~@/image/tabitemse.png") no-repeat;
747 background-size: 100% 100%;
748 }
749
750 .from-clues-content {
751 margin-top: 0;
752 background: none;
753 padding: 0;
754 }
755
756 .editDialogBox-box {
757 position: relative;
758 top: 10px;
759 height: 100%;
760 }
761
762 .dialog-from {
763 padding-top: 0;
764
765 .el-col {
766 justify-content: space-between;
767 }
768
769 .bz {
770 height: 100%;
771 position: relative;
772 top: 3px;
773 }
774
775 .el-input {
776 flex: 1;
777 width: 100%;
778 }
779
780 .el-textarea__inner {
781 border: none !important;
782 margin: 0;
783 }
784
785 &_header {
786 margin: 0 -5px !important;
787 }
788
789 &_title {
790 font-size: 14px;
791 color: #d7eaee;
792 margin: 3px 0;
793 }
794 }
795 }
796
797 // 数据上报弹出框
798 .dataReporting {
799 .el-dialog__body {
800 display: flex;
801 flex-direction: column;
802 padding-bottom: 30px;
803 }
804
805 .el-tabs {
806 color: #cef8ff;
807 }
808
809 .d-center {
810 z-index: 1000;
811 }
812
813 .sjmx {
814 display: flex;
815 flex-direction: column;
816 height: 49vh;
817
818 .el-tabs__item {
819 height: 50px;
820 padding-top: 6px;
821 }
822 }
823
824 .result {
825 flex: 1;
826 height: 100%;
827 }
828
829 .editDialogBox-con {
830 flex: 1;
831 height: 100%;
832 overflow-y: hidden;
833 }
834
835 .el-tabs__item {
836 color: #cef8ff !important;
837
838 display: flex;
839 flex-direction: row;
840 justify-content: center;
841 background: url("~@/image/tabitem.png") no-repeat;
842 background-size: 100% 100%;
843 border: none !important;
844 }
845
846 .obligee-item-name {
847 background: #05275b;
848 color: #ffffff;
849 background: url("~@/image/itembg.png") no-repeat;
850 background-size: 100% 100%;
851 }
852
853 .el-tabs__nav-scroll {
854 background: none;
855 }
856
857 .el-tabs__nav {
858 display: flex;
859 border: none !important;
860 }
861
862 .el-tabs__item.is-top {
863 border: 1px solid #dfe4ed;
864 border-top: 1px solid #dfe4ed;
865 border-bottom: 1px solid transparent;
866 }
867
868 .el-tabs__header {
869 border: none;
870 margin-bottom: 0;
871 }
872
873 .el-tabs__item.is-top:not(:last-child) {
874 margin-right: 5px;
875 }
876
877 .el-tabs__item.is-top {
878 background-color: none !important;
879 }
880
881 .el-tabs__item.is-active {
882 background: url("~@/image/tabitemse.png") no-repeat;
883 background-size: 100% 100%;
884 }
885
886 .success-images {
887 width: 30px;
888 height: 30px;
889 position: relative;
890 top: 10px;
891 right: 3px;
892 }
893
894 .tab-pane-item {
895 line-height: 20px;
896 color: #02d9fd;
897
898 p {
899 text-align: center;
900 }
901 }
902
903 .edit-content {
904 overflow-y: auto;
905 overflow-x: hidden;
906 padding-right: 1px;
907 border-top: none;
908 }
909
910 .editDialogBox {
911 border-radius: 8px;
912 overflow: hidden;
913 min-width: 1228px;
914
915 .el-dialog__header {
916 display: flex;
917 margin-bottom: 10px;
918 }
919
920 .dialog_footer {
921 flex-direction: column;
922
923 .dialog_button {
924 margin-top: 8px;
925 }
926 }
927
928 .divider {
929 width: 100%;
930 border-bottom: 1px solid #ccc;
931 }
932 }
933
934 .el-dialog__wrapper {
935 overflow: hidden;
936 }
937
938 .dialog-from {
939 padding-top: 0;
940
941 .el-col {
942 justify-content: space-between;
943 }
944
945 .bz {
946 height: 100%;
947 position: relative;
948 top: 3px;
949 }
950
951 .el-select {
952 padding-right: 15px;
953 }
954
955 .el-icon-circle-close {
956 display: none;
957 }
958
959 .el-input__suffix {
960 right: -25px !important;
961 top: -5px;
962 }
963
964 .el-select,
965 .el-input {
966 flex: 1;
967 width: 100%;
968 }
969
970 .el-textarea__inner {
971 border: none !important;
972 margin: 0;
973 }
974
975 &_header {
976 margin: 0 -5px !important;
977 }
978
979 &_title {
980 font-size: 18px;
981 color: #d7eaee;
982 margin: 3px 0;
983 }
984 }
985 }
986
987 // 人员管理上下移动按钮样式
988 .el-button.is-disabled.el-button--text {
989 width: 64px;
990 height: 28px;
991 background: rgba(255, 255, 255, 0.1);
992 border-radius: 16px;
993 }
994
995 // 人员管理角色管理菜单管理修改新增弹框样式
996 .PersonnelDialog {
997 .el-dialog__header {
998 .dialog_title {
999 display: -webkit-box;
1000 display: -ms-flexbox;
1001 display: flex;
1002 position: relative;
1003 top: -7px;
1004 width: 29%;
1005 height: 40px;
1006 margin-left: 28px;
1007 -webkit-box-pack: center;
1008 -ms-flex-pack: center;
1009 justify-content: center;
1010 white-space: nowrap;
1011
1012 b {
1013 font-size: 16px;
1014 }
1015 }
1016
1017 .el-dialog__headerbtn {
1018 right: 20px !important;
1019 top: 23px !important;
1020 }
1021 }
1022
1023 .selbig {
1024 width: 500px;
1025 }
1026 }
......
1 <template> 1 <template>
2 <el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox editDialogBox mainCenter" 2 <el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox entryJournal editDialogBox mainCenter"
3 :visible.sync="dialogVisible" width="90%"> 3 :visible.sync="dialogVisible" width="90%">
4 <div slot="title" class="dialog_title" ref="dialogTitle"> 4 <div slot="title" class="dialog_title" ref="dialogTitle">
5 {{ title || '登薄日志' }} 5 {{ title || '登薄日志' }}
...@@ -458,119 +458,5 @@ ...@@ -458,119 +458,5 @@
458 } 458 }
459 </script> 459 </script>
460 <style scoped lang="scss"> 460 <style scoped lang="scss">
461 // @import "~@/styles/mixin.scss";
462 // @import "~@/styles/dialogBox.scss";
463
464 /deep/.el-tabs__header {
465 margin: 0;
466 }
467
468 /deep/.el-dialog {
469 display: flex;
470 flex-direction: column;
471 }
472
473 /deep/.el-dialog__body {
474 display: flex;
475 flex-direction: column;
476 padding-bottom: 30px;
477 height: 100%;
478 flex: 1;
479 position: relative;
480 }
481
482 .regularHeight {
483 display: flex;
484 flex-direction: column;
485 height: 87vh;
486 margin-bottom: 5px;
487
488 .editDialogBox-con,
489 .JsonEditor {
490 flex: 1;
491 }
492 }
493
494 .d-center {
495 }
496
497 .dialog_title {
498 top: -13px;
499 }
500
501 /deep/.el-tabs__item {
502 color: #cef8ff !important;
503
504 display: flex;
505 flex-direction: row;
506 justify-content: center;
507 background: url("~@/image/tabitem.png") no-repeat;
508 background-size: 100% 100%;
509 border: none !important;
510 }
511
512 /deep/.el-tabs__nav {
513 display: flex;
514 border: none !important;
515 }
516
517 /deep/.el-tabs__item.is-top:not(:last-child) {
518 margin-right: 5px;
519 }
520
521 /deep/.el-icon-circle-close {
522 display: none;
523 }
524
525 /deep/.el-tabs__item.is-active {
526 background: url("~@/image/tabitemse.png") no-repeat;
527 background-size: 100% 100%;
528 }
529
530 .from-clues-content {
531 margin-top: 0;
532 background: none;
533 padding: 0;
534 }
535
536 .editDialogBox-box {
537 position: relative;
538 top: 10px;
539 height: 100%;
540 }
541
542 .dialog-from {
543 padding-top: 0;
544
545 .el-col {
546 justify-content: space-between;
547 }
548
549 .bz {
550 height: 100%;
551 position: relative;
552 top: 3px;
553 }
554
555 /deep/.el-input {
556 flex: 1;
557 width: 100%;
558 }
559
560 /deep/.el-textarea__inner {
561 border: none !important;
562 margin: 0;
563 }
564
565 &_header {
566 margin: 0 -5px !important;
567 }
568
569 &_title {
570 font-size: 14px;
571 color: #d7eaee;
572 margin: 3px 0;
573 }
574 }
575 </style> 461 </style>
576 462
......
1 <template> 1 <template>
2 <dialogBox class="modifydialog" :isMain="true" width="40%" :title="title" @closeDialog="close" @submitForm="submitForm" 2 <dialogBox class="modifydialog PersonnelDialog" :isMain="true" width="40%" :title="title" @closeDialog="close" @submitForm="submitForm"
3 v-model="myValue"> 3 v-model="myValue">
4 <div class="dialogCon"> 4 <div class="dialogCon">
5 <el-form ref="form" :model="form" :rules="rules"> 5 <el-form ref="form" :model="form" :rules="rules">
...@@ -63,208 +63,208 @@ ...@@ -63,208 +63,208 @@
63 </template> 63 </template>
64 64
65 <script> 65 <script>
66 import { getParentMenuListAction } from '@/api/authorityManage' 66 import { getParentMenuListAction } from '@/api/authorityManage'
67 import IconList from '../../../components/IconList' 67 import IconList from '../../../components/IconList'
68 import JsonEditor from '@/components/JsonEditors' 68 import JsonEditor from '@/components/JsonEditors'
69 import { validateCode } from '@/utils/validate'; 69 import { validateCode } from '@/utils/validate';
70 import { api, httpAction } from '@/api/manageApi' 70 import { api, httpAction } from '@/api/manageApi'
71 export default { 71 export default {
72 name: 'MenuModal', 72 name: 'MenuModal',
73 components: { 73 components: {
74 JsonEditor, 74 JsonEditor,
75 IconList, 75 IconList,
76 },
77 props: {
78 value: { type: Boolean, default: false },
79 productId: {
80 type: String,
81 default: ''
82 }
83 },
84 data () {
85 return {
86 myValue: this.value,
87 form: {
88 icon: '',
89 code: ''
90 },
91 rules: {
92 name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
93 code: [
94 { required: true, message: '必填', trigger: 'blur' },
95 { validator: validateCode, trigger: 'blur' }
96 ]
97 },
98 title: '',
99 type: '',
100 visible: false,
101 parentMenuList: [],
102 menuKey: 0,
103 jumpModeList: [
104 { name: '在当前页面显示', value: 1 },
105 { name: '跳转到新页面', value: 2 }
106 ],
107 setProps: {
108 value: 'id',
109 label: 'name',
110 children: 'children',
111 expandTrigger: 'hover',
112 checkStrictly: true, // 可取消关联，选择任意一级选项
113 emitPath: false
114 },
115 dataUrl: api.menus
116 }
117 },
118 computed: {
119 codeComputed: {
120 get: function () {
121 return this.form.code
122 },
123 set: function (val) {
124 this.form.code = val.toUpperCase()
125 }
126 }
127 },
128 watch: {
129 value (val) {
130 this.myValue = val
131 }
132 },
133 methods: {
134 // 获取父级菜单
135 getParentMenuList (id) {
136
137 getParentMenuListAction(id).then((res) => {
138 if (res.status === 1) {
139 const list = this.$dealArrChildren(res.content)
140 if (id) {
141 this.parentMenuList = this.$dealArrDisabled(
142 this.$deepCopy(list),
143 id
144 )
145 this.menuKey++
146 } else {
147 this.parentMenuList = list
148 }
149 } else {
150 this.$message.error({ message: res.message, showClose: true })
151 }
152 })
153 },
154 // 选择图标
155 getIconName (data) {
156 this.form.icon = data;
157 }, 76 },
158 getIconList () { 77 props: {
159 this.$refs.iconList.show(true) 78 value: { type: Boolean, default: false },
160 }, 79 productId: {
161 getIconName (data) { 80 type: String,
162 this.form.icon = data 81 default: ''
163 }, 82 }
164 // 配置参数
165 getJsonString (data) {
166 this.form.metadata = data
167 }, 83 },
168 // 新增菜单 84 data () {
169 add () { 85 return {
170 this.getParentMenuList(this.productId) 86 myValue: this.value,
171 this.type = 0 87 form: {
172 this.form.jumpMode = 1 88 icon: '',
89 code: ''
90 },
91 rules: {
92 name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
93 code: [
94 { required: true, message: '必填', trigger: 'blur' },
95 { validator: validateCode, trigger: 'blur' }
96 ]
97 },
98 title: '',
99 type: '',
100 visible: false,
101 parentMenuList: [],
102 menuKey: 0,
103 jumpModeList: [
104 { name: '在当前页面显示', value: 1 },
105 { name: '跳转到新页面', value: 2 }
106 ],
107 setProps: {
108 value: 'id',
109 label: 'name',
110 children: 'children',
111 expandTrigger: 'hover',
112 checkStrictly: true, // 可取消关联，选择任意一级选项
113 emitPath: false
114 },
115 dataUrl: api.menus
116 }
173 }, 117 },
174 // 编辑菜单 118 computed: {
175 edit (record) { 119 codeComputed: {
176 this.type = 1 120 get: function () {
177 // 若有id为编辑 121 return this.form.code
178 if (record.id) { 122 },
179 this.$nextTick(() => { 123 set: function (val) {
180 this.form = Object.assign({}, record) 124 this.form.code = val.toUpperCase()
181 this.getParentMenuList(this.productId) 125 }
182 })
183 } 126 }
184 }, 127 },
185 // 选择上级菜单 128 watch: {
186 handleChange (value) { 129 value (val) {
187 this.form.parentId = value 130 this.myValue = val
131 }
188 }, 132 },
189 // 保存 133 methods: {
190 submitForm (submitType) { 134 // 获取父级菜单
191 this.$refs.form.validate((valid) => { 135 getParentMenuList (id) {
192 if (valid) { 136
193 let method = '' 137 getParentMenuListAction(id).then((res) => {
194 let url = '' 138 if (res.status === 1) {
195 const formData = this.form 139 const list = this.$dealArrChildren(res.content)
196 formData.productId = this.productId 140 if (id) {
197 if (!formData.id) { 141 this.parentMenuList = this.$dealArrDisabled(
198 method = 'post' 142 this.$deepCopy(list),
199 url = this.dataUrl 143 id
144 )
145 this.menuKey++
146 } else {
147 this.parentMenuList = list
148 }
200 } else { 149 } else {
201 method = 'put' 150 this.$message.error({ message: res.message, showClose: true })
202 url = `${this.dataUrl}/${formData.id}`
203 } 151 }
204 httpAction(url, formData, method) 152 })
205 .then((res) => { 153 },
206 if (res.status === 1) { 154 // 选择图标
207 this.$message.success({ 155 getIconName (data) {
208 message: res.message, 156 this.form.icon = data;
209 showClose: true 157 },
210 }) 158 getIconList () {
159 this.$refs.iconList.show(true)
160 },
161 getIconName (data) {
162 this.form.icon = data
163 },
164 // 配置参数
165 getJsonString (data) {
166 this.form.metadata = data
167 },
168 // 新增菜单
169 add () {
170 this.getParentMenuList(this.productId)
171 this.type = 0
172 this.form.jumpMode = 1
173 },
174 // 编辑菜单
175 edit (record) {
176 this.type = 1
177 // 若有id为编辑
178 if (record.id) {
179 this.$nextTick(() => {
180 this.form = Object.assign({}, record)
181 this.getParentMenuList(this.productId)
182 })
183 }
184 },
185 // 选择上级菜单
186 handleChange (value) {
187 this.form.parentId = value
188 },
189 // 保存
190 submitForm (submitType) {
191 this.$refs.form.validate((valid) => {
192 if (valid) {
193 let method = ''
194 let url = ''
195 const formData = this.form
196 formData.productId = this.productId
197 if (!formData.id) {
198 method = 'post'
199 url = this.dataUrl
200 } else {
201 method = 'put'
202 url = `${this.dataUrl}/${formData.id}`
203 }
204 httpAction(url, formData, method)
205 .then((res) => {
206 if (res.status === 1) {
207 this.$message.success({
208 message: res.message,
209 showClose: true
210 })
211 211
212 this.resetForm() 212 this.resetForm()
213 this.$emit('ok') 213 this.$emit('ok')
214 } else { 214 } else {
215 this.$message.error({ message: res.message, showClose: true }) 215 this.$message.error({ message: res.message, showClose: true })
216 } 216 }
217 }) 217 })
218 .catch((err) => { 218 .catch((err) => {
219 console.log(err) 219 console.log(err)
220 }) 220 })
221 }
222 })
223 },
224 resetForm () {
225 this.$refs.form.resetFields()
226 this.form = {
227 icon: '',
228 code: ''
221 } 229 }
222 }) 230 },
223 }, 231 close () {
224 resetForm () { 232 this.resetForm()
225 this.$refs.form.resetFields() 233 this.$emit('input', false)
226 this.form = {
227 icon: '',
228 code: ''
229 } 234 }
230 },
231 close () {
232 this.resetForm()
233 this.$emit('input', false)
234 } 235 }
235 } 236 }
236 }
237 </script> 237 </script>
238 <style scoped lang="scss"> 238 <style scoped lang="scss">
239 .modifydialog { 239 // .modifydialog {
240 &-con { 240 // &-con {
241 background: #031a46; 241 // background: #031a46;
242 } 242 // }
243 243
244 /deep/.el-dialog__header { 244 // /deep/.el-dialog__header {
245 .dialog_title { 245 // .dialog_title {
246 display: -webkit-box; 246 // display: -webkit-box;
247 display: -ms-flexbox; 247 // display: -ms-flexbox;
248 display: flex; 248 // display: flex;
249 position: relative; 249 // position: relative;
250 top: -8px; 250 // top: -8px;
251 width: 28%; 251 // width: 28%;
252 height: 40px; 252 // height: 40px;
253 margin-left: 28px; 253 // margin-left: 28px;
254 -webkit-box-pack: center; 254 // -webkit-box-pack: center;
255 -ms-flex-pack: center; 255 // -ms-flex-pack: center;
256 justify-content: center; 256 // justify-content: center;
257 white-space: nowrap; 257 // white-space: nowrap;
258 258
259 b { 259 // b {
260 font-size: 16px; 260 // font-size: 16px;
261 } 261 // }
262 } 262 // }
263 263
264 .el-dialog__headerbtn { 264 // .el-dialog__headerbtn {
265 right: 20px !important; 265 // right: 20px !important;
266 top: 23px !important; 266 // top: 23px !important;
267 } 267 // }
268 } 268 // }
269 } 269 // }
270 </style> 270 </style>
......
1 <!-- 新增 & 修改角色 --> 1 <!-- 新增 & 修改角色 -->
2 <template> 2 <template>
3 <dialogBox 3 <dialogBox
4 class="modifydialog" 4 class="modifydialog PersonnelDialog"
5 :title="title" 5 :title="title"
6 :width="'567px'" 6 :width="'567px'"
7 :isMain="true" 7 :isMain="true"
...@@ -160,29 +160,4 @@ ...@@ -160,29 +160,4 @@
160 } 160 }
161 </script> 161 </script>
162 <style scoped lang="scss"> 162 <style scoped lang="scss">
163 .modifydialog {
164 /deep/.el-dialog__header {
165 .dialog_title {
166 display: -webkit-box;
167 display: -ms-flexbox;
168 display: flex;
169 position: relative;
170 top: -8px;
171 width: 24%;
172 height: 40px;
173 margin-left: 28px;
174 -webkit-box-pack: center;
175 -ms-flex-pack: center;
176 justify-content: center;
177 white-space: nowrap;
178 b {
179 font-size: 16px;
180 }
181 }
182 .el-dialog__headerbtn {
183 right: 20px !important;
184 top: 23px !important;
185 }
186 }
187 }
188 </style> 163 </style>
......
1 <template> 1 <template>
2 <dialogBox :title="title" :width="'867px'" class="modifydialog" @closeDialog="close" :isMain="true" @submitForm="submitForm" 2 <dialogBox :title="title" :width="'867px'" class="modifydialog PersonnelDialog" @closeDialog="close" :isMain="true" @submitForm="submitForm"
3 v-model="myValue"> 3 v-model="myValue">
4 <div class="dialogCon"> 4 <div class="dialogCon">
5 <el-form ref="form" :model="form" :rules="rules"> 5 <el-form ref="form" :model="form" :rules="rules">
...@@ -193,32 +193,4 @@ ...@@ -193,32 +193,4 @@
193 } 193 }
194 </script> 194 </script>
195 <style scoped lang="scss"> 195 <style scoped lang="scss">
196 .modifydialog {
197 /deep/.el-dialog__header {
198 .dialog_title {
199 display: -webkit-box;
200 display: -ms-flexbox;
201 display: flex;
202 position: relative;
203 top: -7px;
204 width: 29%;
205 height: 40px;
206 margin-left: 28px;
207 -webkit-box-pack: center;
208 -ms-flex-pack: center;
209 justify-content: center;
210 white-space: nowrap;
211 b {
212 font-size: 16px;
213 }
214 }
215 .el-dialog__headerbtn {
216 right: 20px !important;
217 top: 23px !important;
218 }
219 }
220 .selbig {
221 width: 500px;
222 }
223 }
224 </style> 196 </style>
......
...@@ -409,18 +409,4 @@ export default { ...@@ -409,18 +409,4 @@ export default {
409 </script> 409 </script>
410 <style scoped lang="scss"> 410 <style scoped lang="scss">
411 @import "~@/styles/mixin.scss"; 411 @import "~@/styles/mixin.scss";
412
413 // .btnColRight {
414 // height: 30px;
415 // .button {
416 // position: absolute;
417 // left: 30px;
418 // }
419 // }
420 /deep/.el-button.is-disabled.el-button--text {
421 width: 64px;
422 height: 28px;
423 background: rgba(255, 255, 255, 0.1);
424 border-radius: 16px;
425 }
426 </style> 412 </style>
......