list.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <div class="inventoryReportList-wrap">
  3. <!-- 标签页 -->
  4. <div style="background-color: #fff;margin-bottom: 5px;">
  5. <a-tabs :default-active-key="nowKey" @change="handleTabChange" class="inventoryReportList-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. </div>
  11. <a-card size="small" :bordered="false" >
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <inventoryOrder v-show="nowKey=='1'" @spinning="spinningFun" />
  14. <inventoryDetail v-show="nowKey=='2'" @spinning="spinningFun" />
  15. </a-spin>
  16. </a-card>
  17. </div>
  18. </template>
  19. <script>
  20. import { commonMixin } from '@/utils/mixin'
  21. import inventoryOrder from './inventoryOrder.vue'
  22. import inventoryDetail from './inventoryDetail.vue'
  23. export default {
  24. components: { inventoryOrder, inventoryDetail },
  25. mixins: [commonMixin],
  26. data () {
  27. return {
  28. spinning: false,
  29. tabPaneData: [
  30. { name: '盘点单报表', val: '1' },
  31. { name: '盘点盈亏明细报表', val: '2' }
  32. ],
  33. nowKey: '1'
  34. }
  35. },
  36. methods: {
  37. spinningFun (val) {
  38. this.spinning = val
  39. },
  40. // tab切换
  41. handleTabChange (key) {
  42. this.nowKey = key
  43. }
  44. },
  45. mounted () {
  46. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  47. this.nowKey = '1'
  48. }
  49. },
  50. activated () {
  51. // 如果是新页签打开,则重置当前页面
  52. if (this.$store.state.app.isNewTab) {
  53. this.nowKey = '1'
  54. }
  55. },
  56. beforeRouteEnter (to, from, next) {
  57. next(vm => {})
  58. }
  59. }
  60. </script>
  61. <style lang="less">
  62. .inventoryReportList-wrap{
  63. .ant-tabs-bar{
  64. margin:0 !important;
  65. }
  66. }
  67. </style>