n20-common-lib 3.0.2 → 3.0.4

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "n20-common-lib",
3
- "version": "3.0.2",
3
+ "version": "3.0.4",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -7,3 +7,283 @@
7
7
  max-height: 300px;
8
8
  overflow-y: auto;
9
9
  }
10
+ // 高级筛选
11
+ .ProFilterView {
12
+ width: 100%;
13
+ font-size: 14px;
14
+ .top {
15
+ padding: 12px 16px;
16
+ border-bottom: 1px solid #e5e6eb !important;
17
+ }
18
+ .filter {
19
+ padding: 12px 16px 4px;
20
+ border-bottom: 1px solid #e5e6eb !important;
21
+ }
22
+ .flex-item {
23
+ border-bottom: 1px solid var(--button-disabled-background-color);
24
+ padding: 0 8px;
25
+ margin-top: 8px;
26
+ }
27
+ .add {
28
+ cursor: pointer;
29
+ margin-top: 8px;
30
+ img {
31
+ margin-right: 12px;
32
+ }
33
+ padding: 8px;
34
+ height: 20px;
35
+ line-height: 20px;
36
+ }
37
+ .add:hover {
38
+ border-radius: 2px;
39
+ background: var(--fill-1, #f7f8fa);
40
+ }
41
+ .botton {
42
+ padding: 8px;
43
+ border-radius: 4px;
44
+ background: var(--fill-2, #f2f3f5);
45
+ border: none;
46
+ }
47
+ .activiti {
48
+ background: var(--color-primary-light-9);
49
+ border: var(--color-primary-light-9);
50
+ color: var(--color-primary);
51
+ }
52
+ /deep/.n20-drag-list-item {
53
+ justify-content: start;
54
+ padding: 2px 0;
55
+ height: 28px;
56
+ }
57
+ .list-item {
58
+ width: 100%;
59
+ display: flex;
60
+ align-items: center;
61
+ justify-content: start;
62
+ padding: 4px;
63
+ cursor: pointer;
64
+ border-radius: 2px;
65
+
66
+ &:hover {
67
+ color: var(--color-primary);
68
+ }
69
+
70
+ &.is-selected {
71
+ color: var(--color-primary);
72
+ }
73
+
74
+ .selected-icon {
75
+ color: var(--color-primary);
76
+ }
77
+ }
78
+ /deep/.el-form-item__content {
79
+ margin-left: 0;
80
+ }
81
+ }
82
+ // 高级查询
83
+ .data-scope {
84
+ background: var(--fill-1, #f5f7fa);
85
+ padding: 16px;
86
+ border-radius: 4px;
87
+ max-height: 450px;
88
+ overflow-y: auto;
89
+ .children {
90
+ margin-left: 80px;
91
+ border: 1px dashed #e5e6eb;
92
+ }
93
+ .view-name {
94
+ margin-bottom: 16px;
95
+ }
96
+
97
+ .view-name-input {
98
+ width: 100%;
99
+ }
100
+
101
+ .condition-group {
102
+ margin-bottom: 16px;
103
+ padding-left: 32px;
104
+ position: relative;
105
+ }
106
+
107
+ .delete-group-btn-top {
108
+ position: absolute;
109
+ top: -16px;
110
+ right: -6px;
111
+ color: #4e5969;
112
+ z-index: 1;
113
+ }
114
+
115
+ .delete-group-btn-top :hover {
116
+ background: var(--color-danger-light-9, #fef0f0);
117
+ }
118
+ .conditions {
119
+ padding: 12px;
120
+ position: relative;
121
+ display: flex;
122
+ height: calc(44px * var(--condition-count, 1) - 12px);
123
+ .line {
124
+ width: 1px;
125
+ height: calc(44px * var(--line-condition-count, 1) - 36px);
126
+ background-color: #606266;
127
+ margin-right: 48px;
128
+ opacity: calc(1 - var(--is-single, 0));
129
+ margin-top: 12px;
130
+ position: relative;
131
+ .logic-select {
132
+ width: 60px;
133
+ position: absolute;
134
+ top: 50%;
135
+ left: 50%;
136
+ transform: translate(-50%, -50%);
137
+ display: flex;
138
+ border-radius: 4px;
139
+ overflow: hidden;
140
+ border: 1px solid #dcdfe6;
141
+
142
+ .logic-option {
143
+ flex: 1;
144
+ text-align: center;
145
+ padding: 4px 0;
146
+ font-size: 12px;
147
+ cursor: pointer;
148
+ background-color: #fff;
149
+
150
+ &.active {
151
+ background-color: var(--color-primary);
152
+ color: #fff;
153
+ }
154
+ }
155
+ }
156
+
157
+ &::before {
158
+ content: '';
159
+ position: absolute;
160
+ top: 0;
161
+ left: 0;
162
+ width: 8px;
163
+ height: 1px;
164
+ background-color: #606266;
165
+ }
166
+
167
+ &::after {
168
+ content: '';
169
+ position: absolute;
170
+ bottom: 0;
171
+ left: 0;
172
+ width: 8px;
173
+ height: 1px;
174
+ background-color: #606266;
175
+ }
176
+ }
177
+ .condition-item {
178
+ margin-bottom: 12px;
179
+ &:last-child {
180
+ margin-bottom: 0;
181
+ }
182
+ }
183
+
184
+ .condition-row {
185
+ display: flex;
186
+ align-items: center;
187
+ gap: 12px;
188
+ }
189
+ }
190
+
191
+ .group-header {
192
+ display: flex;
193
+ align-items: center;
194
+ justify-content: space-between;
195
+ margin-bottom: 12px;
196
+ padding: 8px;
197
+ background: var(--fill-2, #f2f3f5);
198
+ border-radius: 4px;
199
+ }
200
+
201
+ .header-left {
202
+ display: flex;
203
+ align-items: center;
204
+ gap: 12px;
205
+ }
206
+
207
+ .group-logic-label,
208
+ .condition-logic-label {
209
+ display: flex;
210
+ align-items: center;
211
+ gap: 4px;
212
+ }
213
+
214
+ .logic-text {
215
+ font-size: 14px;
216
+ color: var(--color-text-regular, #606266);
217
+ }
218
+
219
+ .delete-group-btn {
220
+ color: var(--color-danger, #f56c6c);
221
+ padding: 4px 8px;
222
+ }
223
+
224
+ .delete-group-btn:hover {
225
+ background: var(--color-danger-light-9, #fef0f0);
226
+ }
227
+
228
+ .field-select,
229
+ .operator-select {
230
+ width: 150px;
231
+ }
232
+
233
+ .value-inputs {
234
+ flex: 1;
235
+ display: flex;
236
+ align-items: center;
237
+ gap: 8px;
238
+ }
239
+
240
+ .value-select,
241
+ .text-input {
242
+ width: 200px;
243
+ }
244
+
245
+ .date-picker {
246
+ width: 300px;
247
+ }
248
+
249
+ .number-input {
250
+ width: 200px;
251
+ }
252
+
253
+ .number-range {
254
+ display: flex;
255
+ align-items: center;
256
+ gap: 8px;
257
+ }
258
+
259
+ .delete-btn {
260
+ padding: 8px 2px;
261
+ margin-left: 0;
262
+ color: #4e5969;
263
+ }
264
+
265
+ .delete-btn:hover {
266
+ background: var(--color-danger-light-9, #fef0f0);
267
+ }
268
+
269
+ .add-btn {
270
+ padding: 8px 2px;
271
+ margin-right: -8px;
272
+ color: #4e5969;
273
+ }
274
+
275
+ .add-btn:hover {
276
+ background: var(--color-primary-light-9, #ecf5ff);
277
+ }
278
+ .group-actions {
279
+ display: flex;
280
+ gap: 12px;
281
+ margin-top: 8px;
282
+ }
283
+
284
+ .add-condition-btn,
285
+ .add-group-btn {
286
+ color: var(--color-primary, #409eff);
287
+ font-size: 14px;
288
+ }
289
+ }
@@ -181,8 +181,20 @@
181
181
  </template>
182
182
 
183
183
  <script>
184
+ import ClDatePicker from '@/components/cl-date-picker/index.vue'
185
+ import ClDatePickerPor from '@/components/cl-date-picker-por/index.vue'
186
+ import ClInputNumber from '@/components/cl-input-number/index.vue'
187
+ import ClInputNumberRange from '@/components/cl-input-number-range/index.vue'
188
+ import ClInputSearch from '@/components/cl-input-search/index.vue'
184
189
  export default {
185
190
  name: 'AdvancedQuery',
191
+ components: {
192
+ ClDatePicker,
193
+ ClDatePickerPor,
194
+ ClInputNumber,
195
+ ClInputNumberRange,
196
+ ClInputSearch
197
+ },
186
198
  props: {
187
199
  value: {
188
200
  type: Array,
@@ -515,213 +527,3 @@ export default {
515
527
  }
516
528
  }
517
529
  </script>
518
-
519
- <style lang="scss" scoped>
520
- .data-scope {
521
- background: var(--fill-1, #f5f7fa);
522
- padding: 16px;
523
- border-radius: 4px;
524
- max-height: 450px;
525
- overflow-y: auto;
526
- }
527
- .children {
528
- margin-left: 80px;
529
- border: 1px dashed #e5e6eb;
530
- }
531
- .view-name {
532
- margin-bottom: 16px;
533
- }
534
-
535
- .view-name-input {
536
- width: 100%;
537
- }
538
-
539
- .condition-group {
540
- margin-bottom: 16px;
541
- padding-left: 32px;
542
- position: relative;
543
- }
544
-
545
- .delete-group-btn-top {
546
- position: absolute;
547
- top: -16px;
548
- right: -6px;
549
- color: #4e5969;
550
- z-index: 1;
551
- }
552
-
553
- .delete-group-btn-top :hover {
554
- background: var(--color-danger-light-9, #fef0f0);
555
- }
556
- .conditions {
557
- padding: 12px;
558
- position: relative;
559
- display: flex;
560
- height: calc(44px * var(--condition-count, 1) - 12px);
561
- .line {
562
- width: 1px;
563
- height: calc(44px * var(--line-condition-count, 1) - 36px);
564
- background-color: #606266;
565
- margin-right: 48px;
566
- opacity: calc(1 - var(--is-single, 0));
567
- margin-top: 12px;
568
- position: relative;
569
- .logic-select {
570
- width: 60px;
571
- position: absolute;
572
- top: 50%;
573
- left: 50%;
574
- transform: translate(-50%, -50%);
575
- display: flex;
576
- border-radius: 4px;
577
- overflow: hidden;
578
- border: 1px solid #dcdfe6;
579
-
580
- .logic-option {
581
- flex: 1;
582
- text-align: center;
583
- padding: 4px 0;
584
- font-size: 12px;
585
- cursor: pointer;
586
- background-color: #fff;
587
-
588
- &.active {
589
- background-color: var(--color-primary);
590
- color: #fff;
591
- }
592
- }
593
- }
594
-
595
- &::before {
596
- content: '';
597
- position: absolute;
598
- top: 0;
599
- left: 0;
600
- width: 8px;
601
- height: 1px;
602
- background-color: #606266;
603
- }
604
-
605
- &::after {
606
- content: '';
607
- position: absolute;
608
- bottom: 0;
609
- left: 0;
610
- width: 8px;
611
- height: 1px;
612
- background-color: #606266;
613
- }
614
- }
615
- .condition-item {
616
- margin-bottom: 12px;
617
- &:last-child {
618
- margin-bottom: 0;
619
- }
620
- }
621
-
622
- .condition-row {
623
- display: flex;
624
- align-items: center;
625
- gap: 12px;
626
- }
627
- }
628
-
629
- .group-header {
630
- display: flex;
631
- align-items: center;
632
- justify-content: space-between;
633
- margin-bottom: 12px;
634
- padding: 8px;
635
- background: var(--fill-2, #f2f3f5);
636
- border-radius: 4px;
637
- }
638
-
639
- .header-left {
640
- display: flex;
641
- align-items: center;
642
- gap: 12px;
643
- }
644
-
645
- .group-logic-label,
646
- .condition-logic-label {
647
- display: flex;
648
- align-items: center;
649
- gap: 4px;
650
- }
651
-
652
- .logic-text {
653
- font-size: 14px;
654
- color: var(--color-text-regular, #606266);
655
- }
656
-
657
- .delete-group-btn {
658
- color: var(--color-danger, #f56c6c);
659
- padding: 4px 8px;
660
- }
661
-
662
- .delete-group-btn:hover {
663
- background: var(--color-danger-light-9, #fef0f0);
664
- }
665
-
666
- .field-select,
667
- .operator-select {
668
- width: 150px;
669
- }
670
-
671
- .value-inputs {
672
- flex: 1;
673
- display: flex;
674
- align-items: center;
675
- gap: 8px;
676
- }
677
-
678
- .value-select,
679
- .text-input {
680
- width: 200px;
681
- }
682
-
683
- .date-picker {
684
- width: 300px;
685
- }
686
-
687
- .number-input {
688
- width: 200px;
689
- }
690
-
691
- .number-range {
692
- display: flex;
693
- align-items: center;
694
- gap: 8px;
695
- }
696
-
697
- .delete-btn {
698
- padding: 8px 2px;
699
- margin-left: 0;
700
- color: #4e5969;
701
- }
702
-
703
- .delete-btn:hover {
704
- background: var(--color-danger-light-9, #fef0f0);
705
- }
706
-
707
- .add-btn {
708
- padding: 8px 2px;
709
- margin-right: -8px;
710
- color: #4e5969;
711
- }
712
-
713
- .add-btn:hover {
714
- background: var(--color-primary-light-9, #ecf5ff);
715
- }
716
- .group-actions {
717
- display: flex;
718
- gap: 12px;
719
- margin-top: 8px;
720
- }
721
-
722
- .add-condition-btn,
723
- .add-group-btn {
724
- color: var(--color-primary, #409eff);
725
- font-size: 14px;
726
- }
727
- </style>
@@ -143,10 +143,18 @@
143
143
 
144
144
  <script>
145
145
  import advancedQuery from './advancedQuery.vue'
146
+ import ClAdvancedFilter from '@/components/cl-advanced-filter/index.vue'
147
+ import ClInputSearch from '@/components/cl-input-search/index.vue'
148
+ import ClDragList from '@/components/cl-drag-list/index.vue'
149
+ import ClDialog from '@/components/cl-dialog/index.vue'
146
150
  export default {
147
151
  name: 'ProFilterView',
148
152
  components: {
149
- advancedQuery
153
+ advancedQuery,
154
+ ClAdvancedFilter,
155
+ ClInputSearch,
156
+ ClDragList,
157
+ ClDialog
150
158
  },
151
159
  props: {
152
160
  filterId: {
@@ -509,76 +517,3 @@ export default {
509
517
  }
510
518
  }
511
519
  </script>
512
- <style lang="scss" scoped>
513
- .ProFilterView {
514
- width: 100%;
515
- font-size: 14px;
516
- .top {
517
- padding: 12px 16px;
518
- border-bottom: 1px solid #e5e6eb !important;
519
- }
520
- .filter {
521
- padding: 12px 16px 4px;
522
- border-bottom: 1px solid #e5e6eb !important;
523
- }
524
- }
525
- .flex-item {
526
- border-bottom: 1px solid var(--button-disabled-background-color);
527
- padding: 0 8px;
528
- margin-top: 8px;
529
- }
530
- .add {
531
- cursor: pointer;
532
- margin-top: 8px;
533
- img {
534
- margin-right: 12px;
535
- }
536
- padding: 8px;
537
- height: 20px;
538
- line-height: 20px;
539
- }
540
- .add:hover {
541
- border-radius: 2px;
542
- background: var(--fill-1, #f7f8fa);
543
- }
544
- .botton {
545
- padding: 8px;
546
- border-radius: 4px;
547
- background: var(--fill-2, #f2f3f5);
548
- border: none;
549
- }
550
- .activiti {
551
- background: var(--color-primary-light-9);
552
- border: var(--color-primary-light-9);
553
- color: var(--color-primary);
554
- }
555
- /deep/.n20-drag-list-item {
556
- justify-content: start;
557
- padding: 2px 0;
558
- height: 28px;
559
- }
560
- .list-item {
561
- width: 100%;
562
- display: flex;
563
- align-items: center;
564
- justify-content: start;
565
- padding: 4px;
566
- cursor: pointer;
567
- border-radius: 2px;
568
-
569
- &:hover {
570
- color: var(--color-primary);
571
- }
572
-
573
- &.is-selected {
574
- color: var(--color-primary);
575
- }
576
-
577
- .selected-icon {
578
- color: var(--color-primary);
579
- }
580
- }
581
- /deep/.el-form-item__content {
582
- margin-left: 0;
583
- }
584
- </style>