crm-mobile/pages_common/selectList/options.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar :title="navTitle">
        <!-- #ifndef MP-WEIXIN -->
        <button class="button white-btn" @click="handleConfirm">
          确定
        </button>
        <!-- #endif -->
      </wk-nav-bar>

      <view class="list-scroll">
        <wk-select-list
          v-if="listData.length > 0"
          v-model="defaultVal"
          :list="listData"
          :label-field="typeObj.labelField"
          :value-field="typeObj.valueField"
          :max="bridge.maxlength"
          @change="handleChange" />
      </view>

      <!-- #ifdef MP-WEIXIN -->
      <view class="footer-btn-group">
        <button class="button" @click="handleConfirm">
          确定
        </button>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
  import { deepCopy } from '@/utils/lib.js'

  export default {
    name: 'OptionsChoose',
    data() {
      return {
        listData: [],
        selectedList: [],
        defaultVal: [],

        typeObj: {
          labelField: 'label',
          valueField: 'value'
        },

        routerQuery: {},
        bridge: {},
        clickConfirm: false
      }
    },
    computed: {
      navTitle() {
        return this.bridge.title || '选择'
      },
      // hidenSearch() { // 是否隐藏搜索框
      // 	return this.bridge.hidenSearch || false
      // }
    },
    onLoad(options) {
      this.routerQuery = options || {}
      this.bridge = getApp().globalData.selectedValBridge.options || {}
      this.defaultVal = this.bridge.defaultVal || []
      this.handleChange(this.defaultVal)
      this.getList()
    },
    onUnload() {
      getApp().globalData.selectedValBridge = {}
    },
    methods: {
      /**
       * 获取选项列表
       */
      getList() {
        if (this.bridge.config) {
          this.typeObj = {
            labelField: this.bridge.config.labelField || 'label',
            valueField: this.bridge.config.valueField || 'value'
          }
        }

        if (!this.$isEmpty(this.bridge.list)) {
          this.listData = this.bridge.list
          return
        }

        const otherParams = this.bridge.params || {} // 附加参数
        const params = {
					// search: '',
					...otherParams
        }

        const request = this.bridge.request || null
        if (!request) return

        request(params).then(res => {
          this.listData = res.hasOwnProperty('list') ? res.list : res
        }).catch()
      },

      /**
       * 保存记录选择的项
       * @param {Object} data
       */
      handleChange(data) {
        this.selectedList = data
      },

      /**
       * 确认选择，通知上一级页面，已经选择
       */
      handleConfirm() {
        const data = {
          guid: this.bridge.guid,
          bridge: this.bridge,
          data: this.selectedList
        }
        if (this.bridge.config && this.bridge.config.checkFn) {
          const res = this.bridge.config.checkFn(data)
          if (!res) return
        }
        this.clickConfirm = true
        uni.$emit('selected-options', data)
        this.$Router.navigateBack()
      }
    }
  }
</script>

<style scoped lang="scss">
	.main-container {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.list-scroll {
			flex: 1;
			overflow: auto;
			padding-bottom: 20rpx;
			margin-top: 20rpx;
		}
	}
</style>