qimall/addons/CloudStockTwo/backend/views/components/cloud_inventory_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="cloud_inventory_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" style="width: 350px;margin: 0 auto;" @keyup.enter.native="getDetail(1)">
           	    <el-button slot="append" @click="getDetail(1)">搜索</el-button>
           	</el-input>
           </div>
		   <div style="display: flex;justify-content: center;margin-top: 10px;">
			    <el-tag type="danger">下列商品为单规格商品（添加到云库存的商品仅支持单规格商品）</el-tag>
		   </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-radio-group v-model="selectId" @change="handleSelectionChange(props.row)">
           	             <el-radio :label="props.row.id"></el-radio>
           	         </el-radio-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('cloud_inventory_goods_select', {
        template: '#cloud_inventory_goods_select',
        props: {
			visible : {
				type: String,
			},
            url: {
                type: String,
                default: 'cloud-stock-two/goods/get-single-goods-list'//'mall/goods/index'
            },
            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:0,
				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) {
                this.multipleSelection = val;
            },
            confirm() {
                this.visible = false;
                this.$emit('selected', this.multipleSelection);
                this.$emit('input', this.multipleSelection);
            },
			currentChange(){
				
			}
        }
    });
</script>