阶段性上传

src/views/modules/shop/chooseBook.vue

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

src/views/modules/shop/shopproduct-add-or-update.vue

@@ -11,6 +11,38 @@
           </el-option>
         </el-select>
       </el-form-item>
+      <!-- 关联的图书ids -->     
+      <el-form-item label="关联图书" prop="Books">        
+        <el-table
+          :data="dataForm.Books"
+          stripe
+          style="width: 100%">
+          <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-column
+             prop="images"
+            label="是否可试听"            
+           >
+          </el-table-column> -->
+          <el-table-column width="180">
+            <template slot-scope="scope">
+              <el-button type="danger" @click="deliteBook(scope.$index)">删除</el-button>
+            </template>            
+          </el-table-column>
+        </el-table>
+        <div style="text-align: center;">
+          <el-button type="primary" size="mini" plain @click="showChooseBook">添加</el-button>
+        </div>
+      </el-form-item>     
       <el-form-item label="商品名称" prop="productName">
         <el-input v-model="dataForm.productName" placeholder="商品名称"></el-input>
       </el-form-item>
@@ -27,7 +59,7 @@
         </el-dialog>
       </el-form-item>
       <el-form-item label="商品轮播图" prop="productImageList">
-        <el-upload :limit="5" class="el-uploadfeng noneBtnImg"
+        <el-upload :limit="5" class="el-uploadfeng noneBtnImg" 
           :class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
           :action="baseUrl + '/oss/fileoss'" list-type="picture-card" :on-preview="handlePictureCardPreview"
           :file-list="swiperfileList" :on-success="bannerHandlePicSuccess" accept=".jpeg,.jpg,.gif,.png"
@@ -84,6 +116,12 @@
           <el-input v-model="dataForm.format" placeholder="16开或其他规格"></el-input>
         </el-form-item>
       </div>
+      <!-- 关联的图书ids -->
+      <!-- <div style="clear: both;">
+        <el-form-item label="关联图书" prop="Books">
+          
+        </el-form-item>
+      </div> -->
       <div style="clear: both;">
         <el-form-item label="是否包邮" prop="isFreeMail">
           <el-radio-group v-model="dataForm.isFreeMail">
@@ -106,7 +144,7 @@
       <el-button @click="handlereset">取消</el-button>
       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
     </span>
-  </el-dialog>
+  </el-dialog>  
 </template>
 
 <script>
@@ -163,8 +201,12 @@
           delFlag: '',
           sort: '',
           goodsType: '', // 商品类型
-          poids: []
+          poids: [],
+          
+          Books: [] // 关联的图书
+
         },
+        bookidsd:[],
         dataRule: {
           productName: [{
             required: true,
@@ -271,7 +313,13 @@
     created() {
       this.getTreeList()
     },
-    methods: {
+  methods: {
+    showChooseBook() { 
+      // 显示图书列表  
+      this.$emit("showchooseBookf", { 'bookIds': this.dataForm.Books });   
+      console.log('发送指令')
+      this.$bus.$emit("showchooseBook", { 'bookIds': this.dataForm.Books });
+    },
       init(id) {
         this.dataForm.productId = id || 0
         this.visible = true
@@ -308,6 +356,14 @@
                 this.dataForm.poids = data.shopProduct.poids
                 this.dataForm.productStock = data.shopProduct.productStock
                 this.dataForm.hDprice = data.shopProduct.activityPrice
+                let arrArr = []
+
+                if (data.shopProduct.bookidsimages !== '') {
+                  this.dataForm.Books = data.shopProduct.bookidsimages
+                }
+                
+                sessionStorage.setItem('Books', JSON.stringify(this.dataForm.Books))
+
                 if (data.shopProduct.productImages != "") {
                   var img = {
                     name: '',
@@ -317,18 +373,19 @@
                   attr.push(img)
                   this.fileList = attr
                 }
+
                 if (data.shopProduct.productImageList == null || data.shopProduct.productImageList[0] == '' ||
                   data.shopProduct.productImageList == "") {
-                  return this.swiperfileList = []
-                }
-              } else {
+                  this.swiperfileList = []
+                  console.log('走这')
+                }else {
                 // 有轮播图
                 console.log(data.shopProduct.productImageList)
                 let arr = []
                 let arr1 = []
 
                 arr = data.shopProduct.productImageList.split(',');
-                console.log(arr)
+                console.log(arr, '处理后得轮播图数组')
                 arr.forEach((item, index) => {
                   arr1.push({
                     name: index,
@@ -337,6 +394,7 @@
                 });
                 this.swiperfileList = arr1
               }
+              } 
             })
           }
         })
@@ -352,14 +410,23 @@
           console.log(data.dataList)
           this.goodsTypeList = data.dataList
         })
-      },
+    },
+      // 删除图书
+    deliteBook(index) { 
+      this.dataForm.Books.splice(index, 1)
+      sessionStorage.setItem('Books',JSON.stringify(this.dataForm.Books))
+    },
       dealImgChange(file, fileList) {
         this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
       },
       // 表单提交
-      dataFormSubmit() {
+    dataFormSubmit() {
+      this.getBookIds()
+      // console.log(this.bookidsd,'this.bookidsd')
+      //    return false
         this.$refs['dataForm'].validate((valid) => {
           this.dataForm.productImageList = this.getStringImgUrl()
+          var bookIDS = this.getBookIds()
           //  console.log(this.dataForm.productImageList)
           if (valid) {
             this.$http({
@@ -388,7 +455,9 @@
                 'pageNum': this.dataForm.pageNum,
                 'quality': this.dataForm.quality, // 内文用纸
                 'productStock': this.dataForm.productStock, // 库存
-                'activityPrice': this.dataForm.hDprice
+                'activityPrice': this.dataForm.hDprice,
+                'bookids': this.bookidsd,     // 关联的图书
+                'bookidsimages': this.dataForm.Books     // 关联的图书对象
               })
             }).then(({
               data
@@ -414,7 +483,14 @@
       },
       changeTime(e) {
         console.log(e)
-      },
+    },
+    getBookIds() { 
+      // 图书ids
+     console.log(this.dataForm.Books,'Books')
+      this.bookidsd = this.dataForm.Books.map(item => { 
+          return item.id
+      })
+    },
       getTreeList() {
         this.$http({
           url: this.$http.adornUrl(`/book/shopcategory/listTree`),
@@ -497,7 +573,15 @@
     },
     components: {
       quillEditor
-    },
+  },
+  mounted() {
+    this.$bus.$on("haveBookIds", (data) => {  
+        sessionStorage.setItem('Books', JSON.stringify(data.bookIds))   
+      //  console.log('haveBookIds',data)         
+        data.bookIds.length > 0 ? this.dataForm.Books = data.bookIds : this.dataForm.Books = []
+      });
+  },
+
     watch: {
       visible: {
         handler(val, oldVal) {

src/views/modules/shop/shopproduct.vue

@@ -66,11 +66,13 @@
       layout="total, sizes, prev, pager, next, jumper">
     </el-pagination>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @showchooseBookf = "showchooseBookf"></add-or-update>
+    <choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book>  
   </div>
 </template>
 
 <script>
+  import chooseBook from './chooseBook.vue'
   import AddOrUpdate from './shopproduct-add-or-update'
   export default {
     data () {
@@ -85,16 +87,32 @@
         totalPage: 0,
         dataListLoading: false,
         dataListSelections: [],
-        addOrUpdateVisible: false
+        addOrUpdateVisible: false,
+        chooseBookVisible: false,
+        bookIds:[]
       }
     },
     components: {
-      AddOrUpdate
+      AddOrUpdate,
+      chooseBook
     },
     activated () {
       this.getDataList()
     },
-    methods: {
+  methods: {
+    closeBookf() {
+      this.chooseBookVisible = false      
+     },
+    showchooseBookf(e) { 
+     // 显示图书列表
+      this.chooseBookVisible = true      
+      console.log(this.bookIds,'this.bookIds')
+      // this.$nextTick(() => {
+      //   this.$refs.chooseBook.getBookList()
+      //   this.bookIds = e.bookIds
+      //   })
+      
+    },
       // 获取数据列表
       getDataList () {
         this.dataListLoading = true