index.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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="tireStatisticsList"></monthQueryList>
  7. </a-tab-pane>
  8. <a-tab-pane key="2" tab="轮胎季度费用报表" force-render>
  9. <quarterQueryList ref="tireDetailList"></quarterQueryList>
  10. </a-tab-pane>
  11. <a-tab-pane key="3" tab="轮胎年度费用报表" force-render>
  12. <yearQueryList ref="tireDetailList"></yearQueryList>
  13. </a-tab-pane>
  14. <a-tab-pane key="4" tab="轮胎费用明细报表" force-render>
  15. <feeDetailList ref="tireDetailList"></feeDetailList>
  16. </a-tab-pane>
  17. </a-tabs>
  18. </a-card>
  19. </div>
  20. </template>
  21. <script>
  22. import { commonMixin } from '@/utils/mixin'
  23. // 组件
  24. import monthQueryList from './monthQueryList.vue'
  25. import quarterQueryList from './quarterQueryList.vue'
  26. import yearQueryList from './yearQueryList.vue'
  27. import feeDetailList from './feeDetailList.vue'
  28. export default {
  29. name: 'TireFeeReportIndex',
  30. mixins: [commonMixin],
  31. components: { monthQueryList, quarterQueryList, yearQueryList, feeDetailList },
  32. data () {
  33. return {
  34. tabVal: 1 // tab值 1轮胎月度费用报表 2轮胎季度费用报表 3轮胎年度费用报表 4轮胎费用明细报表
  35. }
  36. },
  37. methods: {
  38. // 切换tab值 change
  39. handleChange (val) {
  40. this.tabVal = val
  41. },
  42. // 初始化
  43. pageInit () {
  44. if (this.tabVal == 1) {
  45. this.$refs.tireStatisticsList.pageInit()
  46. } else {
  47. this.$refs.tireDetailList.pageInit()
  48. }
  49. }
  50. },
  51. mounted () {
  52. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  53. this.pageInit()
  54. }
  55. },
  56. activated () {
  57. // 如果是新页签打开,则重置当前页面
  58. if (this.$store.state.app.isNewTab) {
  59. this.pageInit()
  60. }
  61. }
  62. }
  63. </script>
  64. <style lang="less" scoped>
  65. .monthBox{
  66. /deep/.ant-calendar-picker-icon{
  67. display:none !important;
  68. }
  69. /deep/.ant-calendar-picker input{
  70. text-align:center;
  71. }
  72. }
  73. </style>