yxk-storeroom-system/src/views/archivesManage/lendManage/index.vue

<template>
  <div class="app-container lend-container">
    <!-- 借阅列表 -->
    <!-- 借阅管理tab -->
    <div class="tab-content">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <ul class="tab-nav">
        <li
          :class="{ 'active-tab-nav': activeIndex == 0 }"
          @click="changeActiveTab(0)"
        >
          待借档案<i />
        </li>
        <li
          :class="{ 'active-tab-nav': activeIndex == 1 }"
          @click="changeActiveTab(1)"
        >
          借出确认<i />
        </li>
        <li
          :class="{ 'active-tab-nav': activeIndex == 2 }"
          @click="changeActiveTab(2)"
        >
          归还档案<i />
        </li>
        <li
          :class="{ 'active-tab-nav': activeIndex == 3 }"
          @click="changeActiveTab(3)"
        >
          借阅查询<i />
        </li>
        <li
          :class="{ 'active-tab-nav': activeIndex == 4 }"
          @click="changeActiveTab(4)"
        >
          借阅者管理<i />
        </li>
        <!-- 最右侧装饰img -->
        <span class="tab-right-img" />
      </ul>
      <component :is="comName" :record-form-visible="recordFormVisible" @callBack="callBack" />
    </div>
  </div>
</template>

<script>
import toLend from './toLend/index.vue'
import lendConfirm from './lendConfirm/index.vue'
import returnArchives from './returnArchives/index.vue'
import lendQuery from './lendQuery/index.vue'
import borrowerManage from './borrowerManage/index.vue'

export default {
  name: 'BorrowManage',
  components: {
    toLend,
    lendConfirm,
    returnArchives,
    lendQuery,
    borrowerManage
  },
  data() {
    return {
      activeIndex: 0
      // recordFormVisible:false
    }
  },
  computed: {
    comName: function() {
      if (this.activeIndex === 0) {
        return 'toLend'
      } else if (this.activeIndex === 1) {
        return 'lendConfirm'
      } else if (this.activeIndex === 2) {
        return 'returnArchives'
      } else if (this.activeIndex === 3) {
        return 'lendQuery'
      } else if (this.activeIndex === 4) {
        return 'borrowerManage'
      }
      return 'toLend'
    }
  },
  methods: {
    changeActiveTab(data) {
      this.activeIndex = data
    },
    // 重新登记
    callBack(val) {
      console.log(val, '-------------------')
      this.activeIndex = val.index
    }
  }
}
</script>

<style lang="scss" scoped>
.lend-container{
  .tab-content{
    position: relative;
    margin-top: 61px;
    border: 1px solid #113d72;
  }
}
</style>