qimall/addons/DepositPresale/backend/views/components/goods/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;
    }
</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 == 'no' ? 'text' : 'number'" v-model="batch">
                    <el-select v-model="selectData" slot="prepend">
                        <el-option v-for="(item, index) in extraField" :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" :key="itemKey">
            <el-table-column type="selection" width="70">
            </el-table-column>
            <el-table-column v-for="(item, index) in attrGroups" :key="item.id" :prop="'attr_list['+index+'].attr_name'" :label="'规格'">
            </el-table-column>

            <el-table-column v-if="cList" v-for="(item, key, index) in cList" :key="item.id" :property="key" :label="item + (append ? '(' + append + ')' : '')">

                <!-- <template slot="header" v-if="key===`price` || key=== `stock` || key===`deposit_presale_price`">
                </template> -->

                <template slot-scope="scope">
                    <template>

                        <div flex="box:first" v-if="scope.column.property == 'goods_name'" style="padding: 10px">
                            <div flex="cross:center" style="margin-right: 10px;position: relative;">
                                <com-attachment :multiple="false" :params="scope.row" :max="1" v-model="goodsDetail.cover_pic">
                                    <com-gallery :url="goodsDetail.cover_pic" width="50px" height="50px"></com-gallery>
                                </com-attachment>
                                <span>{{goodsDetail.goods_name}}</span>
                            </div>
                        </div>

                        <el-input :disabled="!(scope.column.property == 'deposit_presale_price' || scope.column.property == 'deposit_price' || scope.column.property == 'deposit_stock' || scope.column.property == 'purchase_limit_num')" v-else-if="(scope.column.property == 'deposit_presale_price' || scope.column.property == 'deposit_price' || scope.column.property == 'deposit_stock' || scope.column.property == 'purchase_limit_num')" type="number" v-model="scope.row[scope.column.property]" @blur="itemInput(scope.column.property,scope.row[scope.column.property], scope.row.id)">
                        </el-input>
                        <el-input :disabled="!(scope.column.property == 'deposit_presale_price' || scope.column.property == 'deposit_price' || scope.column.property == 'deposit_stock' || scope.column.property == 'purchase_limit_num') " v-else-if="scope.column.property.indexOf('price') > -1 || scope.column.property.indexOf('level')" type="number" v-model="scope.row[scope.column.property]" @blur="itemInput(scope.column.property,scope.row[scope.column.property], scope.row.id)">
                        </el-input>

                        <!-- <el-input :disabled="!(scope.column.property == 'deposit_presale_price' || scope.column.property == 'deposit_price' || scope.column.property == 'deposit_stock' || scope.column.property == 'limit_buy') " v-else-if="scope.column.property.indexOf('price') > -1 || scope.column.property.indexOf('level')" oninput="this.value = this.value.replace(/[^0-9]/g, '');" type="number" v-model="scope.row[scope.column.property]" @blur="itemInput(scope.column.property,scope.row[scope.column.property], scope.row.id)">
                        </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>
            </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, // 从排列数据信息
            append: String, // 输入框后缀
            goodsDetail: Object,
            activeGoodsAttr: Array,
        },
        data() {
            return {
                attrBatch: false,
                data: {
                    goods_name: '商品',
                    // name: '规格',
                    price: '售价',
                    stock: '库存',
                    deposit_presale_price: '预售价',
                    deposit_price: '定金',
                    deposit_stock: '预售库存',
                    purchase_limit_num: '限购',
                },
                extraField: {
                    'deposit_presale_price': '预售价',
                    'deposit_price': '定金',
                    'deposit_stock': '预售库存',
                    'purchase_limit_num': '限购'
                },

                selectData: '',
                batch: 0,
                selectList: [],
                itemKey: ''
            };
        },
        created() {
            console.log('-----------q23e2qw2',this.activeGoodsAttr, this.value);
            for (var i = 0; i < this.value.length; i++) {
                if (this.activeGoodsAttr.length > 0) {
                    for (var j = 0; j < this.activeGoodsAttr.length; j++) {
                        if (this.activeGoodsAttr[j]['attr_id'] == this.value[i]['id']) {
                            this.value[i]['deposit_presale_price'] = this.activeGoodsAttr[j]['deposit_presale_price'];
                            this.value[i]['deposit_price'] = this.activeGoodsAttr[j]['deposit_price'];
                            this.value[i]['deposit_stock'] = this.activeGoodsAttr[j]['stock'];
                            this.value[i]['purchase_limit_num'] = this.activeGoodsAttr[j]['purchase_limit_num'];
                        }
                    }
                } else {
                    this.value[i]['deposit_presale_price'] = 0;
                    this.value[i]['deposit_price'] = 0;
                    this.value[i]['deposit_stock'] = 0;
                    this.value[i]['purchase_limit_num'] = 0;
                }
            }
        },
        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() {
                return this.data;
            },
            cData() {
                // this.itemKey = Math.random()
                if (this.attrGroups && this.attrGroups.length > 0 && this.attrGroups[0].attr_list.length === 0) {
                    return [];
                } else {
                    let list = JSON.parse(JSON.stringify(this.value))
                    return list;
                }
            }
        },
        methods: {
            itemInput(e, f, index) {
                for (var i = 0; i < this.selectList.length; i++) {
                    for (let key in this.selectList[i]) {
                        if (key == f) {
                            this.selectList[i][key] = this.batch;
                        }
                    }
                }
                console.log(e, f, index);
                for (var i = 0; i < this.value.length; i++) {
                    for (var key in this.value[i]) {
                        if (key == 'id' && this.value[i][key] == index) {
                            this.value[i][e] = f;
                        }
                    }
                }
            },
            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;
                }
                var id_arr = [];
                for (var i = 0; i < this.selectList.length; i++) {
                    for (let key in this.selectList[i]) {
                        if (param == key) {
                            this.selectList[i][key] = this.batch;
                            id_arr.push(this.selectList[i]['id'])
                        }
                    }
                }
                for (var i = 0; i < this.value.length; i++) {
                    for(var key in this.value[i]){
                        if (id_arr.indexOf(this.value[i]['id']) > -1) {
                            this.value[i][param] = this.batch;
                        }
                    }
                }
                // this.itemKey = Math.random();
                this.batch = '';
            }
        }
    });
</script>