nuttyreading-master-html/src/views/modules/shop/chooseBook.vue

<template>
    <div>        
    
  <!-- 选择关联图书 -->  
    <el-dialog v-if="tableData.length > 0"
        title="请选择图书"  
        :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
            v-loading="loading"
            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="handleClose()">取 消</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('以前选中的部分')
                    // 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')
                }
               
            })
        })
      
         },
        submitBookIds() {
            // 提交bookids      
           // console.log('新选择的：', this.selectedBooks)
            var arr = []            
            if (this.oldSelected.length > 0) {
               // console.log('有之前选中的数据', this.oldSelected)
                arr = this.oldSelected
                arr = arr.concat(this.selectedBooks)               
            } else { 
                arr = this.selectedBooks               
            }
           // console.log('需要提交的数组', arr, this.selectedBooks)            
            this.$bus.$emit("haveBookIds", { 'bookIds': arr });
            this.handleClose()
        },
        handleSelectionChange(e) {
            // console.log(e)
            this.selectedBooks = e
        },
        handleClose() {  // 关闭组件
            this.oldSelected = [],
            this.selectedBooks = []
            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>