vsyswin-ui 0.2.65 → 0.2.68

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 (9) hide show
  1. package/lib/vsyswin-ui.common.js +234 -73
  2. package/lib/vsyswin-ui.common.js.map +1 -1
  3. package/lib/vsyswin-ui.umd.js +234 -73
  4. package/lib/vsyswin-ui.umd.js.map +1 -1
  5. package/lib/vsyswin-ui.umd.min.js +62 -62
  6. package/lib/vsyswin-ui.umd.min.js.map +1 -1
  7. package/package.json +2 -1
  8. package/packages/search-bar/src/search-bar.scss +11 -1
  9. package/packages/search-bar/src/search-bar.vue +134 -48
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vsyswin-ui",
3
- "version": "0.2.65",
3
+ "version": "0.2.68",
4
4
  "main": "lib/vsyswin-ui.umd.min.js",
5
5
  "private": false,
6
6
  "description": "Vue2.x的应用组件库.",
@@ -9,6 +9,7 @@
9
9
  "syswin-ui"
10
10
  ],
11
11
  "scripts": {
12
+ "dev": "vue-cli-service serve",
12
13
  "serve": "vue-cli-service serve",
13
14
  "build": "vue-cli-service build",
14
15
  "lint": "vue-cli-service lint",
package/packages/search-bar/src/search-bar.scss CHANGED
@@ -28,6 +28,11 @@
28
28
  margin-left: 8px;
29
29
  color: $--color-primary;
30
30
  font-size: $--font-size-base;
31
+ &:hover, &:focus {
32
+ background: transparent !important;
33
+ color: #027aff !important;
34
+ border-color: transparent !important;
35
+ }
31
36
  .el-icon-caret-bottom {
32
37
  transition: $--all-transition;
33
38
 
@@ -50,12 +55,17 @@
50
55
  }
51
56
  }
52
57
 
53
- @include e(reset) {
58
+ @include e(reset) {
54
59
  padding: 0;
55
60
  width: $--button-width-base;
56
61
  height: $--button-height-base;
57
62
  font-size: $--button-font-size;
58
63
  border-radius: $--button-border-radius-small;
64
+ &:hover {
65
+ color: #606266 !important;
66
+ border-color: #DCDFE6 !important;
67
+ background: #fff !important;
68
+ }
59
69
  }
60
70
 
61
71
  @include e(listBtns) {
package/packages/search-bar/src/search-bar.vue CHANGED
@@ -58,6 +58,22 @@
58
58
  >
59
59
  </el-date-picker>
60
60
  </template>
61
+ <template v-else-if="item.type === 'monthrange'">
62
+ <span class="syswin-filter-item__name" v-if="item.name && !item.hideName">{{ item.name }}</span>
63
+ <el-date-picker
64
+ type="monthrange"
65
+ v-model="item.value"
66
+ size="small"
67
+ range-separator="至"
68
+ start-placeholder="开始月份"
69
+ end-placeholder="结束月份"
70
+ :editable="false"
71
+ :unlink-panels="true"
72
+ value-format="timestamp"
73
+ @change="handleChangeDateragne(idx, index)"
74
+ >
75
+ </el-date-picker>
76
+ </template>
61
77
  <template v-else-if="item.type === 'month' || item.type === 'year'">
62
78
  <span class="syswin-filter-item__name" v-if="item.name && !item.hideName">{{ item.name }}</span>
63
79
  <el-date-picker
@@ -147,6 +163,22 @@
147
163
  >
148
164
  </el-date-picker>
149
165
  </template>
166
+ <template v-else-if="item.type === 'monthrange'">
167
+ <span class="syswin-filter-item__name" v-if="item.name">{{ item.name }}</span>
168
+ <el-date-picker
169
+ type="monthrange"
170
+ v-model="item.value"
171
+ size="small"
172
+ range-separator="至"
173
+ start-placeholder="开始月份"
174
+ end-placeholder="结束月份"
175
+ :editable="false"
176
+ :unlink-panels="true"
177
+ value-format="timestamp"
178
+ @change="handleChangeDateragne(idx, index)"
179
+ >
180
+ </el-date-picker>
181
+ </template>
150
182
  <template v-else-if="item.type === 'month' || item.type === 'year'">
151
183
  <span class="syswin-filter-item__name" v-if="item.name && !item.hideName">{{ item.name }}</span>
152
184
  <el-date-picker
@@ -232,6 +264,22 @@
232
264
  >
233
265
  </el-date-picker>
234
266
  </template>
267
+ <template v-else-if="item.type === 'monthrange'">
268
+ <span class="syswin-filter-item__name" v-if="item.name">{{ item.name }}</span>
269
+ <el-date-picker
270
+ type="monthrange"
271
+ v-model="item.value"
272
+ size="small"
273
+ range-separator="至"
274
+ start-placeholder="开始月份"
275
+ end-placeholder="结束月份"
276
+ :editable="false"
277
+ :unlink-panels="true"
278
+ value-format="timestamp"
279
+ @change="handleChangeDateragne(idx, index + maxConditionLength)"
280
+ >
281
+ </el-date-picker>
282
+ </template>
235
283
  <template v-else-if="item.type === 'datetimerange'">
236
284
  <span class="syswin-filter-item__name" v-if="item.name">{{ item.name }}</span>
237
285
  <el-date-picker
@@ -314,6 +362,22 @@
314
362
  import _ from 'lodash'
315
363
  import moment from 'moment'
316
364
  import saveLocal from './save-local'
365
+
366
+ function deepCopyFunction(arr1, arr2) {
367
+ for (let i = 0; i < arr1.length; i++) {
368
+ const father1 = arr1[i]
369
+ const father2 = arr2[i]
370
+ for (let j = 0; j < father1.itemList.length; j++) {
371
+ const item1 = father1.itemList[j]
372
+ const item2 = father2.itemList[j]
373
+ if (item1.type === 'slot') {
374
+ item1.getValue = item2.getValue
375
+ item1.setValue = item2.setValue
376
+ }
377
+ }
378
+ }
379
+ }
380
+
317
381
  export default {
318
382
  name: 'SySearchbar',
319
383
  components: {
@@ -382,7 +446,7 @@ export default {
382
446
  saveToLocalPosition: {
383
447
  type: String,
384
448
  default: 'right',
385
- validator: function(value) {
449
+ validator: function (value) {
386
450
  return ['left', 'right'].indexOf(value) !== -1
387
451
  }
388
452
  },
@@ -411,6 +475,7 @@ export default {
411
475
  searchList: {
412
476
  handler(value) {
413
477
  this.currentSearchList = _.cloneDeep(value)
478
+ deepCopyFunction(this.currentSearchList, value)
414
479
  if (!this.hasSetDefaultTag) {
415
480
  this.setDefaultTagList()
416
481
  this.hasSetDefaultTag = true
@@ -438,8 +503,8 @@ export default {
438
503
  createTagList() {
439
504
  const list = []
440
505
  this.currentSearchList.length &&
441
- this.currentSearchList.forEach(ele => {
442
- ele.itemList.forEach(item => {
506
+ this.currentSearchList.forEach((ele) => {
507
+ ele.itemList.forEach((item) => {
443
508
  if (item.isActive || item.type === 'slot') {
444
509
  let obj = {
445
510
  pId: ele.id,
@@ -460,6 +525,11 @@ export default {
460
525
  return
461
526
  }
462
527
  obj.name = `${moment(item.value[0]).format('YYYY-MM-DD')}至${moment(item.value[1]).format('YYYY-MM-DD')}`
528
+ } else if (item.type === 'monthrange') {
529
+ if (!item.value || !item.value[0]) {
530
+ return
531
+ }
532
+ obj.name = `${moment(item.value[0]).format('YYYY-MM')}至${moment(item.value[1]).format('YYYY-MM')}`
463
533
  } else if (item.type === 'datetimerange') {
464
534
  if (!item.value || !item.value[0]) {
465
535
  return
@@ -472,13 +542,14 @@ export default {
472
542
  } else if (item.type === 'select') {
473
543
  if (!item.value) return
474
544
  if (item.multiple) {
475
- const valueOptions = item.value.map(x => item.options.find(f => f.value === x))
476
- obj.name = valueOptions.map(x => x.label).join(',')
545
+ const valueOptions = item.value.map((x) => item.options.find((f) => f.value === x))
546
+ obj.name = valueOptions.map((x) => x.label).join(',')
477
547
  } else {
478
- obj.name = item.options.find(x => x.value === item.value).label
548
+ obj.name = item.options.find((x) => x.value === item.value).label
479
549
  }
480
550
  } else if (item.type === 'slot') {
481
- const info = item.getValue()
551
+ if (!item.getValue) return
552
+ const info = item.getValue() // 这里不能直接调，因为是深拷贝过来的
482
553
  if (!info.name || !info.value) {
483
554
  // 如果没有选择数据，则不处理
484
555
  return
@@ -544,9 +615,9 @@ export default {
544
615
  this.$emit('on-search', { keyword: this.keyword, filterList })
545
616
  },
546
617
  handleTagClose(tag) {
547
- const parentItem = this.currentSearchList.find(x => x.id === tag.pId)
548
- const parentIndex = this.currentSearchList.findIndex(x => x.id === tag.pId)
549
- const childIndex = parentItem.itemList.findIndex(x => x.id === tag.id)
618
+ const parentItem = this.currentSearchList.find((x) => x.id === tag.pId)
619
+ const parentIndex = this.currentSearchList.findIndex((x) => x.id === tag.pId)
620
+ const childIndex = parentItem.itemList.findIndex((x) => x.id === tag.id)
550
621
  parentItem.itemList.forEach((item, index) => {
551
622
  if (parentItem.multiple) {
552
623
  // 多选
@@ -555,7 +626,7 @@ export default {
555
626
  // 单选
556
627
  if (index === childIndex) {
557
628
  item.isActive = false
558
- ;(item.type === 'daterange' || item.type === 'datetimerange') && (item.value = null)
629
+ ;(item.type === 'daterange' || item.type === 'monthrange' || item.type === 'datetimerange') && (item.value = null)
559
630
  if (item.type === 'month' || item.type === 'year') {
560
631
  item.value = ''
561
632
  }
@@ -575,10 +646,10 @@ export default {
575
646
  },
576
647
  // 关闭所有的标签
577
648
  handleClearAllTags() {
578
- this.tagList.forEach(tag => {
579
- const parentItem = this.currentSearchList.find(x => x.id === tag.pId)
580
- const parentIndex = this.currentSearchList.findIndex(x => x.id === tag.pId)
581
- const childIndex = parentItem.itemList.findIndex(x => x.id === tag.id)
649
+ this.tagList.forEach((tag) => {
650
+ const parentItem = this.currentSearchList.find((x) => x.id === tag.pId)
651
+ const parentIndex = this.currentSearchList.findIndex((x) => x.id === tag.pId)
652
+ const childIndex = parentItem.itemList.findIndex((x) => x.id === tag.id)
582
653
  parentItem.itemList.forEach((item, index) => {
583
654
  if (parentItem.multiple) {
584
655
  // 多选
@@ -587,7 +658,7 @@ export default {
587
658
  // 单选
588
659
  if (index === childIndex) {
589
660
  item.isActive = false
590
- ;(item.type === 'daterange' || item.type === 'datetimerange') && (item.value = null)
661
+ ;(item.type === 'daterange' || item.type === 'monthrange' || item.type === 'datetimerange') && (item.value = null)
591
662
  if (item.type === 'month' || item.type === 'year') {
592
663
  item.value = ''
593
664
  }
@@ -612,20 +683,20 @@ export default {
612
683
  this.keyword = ''
613
684
 
614
685
  const currentSearchList = _.cloneDeep(this.currentSearchList)
615
- currentSearchList.forEach(ele => {
616
- ele.itemList.forEach(item => {
686
+ currentSearchList.forEach((ele) => {
687
+ ele.itemList.forEach((item) => {
617
688
  item.isActive = !!item.default
618
689
  if (['month', 'year'].includes(item.type)) {
619
690
  item.value = item.default && item.defaultValue ? item.defaultValue : ''
620
691
  }
621
- if (item.type === 'daterange' || item.type === 'datetimerange') {
692
+ if (item.type === 'daterange' || item.type === 'monthrange' || item.type === 'datetimerange') {
622
693
  item.value = item.default && item.defaultValue ? item.defaultValue : null
623
694
  }
624
695
  if (item.type === 'select') {
625
696
  if (item.default && item.defaultValue) {
626
697
  if (item.multiple) {
627
- const valueOptions = item.defaultValue.map(x => item.options.find(f => f.value === x))
628
- item.value = valueOptions.map(x => x.value)
698
+ const valueOptions = item.defaultValue.map((x) => item.options.find((f) => f.value === x))
699
+ item.value = valueOptions.map((x) => x.value)
629
700
  } else {
630
701
  item.value = item.defaultValue
631
702
  }
@@ -642,8 +713,8 @@ export default {
642
713
  setDefaultTagList() {
643
714
  const list = []
644
715
  if (this.currentSearchList) {
645
- this.currentSearchList.forEach(ele => {
646
- ele.itemList.forEach(item => {
716
+ this.currentSearchList.forEach((ele) => {
717
+ ele.itemList.forEach((item) => {
647
718
  if (item.default) {
648
719
  // 如果是默认值
649
720
  const obj = {
@@ -664,6 +735,11 @@ export default {
664
735
  return
665
736
  }
666
737
  obj.name = `${moment(item.defaultValue[0]).format('YYYY-MM-DD')}至${moment(item.defaultValue[1]).format('YYYY-MM-DD')}`
738
+ } else if (item.type === 'monthrange') {
739
+ if (!item.defaultValue || !item.defaultValue[0]) {
740
+ return
741
+ }
742
+ obj.name = `${moment(item.defaultValue[0]).format('YYYY-MM')}至${moment(item.defaultValue[1]).format('YYYY-MM')}`
667
743
  } else if (item.type === 'datetimerange') {
668
744
  if (!item.defaultValue || !item.defaultValue[0]) {
669
745
  return
@@ -676,10 +752,10 @@ export default {
676
752
  } else if (item.type === 'select') {
677
753
  if (!item.defaultValue) return
678
754
  if (item.multiple) {
679
- const valueOptions = item.defaultValue.map(x => item.options.find(f => f.value === x))
680
- obj.name = valueOptions.map(x => x.label).join(',')
755
+ const valueOptions = item.defaultValue.map((x) => item.options.find((f) => f.value === x))
756
+ obj.name = valueOptions.map((x) => x.label).join(',')
681
757
  } else {
682
- const defaultItem = item.options.find(x => x.value === item.defaultValue)
758
+ const defaultItem = item.options.find((x) => x.value === item.defaultValue)
683
759
  obj.name = defaultItem.label
684
760
  obj.value = defaultItem
685
761
  }
@@ -703,7 +779,7 @@ export default {
703
779
  } else {
704
780
  // 单选
705
781
  item.isActive = index === childIndex ? !childItem.isActive : false
706
- ;(item.type === 'daterange' || item.type === 'datetimerange') && (item.value = null)
782
+ ;(item.type === 'daterange' || item.type === 'monthrange' || item.type === 'datetimerange') && (item.value = null)
707
783
  if (item.type === 'month' || item.type === 'year') {
708
784
  item.value = ''
709
785
  }
@@ -751,37 +827,47 @@ export default {
751
827
  // 切换保存过滤条件的下拉框
752
828
  handleChangeCondition(value) {
753
829
  this.conditionValue = value
754
- const list = this.conditionList.filter(item => item.value === value)
830
+ const list = this.conditionList.filter((item) => item.value === value)
755
831
  if (list.length) {
756
832
  const currentSearchList = _.cloneDeep(this.currentSearchList)
833
+ deepCopyFunction(currentSearchList, this.currentSearchList)
757
834
  const { keyword = '', filterList = [] } = list[0]
758
835
  this.keyword = keyword
759
836
 
760
837
  // 先清空所有标签
761
- currentSearchList.forEach(ele => {
762
- ele.itemList.forEach(item => {
763
- item.isActive = false
764
- item.type === 'daterange' && (item.value = null)
838
+ currentSearchList.forEach((ele) => {
839
+ ele.itemList.forEach((item) => {
840
+ item.isActive = false(['daterange', 'monthrange'].includes(item.type)) && (item.value = null)
765
841
  })
766
842
  })
767
843
 
768
844
  // 设置选中的标签
769
845
  if (filterList && filterList.length) {
770
- filterList.forEach(ele => {
771
- currentSearchList.forEach(item => {
846
+ filterList.forEach((ele) => {
847
+ currentSearchList.forEach((item) => {
772
848
  if (ele.pId === item.id) {
773
- item.itemList.forEach(v => {
774
- if (v.type === 'slot') {
775
- v.setValue({ value: ele.value, name: ele.name, ...ele })
776
- }
777
- if (item.multiple) {
778
- // 多选
779
- v.id === ele.id && (v.isActive = true)
780
- v.id === ele.id && v.type === 'daterange' && (v.value = ele.value)
781
- } else {
782
- // 单选
783
- v.isActive = v.id === ele.id
784
- v.type === 'daterange' && (v.value = v.id === ele.id ? ele.value : null)
849
+ item.itemList.forEach((v) => {
850
+ if (v.type === 'text') {
851
+ if (item.multiple) {
852
+ // 多选
853
+ v.id === ele.id && (v.isActive = true)
854
+ v.id === ele.id && ['daterange', 'monthrange'].includes(v.type) && (v.value = ele.value)
855
+ } else {
856
+ // 单选
857
+ v.isActive = v.id === ele.id[('daterange', 'monthrange')].includes(v.type) && (v.value = v.id === ele.id ? ele.value : null)
858
+ }
859
+ } else if (v.type === 'slot') {
860
+ v.setValue && v.setValue({ value: ele.value, name: ele.name, ...ele })
861
+ } else if (v.type === 'select') {
862
+ if (v.multiple) {
863
+ v.value = ele.value
864
+ } else {
865
+ v.value = ele.value
866
+ }
867
+ } else if (v.type === 'month' || v.type === 'year') {
868
+ v.value = ele.value
869
+ } else if (v.type === 'daterange' || v.type === 'monthrange' || v.type === 'datetimerange') {
870
+ v.value = ele.value
785
871
  }
786
872
  })
787
873
  }
@@ -807,7 +893,7 @@ export default {
807
893
  let localList = localStorage.getItem(`syswin${this.storageName}`)
808
894
  if (!['', undefined, null].includes(localList)) {
809
895
  localList = JSON.parse(localList)
810
- const idx = localList.findIndex(ele => ele.value === item.value)
896
+ const idx = localList.findIndex((ele) => ele.value === item.value)
811
897
  idx > -1 && localList.splice(idx, 1)
812
898
  localList.length > 0
813
899
  ? localStorage.setItem(`syswin${this.storageName}`, JSON.stringify(localList))
@@ -828,7 +914,7 @@ export default {
828
914
  this.conditionValue = momentValue
829
915
  } else {
830
916
  // 编辑
831
- const index = this.conditionList.findIndex(ele => ele.value === this.currentData.value)
917
+ const index = this.conditionList.findIndex((ele) => ele.value === this.currentData.value)
832
918
  const item = this.conditionList[index]
833
919
  item.label = label
834
920
  this.$set(this.conditionList, index, item)