crm-mobile/components/wk-form/wk-field-revelance.vue

<template>
  <view class="wk-field wk-field-select" @click.stop="handleChoose">
    <view v-if="_label" class="wk-field__label">
      <view v-if="field.isNull === 1" class="line" />
      {{ _label }}
    </view>
    <view class="wk-field__body">
      <view class="wk-field__body-core">
        {{ valueStr }}
      </view>

      <text class="wk wk-arrow-right icon-right" />
    </view>
  </view>
</template>

<script>
  import mixins from './mixins'

  export default {
    name: 'WkFieldRevelance',
    mixins: [mixins],
    props: {
      req: {
        type: Function,
        default: null
      },
      isDetailTable: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        guid: null,
        formValue: [],

        keyMap: {
          customer: {labelField: 'customerName', valueField: 'customerId'},
          contacts: {labelField: 'contactsName', valueField: 'contactsId'},
          business: {labelField: 'businessName', valueField: 'businessId'},
          contract: {labelField: 'num', valueField: 'contractId'},
        }
      }
    },
    computed: {
      type() {
        return this.field.formType
      },
      valueStr() {
        let obj = null
        if (
          this.config &&
          this.config.optionsConfig &&
          (
            this.config.optionsConfig.labelField ||
            this.config.optionsConfig.valueField
          )
        ) {
          obj = this.config.optionsConfig
        } else {
          obj = this.keyMap[this.type] || {}
        }
        if (this.$isEmpty(obj)) return ''
        // console.log('obj--', obj, this.formValue)
        const key = obj.labelField
        const arr = this.formValue || []
        return arr.map(o => o[key]).join(',')
      },
      list() {
        return this.field.setting.map(o => {
          return {
            label: o,
            value: o
          }
        })
      }
    },
    created() {
      this.guid = this.$guid()
    },
    methods: {
      handleChoose() {
        if (this.field.disabled) {
          if (this.config && this.config.disabledMsg) {
            this.$toast(this.config.disabledMsg)
          }
          return
        }
        const bridge = getApp().globalData.selectedValBridge

        // 主要是处理微信小程序端 uni限制 props 不能传递函数的问题
        let formBridge = {}
        if (this.isDetailTable) {
          formBridge = getApp().globalData.detailTableFields
        } else {
          formBridge = getApp().globalData.formBridge
        }
        // const formBridge = getApp().globalData.formBridge
        let request = null
        if (
          formBridge &&
          formBridge.fields &&
          formBridge.fields[this.index] &&
          formBridge.fields[this.index].sys_config
        ) {
          request = formBridge.fields[this.index].sys_config.request || null
        }

        bridge[this.type] = {
          guid: this.guid,
          title: '选择' + this.field.name,
          maxlength: 1,
          defaultVal: this.formValue || [],
          params: this.config ? (this.config.otherParams || {}) : {},
          request: request,
          config: this.config ? (this.config.optionsConfig || null) : null
        }
        // console.log('bridge: ', formBridge, bridge)

        uni.$on('selected-relevance', this.selectedRelevance)
        this.$Router.navigateTo({
          url: '/pages_common/selectList/relevance',
          query: {
            type: this.field.formType
          }
        })
      },

      selectedRelevance(data) {
        if (this.guid === data.guid) {
          this.formValue = data.data
          this.$emit('input', this.formValue)
          this.$emit('change', {
            index: this.index,
            field: this.field,
            value: this.formValue
          })
        }
        uni.$off('selected-options')
      }
    }
  }
</script>

<style scoped lang="scss">
	@import './wkField.scss';
</style>