index.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <fs-page class="fs-page-custom">
  3. <fs-crud ref="crudRef" v-bind="crudBinding">
  4. <template #search-left>
  5. <DateRangePicker v-model="dateRange" timezone="America/Los_Angeles" style="margin-bottom: 5px;"></DateRangePicker>
  6. </template>
  7. <template #header-middle>
  8. <AdGroupChart />
  9. </template>
  10. <template #cell_adGroupName="scope">
  11. <el-link type="primary" :underline="false" @click="jumpAds(scope.row)">{{ scope.row.adGroupName }}</el-link>
  12. </template>
  13. </fs-crud>
  14. </fs-page>
  15. </template>
  16. <script lang="ts" setup>
  17. import { Ref, ref, onMounted } from 'vue'
  18. import { useFs, FsPage } from '@fast-crud/fast-crud';
  19. import { createCrudOptions } from './crud'
  20. import { useRoute, useRouter, LocationQueryValue } from 'vue-router'
  21. import DateRangePicker from '/@/components/DateRangePicker/index.vue'
  22. import AdGroupChart from './chartComponents/adGroupChart.vue'
  23. import { usePublicData } from '/@/stores/publicData'
  24. // import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
  25. // import { getCardData, getLineData } from './api'
  26. const publicData = usePublicData()
  27. const router = useRouter()
  28. interface Props {
  29. campaignId: LocationQueryValue | LocationQueryValue[]
  30. }
  31. const props = defineProps<Props>()
  32. const dateRange: Ref<string[]> = ref(publicData.dateRange)
  33. const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { campaignId: props.campaignId } })
  34. onMounted(() => {
  35. crudExpose.doRefresh();
  36. })
  37. const jumpAds = (row: any) => {
  38. router.push({
  39. name: 'AdGroupDetail',
  40. query: { id: row.id, adGroupId: row.adGroupId, tagsViewName: row.adGroupName }
  41. })
  42. }
  43. </script>
  44. <style scoped>
  45. </style>