nuttyreading-master-html/src/views/modules/shop/pubilc-pro-list.vue

<template>
    <el-dialog title="选择商品" center :visible.sync="visible" :before-close="handleClose">   
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button type="primary" @click="sedSelectPro">确 定</el-button>
      </el-form-item>
    </el-form>
      <el-table ref="multipleTable"
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>      
      <el-table-column
        prop="productName"
        header-align="center"
        align="center"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="price"
        header-align="center"
        align="center"
        label="商品价格">
      </el-table-column>           
      <el-table-column header-align="center" align="center" label="商品图">
        <template slot-scope="scope">
          <img v-if="scope.row.productImages != ''" :src="scope.row.productImages" width="30" height="30" class="tableImg" />
        </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>    
    </el-dialog>
  </template>
  
  <script>
  export default {
    props: {
        visible: {
            type: Boolean,
            value: false
        },
        deliverOrder: {
            type: Object,
            value: {}
        }
    },
    data() {
      return {  
        dataForm:{
          key:''
        },   
        selectTitle:'',
        oldSelected:[],
        dataList: [],       
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        listIndex: -1
      }
    },
    create(){
     
    },
    mounted(){
     // console.log(454545)
      this.$bus.$on("ProListVisible", (val) => {
        this.visible = true    
      });
      this.$bus.$on("getListInMes", (data) => {
         this.selectTitle = data.selectTitle
         this.oldSelected = data.ProductList
         this.listIndex = data.ProductListIndex         
      });
    },methods:{
      // 判断初始选中的产品
      check(){
        console.log(this.oldSelected,'check')
          if(this.oldSelected.length > 0){
            this.dataList.forEach((item) => {
               this.oldSelected.forEach((item2) => {
                  if(item.productId == item2.productId){
                    this.dataListSelections.push(item)
                    this.$refs.multipleTable.toggleRowSelection(item)
                  }
            })
            })
            console.log(this.dataListSelections, 'dataListSelections')
          }
      },
      handleClose(){
        this.$emit("ProListClose", false);
      },
      sedSelectPro(){
        console.log(this.dataListSelections)
        this.$bus.$emit('haveSelected', {title:this.selectTitle,list:this.dataListSelections, listIndex: this.listIndex})
        this.listIndex = null
        this.handleClose()
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/book/shopproduct/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
           // console.log(data)
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
            this.$nextTick(()=> {
              this.check()   // 获取到已选中的数据
              
            })
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
    }
  }
  </script>
  <style lang="less" scoped>
  .el-form-item__label {
    font-size: 12px;
  }
  .el-uploadfeng {
    /deep/ .el-upload-list__item {
      width: 300px;
      height: 150px;
    }
  
    /deep/ .el-upload--picture-card {
      width: 60px;
      height: 60px;
      line-height: 70px;
  
    }}
    .pictureList{ 
      /deep/.el-upload--picture{ display: none;}
      /deep/ .el-upload-list{ display: flex; justify-content:space-between; flex-wrap: wrap;
       .el-upload-list__item{
        width:30%;  padding: 5px 5px 5px 87px; height: 66px;
        img{width: 54px; height: 54px;}
        .el-upload-list__item-name{line-height: 54px;}
      }
    }
  }
  </style>