qimall/addons/BusinessActivity/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">
        <el-table ref="multipleTable" :data="cData" border stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column v-if="cList" 
                v-for="(item,index) in cList"
                :key="index" 
                :label="item.label" 
                :property="item.property" 
                :index="item.index">
                <template slot-scope="scope">
                    <template>
                        <div v-if="scope.column.property == 'name'">
                            {{scope.row[scope.column.property]}}
                        </div>
                        <el-input :disabled="!(scope.column.property == 'merchants_scale'||scope.column.property == 'venue_scale') " 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])">
                        </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, // 输入框后缀
        },
        data() {
            return {
                attrBatch: false,
                data: [
                    {
                        label: '规格名称',
                        property: 'name'
                    },
                    {
                        label: '原价',
                        property: 'price'
                    },
                   
                    {
                        label: '重量(克)',
                        property: 'weight'
                    },
                    {
                        label: '货号',
                        property: 'no'
                    },
                    {
                        label: '规格库存',
                        property: 'stock'
                    },
                    {
                        label: '招商负责人',
                        property: 'merchants_scale'
                    },
                    {
                        label: '场地负责人',
                        property: 'venue_scale'
                    },
                ],
                selectData: '',
                batch: 0,
                selectList: [],
            };
        },
        created() {},
        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() {
                if (this.value.length > 0) {
                    return this.value;
                } else {
                    return this.attrGroups;
                }
            }
        },
        methods: {

            itemInput(e, f) {
                if (e == 'stock') {

                }
            },

            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;
                }
            }
        }
    });
</script>