index.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <div>
  3. <a-card size="small" :bordered="false">
  4. <a-tabs default-active-key="1" @change="handleChange">
  5. <a-tab-pane key="1" tab="轮胎月度费用报表">
  6. <monthQueryList ref="tireMonthQueryList"></monthQueryList>
  7. </a-tab-pane>
  8. <a-tab-pane key="2" tab="轮胎季度费用报表" force-render>
  9. <quarterQueryList></quarterQueryList>
  10. </a-tab-pane>
  11. <a-tab-pane key="3" tab="轮胎年度费用报表" force-render>
  12. <yearQueryList></yearQueryList>
  13. </a-tab-pane>
  14. </a-tabs>
  15. </a-card>
  16. </div>
  17. </template>
  18. <script>
  19. import { commonMixin } from '@/utils/mixin'
  20. // 组件
  21. import monthQueryList from './monthQueryList.vue'
  22. import quarterQueryList from './quarterQueryList.vue'
  23. import yearQueryList from './yearQueryList.vue'
  24. export default {
  25. name: 'TireFeeReportIndex',
  26. mixins: [commonMixin],
  27. components: { monthQueryList, quarterQueryList, yearQueryList },
  28. data () {
  29. return {
  30. tabVal: 1 // tab值 1轮胎月度费用报表 2轮胎季度费用报表 3轮胎年度费用报表 4轮胎费用明细报表
  31. }
  32. },
  33. methods: {
  34. // 切换tab值 change
  35. handleChange (val) {
  36. this.tabVal = val
  37. },
  38. // 初始化
  39. pageInit () {
  40. if (this.tabVal == 1) {
  41. this.$refs.tireMonthQueryList.pageInit()
  42. }
  43. }
  44. },
  45. mounted () {
  46. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  47. this.pageInit()
  48. }
  49. },
  50. activated () {
  51. // 如果是新页签打开,则重置当前页面
  52. if (this.$store.state.app.isNewTab) {
  53. this.pageInit()
  54. }
  55. }
  56. }
  57. </script>