qimall/addons/BossWeight/backend/views/components/boss-weight-goods-select.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020 
 * Created by PhpStorm
 * Author: ganxiaohao
 * Date: 2020-04-24
 * Time: 19:33
 */
?>
<style>
    .com-dialog-dialog {
        min-width: 700px;
    }
</style>
<template id="boss-weight-goods-select">
    <div class="com-dialog-select">
        <el-dialog append-to-body :title="title" :visible.sync="visible" :close-on-click-modal="false"
                   custom-class="com-dialog-dialog" :before-close="close" @close="close" center>
           <div style="display: flex;justify-content: center;">
            <el-input placeholder="请输入商品名字" v-model="keyword" size="small"@keyup.enter.native="getDetail(1)">
                <el-button slot="append" @click="getDetail(1)">搜索</el-button>
            </el-input>
           </div>
          
           <el-table
                 :data="list"
                 v-loading="listLoading"
                 border
                 style="width: 100%;margin-top: 10px;">
             <el-table-column width="100px" label="ID" align="center">
                 <template slot-scope="props">
                     <el-checkbox-group v-model="selectId" @change="handleSelectionChange">
                         <el-checkbox :label="props.row.id"></el-checkbox>
                     </el-checkbox-group>
                 </template>
             </el-table-column>
                 <el-table-column
                   prop="name"
                   label="商品名称"
                   >
                <template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
                        <img :src="scope.row.cover_pic" style="width: 40px;height: 40px;display: block;margin-right: 5px;" />
                        <div>{{scope.row.goods_name}}</div>
                    </div>
                </template>
                 </el-table-column>
               </el-table>
            
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination
                    background
                    @current-change="getDetail"
                    layout="prev, pager, next"
                    :page-count="pageCount">
                </el-pagination>
            </div>
            <div style="display: flex;justify-content: center;">
                <el-button type="primary" @click="confirm">确定</el-button>
            </div>
        </el-dialog>
        <div @click="click" style="display: inline-block">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    Vue.component('boss-weight-goods-select', {
        template: '#boss-weight-goods-select',
        props: {
            url: {
                type: String,
                default: 'mall/goods/search'
            },
            multiple: Boolean,
            title: {
                type: String,
                default: '商品选择'
            },
            listKey: {
                type: String,
                default: 'name'
            },
            params: Object,
            display: Boolean,
            extraSearch: Object,
        },
        data() {
            return {
                visible: false,
                listLoading: false,
                list: [],
                pagination: null,
                radioSelection: 0,
                search: {
                    keyword: ''
                },
                multipleSelection: [],
                
                selectId:[],
                tableData:[],
                pageCount:0,
                
                keyword:''
            }
        },

        methods: {
            close(){
                this.visible=false;
                this.$emit('close');
            },
            click() {
                this.getDetail(1);
                this.visible = !this.visible;
            },
            getDetail(page) {
                this.list = [];
                this.listLoading = true;
                console.log('请求商品列表前的参数page='+page+'--url='+this.url+'--keyword='+this.keyword)
                request({
                    params: {
                        r: this.url,
                        page: page,
                        limit:10,
                        keyword:this.keyword
                    },
                    method: 'get',
                }).then(e => {
                    console.log('商品列表结果='+JSON.stringify(e))
                    this.listLoading = false;
                    if (e.data.code === 0) {
                       this.list = e.data.data.list;
                       this.pageCount = e.data.data.page_count;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.listLoading = false;
                });
            },
            handleSelectionChange(val) {

            },
            confirm() {
                let arr = [];
                if(this.selectId.length > 0){
                    this.list.forEach((value,index) => {
                        this.selectId.forEach((v,i) => {
                            if(value.id == v){
                               arr.push(value);
                            }
                        });
   
                    });
                }
                this.multipleSelection = arr;
                console.log(this.multipleSelection);
                this.visible = false;
                this.$emit('selected', this.multipleSelection);
                this.$emit('input', this.multipleSelection);
            },
            currentChange(){
                
            }
        }
    });
</script>