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" />
      <span class="right-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>
        <li :class="{ 'active-tab-nav': activeIndex == 5 }" @click="changeActiveTab(5)">借阅流程管理<i /></li>
        <!-- 最右侧装饰img -->
        <span class="tab-right-img" />
      </ul>
      <component :is="comName" :ref="comName" @callBack="callBack" @getSelections="getSelections" />
    </div>
    <!-- 借阅档案list -->
    <lendArchivesList v-if="activeIndex === 1 && archivesOrderNum" :archives-order-num="archivesOrderNum" />
  </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'
import lendProcess from './lendProcess/index.vue'
import lendArchivesList from './components/lendArchivesList'
import { lendingCrud } from './mixins/lending'

export default {
  name: 'BorrowManage',
  components: {
    toLend,
    lendConfirm,
    returnArchives,
    lendQuery,
    borrowerManage,
    lendProcess,
    lendArchivesList
  },
  mixins: [lendingCrud],
  data() {
    return {
      activeIndex: 0,
      archivesOrderNum: ''
    }
  },
  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'
      } else if (this.activeIndex === 5) {
        return 'lendProcess'
      }
      return 'toLend'
    }
  },
  methods: {
    changeActiveTab(data) {
      this.activeIndex = data
      if (this.activeIndex === 1) {
        this.archivesOrderNum = ''
      }
    },
    // 重新登记
    callBack(val) {
      this.activeIndex = val.index
    },
    getSelections(data) {
      if (data) {
        this.archivesOrderNum = data.orderNo
      } else {
        this.archivesOrderNum = ''
      }
    }
  }
}
</script>

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