list.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <a-card size="small" :bordered="false" class="purchaseReceiptReportList-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <!-- 标签页 -->
  5. <a-tabs :default-active-key="nowKey" @change="handleTabChange" class="purchaseReceiptReportList-tabs ">
  6. <a-tab-pane v-for="item in tabPaneData" :key="item.val">
  7. <span slot="tab" :id="item.val">{{ item.name }}</span>
  8. </a-tab-pane>
  9. </a-tabs>
  10. <purchaseReceiptOrder v-show="nowKey=='1'" @spinning="spinningFun" />
  11. <purchaseReceiptDetail v-show="nowKey=='2'" @spinning="spinningFun" />
  12. </a-spin>
  13. </a-card>
  14. </template>
  15. <script>
  16. import { commonMixin } from '@/utils/mixin'
  17. import purchaseReceiptOrder from './purchaseReceiptOrder.vue'
  18. import purchaseReceiptDetail from './purchaseReceiptDetail.vue'
  19. export default {
  20. components: { purchaseReceiptOrder, purchaseReceiptDetail },
  21. mixins: [commonMixin],
  22. data () {
  23. return {
  24. spinning: false,
  25. tabPaneData: [
  26. { name: '采购入库单报表', val: '1' },
  27. { name: '采购入库明细报表', val: '2' }
  28. ],
  29. nowKey: '1'
  30. }
  31. },
  32. methods: {
  33. spinningFun (val) {
  34. this.spinning = val
  35. },
  36. // tab切换
  37. handleTabChange (key) {
  38. this.nowKey = key
  39. }
  40. },
  41. mounted () {
  42. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  43. this.nowKey = '1'
  44. }
  45. },
  46. activated () {
  47. // 如果是新页签打开,则重置当前页面
  48. if (this.$store.state.app.isNewTab) {
  49. this.nowKey = '1'
  50. }
  51. },
  52. beforeRouteEnter (to, from, next) {
  53. next(vm => {})
  54. }
  55. }
  56. </script>
  57. <style lang="less">
  58. .purchaseReceiptReportList-wrap{
  59. .purchaseReceiptReportList-tabs.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container{
  60. height: 30px!important;
  61. }
  62. .purchaseReceiptReportList-tabs.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active{
  63. height: 30px!important;
  64. }
  65. .purchaseReceiptReportList-tabs.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
  66. line-height: 26px!important;
  67. height: 30px!important;
  68. }
  69. }
  70. </style>