开单页面顶部导航

未分类

模板

<template>
<div class="Billing">
    <el-tabs v-model="activeItem" @tab-click="handleClick" class="tabs">
      <el-tab-pane label="开单明细" name="detail"></el-tab-pane>
      <el-tab-pane label="开单费用" name="cost"></el-tab-pane>
      <el-tab-pane label="拼单明细" name="bind"></el-tab-pane>
      <el-tab-pane label="体积" name="volume"></el-tab-pane>
      <el-tab-pane label="出发/到达信息" name="deparr"></el-tab-pane>
      <el-tab-pane label="相关航班信息" name="flight"></el-tab-pane>
    </el-tabs>
    <i class="el-icon-circle-close closeBilling" @click="backSearch"></i>
    <keep-alive>
      <component :is="activeItem"></component>
    </keep-alive>
</div>
</template>

交互

<script>
// 更改引入可控制导航项对应组件(现明细需要改变，其余可复用)
import detail from "./detail"               // 明细
import cost from "../common/cost"           // 费用
import bind from "../common/bind"           // 拼单
import volume from "../common/volume"       // 体积
import deparr from "../common/deparr"       // 出发到达
import flight from "../common/flight"       // 相关航班
export default {
  data() {
    return {
      activeItem: 'detail',
      type: 'main',
    }
  },
  components: {
    detail,
    cost,
    bind,
    volume,
    deparr,
    flight,
  },
  mounted() {
    this.type = this.$route.params.type         // 当前单类型 main 主单 sub 分单
    this.activeItem = this.$route.params.item   // 当前活动导航
  },
  watch: {
    '$route'() {
      this.activeItem = this.$route.params.item  // 路由改变时更改当前活动导航
    }
  },
  methods: {
    handleClick(tab, event) {   // 点击导航时改变路由
      this.$router.push({params: {item: tab.name}})
    },
    backSearch() {  // 点击关闭按钮时返回当前模块对应查询页
      this.$router.push(`/receive/${this.type}`)
    },
  }
}
</script>

具体代码参考 src ->pages ->receive ->billing