index.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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-tab-pane key="4" tab="轮胎费用明细报表" force-render>
  15. <feeDetailList></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.tireMonthQueryList.pageInit()
  46. }
  47. }
  48. },
  49. mounted () {
  50. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  51. this.pageInit()
  52. }
  53. },
  54. activated () {
  55. // 如果是新页签打开,则重置当前页面
  56. if (this.$store.state.app.isNewTab) {
  57. this.pageInit()
  58. }
  59. }
  60. }
  61. </script>
  62. <style lang="less" scoped>
  63. .monthBox{
  64. /deep/.ant-calendar-picker-icon{
  65. display:none !important;
  66. }
  67. /deep/.ant-calendar-picker input{
  68. text-align:center;
  69. }
  70. }
  71. </style>