qimall/addons/GroupBuy/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-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="item.id"
                             :property="key"
                             :label="item + (append ? '(' + append + ')' : '')"
            >

              <template slot="header" v-if="key===`price` || key=== `stock` || key===`group_buy_price`">
                </template>
                <template slot-scope="scope">
                    <template >
                       <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>
						
						<el-input :disabled="!scope.column.property == 'group_buy_price'"
							v-else-if="scope.column.property == 'group_buy_price'" 
							type="number" v-model="scope.row[scope.column.property]" @blur="itemInput(scope.column.property,scope.row[scope.column.property])">
						</el-input>
						
						<el-input :disabled="!(scope.column.property == 'group_buy_price'||scope.column.property == 'stock') "  
							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: {
                    price: '原价',
                    group_buy_price: '拼团价',
                    stock: '规格库存',
                    weight: '重量(克)',
                    no: '货号',
                },
                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.attrGroups && this.attrGroups.length > 0 && this.attrGroups[0].attr_list.length === 0) {
                    return [];
                } else {
                    return this.value;
                }
            }
        },
        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>