qimall/addons/CloudStock/backend/views/components/free-goods-choice.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="free-goods-choice">
    <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-tag type="danger">下列商品为云库存商品</el-tag>
		   </div>

           <el-table :data="list" v-loading="listLoading" border style="width: 100%;margin-top: 10px;"  @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="60px" label="ID" props="id" v-if="multiple"></el-table-column>
               <el-table-column width="100px" label="商品id" props="id" v-else>
                   <template slot-scope="props">
                       <el-radio-group v-model="radioSelection" @change="handleSelectionChange(props.row)">
                           <el-radio :label="props.row.goods_id"></el-radio>
                       </el-radio-group>
                   </template>
               </el-table-column>
               <el-table-column v-if="multiple" prop="goods_id" label="商品id" width="80" align="center"></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('free-goods-choice', {
        template: '#free-goods-choice',
        props: {
            url: {
                type: String,
                default: 'cloud-stock/gift-bag/get-cloud-stock-goods-list',
            },
            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;

				request({
				    params: {
				        r: this.url,
				        page: page,
						limit:10
				    },
				    method: 'get',
				}).then(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;
				    console.log(e);
				});

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            confirm() {
                this.visible = false;
                this.$emit('selected', this.multipleSelection);
                this.$emit('input', this.multipleSelection);
            },
			currentChange(){

			}
        }
    });
</script>