web/src/components/selector/BusinessScopeSelector.vue

<template>
  <selector-card
    class="business-scope-selector"
    :cardType="selectorType"
    @onConfirm="onConfirm"
    @onCancel="onCancel"
  >
    <div slot="header" :class="{ 's-header': selectorType === 'line' }">
      <slot name="header">业务范围</slot>
    </div>
    <BusinessScopeSelectorContent
      ref="content"
      :selectorType="selectorType"
      :initList="initList"
      @onChange="onChange"
    />
  </selector-card>
</template>

<script>
import SelectorCard from '@/components/selector/SelectorCard.vue'
import BusinessScopeSelectorContent from '@/components/selector/BusinessScopeSelectorContent.vue'
export default {
  name: 'business-scope-selector',
  components: {
    SelectorCard,
    BusinessScopeSelectorContent
  },
  props: {
    selectorType: {
      type: String,
      default: 'line'
    },
    initList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {}
  },
  watch: {
    initList () {
      this.$nextTick(() => {
        this.$refs.content.init()
      })
    }
  },
  created () {},
  methods: {
    setState (data) {
      return this.$refs.content.setState(data)
    },
    getState () {
      return this.$refs.content.getState()
    },
    onCancel () {
      this.$emit('onCancel')
    },
    onConfirm () {
      const state = this.getState()
      this.$emit('onConfirm', state)
    },
    onChange (state) {
      this.$emit('onChange', state)
    }
  }
}
</script>