qimall/backend/modules/mall/views/goods/component/com-attr.php

<style>
    .com-attr .box {
        line-height: 64px;
        border-top: 1px solid #E8EAEE;
        border-left: 1px solid #E8EAEE;
        border-right: 1px solid #E8EAEE;
        padding: 0 16px;
    }

    .com-attr .box .batch {
        margin-left: -10px;
        margin-right: 20px;
    }
    .com-attr .el-select .el-input {
        width: 130px;
    }

    .com-attr .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }

    .com-attr .header-require:before {
        content: '*';
        color: #F56C6C;
        margin-right: 2px;
    }

    .text .el-input-group__append{
        padding: 0 10px;
    }
</style>
<template id="com-attr">
    <div class="com-attr">
        <div class="box">
            <el-checkbox v-model="attrBatch" @change="selectClick" :disabled="!cData || cData.length == 0"
                         style="position:absolute">全选
            </el-checkbox>
            <el-form-item label="批量设置" style="margin-bottom:0;padding:18px 0">
                <el-input @keyup.enter.native="batchAttr(selectData)"
                          :type="selectData == 'goods_no' ? 'text' : 'number'" v-model="batch">
                    <el-select v-model="selectData" slot="prepend">
                        <el-option v-for="(item, index) in cList" :value="index" :key="index" v-if="index!='pic_url'" :label="item+''">{{item}}
                        </el-option>
                    </el-select>
                    <template slot="append">
                        <el-button @click="batchAttr(selectData)">
                            确定
                        </el-button>
                    </template>
                </el-input>
            </el-form-item>
        </div>
        <el-table ref="multipleTable" :data="cData" border stripe style="width: 100%"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
                    v-for="(item, index) in attrGroups"
                    :key="item.id"
                    :prop="'attr_list['+index+'].attr_name'"
                    :label="item.attr_group_name">
            </el-table-column>
            <el-table-column v-if="cList"
                             v-for="(item, key, index) in cList"
                             :key="index"
                             :property="key"
                             :label="item + (append ? '(' + append + ')' : '')">
                <template slot="header" v-if="key===`price` || key=== `stock`|| key=== `original_price`||key=== `cost_price`">
                    <div class="header-require">{{item}}</div>
                </template>
                <template slot-scope="scope">
                    <template v-if="!isLevel">
                        <div flex="box:first" v-if="scope.column.property == 'pic_url'" style="padding: 10px;">
                            <div flex="cross:center" style="margin-right: 10px;position: relative;">
                                <com-attachment :multiple="false" :params="scope.row" :max="1"
                                                v-model="scope.row[scope.column.property]">
                                    <com-gallery :url="scope.row[scope.column.property]"
                                                 width="50px" height="50px"></com-gallery>
                                </com-attachment>
                                <el-button v-if="scope.row[scope.column.property]" style="position: absolute; right: -8px; top: -8px; padding: 4px 4px;"
                                           size="mini" type="danger" icon="el-icon-close" circle
                                           @click="scope.row[scope.column.property] = ''"></el-button>
                            </div>
                        </div>
                        <span v-else-if="scope.column.property == 'is_show'">
                            <el-checkbox v-model="scope.row[scope.column.property]" @change="checked=>handleHide(checked, scope.row)">显示</el-checkbox>
                        </span>
                        <el-input v-else-if="scope.column.property == 'goods_no'" v-model="scope.row[scope.column.property]"></el-input>
                        <!-- <div v-else-if="scope.column.property.indexOf('price') > -1 || scope.column.property.indexOf('level')">{{scope.column.property}}</div> -->
                        <el-input v-else-if="scope.column.property.indexOf('price') > -1 || scope.column.property.indexOf('level')" type="number" v-model="scope.row[scope.column.property]"></el-input>
                        <el-input v-else oninput="this.value = this.value.replace(/[^0-9]/g, '');" v-model="scope.row[scope.column.property]">
                            <template v-if="append" slot="append">{{append}}</template>
                        </el-input>
                    </template>
                    <template v-else>
                        <el-input :data-id="scope.row[scope.column.label]" type="number" class="text"
                                  v-model="scope.row[memberSettingKey][scope.column.property]">
                            <template v-if="scope.row.levelPrice && scope.row.levelPrice[scope.column.property] >= 0" slot="append" style="padding: 10px;">参考价：{{scope.row.levelPrice[scope.column.property]}}元</template>
                        </el-input>
                    </template>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    Vue.component('com-attr', {
        template: '#com-attr',
        props: {
            value: Array, // 商品规格信息
            attrGroups: Array, // 商品规格组
            extra: Object, // 额外的数据信息
            list: Object | Array, // 从排列数据信息
            isLevel: Boolean, // 是否是会员
            members: Array, // 会员等级列表
            share: Array, // 分销等级列表
            append: String, // 输入框后缀
            paramKey: {
                type: String,
                default() {
                    return 'member_price';
                }
            },
            isShowAttr: {
                type: Boolean,
                default: function () {
                    return false
                }
            }
        },
        data() {
            return {
                attrBatch: false,
                data: {
                    original_price: '划线价',
                    cost_price: '成本价',
                    price: '售价',
                    stock: '库存',
                    weight: '重量(克)',
                    goods_no: '货号',
                    //pic_url: '规格图片',
                },
                selectData: '',
                batch: 0,
                selectList: [],
                memberSettingKey: 'member_price_setting',
            };
        },
        created() {
            let that = this;
            // console.info(this.value,"members");
            if (this.isLevel) {
                for (let i in this.value){
                    if (this.value[i][this.memberSettingKey]) {
                        continue;
                    }
                    let price_key = this.value[i].sign_id;
                    let members = JSON.parse(JSON.stringify(this.members));
                    let obj = {};
                    members.forEach(function (memberLevelItem, memberLevelIndex) {
                        let key = 'level' + memberLevelItem.level;
                        // console.info(memberLevelItem.value,"memberLevelItem.value",price_key)
                        if (memberLevelItem.value && JSON.stringify(memberLevelItem.value) != "{}") {
                            memberLevelItem.value[price_key] = memberLevelItem.value[price_key]?memberLevelItem.value[price_key]:0;
                            that.$set(obj,key,memberLevelItem.value[price_key]);
                        } else {
                            that.$set(obj,key,0);
                        }
                    });
                    that.$set(this.value[i],this.memberSettingKey,obj);
                }
                console.info(this.value);
            }
        },
        watch: {
            'selectList'(oldData, newData) {
                const self = this;
                let sign = 0;
                this.value.forEach(function (item, index) {
                    self.selectList.map((item1) => {
                        if (JSON.stringify(item1.attr_list) === JSON.stringify(item.attr_list)) {
                            sign++;
                        }
                    });
                });
                self.attrBatch = self.value.length === sign;
            },
        },
        computed: {
            cList() {
                // TODO 分销数据暂时
                if (this.share) {
                    let share = JSON.parse(JSON.stringify(this.share));
                    let obj = {};
                    for (let i = 0; i < share.length; i++) {
                        obj[share[i].value] = share[i].label;
                    }
                    return obj;
                }
                // TODO 会员数据暂时
                if (this.isLevel) {
                    let members = JSON.parse(JSON.stringify(this.members));
                    let obj = {};
                    for (let i = 0; i < members.length; i++) {
                        if(members[i].level == 0){
                            continue;
                        }
                        obj['level' + members[i].level] = members[i].name
                    }
                    return obj;
                } else {
                    if(this.isShowAttr && !this.data.hasOwnProperty('is_show')){
                        this.data['is_show'] = '显示sku'
                    }
                    if (this.extra) {
                        return Object.assign(this.data, JSON.parse(JSON.stringify(this.extra)));
                    } else if (this.list) {
                        return JSON.parse(JSON.stringify(this.list))
                    } else {
                        return this.data;
                    }
                }
            },
            cData() {
                if (this.attrGroups && this.attrGroups.length > 0 && this.attrGroups[0].attr_list.length === 0) {
                    return [];
                } else {
                    return this.value;
                }
            },
        },
        methods: {
            handleHide(checked, row){
                // 确保每个规格组下的规格值至少有一个是显示的
                if(checked == true) return
            
                let cData = this.cData
                let attrGroups = this.attrGroups
                for(let j = 0; j < attrGroups.length; j++){
                    let attrList = attrGroups[j]['attr_list']
                    if(attrGroups.length > 1){// 多个规格组
                        for(let m = 0; m < attrList.length; m++){
                            // 显示的sku数量
                            let count = 0
                            for(let i = 0; i < cData.length; i++){
                                let sign_id_arr = cData[i].sign_id.split(':')
                                if(sign_id_arr.indexOf(attrList[m].attr_id.toString()) > -1){
                                    // 存在显示的规格值
                                    if(cData[i].is_show == true){
                                        count = 1
                                        break
                                    }
                                }
                            }
                            if(count <= 0){
                                this.$message.warning('每个规格组下至少有一个规格值是显示的')
                                row.is_show = true
                                return
                            }
                        }
                    }else{//一个规格组
                        let count = 0
                        for(let i = 0; i < cData.length; i++){
                            if(cData[i].is_show == true){
                                count = 1
                                break
                            }
                
                        }
                        if(count <= 0){
                            this.$message.warning('每个规格组下至少有一个规格值是显示的')
                            row.is_show = true
                            return
                        }
                    }
                }
                
            },
            selectClick() {
                this.$refs.multipleTable.toggleAllSelection();
            },
            handleSelectionChange(data) {
                this.selectList = data;
            },
            batchAttr(param) {
                if (!param) {
                    this.$message.warning('请选择批量设置');
                    return;
                }
                if (!this.selectList || this.selectList.length === 0) {
                    this.$message.warning('请勾选商品规格');
                    return;
                }
                let self = this;
                let batch = self.batch;
                this.value.forEach((item, index) => {
                    console.info(item,self.selectList);
                    let sign = false;
                    self.selectList.map((item1) => {
                        if (JSON.stringify(item1.attr_list) === JSON.stringify(item.attr_list)) {
                            sign = true;
                        }
                    });
                    if (sign) {
                        // 批量设置会员价
                        // 判断字符串是否出现过，并返回位置
                        console.info(param);
                        if (param.indexOf('level') !== -1) {
                            // item[this.paramKey][param] = batch;
                            // item.levelPrice[param] = batch;
                            item[self.memberSettingKey][param] = batch;
                        } else {
                            self.$set(item,param,batch)
                            // item[memberSettingKey][param] = batch;
                        }
                    }
                });
            }
        }
    });
</script>