index.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <div class="tabsReportList-wrap">
  3. <div style="background-color: #fff;margin-bottom: 5px;">
  4. <a-tabs default-active-key="1" v-model="curTab">
  5. <a-tab-pane key="1" tab="连锁销售报表" v-if="$hasPermissions('M_chainSalesReportList')"></a-tab-pane>
  6. <a-tab-pane key="2" tab="连锁销售明细报表" v-if="$hasPermissions('M_chainSalesDetailReportList')" force-render></a-tab-pane>
  7. </a-tabs>
  8. </div>
  9. <a-card size="small" :bordered="false">
  10. <salesReport v-show="curTab==1&&$hasPermissions('M_chainSalesReportList')"></salesReport>
  11. <salesDetailReport v-show="curTab==2&&$hasPermissions('M_chainSalesDetailReportList')"></salesDetailReport>
  12. </a-card>
  13. </div>
  14. </template>
  15. <script>
  16. import salesReport from './list.vue'
  17. import salesDetailReport from '@/views/chainReportData/chainSalesDetailReport/list.vue'
  18. export default {
  19. name: 'ChainSalesReportIndex',
  20. components: {
  21. salesReport,
  22. salesDetailReport
  23. },
  24. data () {
  25. return {
  26. curTab: '1'
  27. }
  28. }
  29. }
  30. </script>
  31. <style lang="less">
  32. .tabsReportList-wrap{
  33. display: flex;
  34. flex-direction: column;
  35. height: 100%;
  36. .ant-tabs-bar{
  37. margin: 0;
  38. }
  39. .ant-card{
  40. flex-grow: 1;
  41. overflow: auto;
  42. }
  43. }
  44. </style>