order-food-admin/resources/views/admin/extensions/select_attr.blade.php

<div class="{{$viewClass['form-group']}}">

    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>

    <div class="{{$viewClass['field']}}">

        @include('admin::form.error')

        <div class="{{ $class }}" style="width: 100%; height: 100%;">
            <div class="card">
                <div class="card-body">
                    <table class="table" cellspacing="0" cellpadding="0">
                        <thead>
                            <tr>
                                <th>属性</th>
                                <th>属性值</th>
                                <th>属性价格</th>
                                <th>是否启用</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-for="(n, specIndex) in specification.length">
                                <tr v-for="(item, index) in specification[specIndex].value.length">
                                    <td
                                        style="vertical-align: middle!important;text-align:right"
                                        v-if="showTd(index)"
                                        :rowspan="countSum(specIndex)">
                                        @{{getSpecAttr(specIndex)}}
                                    </td>
                                    <td
                                        style="vertical-align: middle!important;text-align:right"
                                        :rowspan="1">
                                        @{{getSpecAttr(specIndex, index)}}
                                    </td>
                                    <td>
                                        <input
                                            type="text"
                                            class="form-control"
                                            v-model.number="goodsAttr[getSpecAttrStatus(specIndex, index)].value_price"
                                            placeholder="属性价格"
                                            :disabled="!goodsAttr[getSpecAttrStatus(specIndex, index)].is_use">
                                    </td>
                                    <td>
                                        <input type="checkbox" name="on_sale" class="field_on_sale" data-size="small" v-model="goodsAttr[getSpecAttrStatus(specIndex, index)].is_use" data-color="#586cb1">
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                    <input type="hidden" name="{{$name}}" :value="getSku" />
                </div>
            </div>
        </div>
        @include('admin::form.help-block')
    </div>
</div>
<script init="{!! $selector !!}">
//处理新增和编辑初始化问题
var url_path = window.location.pathname;
var change_times = 0;

if(url_path.indexOf("edit") == -1){
    change_times++;
}

var vm = new Vue({
    el: '#' + id,
    data: {
        // 
        arr: [],
        arr2: [],
        // 规格
        specification: [],
        // 子规格
        childProductArray: [],
        //商品属性
        goodsAttr:[],
        //edit
        selectAttrValue: [],
        //oldattr
        oldgoodsValue:[],
    },
    computed: {
        getSku() {
            console.log(this.goodsAttr);
            return JSON.stringify(this.goodsAttr.concat(this.oldgoodsValue))
        }
    },
    created() {
        this.createStart()
    },
    methods: {
        createData(){//绑定数据
            this.specification = [];
            for (let i = 0; i < this.arr.length; i++) {
                // 添加数据
                this.addSpec()
                // 数据
                this.specification[i].name = this.arr[i].attr_name
                this.specification[i].attr_id = this.arr[i].attr_id
                this.childProductArray[i] = this.arr2[i]
                // 构建
                this.addSpecTag(i)
            }
        },
        createStart(){//初始化数据
            this.selectAttrValue = {!! $value !!}
            this.arr = this.selectAttrValue.arr;
            this.arr2 = this.selectAttrValue.arr2;
            this.selectAttrValue.goodsAttr.forEach((item, index) => {
                this.goodsAttr.push(item);
            });
            this.createData();
        },
        // 添加规格项目
        addSpec () {
            this.specification.push({
                attr_id: 0,
                name: '',
                value: []
            })
        },
        // 添加规格属性
        addSpecTag (index) {
            let str = this.childProductArray[index] || ''
            str = str.trim()
            let arr = str.split("<br>") // 使用<br>分割成数组
            let newArr = this.specification[index].value.concat(arr)
            newArr = Array.from(new Set(newArr)) // 去重
            this.$set(this.specification[index], 'value', newArr)
        },
        createGoodsAttr(){
            if(this.goodsAttr.length > 0){
                this.goodsAttr.forEach((item, index) => {
                    if(item.id){
                        item._remove_ = true,
                        this.oldgoodsValue.push(item)
                    }
                })
                this.goodsAttr = [];
            }
            this.specification.forEach((item, index) => {
                item.value.forEach((i_item,i_index)=>{
                    this.goodsAttr.push({
                        attr_name: item.name,
                        attr_id: item.attr_id,
                        attr_value: i_item,
                        value_price: 0,
                        id:null,
                        is_use:true,
                    });
                });
            })
        },
        showTd(index){
            return index==0;
        },
        getSpecAttr(specIndex, index){
            if(typeof(index) != "undefined"){
                return this.specification[specIndex].value[index];
            }else{
                return this.specification[specIndex].name;
            }
        },
        getSpecAttrStatus(specIndex, index){
            let num = 0;
            this.specification.forEach((item, f_index) => {
                if (f_index < specIndex && item.value.length) {
                    num += item.value.length
                }
                if (f_index == specIndex){
                    num += index;
                }
            })
            return num
        },
        countSum (specIndex) {
            return this.specification[specIndex].value.length;
        },
    }
});



function getTypeAttrs(type_id, times){
    var url_path = "{{ admin_route('type_attrs.api') }}";
    var goods_id = 0;
    if(times < 1){//修改商品初始化
        
    }else{
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: url_path,
            data: {
                'type_id':type_id,
            },
            success: function (result) {
                vm.arr = [];
                vm.arr2 = [];
                if(result.length > 0){
                    for(j = 0, len=result.length; j < len; j++){
                        vm.arr.push({
                            attr_name:result[j].attr_name,
                            attr_id:result[j].id
                        });
                        attr_values = result[j].ext;
                        attr_values = attr_values.replace(/\r\n/g, "<br>")
                        attr_values = attr_values.replace(/\n/g, "<br>");
                        vm.arr2.push(attr_values);
                    }
                }
                vm.createData();
                vm.createGoodsAttr();
            }
        })
    }
}

$("[name='{{ $listen }}']").on('change', function(){
    var type_id = this.options[this.options.selectedIndex].value;
    getTypeAttrs(type_id, change_times);
    change_times++;
})

</script>