vue-reverse/examples/components/product/attribute.vue

<template>
  <div>
    <Select
      v-if="!value.id"
      :value="value[data.keyword]"
      :placeholder="data.props.placeholder"
      :filterable="data.props.filterable || false"
      :clearable="data.props.clearable || false"
      :multiple="data.props.multiple || false"
      :not-found-text="option[data.keyword].loading || '无匹配数据'"
      transfer
      @on-change="onChange"
      @on-open-change="onOpenChange">
      <Option
        v-for="(item, index) in option[data.keyword].list"
        :key="index"
        :value="item.value">{{item.label}}</Option>
    </Select>
    <error :text="error[data.keyword]" />
  </div>
</template>
<script>
import allActions from '@/actions'

export default {
  props: ['data', 'value', 'option', 'error'],
  data () {
    return {
      attribute_category_id: '',
      attribute_item: [],
    }
  },
  methods: {
    onChange (e) {
      this.getAttributeList(e)
    },
    onOpenChange (open) {
      if (!open) return
      const currentOption = this.option[this.data.keyword]
      this.$hub.$emit(this.data.hub, {
        type: 'option',
        payload: {
          type: currentOption.type || 'sync',
          keyword: currentOption.keyword || this.data.keyword,
        },
      })
    },
    async getAttributeList (v) {
      const res = await allActions.getAttributesDetail({ attribute_category_id: v })
      const patternData = []
      const parameterData = []
      res.forEach(i => {
        if (!i.attribute_type) {
          i.list = i.input_list.split(',')
          i.selected = []
          patternData.push(i)
        } else {
          i.list = i.input_list.split(',')
          i.text = ''
          i.selected = ''
          parameterData.push(i)
        }
      })
      this.$hub.$emit(this.data.hub, {
        type: 'value',
        payload: Object.assign(this.value, {
          attribute_category_id: v,
          patternData,
          parameterData,
        }),
      })
    },
  },
}
</script>
<style lang="scss" scoped>

</style>