list.vue 2.0 KB

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