20230303

src/views/modules/shop/pubilc-pro-list.vue

@@ -0,0 +1,195 @@
+<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: [],
+      }
+    },
+    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
+         
+      });
+    },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})
+        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>
+