options.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <view class="uni-app">
  3. <view class="status-bar" />
  4. <view class="main-container">
  5. <wk-nav-bar :title="navTitle">
  6. <!-- #ifndef MP-WEIXIN -->
  7. <button class="button white-btn" @click="handleConfirm">
  8. 确定
  9. </button>
  10. <!-- #endif -->
  11. </wk-nav-bar>
  12. <view class="list-scroll">
  13. <wk-select-list
  14. v-if="listData.length > 0"
  15. v-model="defaultVal"
  16. :list="listData"
  17. :label-field="typeObj.labelField"
  18. :value-field="typeObj.valueField"
  19. :max="bridge.maxlength"
  20. @change="handleChange" />
  21. </view>
  22. <!-- #ifdef MP-WEIXIN -->
  23. <view class="footer-btn-group">
  24. <button class="button" @click="handleConfirm">
  25. 确定
  26. </button>
  27. </view>
  28. <!-- #endif -->
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. import { deepCopy } from '@/utils/lib.js'
  34. export default {
  35. name: 'OptionsChoose',
  36. data() {
  37. return {
  38. listData: [],
  39. selectedList: [],
  40. defaultVal: [],
  41. typeObj: {
  42. labelField: 'label',
  43. valueField: 'value'
  44. },
  45. routerQuery: {},
  46. bridge: {},
  47. clickConfirm: false
  48. }
  49. },
  50. computed: {
  51. navTitle() {
  52. return this.bridge.title || '选择'
  53. },
  54. // hidenSearch() { // 是否隐藏搜索框
  55. // return this.bridge.hidenSearch || false
  56. // }
  57. },
  58. onLoad(options) {
  59. this.routerQuery = options || {}
  60. this.bridge = getApp().globalData.selectedValBridge.options || {}
  61. this.defaultVal = this.bridge.defaultVal || []
  62. this.handleChange(this.defaultVal)
  63. this.getList()
  64. },
  65. onUnload() {
  66. getApp().globalData.selectedValBridge = {}
  67. },
  68. methods: {
  69. /**
  70. * 获取选项列表
  71. */
  72. getList() {
  73. if (this.bridge.config) {
  74. this.typeObj = {
  75. labelField: this.bridge.config.labelField || 'label',
  76. valueField: this.bridge.config.valueField || 'value'
  77. }
  78. }
  79. if (!this.$isEmpty(this.bridge.list)) {
  80. this.listData = this.bridge.list
  81. return
  82. }
  83. const otherParams = this.bridge.params || {} // 附加参数
  84. const params = {
  85. // search: '',
  86. ...otherParams
  87. }
  88. const request = this.bridge.request || null
  89. if (!request) return
  90. request(params).then(res => {
  91. this.listData = res.hasOwnProperty('list') ? res.list : res
  92. }).catch()
  93. },
  94. /**
  95. * 保存记录选择的项
  96. * @param {Object} data
  97. */
  98. handleChange(data) {
  99. this.selectedList = data
  100. },
  101. /**
  102. * 确认选择,通知上一级页面,已经选择
  103. */
  104. handleConfirm() {
  105. const data = {
  106. guid: this.bridge.guid,
  107. bridge: this.bridge,
  108. data: this.selectedList
  109. }
  110. if (this.bridge.config && this.bridge.config.checkFn) {
  111. const res = this.bridge.config.checkFn(data)
  112. if (!res) return
  113. }
  114. this.clickConfirm = true
  115. uni.$emit('selected-options', data)
  116. this.$Router.navigateBack()
  117. }
  118. }
  119. }
  120. </script>
  121. <style scoped lang="scss">
  122. .main-container {
  123. display: flex;
  124. flex-direction: column;
  125. overflow: hidden;
  126. .list-scroll {
  127. flex: 1;
  128. overflow: auto;
  129. padding-bottom: 20rpx;
  130. margin-top: 20rpx;
  131. }
  132. }
  133. </style>