ss-crm-manage-web/src/views/Home/ChannelReport.vue

<template>
  <div>
    <el-tabs v-model="tabName" type="border-card" tab-position="top">
      <el-tab-pane label="月度统计" name="monthly">
        <ChannelMonthly :sourceOptions="sourceOptions" />
      </el-tab-pane>
      <el-tab-pane label="周期统计" name="period">
        <ChannelPeriod :sourceOptions="sourceOptions" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="ChannelReport">
import ChannelMonthly from './Comp/ChannelMonthly.vue'
import ChannelPeriod from './Comp/ChannelPeriod.vue'
import { getSimpleSourceList } from '@/api/clue/source'
import { handleTree } from '@/utils/tree'

const tabName = ref('monthly')

onMounted(() => {
  getOptions()
})

const sourceOptions = ref([])

function getOptions() {
  getSimpleSourceList().then((data) => {
    sourceOptions.value = handleTree(data, 'sourceId')
  })
}
</script>

<style lang="scss" scoped></style>