【前端】智能库房综合管理系统前端项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

106 lines
2.5 KiB

<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>