|
|
|
@ -21,7 +21,7 @@ |
|
|
|
<i v-if="book.selected" class="iconfont icon-wancheng" /> |
|
|
|
<i v-else class="iconfont icon-weixuan" /> |
|
|
|
</div> |
|
|
|
<div class="book-delete" @click.stop="deleteBook(index)"> |
|
|
|
<div class="book-delete" @click.stop="deleteBook(book)"> |
|
|
|
<i class="iconfont icon-shanchu" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -32,7 +32,7 @@ |
|
|
|
</div> |
|
|
|
<div style="display: flex; flex-direction: column; justify-content: flex-start;"> |
|
|
|
<el-button size="mini" type="primary" @click.stop="uploadBook"><i class="iconfont icon-shangchuan" />图书上传</el-button> |
|
|
|
<el-button size="mini" style="margin-left: 0 !important; margin-top: 10px;" :disabled="!hasSelectedItems" @click="batchDelete"> |
|
|
|
<el-button :loading="deleteLoading" size="mini" style="margin-left: 0 !important; margin-top: 10px;" :disabled="!hasSelectedItems" @click="batchDelete"> |
|
|
|
<i class="iconfont icon-shanchu" /> |
|
|
|
批量删除 |
|
|
|
</el-button> |
|
|
|
@ -42,7 +42,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { FetchInitScreenBookRecommend } from '@/api/digitalScreen/index' |
|
|
|
import { FetchInitScreenBookRecommend, FetchDeleteScreenBookRecommend } from '@/api/digitalScreen/index' |
|
|
|
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
|
|
|
import 'swiper/dist/css/swiper.css' |
|
|
|
import addBookDialog from './addBookDialog' |
|
|
|
@ -59,23 +59,8 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
bookList: [ |
|
|
|
// { id: 1, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 2, url: require('@/assets/images/screen/book.jpg'), selected: true }, |
|
|
|
// { id: 3, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 4, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 5, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 6, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 7, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 8, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 9, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 10, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 11, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 12, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 13, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 14, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
|
|
|
// { id: 15, url: require('@/assets/images/screen/book.jpg'), selected: false } |
|
|
|
], |
|
|
|
deleteLoading: false, |
|
|
|
bookList: [], |
|
|
|
swiperOptions: { |
|
|
|
slidesPerView: 'auto', // 保持自动适应数量 |
|
|
|
freeMode: true, // 自由滑动模式 |
|
|
|
@ -122,7 +107,6 @@ export default { |
|
|
|
...item, |
|
|
|
selected: false |
|
|
|
})) |
|
|
|
|
|
|
|
this.bookList = newRes |
|
|
|
}).catch(err => { |
|
|
|
console.log(err) |
|
|
|
@ -145,12 +129,8 @@ export default { |
|
|
|
uploadBook() { |
|
|
|
this.$refs.addBookRef.addBookDialogVisible = true |
|
|
|
}, |
|
|
|
updateBookItem(data) { |
|
|
|
this.bookList.unshift({ |
|
|
|
...data, |
|
|
|
selected: false |
|
|
|
}) |
|
|
|
|
|
|
|
updateBookItem() { |
|
|
|
this.initScreenBookRecommend() |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.bookSwiper.swiper.update() |
|
|
|
this.$refs.bookSwiper.swiper.slideTo(0, 300) |
|
|
|
@ -159,31 +139,62 @@ export default { |
|
|
|
batchDelete() { |
|
|
|
const selectedCount = this.bookList.filter(book => book.selected).length |
|
|
|
if (selectedCount === 0) return |
|
|
|
|
|
|
|
this.deleteLoading = true |
|
|
|
this.$confirm(`确定要删除选中的 ${selectedCount} 本图书吗？`, '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
this.bookList = this.bookList.filter(book => !book.selected) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.bookSwiper.swiper.update() |
|
|
|
const ids = [] |
|
|
|
const selectedBooks = this.bookList.filter(book => book.selected) |
|
|
|
selectedBooks.forEach(book => { |
|
|
|
ids.push(book.id) |
|
|
|
}) |
|
|
|
this.$message.success(`已成功删除 ${selectedCount} 本图书`) |
|
|
|
FetchDeleteScreenBookRecommend(ids).then((res) => { |
|
|
|
console.log('res', res) |
|
|
|
if (res.code !== 500) { |
|
|
|
this.$message({ message: `已成功删除 ${selectedCount} 本图书`, type: 'success', offset: 8 }) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.bookSwiper.swiper.update() |
|
|
|
}) |
|
|
|
this.initScreenBookRecommend() |
|
|
|
} else { |
|
|
|
this.$message({ message: '删除失败', type: 'error', offset: 8 }) |
|
|
|
} |
|
|
|
this.deleteLoading = false |
|
|
|
}).catch(err => { |
|
|
|
console.log(err) |
|
|
|
this.deleteLoading = false |
|
|
|
}) |
|
|
|
// this.bookList = this.bookList.filter(book => !book.selected) |
|
|
|
// this.$message.success(`已成功删除 ${selectedCount} 本图书`) |
|
|
|
}).catch(() => { |
|
|
|
this.deleteLoading = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
deleteBook(index) { |
|
|
|
deleteBook(data) { |
|
|
|
this.$confirm('确定要删除这本图书吗？', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning', |
|
|
|
dangerouslyUseHTMLString: true |
|
|
|
}).then(() => { |
|
|
|
this.bookList.splice(index, 1) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.bookSwiper.swiper.update() |
|
|
|
const ids = [] |
|
|
|
ids.push(data.id) |
|
|
|
FetchDeleteScreenBookRecommend(ids).then((res) => { |
|
|
|
console.log('res', res) |
|
|
|
if (res.code !== 500) { |
|
|
|
this.$message({ message: '删除成功', type: 'success', offset: 8 }) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.bookSwiper.swiper.update() |
|
|
|
}) |
|
|
|
this.initScreenBookRecommend() |
|
|
|
} else { |
|
|
|
this.$message({ message: '删除失败', type: 'error', offset: 8 }) |
|
|
|
} |
|
|
|
}).catch(err => { |
|
|
|
console.log(err) |
|
|
|
}) |
|
|
|
this.$message.success('删除成功！') |
|
|
|
}).catch(() => { |
|
|
|
// 取消删除不做处理 |
|
|
|
}) |
|
|
|
|
