|
|
|
@ -1,43 +1,173 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container row-container"> |
|
|
|
<div class="head-container" style="justify-content: flex-start; padding-bottom: 20px;"> |
|
|
|
<el-button size="mini" type="primary" @click.stop="uploadBook"> |
|
|
|
<i class="iconfont icon-shangchuan" />图书上传 |
|
|
|
</el-button> |
|
|
|
<el-button :loading="deleteLoading" size="mini" :disabled="!hasSelectedItems" @click="batchDelete"> |
|
|
|
<i class="iconfont icon-shanchu" />批量删除 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="content-area"> |
|
|
|
<div class="area-config"> |
|
|
|
<bookRecommend ref="bookRecommendRef" @ready="initScreenBookRecommend" /> |
|
|
|
</div> |
|
|
|
<el-table |
|
|
|
ref="table" |
|
|
|
height="calc(100vh - 232px)" |
|
|
|
:data="bookList" |
|
|
|
@selection-change="handleSelectionChange" |
|
|
|
@row-dblclick="handleRowDbClick" |
|
|
|
> |
|
|
|
<el-table-column type="selection" align="center" width="55" /> |
|
|
|
<el-table-column prop="icon" label="封面" align="center" width="100"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<img |
|
|
|
style="height:60px;display:block;margin:0 auto;" |
|
|
|
:src="scope.row.imgPath ? `${baseApi}/api/fileRelevant/getImg?imgType=2&imgId=${scope.row.imgPath}` : require('@/assets/images/screen/book.png')" |
|
|
|
alt="封面" |
|
|
|
> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="题名" prop="name" width="300" :show-overflow-tooltip="true" /> |
|
|
|
<el-table-column label="著者" prop="author" /> |
|
|
|
<el-table-column label="出版社" prop="publisher" /> |
|
|
|
<el-table-column label="ISBN" prop="isbn" /> |
|
|
|
<el-table-column label="分类号" prop="classNo" /> |
|
|
|
<el-table-column label="出版年份" prop="publisherdate" /> |
|
|
|
<el-table-column label="上传时间" prop="create_time" width="160"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div>{{ scope.row.create_time | parseTime }}</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 图书详情弹窗 --> |
|
|
|
<el-dialog |
|
|
|
title="图书详情" |
|
|
|
:visible.sync="detailVisible" |
|
|
|
width="800px" |
|
|
|
append-to-body |
|
|
|
:close-on-click-modal="false" |
|
|
|
@close="closeDetail" |
|
|
|
> |
|
|
|
<div v-if="detailData" class="detail-box"> |
|
|
|
<div class="detail-item"> |
|
|
|
<span>书名：</span><p>{{ detailData.name }}</p> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span>作者：</span><p>{{ detailData.author || '-' }}</p> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span>出版社：</span><p>{{ detailData.publisher || '-' }}</p> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span>ISBN：</span><p>{{ detailData.isbn || '-' }}</p> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span>分类号：</span><p>{{ detailData.classNo || '-' }}</p> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span>出版日期：</span><p>{{ detailData.publisherdate || '-' }}</p> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span>图书介绍：</span><p>{{ detailData.explain || '-' }}</p> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span>上传时间：</span><p>{{ detailData.create_time | parseTime }}</p> |
|
|
|
</div> |
|
|
|
<div class="detail-img"> |
|
|
|
<img :src="detailData.imgPath ? `${baseApi}/api/fileRelevant/getImg?imgType=2&imgId=${detailData.imgPath}` : require('@/assets/images/screen/book.png')" alt="图书封面"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<addBookDialog ref="addBookRef" @refresh="updateBookItem" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import bookRecommend from '../digitalScreen/module/bookRecommend' |
|
|
|
import { FetchInitScreenBookRecommend, FetchDeleteScreenBookRecommend } from '@/api/digitalScreen/index' |
|
|
|
import addBookDialog from '../digitalScreen/module/addBookDialog' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'BookRecommend', |
|
|
|
components: { |
|
|
|
bookRecommend |
|
|
|
}, |
|
|
|
components: { addBookDialog }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
deleteLoading: false, |
|
|
|
bookList: [], |
|
|
|
selectedItems: [], |
|
|
|
detailVisible: false, |
|
|
|
detailData: null |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters([ |
|
|
|
'baseApi', |
|
|
|
'user' |
|
|
|
]) |
|
|
|
}, |
|
|
|
created() { |
|
|
|
...mapGetters(['baseApi', 'user']), |
|
|
|
hasSelectedItems() { |
|
|
|
return this.selectedItems.length > 0 |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.initScreenBookRecommend() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 多选 |
|
|
|
handleSelectionChange(val) { |
|
|
|
this.selectedItems = val |
|
|
|
}, |
|
|
|
|
|
|
|
// 双击查看详情 |
|
|
|
handleRowDbClick(row) { |
|
|
|
this.detailData = row |
|
|
|
this.detailVisible = true |
|
|
|
}, |
|
|
|
|
|
|
|
// 关闭详情 |
|
|
|
closeDetail() { |
|
|
|
this.detailVisible = false |
|
|
|
this.detailData = null |
|
|
|
}, |
|
|
|
|
|
|
|
initScreenBookRecommend() { |
|
|
|
this.$refs.bookRecommendRef.initScreenBookRecommend() |
|
|
|
if (this.$refs.bookRecommendRef) { |
|
|
|
this.$refs.bookRecommendRef.updateBookSwiper() |
|
|
|
} |
|
|
|
const param = { libcode: this.user.fonds.fondsNo } |
|
|
|
FetchInitScreenBookRecommend(param).then(res => { |
|
|
|
this.bookList = res |
|
|
|
}).catch(err => console.log(err)) |
|
|
|
}, |
|
|
|
|
|
|
|
uploadBook() { |
|
|
|
this.$refs.addBookRef.addBookDialogVisible = true |
|
|
|
}, |
|
|
|
|
|
|
|
updateBookItem() { |
|
|
|
this.initScreenBookRecommend() |
|
|
|
}, |
|
|
|
|
|
|
|
// 批量删除 |
|
|
|
batchDelete() { |
|
|
|
const count = this.selectedItems.length |
|
|
|
if (count === 0) return this.$message.warning('请选择图书') |
|
|
|
|
|
|
|
this.deleteLoading = true |
|
|
|
this.$confirm(`确定删除所选得图书？`, '提示', { type: 'warning' }).then(() => { |
|
|
|
const ids = this.selectedItems.map(item => item.id) |
|
|
|
FetchDeleteScreenBookRecommend(ids).then(res => { |
|
|
|
if (res.code !== 500) { |
|
|
|
this.$message.success(`删除成功 ${count} 本`) |
|
|
|
this.initScreenBookRecommend() |
|
|
|
this.$refs.table.clearSelection() |
|
|
|
} else { |
|
|
|
this.$message.error('删除失败') |
|
|
|
} |
|
|
|
this.deleteLoading = false |
|
|
|
}).catch(() => { |
|
|
|
this.$message.error('删除异常') |
|
|
|
this.deleteLoading = false |
|
|
|
}) |
|
|
|
}).catch(() => { |
|
|
|
this.deleteLoading = false |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -46,9 +176,37 @@ export default { |
|
|
|
<style scoped lang="scss"> |
|
|
|
@import "~@/assets/styles/digitalScreen.scss"; |
|
|
|
.content-area { |
|
|
|
height: 734px; |
|
|
|
border-radius: 4px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-box { |
|
|
|
padding: 10px; |
|
|
|
.detail-item { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 28px; |
|
|
|
color: #333; |
|
|
|
span { |
|
|
|
display: block; |
|
|
|
width:100px; |
|
|
|
text-align: right; |
|
|
|
font-weight: bold; |
|
|
|
color: #333; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
p{ |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
.detail-img { |
|
|
|
text-align: center; |
|
|
|
margin-top: 15px; |
|
|
|
img { |
|
|
|
height: 180px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
