qimall/backend/views/components/common/com-dialog-select.php

<?php
/**
 * @link:http://www.gdqijianshi.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="com-dialog-select">
    <div class="c">
        <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">
            <div>
                <el-form :inline="true" :model="search_data" size="small" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input size="small" placeholder="根据商品名称或商品ID搜索" @keyup.enter.native="search" v-model="search_data.keyword"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input size="small" placeholder="请输入商品售价" @keyup.enter.native="search" v-model="search_data.price"></el-input>
                    </el-form-item>
                    <el-form-item label="" v-if="extraSearchFields.includes('goods_source')">
                        <el-select size="small" placeholder="请选择商品来源" v-model="search_data.goods_source" clearable>
                            <el-option
                                    v-for="item in goodsSource"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getDetail(1)">搜索</el-button>
                        <el-button type="danger" @click="clearSearch" v-if="show_clear_search_btn">清除条件</el-button>
                    </el-form-item>
                </el-form>
				<slot name="inputslot"></slot>
                <el-table ref="multipleTable" border v-loading="listLoading" :data="list" style="margin-top: 24px;"
                          @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.id"></el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="multiple" prop="id" label="ID" width="80" align="center"></el-table-column>
                    <el-table-column label="名称">
                        <template slot-scope="props">
                            <div style="display: flex;">
                                <el-image fit="cover" style="width: 40px;height: 40px;display: block;margin-right: 5px;" :src="props.row.cover_pic"></el-image>
                                <div>
                                    <com-ellipsis :line="2">{{props.row[listKey]}}</com-ellipsis>
                                    <div style="font-size: 12px;color: red;">￥{{props.row.price}}</div>
                                </div>

                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="120" prop="goods_source">
                        <template slot-scope="props">
                            <span v-if="props.row.is_on_sale== 1">上架</span>
                            <span v-else style="color: red;">下架</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="成本价" width="100" prop="cost_price"></el-table-column>
                    <el-table-column label="库存" width="100" prop="stock"></el-table-column>
                    <el-table-column label="商品来源" width="120" prop="goods_source">
                        <template slot-scope="props">
                            <span v-if="props.row.goods_source">
                                 <span v-if="props.row.goods_source=='store'">门店商品</span>
                                 <span v-else-if="props.row.goods_source=='JuheShop'">聚合供应链商品</span>
                                 <span v-else-if="props.row.goods_source=='QiJuhe'">七件事供应链商品</span>
                                 <span v-else-if="props.row.goods_source=='StarChain'">怡亚通供应链商品</span>
                                 <span v-else-if="props.row.goods_source=='JsTanErp'">聚水潭供应链商品</span>
                                 <span v-else >供应链商品</span>
                            </span>
                            <span v-else-if="showMchSource && props.row.mch_id > 0">
                                多商户商品
                            </span>
                            <span v-else>本商城商品</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top: 24px;">
                <el-row>
                    <el-pagination
                        v-if="pagination"
                        style="display: inline-block;"
                        background
                        :page-size="pagination.pageSize"
                        @current-change="getDetail"
                        layout="prev, pager, next"
                        :total="pagination.total_count">
                    </el-pagination>
                    <el-button type="primary" size="small" style="float: right" @click="confirm">选择</el-button>
                </el-row>
            </div>
        </el-dialog>
        <div @click="click" style="display: inline-block">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    Vue.component('com-dialog-select', {
        template: '#com-dialog-select',
        props: {
			/* visible : {
				type: String,
			}, */
            url: {
                type: String,
                default: 'mall/goods/search'
            },
            multiple: Boolean,//是否开启选
            goods_type: {
                type: String,
                default: ''
            },//商品类型
            title: {
                type: String,
                default: '商品选择'
            },
            listKey: { //键值
                type: String,
                default: 'goods_name'
            },
            params: Object,
            display: Boolean,
            extraSearch: Object,
            showMchSource: { // 是否将多商户商品来源显示为多商户
                type: Boolean,
                default: false
            },
            extraSearchFields: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                visible: false,
                listLoading: false,
                list: [],
                total_count:1,
                pageSize:20,
                pagination: null,
                radioSelection: 0,
                keyword: null,
                multipleSelection: [],
                search_data:{
                    keyword:"",
                    price:"",
                    goods_source: undefined
                },
                goodsSource: [
                    {
                        label: '本商城商品',
                        value: 'Main'
                    },
                    {
                        label: '多商户商品',
                        value: 'Mch'
                    },
                    {
                        label: '聚合供应链商品',
                        value: 'JuheShop'
                    },
                    {
                        label: '七件事供应链商品',
                        value: 'QiJuhe'
                    },
                    {
                        label: '怡亚通供应链商品',
                        value: 'StarChain'
                    },
                    {
                        label: '聚水潭供应链商品',
                        value: 'JsTanErp'
                    }
                ]
            }
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.search_data.keyword) || !isEmpty(this.search_data.price) || !isEmpty(this.search_data.goods_source);
            }
        },

        methods: {
            clearSearch() {
                this.search_data.keyword = "";
                this.search_data.price = "";
                this.search_data.goods_source = undefined;
                this.getDetail( );
            },
            close(){
                this.visible=false;
                this.$emit('close');
            },
            click() {

                this.getDetail(1);
                this.visible = !this.visible;
            },
            getDetail(page) {
                this.list = [];
                this.listLoading = true;
                let params = Object.assign({
                    r: this.url,
                    keyword: this.search_data.keyword,
                    price: this.search_data.price,
                    goods_source: this.search_data.goods_source,
                    goods_type: this.goods_type,
                    page: page
                }, this.params, this.extraSearch);
                console.log(1111,params);
                request({
                    params: params
                }).then(e => {
                    this.listLoading = false;
					//console.log("商品的数据=="+JSON.stringify(e))
                    if (e.data.code === 0) {
                        this.list = e.data.data.list;
                        this.pagination = e.data.data.pagination;
                        this.pagination.pageSize = e.data.data.page_size;
                        this.pagination.total_count = this.pagination.totalCount;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.listLoading = false;
                });
            },
			chooseAll(){
				 this.list.forEach(row => {
					this.$refs.multipleTable.toggleRowSelection(row);
				  });
			},
			clear(){
				this.$refs.multipleTable.clearSelection();
			},
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            confirm() {
                let goodsList = JSON.stringify(this.multipleSelection);
                if (goodsList === '[]' || goodsList === '' || goodsList === null || goodsList === undefined || goodsList === '{}' ) {
                    this.$message.error('请选择商品');
                    return;
                }
                this.visible = false;
                this.$emit('selected', this.multipleSelection);
                this.$emit('input', this.multipleSelection);
            }
        }
    });
</script>