field-picker.ts 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. // module/user/components/field-picker/field-picker.ts
  2. Component({
  3. behaviors: ['wx://form-field'],
  4. lifetimes: {},
  5. properties: {
  6. name: { type: String, value: '' },
  7. title: { type: String, value: '' },
  8. options: { type: Array, value: [] },
  9. optionsColumns: { type: Number, value: 3 },
  10. itemHeight: { type: Number, value: 64 },
  11. multiple: { type: Boolean, value: true },
  12. closeOnOverlayClick: { type: Boolean, value: true },
  13. },
  14. data: {
  15. visible: false,
  16. value: [],
  17. selected: [] as Option[],
  18. },
  19. observers: {
  20. 'value, options'(values: Option[] | Option | string, options: Option[]) {
  21. const selected = new Set<Option>();
  22. if (options.length) {
  23. const _values = Array.isArray(values) ? values : values ? [values] : [];
  24. for (const item of _values) {
  25. const value = typeof item === 'object' ? item?.value : item;
  26. const [v,l] = value.split(':');
  27. const option = options.find(item => item.value === v)
  28. if (option) selected.add({...option, label: l ?? option.label});
  29. }
  30. }
  31. this.setData({ selected: [...selected] });
  32. },
  33. },
  34. methods: {
  35. onShow() {
  36. this.setData({ visible: true });
  37. },
  38. onPickerConfirm(event: any) {
  39. const { options } = event.detail;
  40. this.setData({ value: options })
  41. const name = this.data.name;
  42. if (name) this.triggerEvent('change', { [name]: options }, { bubbles: true, composed: true });
  43. },
  44. onPickerClose() {
  45. this.setData({ visible: false })
  46. }
  47. }
  48. })