bjquanjiang
/
DigitalScholl


			
				
					
						
						
							
							<template>
  <!-- #ifndef MP-DINGTALK -->
  <l-label @click="click" :arrow="!readonly" :required="required" :title="title">
    {{ value || displayPlaceholder }}
  </l-label>
  <!-- #endif -->

  <!-- #ifdef MP-DINGTALK -->
  <l-label :arrow="!readonly" :required="required" :title="title">
    <text @click="click">{{ value || displayPlaceholder }}</text>
  </l-label>
  <!-- #endif -->
</template>

<script>
/**
 * 弹层选择器
 *
 * 接受两个参数：
 * source： 弹层选单源数据
 * layerData： 弹层绑定定义
 *
 * 举例：
 * // 数据源，这里以数据字典里的公司类别来举例
 * source: this.GET_GLOBAL('dataDictionary').CompanyType
 *
 * // 需要展示在弹层页面中的字段
 * layerData: [
 *   {
 *      name: 'text',           // 对应数据源中的字段
 *      label: '公司类别',        // 标题文本
 *      value: 'F_CompanyName'   // 对应要绑定到的字段
 *   }, {
 *      name: 'value',
 *      label: '对应值',
 *      value: 'F_CompanyId'
 *   }
 * ]
 */

export default {
  name: 'l-layer-picker',

  props: {
    value: { default: null },
    title: {},
    required: {},
    placeholder: {},
    readonly: {},
    source: { default: () => [] },
    layerData: { default: () => [] }
  },

  methods: {
    click() {
      if (this.readonly) {
        return
      }

      const { source, layerData } = this
      this.ONCE(`select-layer`, data => {
        this.$emit('input', data)
        this.$emit('change', data)
      })

      this.SET_PARAM({ source, layerData })
      this.NAV_TO('/pages/common/select-layer')
    }
  },

  computed: {
    displayPlaceholder() {
      if (this.readonly) {
        return ''
      }

      if (this.placeholder) {
        return this.placeholder
      }

      return this.title ? `请选择${this.title}` : '请选择…'
    }
  }
}
</script>