qimall/backend/views/components/common/diy/style-components/diy-goods-group.php

<template id="diy-goods-group">
    <div class="pick-goods">
        <com-pick-link @selected="selectNavUrl" :default-select-list="selectList" :title="title" :show-id="showId" :pick-type="pickType" :default-tabs="defaultTabs">
            <slot></slot>
        </com-pick-link>
        <div flex="cross:center" style="margin-top: 20px;flex-wrap:wrap" v-if="pickImgList.length">
            <div class="pickImgItem" v-for="(item,index) in pickImgList" :key="index" @mouseenter="mouseenter(index)" @mouseleave="mouseleave(index)">
                <el-image style="width: 50px; height: 50px" :src="item.params.img" fit="contain"></el-image>
                <div v-show="index == pickIndex || item.visible">
                    <el-popover placement="bottom" v-model="item.visible">
                        <p class="diy-del-text">确定删除吗？</p>
                        <div flex="cross:center">
                            <el-button class="diy-del-btn" size="mini" plain @click="delModel(index)">删除</el-button>
                            <el-button size="mini" plain @click="item.visible = false">取消</el-button>
                        </div>
                        <i class="el-icon-close" slot="reference" style="color:#999;"></i>
                    </el-popover>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    Vue.component('diy-goods-group', {
        name: "diy-goods-group",
        template: "#diy-goods-group",
        props: {
            /* 选择链接弹窗 */
            // 最大数量：-1(无限制)
            maxLength: {
                type: [String,Number],
                default: -1
            },
            // 传入数组，数组可字符串和对象 [{name: 'goods',children:['goods_cate'] }]
            defaultTabs: {  // 选择需要的tabs栏
                type: Array,
                default () {
                    return []
                },
            },
            showId: { // 单选按钮旁边是否显示id
                type: Boolean,
                default: true
            },
            pickType: { // 列表选择多个还是单个参数，如：['online_goods','diy']，默认单选
                type: Array,
                default () {
                    return []
                },
            },
            title: { //弹窗标题
                type: String,
                default: '',
            },
            /* 选中的商品列表 */
            list: {
                type: Array,
                default: () => {
                    return []
                },
            }
        },
        data() {
            return {
                pickIndex: -1,
                pickImgList: [],
                selectList: [],
            }
        },
        watch: {
            list: {
                immediate: true,
                handler(val) {
                    this.pickImgList = [];
                    this.pickImgList.push(...val)
                    this.setDefaultSelectIds();
                },
            },
        },
        methods: {
            selectNavUrl(e) {
                let self = this;
                e = e.filter(function (item) {
                    if (self.selectList.length > 0) {
                        return !self.selectList.includes(item.params.id);
                    }
                    return item;
                });
                if (this.maxLength != -1 && this.pickImgList.length > this.maxLength) {
                    this.$message({
                        message: `最多添加${this.maxLength}件商品噢`,
                        type: 'warning'
                    });
                }
                this.pickImgList.push(...e);
                this.$emit("change",e, -1, 'add');
                this.setDefaultSelectIds();
            },
            setDefaultSelectIds() {
                let pickData = this.pickImgList;
                let selectIds = [];
                pickData.forEach(item => {
                    selectIds.push(item.params.id);
                })
                this.selectList = selectIds.filter((item, index, selectIds) => selectIds.indexOf(item) === index);
            },
            mouseenter(index) {
                this.pickIndex = index
            },
            mouseleave() {
                this.pickIndex = -1
            },
            delModel(index) {
                this.pickImgList.splice(index, 1)
                console.info("删除",this.pickImgList);
                this.$emit("change",this.pickImgList, index, 'del');
                this.selectList.splice(index, 1);
            },
        }
    });
</script>

<style>
    .diy-tab-item {
        padding: 10px;
    }
    .pickImgItem {
        position: relative;
        width: 50px;
        height: 50px;
        margin: 0 9px 9px 0;
        background-color: #ddd;
        cursor: pointer;
    }
    .pickImgItem .el-icon-close {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 12px;
    }
    .add-goods-btn {
        border: 1px dashed #6b7685;
        line-height: 32px;
        height: 32px;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
    }
</style>