index.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/libs/classNames'
  3. import shallowEqual from '../helpers/libs/shallowEqual'
  4. import fieldNamesBehavior from '../helpers/mixins/fieldNamesBehavior'
  5. import { props } from './props'
  6. import {
  7. getRealCols,
  8. getRealValues,
  9. getIndexesFromValues,
  10. getLabelsFromIndexes,
  11. } from './utils'
  12. baseComponent({
  13. behaviors: [fieldNamesBehavior],
  14. properties: props,
  15. data: {
  16. inputValue: [],
  17. cols: [],
  18. },
  19. observers: {
  20. ['value, options'](value, options) {
  21. const fieldNames = this.getFieldNames()
  22. const cols = getRealCols(options, fieldNames)
  23. if (!shallowEqual(this.data.cols, cols)) {
  24. this.setData({ cols })
  25. }
  26. this.setValue(value, true)
  27. },
  28. },
  29. methods: {
  30. updated(inputValue, isForce) {
  31. if (this.data.inputValue !== inputValue || isForce) {
  32. this.setData({
  33. inputValue,
  34. })
  35. }
  36. },
  37. setValue(value, isForce) {
  38. const { value: inputValue } = this.getValue(value)
  39. this.updated(inputValue, isForce)
  40. },
  41. getValue(value = this.data.inputValue, cols = this.data.cols) {
  42. const fieldNames = this.getFieldNames()
  43. const inputValue = getRealValues(Array.isArray(value) ? value : [], cols, fieldNames)
  44. const selectedValue = [...inputValue]
  45. const selectedIndex = getIndexesFromValues(inputValue, cols, fieldNames)
  46. const displayValue = getLabelsFromIndexes(selectedIndex, cols, fieldNames.label)
  47. return {
  48. value: inputValue,
  49. displayValue,
  50. selectedIndex,
  51. selectedValue,
  52. cols,
  53. }
  54. },
  55. /**
  56. * 触发 change 事件
  57. */
  58. onChange(index, value, method) {
  59. const inputValue = [...this.data.inputValue]
  60. inputValue[index] = value
  61. if (method) {
  62. this.triggerEvent(method, { ...this.getValue(inputValue), index })
  63. }
  64. },
  65. /**
  66. * 当滚动选择开始时的回调函数
  67. */
  68. onBeforeChange(e) {
  69. const { value } = e.detail
  70. const { index } = e.currentTarget.dataset
  71. this.onChange(index, value, 'beforeChange')
  72. },
  73. /**
  74. * 每列数据选择变化后的回调函数
  75. */
  76. onValueChange(e) {
  77. const { value } = e.detail
  78. const { index } = e.currentTarget.dataset
  79. this.onChange(index, value, 'valueChange')
  80. },
  81. /**
  82. * 滚动数据选择变化后的回调函数
  83. */
  84. onScrollChange(e) {
  85. const { value } = e.detail
  86. const { index } = e.currentTarget.dataset
  87. this.onChange(index, value, 'scrollChange')
  88. },
  89. },
  90. attached() {
  91. const { value, options } = this.data
  92. const fieldNames = this.getFieldNames()
  93. const cols = getRealCols(options, fieldNames)
  94. this.setData({ cols })
  95. this.setValue(value)
  96. },
  97. })