<template>
  <div class="jst-box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="发货单" name="first">
        <sendGoods v-if="activeName == 'first'" />
      </el-tab-pane>
      <el-tab-pane label="入库单" name="second">
        <inStore v-if="activeName == 'second'" />
      </el-tab-pane>
      <el-tab-pane label="出库单" name="third">
        <outStore v-if="activeName == 'third'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import sendGoods from './compoments/sendGoods.vue'
import inStore from './compoments/inStore.vue'
import outStore from './compoments/outStore.vue'
@Component({components:{sendGoods,inStore,outStore}})
export default class JushuitanOrder extends Vue {
  activeName:string='first'

  handleClick(){

  }
}
</script>

<style lang="scss" scoped>
.box{
  height: 100%;
  width: 100%;
  .page{
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .tool{
    padding: 8px 16px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
<style lang="scss">
.jst-box{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  .el-tabs{
    width: 100%;
    height: 100%;
  }
  .el-tabs__header{
    margin: 0 !important;
  }
  .el-tabs__content{
    height: calc(100% - 40px);
    padding-top: 8px;
    box-sizing: border-box;
    overflow: hidden;
    .el-tab-pane{
      width: 100%;
      height: 100%;
    }
  }
}
</style>