@lx-frontend/wrap-element-ui 1.0.1-beta.5 → 1.0.1-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/README.md +45 -45
  2. package/package.json +14 -14
  3. package/src/components/AddMembers/index.vue +157 -157
  4. package/src/components/AuditSteps/index.vue +140 -140
  5. package/src/components/DemoComponent/index.vue +20 -20
  6. package/src/components/EditableTable/README.md +147 -147
  7. package/src/components/EditableTable/bizHooks/index.ts +17 -0
  8. package/src/components/EditableTable/{useCellHover.ts → bizHooks/useCellHover.ts} +71 -71
  9. package/src/components/EditableTable/{useColumnHeaderOperation.ts → bizHooks/useColumnHeaderOperation.ts} +326 -325
  10. package/src/components/EditableTable/{useDefaultOperation.ts → bizHooks/useDefaultOperation.ts} +95 -95
  11. package/src/components/EditableTable/{useDragSort.ts → bizHooks/useDragSort.ts} +290 -290
  12. package/src/components/EditableTable/{usePagination.ts → bizHooks/usePagination.ts} +30 -30
  13. package/src/components/EditableTable/{useRowBgColor.ts → bizHooks/useRowBgColor.ts} +43 -50
  14. package/src/components/EditableTable/{useViewSetting.ts → bizHooks/useViewSetting.ts} +118 -119
  15. package/src/components/EditableTable/features/bizColorSelect.vue +65 -0
  16. package/src/components/EditableTable/features/bizEditCell.vue +44 -0
  17. package/src/components/EditableTable/features/bizTableHeaderPopover.vue +202 -0
  18. package/src/components/EditableTable/features/bizViewSettingDialog.vue +137 -0
  19. package/src/components/EditableTable/index.less +733 -724
  20. package/src/components/EditableTable/index.vue +630 -914
  21. package/src/components/Ellipsis/MultilineEllipsis.vue +141 -141
  22. package/src/components/Ellipsis/index.vue +119 -119
  23. package/src/components/LxTable/index.vue +296 -296
  24. package/src/components/PopoverForm/index.vue +66 -66
  25. package/src/components/SearchForm/index.vue +243 -243
  26. package/src/components/SearchSelect/index.vue +153 -153
  27. package/src/components/index.ts +24 -24
  28. package/src/components/singleMessage/index.ts +44 -44
  29. /package/src/components/EditableTable/{types.ts → types/index.ts} +0 -0
package/src/components/EditableTable/index.less CHANGED
@@ -1,724 +1,733 @@
1
- @--theme-blue--: #2468f2;
2
-
3
- .editable-table {
4
- &__selected-color {
5
- position: absolute;
6
- left: 0;
7
- top: 0;
8
- right: 0;
9
- bottom: 0;
10
- }
11
-
12
- &__color-title {
13
- text-align: center;
14
- width: 28px;
15
- padding: 0 !important;
16
- }
17
-
18
- &__color-icon {
19
- padding: 0 !important;
20
- margin-left: 8px;
21
- width: 8px;
22
- height: 8px;
23
- border-radius: 50%;
24
- // left: 5px;
25
- position: relative;
26
- background-color: #fcae46;
27
- cursor: pointer;
28
- overflow: visible !important;
29
-
30
- &::before {
31
- background-color: #fc6559;
32
- left: -10px;
33
- z-index: 2;
34
- }
35
-
36
- &::after {
37
- background-color: #409eff;
38
- left: -5px;
39
- z-index: 1;
40
- }
41
-
42
- &::before,
43
- &::after {
44
- content: "";
45
- width: 8px;
46
- height: 8px;
47
- border-radius: 50%;
48
- position: absolute;
49
- top: 0;
50
- }
51
- }
52
-
53
- &__color-column,
54
- &__drag-cell {
55
- padding: 0 !important;
56
-
57
- & .cell {
58
- padding: 0 !important;
59
- height: 100%;
60
-
61
- display: flex !important;
62
- justify-content: center;
63
- align-items: center;
64
- text-align: center;
65
- }
66
- }
67
-
68
- &__color-column {
69
- & .cell {
70
- padding: 0 !important;
71
- border: none !important;
72
- }
73
- }
74
-
75
- &__drag-line {
76
- border: none;
77
- border-top: 1px solid #13161b;
78
- height: 4px;
79
- width: 15px;
80
-
81
- &:last-child {
82
- height: 1px;
83
- }
84
- }
85
-
86
- &__drag-icon {
87
- width: 100%;
88
- height: 100%;
89
- min-height: 45px;
90
- cursor: grab;
91
- display: flex;
92
- flex-direction: column;
93
- justify-content: center;
94
- align-items: center;
95
- }
96
-
97
- &__sort-icon {
98
- position: relative;
99
- width: 12px;
100
- height: 12px;
101
- border: 1px solid #7b7b7b;
102
- padding: 0 !important;
103
- margin-left: 4px;
104
- border-radius: 50%;
105
-
106
- &::after {
107
- position: absolute;
108
- top: 50%;
109
- left: 50%;
110
- content: "";
111
- width: 3px;
112
- height: 3px;
113
- border-bottom: 1px solid;
114
- border-left: 1px solid;
115
- border-color: #7b7b7b;
116
- transform: translate(-50%, -55%) rotate(-45deg);
117
- }
118
-
119
- &--active {
120
- border: 1px solid @--theme-blue--;
121
-
122
- &::after {
123
- border-color: @--theme-blue--;
124
- }
125
- }
126
- }
127
-
128
- &__sort-reference {
129
- display: inline-flex;
130
- justify-content: flex-start;
131
- align-items: center;
132
-
133
- &:hover {
134
- cursor: pointer;
135
- }
136
-
137
- &--active {
138
- color: @--theme-blue--;
139
- }
140
- }
141
-
142
- &__sort-filter {
143
- padding: 0 !important;
144
- }
145
-
146
- &__pin-top {
147
- width: 24px;
148
- height: 24px;
149
- color: white;
150
- background-color: #969ca4;
151
- }
152
-
153
- & .el-table td,
154
- .el-table th.is-leaf {
155
- border-bottom: 1px solid #dfe3ec;
156
- }
157
-
158
- & .el-table {
159
- &__expanded-cell {
160
- background-color: #fafafa;
161
- }
162
- }
163
-
164
- & .el-table tr td {
165
- min-height: 45px;
166
- border-top: none;
167
- border-left: none;
168
- border-right: none;
169
- }
170
-
171
- & thead tr th {
172
- background-color: #f3f4f8 !important;
173
- border-right: none !important;
174
-
175
- & .cell {
176
- color: #13161b;
177
- }
178
-
179
- &:not(:last-child) .cell {
180
- border-right: 2px #e4e8ef solid;
181
- }
182
- }
183
-
184
- .el-table-filter,
185
- th.el-table__cell .el-table__column-filter-trigger,
186
- th.is-sortable .caret-wrapper {
187
- display: none;
188
- }
189
-
190
- .el-table__body tr.current-row > td,
191
- .el-table__body tr.hover-row > td {
192
- background-color: #fafafa;
193
- }
194
-
195
- table tbody tr td {
196
- & .el-date-editor.el-input {
197
- width: 100%;
198
- }
199
-
200
- & .cell {
201
- font-size: 14px;
202
- }
203
- }
204
-
205
- .el-table__fixed-body-wrapper {
206
- background: #fff;
207
- }
208
- }
209
-
210
- .view-setting {
211
- &__btn-wrapper {
212
- display: flex;
213
- justify-content: flex-end;
214
- }
215
-
216
- &__btn {
217
- display: flex;
218
- justify-content: flex-end;
219
- align-items: center;
220
- font-weight: 400;
221
- font-size: 14px;
222
- color: @--theme-blue--;
223
- margin-bottom: 17px;
224
- margin-right: 20px;
225
- }
226
-
227
- &__btn-text {
228
- margin-left: 4px;
229
- }
230
-
231
- &__dialog {
232
- padding: 0px;
233
-
234
- .el-dialog__body {
235
- max-height: 70vh;
236
- }
237
-
238
- .el-dialog__body {
239
- padding: 0;
240
- }
241
-
242
- & .el-button--primary {
243
- background-color: @--theme-blue-- !important;
244
- border-color: @--theme-blue-- !important;
245
- }
246
-
247
- & .el-checkbox.is-checked:not(.is-disabled) {
248
- .el-checkbox__input .el-checkbox__inner {
249
- background-color: @--theme-blue-- !important;
250
- border-color: @--theme-blue-- !important;
251
- }
252
- .el-checkbox__label {
253
- color: @--theme-blue-- !important;
254
- }
255
- }
256
-
257
- & .el-button {
258
- border-radius: 2px;
259
- }
260
- }
261
-
262
- &__content {
263
- display: flex;
264
- min-height: 500px;
265
- }
266
-
267
- &__content-left {
268
- min-width: 417px;
269
- width: 417px;
270
-
271
- display: flex;
272
- flex-direction: column;
273
- justify-content: flex-start;
274
- align-items: flex-start;
275
- }
276
-
277
- &__content-left-item {
278
- width: 130px;
279
- margin-bottom: 15px;
280
- }
281
-
282
- &__content-right {
283
- border-left: 1px solid #d9d9d9;
284
- display: flex;
285
- flex-direction: column;
286
- justify-content: flex-start;
287
- align-items: flex-start;
288
- }
289
-
290
- &__content-right-title,
291
- &__content-left-title {
292
- border-bottom: 1px solid #d9d9d9;
293
- width: 100%;
294
- height: 46px;
295
- display: flex;
296
- justify-content: flex-start;
297
- align-items: center;
298
- padding-left: 20px;
299
- }
300
-
301
- &__selected-count {
302
- margin-left: 20px;
303
- }
304
-
305
- &__checkbox-wrapper {
306
- padding-left: 37px;
307
- padding-top: 24px;
308
- }
309
-
310
- &__content-right {
311
- flex-grow: 1;
312
- }
313
-
314
- &__content-right-frize {
315
- width: 100%;
316
- display: flex;
317
- justify-content: flex-start;
318
- align-items: center;
319
- height: 50px;
320
- border-bottom: 1px solid #d9d9d9;
321
- padding-left: 20px;
322
- }
323
-
324
- &__content-right-input {
325
- width: 140px;
326
- margin: 0 4px;
327
-
328
- .el-input__inner {
329
- height: 28px;
330
- line-height: 28px;
331
- }
332
- }
333
-
334
- &__content-right-selected {
335
- display: flex;
336
- justify-content: flex-start;
337
- flex-direction: column;
338
- align-items: flex-start;
339
- width: 100%;
340
- flex-grow: 1;
341
- padding-left: 18px;
342
- padding-top: 17px;
343
- padding-right: 23px;
344
- }
345
-
346
- &__selected-item-left {
347
- display: flex;
348
- justify-content: flex-start;
349
- align-items: center;
350
- }
351
-
352
- &__icon-wrapper {
353
- width: 14px;
354
- height: 14px;
355
- line-height: 14px;
356
- padding: 2px 4px;
357
- margin-right: 10px;
358
- cursor: grab;
359
- display: flex;
360
- flex-direction: column;
361
- justify-content: center;
362
- align-items: center;
363
- }
364
-
365
- &__selected-item {
366
- display: flex;
367
- justify-content: space-between;
368
- align-items: center;
369
- line-height: 30px;
370
- height: 30px;
371
- width: 100%;
372
- }
373
-
374
- &__selected-item-close {
375
- cursor: pointer;
376
- &--disabled {
377
- cursor: not-allowed;
378
- color: #989ea9;
379
- }
380
- }
381
- }
382
-
383
- .color-popover {
384
- min-width: 102px;
385
- width: 102px;
386
- padding: 0;
387
-
388
- & .popper__arrow::after {
389
- left: 0 !important;
390
- }
391
- }
392
-
393
- .color-list {
394
- color: #fff;
395
- width: 102px;
396
- border-radius: 5px;
397
- overflow: hidden;
398
- &__item {
399
- display: inline-block;
400
- width: 100%;
401
- height: 27px;
402
- line-height: 27px;
403
- padding-left: 6px;
404
- }
405
- }
406
-
407
- .sort-filter {
408
- width: 258px;
409
- padding: 0;
410
-
411
- &__column-title {
412
- font-size: 14px;
413
- font-weight: 600;
414
- height: 40px;
415
- line-height: 40px;
416
- text-align: center;
417
- border-bottom: 1px solid #d6dbe3;
418
- }
419
-
420
- &__filter,
421
- &__sort,
422
- &__search {
423
- padding: 14px;
424
- }
425
-
426
- &__filter {
427
- padding-top: 0;
428
- }
429
-
430
- &__filter-title,
431
- &__sort-title,
432
- &__search-title {
433
- font-weight: 600;
434
- font-size: 14px;
435
- color: #1f1f1f;
436
- margin-bottom: 10px;
437
- }
438
-
439
- &__search-input {
440
- & .el-input__inner {
441
- height: 32px;
442
- }
443
- }
444
-
445
- &__filter-title {
446
- border-top: 1px solid #f3f3f3;
447
- padding-top: 14px;
448
- }
449
-
450
- &__sort-btns {
451
- display: flex;
452
- justify-content: space-between;
453
- align-items: center;
454
-
455
- & .el-button {
456
- border: none;
457
- }
458
- }
459
-
460
- &__sort-btn {
461
- width: 112px;
462
- height: 28px;
463
- padding: 4px 42px;
464
- display: inline-block;
465
- background-color: #f4f4f4;
466
- color: #4a4a4a;
467
-
468
- &:hover {
469
- background-color: #fafafa;
470
- }
471
-
472
- &--active {
473
- color: @--theme-blue--;
474
- border-color: #eef3ff;
475
- background: #f4f7fe;
476
-
477
- &:hover {
478
- background-color: #f4f7fe;
479
- }
480
- }
481
- }
482
-
483
- &__filter-checkbox-group {
484
- display: flex;
485
- flex-direction: column;
486
- justify-content: flex-start;
487
- align-items: flex-start;
488
- }
489
-
490
- &__filter-checkbox {
491
- margin-top: 10px;
492
- font-size: 14px;
493
-
494
- &:first-child {
495
- margin-top: 0;
496
- }
497
- }
498
-
499
- &__footer {
500
- display: flex;
501
- height: 47px;
502
- border-top: 1px solid #d6dbe3;
503
- justify-content: flex-end;
504
- align-items: center;
505
- padding: 0 15px;
506
- }
507
-
508
- &__reset-btn,
509
- &__confirm-btn {
510
- width: 50px;
511
- height: 28px;
512
- margin-left: 10px;
513
- display: flex;
514
- justify-content: center;
515
- align-items: center;
516
- border-radius: 2px;
517
- font-size: 14px;
518
- font-weight: 400;
519
- }
520
-
521
- &__confirm-btn {
522
- background-color: @--theme-blue--;
523
- border-color: @--theme-blue--;
524
- }
525
-
526
- .el-checkbox__input.is-checked .el-checkbox__inner,
527
- .el-radio__input.is-checked .el-radio__inner {
528
- background: #2468f2;
529
- border-color: #2468f2;
530
- }
531
- }
532
-
533
- .btn-pointer {
534
- cursor: pointer;
535
- }
536
-
537
- .operation-popover {
538
- min-width: 120px;
539
- padding: 0;
540
-
541
- &__operation {
542
- display: flex;
543
- flex-direction: column;
544
- justify-content: space-between;
545
- align-items: center;
546
- }
547
-
548
- &__operation-reference {
549
- display: inline-block;
550
-
551
- &--active {
552
- color: @--theme-blue--;
553
- }
554
-
555
- .el-button {
556
- background: transparent;
557
- border: none;
558
- padding: 0;
559
- font-weight: 400;
560
- color: #13161b;
561
- font-size: 14px;
562
-
563
- &:focus {
564
- color: @--theme-blue--;
565
- }
566
- }
567
- }
568
-
569
- &__operation-item {
570
- height: 40px;
571
- line-height: 40px;
572
- width: 100%;
573
- text-align: center;
574
- color: #1f1f1f;
575
- cursor: pointer;
576
-
577
- &:hover {
578
- background: #f4f7fe;
579
- }
580
- }
581
-
582
- &__save-cancel {
583
- display: flex;
584
- justify-content: flex-start;
585
- align-items: center;
586
- color: @--theme-blue--;
587
- }
588
-
589
- &__btn {
590
- cursor: pointer;
591
- &:first-child {
592
- margin-right: 15px;
593
- }
594
- }
595
-
596
- &__operation-btn {
597
- &--active {
598
- color: @--theme-blue-- !important;
599
- }
600
- }
601
- }
602
-
603
- .pagination-wrap {
604
- display: flex;
605
- justify-content: space-between;
606
- align-items: center;
607
- margin-top: 12px;
608
-
609
- & .el-pagination {
610
- padding: 0;
611
-
612
- .el-pager li.number {
613
- background-color: #fff;
614
- border: 1px solid #d6dbe3;
615
- font-weight: 400;
616
- font-size: 14px;
617
-
618
- &.active {
619
- background-color: @--theme-blue--;
620
- color: #fff;
621
- }
622
- }
623
-
624
- & .btn-prev,
625
- & .btn-next,
626
- & .el-icon-more {
627
- background-color: #fff !important;
628
- }
629
- }
630
- }
631
-
632
- .custom-row-classname-pinned {
633
- & td:last-child {
634
- background-image: url("./pin-top.png");
635
- background-repeat: no-repeat;
636
- background-size: 24px 24px;
637
- background-position: right 0 top 0;
638
- }
639
- }
640
-
641
-
642
-
643
- .editable-table {
644
- & table th {
645
- font-size: 14px;
646
- font-weight: bold;
647
- }
648
-
649
- & table td {
650
- font-size: 12px;
651
- color: #13161b;
652
- }
653
- }
654
-
655
- .no-inner-cell-border {
656
- & .cell {
657
- border: none !important;
658
- }
659
- }
660
-
661
- .editable-table-drag-icon {
662
- position: relative;
663
- width: 5px;
664
- height: 2px;
665
- border-left: 2px solid #989ea9;
666
- border-right: 2px solid #989ea9;
667
- cursor: grab;
668
-
669
- &::after,
670
- &::before {
671
- position: absolute;
672
- content: "";
673
- box-sizing: border-box;
674
- left: -2px;
675
- display: block;
676
- width: 5px;
677
- height: 2px;
678
- border-left: 2px solid #989ea9;
679
- border-right: 2px solid #989ea9;
680
- }
681
-
682
- &::after {
683
- top: -4px;
684
- }
685
-
686
- &::before {
687
- bottom: -4px;
688
- }
689
- }
690
-
691
- .el-dialog__header {
692
- display: flex;
693
- justify-content: space-between;
694
- align-items: center;
695
- font-size: 14px;
696
- background-color: #eeeeee;
697
- height: 36px;
698
- line-height: 36px;
699
- padding: 0 20px;
700
- }
701
-
702
- .el-dialog__headerbtn {
703
- position: inherit;
704
- }
705
-
706
- .el-dialog__title {
707
- font-size: 14px;
708
- line-height: 20px;
709
- color: #333333;
710
- }
711
-
712
- .el-dialog__footer {
713
- background-color: #eeeeee;
714
- height: 42px;
715
- line-height: 42px;
716
- padding: 0 20px;
717
-
718
- & .el-button {
719
- height: 24px;
720
- // line-height: 24px;
721
- font-size: 12px;
722
- padding: 5px 12px;
723
- }
724
- }
1
+ @--theme-blue--: #2468f2;
2
+
3
+ .editable-table {
4
+ &__selected-color {
5
+ position: absolute;
6
+ left: 0;
7
+ top: 0;
8
+ right: 0;
9
+ bottom: 0;
10
+ }
11
+
12
+ &__color-title {
13
+ text-align: center;
14
+ width: 28px;
15
+ padding: 0 !important;
16
+ }
17
+
18
+ &__color-icon {
19
+ padding: 0 !important;
20
+ margin-left: 8px;
21
+ width: 8px;
22
+ height: 8px;
23
+ border-radius: 50%;
24
+ // left: 5px;
25
+ position: relative;
26
+ background-color: #fcae46;
27
+ cursor: pointer;
28
+ overflow: visible !important;
29
+
30
+ &::before {
31
+ background-color: #fc6559;
32
+ left: -10px;
33
+ z-index: 2;
34
+ }
35
+
36
+ &::after {
37
+ background-color: #409eff;
38
+ left: -5px;
39
+ z-index: 1;
40
+ }
41
+
42
+ &::before,
43
+ &::after {
44
+ content: "";
45
+ width: 8px;
46
+ height: 8px;
47
+ border-radius: 50%;
48
+ position: absolute;
49
+ top: 0;
50
+ }
51
+ }
52
+
53
+ &__color-column,
54
+ &__drag-cell {
55
+ padding: 0 !important;
56
+
57
+ & .cell {
58
+ padding: 0 !important;
59
+ height: 100%;
60
+
61
+ display: flex !important;
62
+ justify-content: center;
63
+ align-items: center;
64
+ text-align: center;
65
+ }
66
+ }
67
+
68
+ &__color-column {
69
+ & .cell {
70
+ padding: 0 !important;
71
+ border: none !important;
72
+ }
73
+ }
74
+
75
+ &__drag-line {
76
+ border: none;
77
+ border-top: 1px solid #13161b;
78
+ height: 4px;
79
+ width: 15px;
80
+
81
+ &:last-child {
82
+ height: 1px;
83
+ }
84
+ }
85
+
86
+ &__drag-icon {
87
+ width: 100%;
88
+ height: 100%;
89
+ min-height: 45px;
90
+ cursor: grab;
91
+ display: flex;
92
+ flex-direction: column;
93
+ justify-content: center;
94
+ align-items: center;
95
+ }
96
+
97
+ &__sort-icon {
98
+ position: relative;
99
+ width: 12px;
100
+ height: 12px;
101
+ border: 1px solid #7b7b7b;
102
+ padding: 0 !important;
103
+ margin-left: 4px;
104
+ border-radius: 50%;
105
+
106
+ &::after {
107
+ position: absolute;
108
+ top: 50%;
109
+ left: 50%;
110
+ content: "";
111
+ width: 3px;
112
+ height: 3px;
113
+ border-bottom: 1px solid;
114
+ border-left: 1px solid;
115
+ border-color: #7b7b7b;
116
+ transform: translate(-50%, -55%) rotate(-45deg);
117
+ }
118
+
119
+ &--active {
120
+ border: 1px solid @--theme-blue--;
121
+
122
+ &::after {
123
+ border-color: @--theme-blue--;
124
+ }
125
+ }
126
+ }
127
+
128
+ &__sort-reference {
129
+ display: inline-flex;
130
+ justify-content: flex-start;
131
+ align-items: center;
132
+
133
+ &:hover {
134
+ cursor: pointer;
135
+ }
136
+
137
+ &--active {
138
+ color: @--theme-blue--;
139
+ }
140
+ }
141
+
142
+ &__sort-filter {
143
+ padding: 0 !important;
144
+ }
145
+
146
+ &__pin-top {
147
+ width: 24px;
148
+ height: 24px;
149
+ color: white;
150
+ background-color: #969ca4;
151
+ }
152
+
153
+ & .el-table td,
154
+ .el-table th.is-leaf {
155
+ border-bottom: 1px solid #dfe3ec;
156
+ }
157
+
158
+ & .el-table {
159
+ &__expanded-cell {
160
+ background-color: #fafafa;
161
+ }
162
+ }
163
+
164
+ & .el-table tr td {
165
+ min-height: 45px;
166
+ border-top: none;
167
+ border-left: none;
168
+ border-right: none;
169
+ }
170
+
171
+ & thead tr th {
172
+ background-color: #f3f4f8 !important;
173
+ border-right: none !important;
174
+
175
+ & .cell {
176
+ color: #13161b;
177
+ }
178
+
179
+ &:not(:last-child) .cell {
180
+ border-right: 2px #e4e8ef solid;
181
+ }
182
+ }
183
+
184
+ .el-table-filter,
185
+ th.el-table__cell .el-table__column-filter-trigger,
186
+ th.is-sortable .caret-wrapper {
187
+ display: none;
188
+ }
189
+
190
+ .el-table__body tr.current-row > td,
191
+ .el-table__body tr.hover-row > td {
192
+ background-color: #fafafa;
193
+ }
194
+
195
+ table tbody tr td {
196
+ & .el-date-editor.el-input {
197
+ width: 100%;
198
+ }
199
+
200
+ & .cell {
201
+ font-size: 12px;
202
+ }
203
+ }
204
+
205
+ .el-table__fixed-body-wrapper {
206
+ background: #fff;
207
+ }
208
+
209
+ .el-checkbox__input.is-checked .el-checkbox__inner,
210
+ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
211
+ background: @--theme-blue--;
212
+ border-color: @--theme-blue--;
213
+ }
214
+ }
215
+
216
+ .view-setting {
217
+ &__btn-wrapper {
218
+ display: flex;
219
+ justify-content: flex-end;
220
+ }
221
+
222
+ &__btn {
223
+ display: flex;
224
+ justify-content: flex-end;
225
+ align-items: center;
226
+ font-weight: 400;
227
+ font-size: 14px;
228
+ color: @--theme-blue--;
229
+ margin-bottom: 17px;
230
+ margin-right: 20px;
231
+ }
232
+
233
+ &__btn-text {
234
+ margin-left: 4px;
235
+ }
236
+
237
+ &__dialog {
238
+ padding: 0px;
239
+
240
+ .el-dialog__body {
241
+ max-height: 70vh;
242
+ }
243
+
244
+ .el-dialog__body {
245
+ padding: 0;
246
+ }
247
+
248
+ & .el-button--primary {
249
+ background-color: @--theme-blue-- !important;
250
+ border-color: @--theme-blue-- !important;
251
+ }
252
+
253
+ & .el-checkbox.is-checked:not(.is-disabled) {
254
+ .el-checkbox__input .el-checkbox__inner {
255
+ background-color: @--theme-blue-- !important;
256
+ border-color: @--theme-blue-- !important;
257
+ }
258
+ .el-checkbox__label {
259
+ color: @--theme-blue-- !important;
260
+ }
261
+ }
262
+
263
+ & .el-button {
264
+ border-radius: 2px;
265
+ }
266
+ }
267
+
268
+ &__content {
269
+ display: flex;
270
+ min-height: 500px;
271
+ }
272
+
273
+ &__content-left {
274
+ min-width: 417px;
275
+ width: 417px;
276
+
277
+ display: flex;
278
+ flex-direction: column;
279
+ justify-content: flex-start;
280
+ align-items: flex-start;
281
+ }
282
+
283
+ &__content-left-item {
284
+ width: 130px;
285
+ margin-bottom: 15px;
286
+ }
287
+
288
+ &__content-right {
289
+ border-left: 1px solid #d9d9d9;
290
+ display: flex;
291
+ flex-direction: column;
292
+ justify-content: flex-start;
293
+ align-items: flex-start;
294
+ }
295
+
296
+ &__content-right-title,
297
+ &__content-left-title {
298
+ border-bottom: 1px solid #d9d9d9;
299
+ width: 100%;
300
+ height: 46px;
301
+ display: flex;
302
+ justify-content: flex-start;
303
+ align-items: center;
304
+ padding-left: 20px;
305
+ }
306
+
307
+ &__selected-count {
308
+ margin-left: 20px;
309
+ }
310
+
311
+ &__checkbox-wrapper {
312
+ padding-left: 37px;
313
+ padding-top: 24px;
314
+ }
315
+
316
+ &__content-right {
317
+ flex-grow: 1;
318
+ }
319
+
320
+ &__content-right-frize {
321
+ width: 100%;
322
+ display: flex;
323
+ justify-content: flex-start;
324
+ align-items: center;
325
+ height: 50px;
326
+ border-bottom: 1px solid #d9d9d9;
327
+ padding-left: 20px;
328
+ }
329
+
330
+ &__content-right-input {
331
+ width: 140px;
332
+ margin: 0 4px;
333
+
334
+ .el-input__inner {
335
+ height: 28px;
336
+ line-height: 28px;
337
+ }
338
+ }
339
+
340
+ &__content-right-selected {
341
+ display: flex;
342
+ justify-content: flex-start;
343
+ flex-direction: column;
344
+ align-items: flex-start;
345
+ width: 100%;
346
+ flex-grow: 1;
347
+ padding-left: 18px;
348
+ padding-top: 17px;
349
+ padding-right: 23px;
350
+ }
351
+
352
+ &__selected-item-left {
353
+ display: flex;
354
+ justify-content: flex-start;
355
+ align-items: center;
356
+ }
357
+
358
+ &__icon-wrapper {
359
+ width: 14px;
360
+ height: 14px;
361
+ line-height: 14px;
362
+ padding: 2px 4px;
363
+ margin-right: 10px;
364
+ cursor: grab;
365
+ display: flex;
366
+ flex-direction: column;
367
+ justify-content: center;
368
+ align-items: center;
369
+ }
370
+
371
+ &__selected-item {
372
+ display: flex;
373
+ justify-content: space-between;
374
+ align-items: center;
375
+ line-height: 30px;
376
+ height: 30px;
377
+ width: 100%;
378
+ }
379
+
380
+ &__selected-item-close {
381
+ cursor: pointer;
382
+ &--disabled {
383
+ cursor: not-allowed;
384
+ color: #989ea9;
385
+ }
386
+ }
387
+ }
388
+
389
+ .color-popover {
390
+ min-width: 102px;
391
+ width: 102px;
392
+ padding: 0;
393
+
394
+ & .popper__arrow::after {
395
+ left: 0 !important;
396
+ }
397
+ }
398
+
399
+ .color-list {
400
+ color: #fff;
401
+ width: 102px;
402
+ border-radius: 5px;
403
+ overflow: hidden;
404
+ &__item {
405
+ display: inline-block;
406
+ width: 100%;
407
+ height: 27px;
408
+ line-height: 27px;
409
+ padding-left: 6px;
410
+ }
411
+ }
412
+
413
+ .sort-filter {
414
+ width: 258px;
415
+ padding: 0;
416
+
417
+ &__column-title {
418
+ font-size: 14px;
419
+ font-weight: 600;
420
+ height: 40px;
421
+ line-height: 40px;
422
+ text-align: center;
423
+ border-bottom: 1px solid #d6dbe3;
424
+ }
425
+
426
+ &__filter,
427
+ &__sort,
428
+ &__search {
429
+ padding: 14px;
430
+ }
431
+
432
+ &__filter {
433
+ padding-top: 0;
434
+ }
435
+
436
+ &__filter-title,
437
+ &__sort-title,
438
+ &__search-title {
439
+ font-weight: 600;
440
+ font-size: 14px;
441
+ color: #1f1f1f;
442
+ margin-bottom: 10px;
443
+ }
444
+
445
+ &__search-input {
446
+ & .el-input__inner {
447
+ height: 32px;
448
+ }
449
+ }
450
+
451
+ &__filter-title {
452
+ border-top: 1px solid #f3f3f3;
453
+ padding-top: 14px;
454
+ }
455
+
456
+ &__sort-btns {
457
+ display: flex;
458
+ justify-content: space-between;
459
+ align-items: center;
460
+
461
+ & .el-button {
462
+ border: none;
463
+ }
464
+ }
465
+
466
+ &__sort-btn {
467
+ width: 112px;
468
+ height: 28px;
469
+ padding: 4px 42px;
470
+ display: inline-block;
471
+ background-color: #f4f4f4;
472
+ color: #4a4a4a;
473
+
474
+ &:hover {
475
+ background-color: #fafafa;
476
+ }
477
+
478
+ &--active {
479
+ color: @--theme-blue--;
480
+ border-color: #eef3ff;
481
+ background: #f4f7fe;
482
+
483
+ &:hover {
484
+ background-color: #f4f7fe;
485
+ }
486
+ }
487
+ }
488
+
489
+ &__filter-checkbox-group {
490
+ display: flex;
491
+ flex-direction: column;
492
+ justify-content: flex-start;
493
+ align-items: flex-start;
494
+ }
495
+
496
+ &__filter-checkbox {
497
+ margin-top: 10px;
498
+ font-size: 14px;
499
+
500
+ &:first-child {
501
+ margin-top: 0;
502
+ }
503
+ }
504
+
505
+ &__footer {
506
+ display: flex;
507
+ height: 47px;
508
+ border-top: 1px solid #d6dbe3;
509
+ justify-content: flex-end;
510
+ align-items: center;
511
+ padding: 0 15px;
512
+ }
513
+
514
+ &__reset-btn,
515
+ &__confirm-btn {
516
+ width: 50px;
517
+ height: 28px;
518
+ margin-left: 10px;
519
+ display: flex;
520
+ justify-content: center;
521
+ align-items: center;
522
+ border-radius: 2px;
523
+ font-size: 14px;
524
+ font-weight: 400;
525
+ }
526
+
527
+ &__confirm-btn {
528
+ background-color: @--theme-blue--;
529
+ border-color: @--theme-blue--;
530
+ }
531
+
532
+ .el-checkbox__input.is-checked .el-checkbox__inner,
533
+ .el-radio__input.is-checked .el-radio__inner {
534
+ background: @--theme-blue--;
535
+ border-color: @--theme-blue--;
536
+ }
537
+ }
538
+
539
+ .btn-pointer {
540
+ cursor: pointer;
541
+ }
542
+
543
+ .operation-popover {
544
+ min-width: 120px;
545
+ padding: 0;
546
+
547
+ &__operation {
548
+ display: flex;
549
+ flex-direction: column;
550
+ justify-content: space-between;
551
+ align-items: center;
552
+ }
553
+
554
+ &__operation-reference {
555
+ display: inline-block;
556
+
557
+ &--active {
558
+ color: @--theme-blue--;
559
+ }
560
+
561
+ .el-button {
562
+ background: transparent;
563
+ border: none;
564
+ padding: 0;
565
+ font-weight: 400;
566
+ color: #13161b;
567
+ font-size: 14px;
568
+
569
+ &:focus {
570
+ color: @--theme-blue--;
571
+ }
572
+ }
573
+ }
574
+
575
+ &__operation-item {
576
+ height: 40px;
577
+ line-height: 40px;
578
+ width: 100%;
579
+ text-align: center;
580
+ color: #1f1f1f;
581
+ cursor: pointer;
582
+
583
+ &:hover {
584
+ background: #f4f7fe;
585
+ }
586
+ }
587
+
588
+ &__save-cancel {
589
+ display: flex;
590
+ justify-content: flex-start;
591
+ align-items: center;
592
+ color: @--theme-blue--;
593
+ }
594
+
595
+ &__btn {
596
+ cursor: pointer;
597
+ &:first-child {
598
+ margin-right: 15px;
599
+ }
600
+ }
601
+
602
+ &__operation-btn {
603
+ &--active {
604
+ color: @--theme-blue-- !important;
605
+ }
606
+ }
607
+ }
608
+
609
+ .pagination-wrap {
610
+ display: flex;
611
+ justify-content: space-between;
612
+ align-items: center;
613
+ margin-top: 12px;
614
+
615
+ & .el-pagination {
616
+ padding: 0;
617
+
618
+ .el-pager li.number {
619
+ background-color: #fff;
620
+ border: 1px solid #d6dbe3;
621
+ font-weight: 400;
622
+ font-size: 14px;
623
+
624
+ &.active {
625
+ background-color: @--theme-blue--;
626
+ color: #fff;
627
+ }
628
+ }
629
+
630
+ & .btn-prev,
631
+ & .btn-next,
632
+ & .el-icon-more {
633
+ background-color: #fff !important;
634
+ }
635
+ }
636
+ }
637
+
638
+ .custom-row-classname-pinned {
639
+ & td:last-child {
640
+ background-image: url("./pin-top.png");
641
+ background-repeat: no-repeat;
642
+ background-size: 24px 24px;
643
+ background-position: right 0 top 0;
644
+ }
645
+ }
646
+
647
+
648
+
649
+ .editable-table {
650
+ & table th {
651
+ font-size: 12px;
652
+ font-weight: bold;
653
+ }
654
+
655
+ & table td {
656
+ font-size: 12px;
657
+ color: #13161b;
658
+ }
659
+ .el-table th > .cell {
660
+ color: #5b6984
661
+ }
662
+ }
663
+
664
+ .no-inner-cell-border {
665
+ & .cell {
666
+ border: none !important;
667
+ }
668
+ }
669
+
670
+ .editable-table-drag-icon {
671
+ position: relative;
672
+ width: 5px;
673
+ height: 2px;
674
+ border-left: 2px solid #989ea9;
675
+ border-right: 2px solid #989ea9;
676
+ cursor: grab;
677
+
678
+ &::after,
679
+ &::before {
680
+ position: absolute;
681
+ content: "";
682
+ box-sizing: border-box;
683
+ left: -2px;
684
+ display: block;
685
+ width: 5px;
686
+ height: 2px;
687
+ border-left: 2px solid #989ea9;
688
+ border-right: 2px solid #989ea9;
689
+ }
690
+
691
+ &::after {
692
+ top: -4px;
693
+ }
694
+
695
+ &::before {
696
+ bottom: -4px;
697
+ }
698
+ }
699
+
700
+ .el-dialog__header {
701
+ display: flex;
702
+ justify-content: space-between;
703
+ align-items: center;
704
+ font-size: 14px;
705
+ background-color: #eeeeee;
706
+ height: 36px;
707
+ line-height: 36px;
708
+ padding: 0 20px;
709
+ }
710
+
711
+ .el-dialog__headerbtn {
712
+ position: inherit;
713
+ }
714
+
715
+ .el-dialog__title {
716
+ font-size: 14px;
717
+ line-height: 20px;
718
+ color: #333333;
719
+ }
720
+
721
+ .el-dialog__footer {
722
+ background-color: #eeeeee;
723
+ height: 42px;
724
+ line-height: 42px;
725
+ padding: 0 20px;
726
+
727
+ & .el-button {
728
+ height: 24px;
729
+ // line-height: 24px;
730
+ font-size: 12px;
731
+ padding: 5px 12px;
732
+ }
733
+ }