阶段性上传
This commit is contained in:
@fawn-nine
204
src/views/modules/shop/chooseBook.vue
Normal file
204
src/views/modules/shop/chooseBook.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!-- 选择关联图书 -->
|
||||
<el-dialog v-if="tableData.length > 0"
|
||||
title="请选择"
|
||||
v-loading="loading"
|
||||
:visible.sync="chooseBookVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getBookList()">
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.key" placeholder="图书名" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getBookList()">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
ref="multipleTablebb"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name" label="日期" >
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="images"
|
||||
label="封面图"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<img :src="scope.row.images" width="100" height="100">
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper">
|
||||
</el-pagination>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="chooseBookVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitBookIds">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
chooseBookVisible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
bookIds: {
|
||||
type: Array,
|
||||
value:[]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataForm: {
|
||||
key:''
|
||||
},
|
||||
pageSize: 10,
|
||||
pageIndex: 1,
|
||||
oldSelected:[],
|
||||
totalPage: 0,
|
||||
tableData: [],
|
||||
loading: false,
|
||||
selectedBooks: [], // 选中的书籍
|
||||
show : this.chooseBookVisible
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getBookList()
|
||||
},
|
||||
mounted() {
|
||||
this.$bus.$on("showchooseBook", (data) => {
|
||||
if (data.bookIds.length > 0) {
|
||||
this.$nextTick(()=> {
|
||||
//this.toggleSelection() // 获取到已选中的数据
|
||||
this.oldSelected = data.bookIds
|
||||
console.log(this.oldSelected,'oldSelected')
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
getBookList() {
|
||||
this.loading = true
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/book/book/list'),
|
||||
method: 'get',
|
||||
params: this.$http.adornParams({
|
||||
'page': this.pageIndex,
|
||||
'limit': this.pageSize,
|
||||
'bookName': this.dataForm.key,
|
||||
// 'publisherName' : this.query.publisherName,
|
||||
// 'authorName' : this.query.authorName
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.tableData = data.page.list
|
||||
this.totalPage = data.page.totalCount
|
||||
this.oldSelected = JSON.parse(sessionStorage.getItem('Books'))
|
||||
this.$nextTick(()=> {
|
||||
this.toggleSelection() // 获取到已选中的数据
|
||||
|
||||
})
|
||||
} else {
|
||||
this.dataList = []
|
||||
this.totalPage = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 渲染默认选中
|
||||
toggleSelection() {
|
||||
// console.log('渲染选中', this.oldSelected)
|
||||
this.tableData.forEach((item1) => {
|
||||
this.oldSelected.forEach((item2) => {
|
||||
if (item2.id == item1.id) {
|
||||
this.selectedBooks.push(item1)
|
||||
this.$refs.multipleTablebb.toggleRowSelection(item1, true)
|
||||
console.log(item1,'item1')
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// if (this.oldSelected.length > 0) {
|
||||
// this.selectedBooks.forEach(item => {
|
||||
// this.$refs.multipleTablebb.toggleRowSelection(item, true);
|
||||
// })
|
||||
|
||||
// }
|
||||
},
|
||||
submitBookIds() {
|
||||
// 提交bookids
|
||||
this.$bus.$emit("haveBookIds", { 'bookIds': this.selectedBooks });
|
||||
this.handleClose()
|
||||
},
|
||||
handleSelectionChange(e) {
|
||||
console.log(e)
|
||||
this.selectedBooks = e
|
||||
},
|
||||
handleClose() { // 关闭组件
|
||||
this.$emit('closeBookf', false)
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.pageSize = val
|
||||
this.pageIndex = 1
|
||||
this.getBookList()
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.pageIndex = val
|
||||
this.getBookList()
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
bookIds: {
|
||||
handler(val, oldVal) {
|
||||
console.log(val, 'cal')
|
||||
// if (val.length > 0) {
|
||||
// this.selectedBooks = val
|
||||
// val.forEach(item => {
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.multipleTablebb.toggleRowSelection(item, true);
|
||||
// });
|
||||
// })
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// this.toggleSelection()
|
||||
// });
|
||||
// }
|
||||
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user