dcat-admin/packages/goods/resources/views/form/spec.blade.php

<div class="table-responsive p-1" id="spec-{{$name}}">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                @foreach($headers as $item)
                <td>{{ $item }}</td>
                @endforeach
                <td></td>
            </tr>
        </thead>
        <tbody>
            @foreach($value as $item)
            <tr data-id="{{ $item['name'] }}">
                <td rowspan="{{count($headers) + 2}}" class="editable">{{ $item['name'] }}</td>
            </tr>
            @foreach($item['values'] as $subItem)
            <tr data-pid="{{ $item['name'] }}">
                @foreach($subItem as $value)
                <td class="editable">{{ $value }}</td>
                @endforeach
                <td>
                    <button type="button" class="btn btn-sm btn-outline-danger delete-item-button">
                        <i class="fa fa-trash"></i>
                    </button>
                </td>
            </tr>
            @endforeach
            <tr data-pid="{{$item['name']}}">
                @foreach($headers as $index => $subItem)
                    @if($index > 0)
                    <td>
                        <input type="text" class="form-control add-item-input" placeholder="填写 {{ $item['name'] }} {{ $subItem }}">
                    </td>
                    @endif
                @endforeach
                <td>
                    <button type="button" class="btn btn-sm btn-outline-primary add-item-button">
                        <i class="fa fa-plus"></i>
                    </button>
                </td>
            </tr>
            @endforeach
            <tr>
                <td colspan="{{ count($headers) }}">
                    <input type="text" class="form-control add-attr-input" placeholder="添加 {{ $headers[0] }}">
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-outline-warning add-attr-button" rowspan="{{count($headers) + 2}}">
                        <i class="fa fa-plus"></i>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<style>
    .table {
        text-align: center;
    }
    .table td {
        vertical-align: middle;
    }
    .editable {
        color: #586cb1;
        cursor: pointer;
    }
</style>
<script>
    Dcat.ready(function () {
        // 添加父级属性
        $('#spec-{{$name}}').on('click', '.add-attr-button', function () {
            var tr = $(this).parents('tr')
            var rowspan = tr.find('td').length
            var value = $('.add-attr-input').val()
            if (!value) {
                return Dcat.swal.warning('请填写{{$headers[0]}}')
            }
            var html = `<tr data-id="${value}">`
            html += `<td rowspan="${rowspan}" class="editable">${value}</td>`
            // for (let i = 0; i < rowspan; i++) {
            //     html += `<td></td>`
            // }
            // html += '<td><button type="button" class="btn btn-sm btn-outline-danger delete-item-button"><i class="fa fa-trash"></i></button></td>'
            html += '</tr>'
            html += `<tr data-pid="${value}">`
            for (let i = 0; i < rowspan; i++) {
                html += `<td><input type="text" class="form-control add-item-input" placeholder="填写"></td>`
            }
            html += '<td><button type="button" class="btn btn-sm btn-outline-primary add-item-button"><i class="fa fa-plus"></i></button></td>'
            html += '</tr>'
            tr.before(html)
            $('.add-attr-input').val('')
        })
        // 添加子属性
        .on('click', '.add-item-button', function () {
            var tr = $(this).parents('tr')
            var pid = tr.data('pid')
            var parent = $('tr[data-id="'+pid+'"]')
            var values = []
            var inputs = tr.find('input.add-item-input')
            var html = '<tr data-pid="'+pid+'">'
            for(let i = 0; i < inputs.length; i++) {
                let item = inputs.eq(i)[0]
                // if (!item.value) {
                //     return Dcat.swal.warning('请' + item.placeholder)
                // }
                values.push(item.value)
                html += '<td class="editable">' + item.value + '</td>'
            }
            html += '<td><button type="button" class="btn btn-sm btn-outline-danger delete-item-button"><i class="fa fa-trash"></i></button></td></tr>'
            if (values.length === inputs.length) {
                tr.before(html)
                var parentTd = parent.find('td').first()
                parentTd.attr('rowspan', parseInt(parentTd.attr('rowspan')) + 1)
                // 清空输入框
                inputs.each((key, item) => {
                    item.value = ''
                })
            }
        })
        // 删除子属性
        .on('click', '.delete-item-button', function () {
            var tr = $(this).parents('tr')
            var pid = tr.data('pid')
            var parent = $('tr[data-id="'+pid+'"]')
            var parentTd = parent.find('td').first()
            parentTd.attr('rowspan', parseInt(parentTd.attr('rowspan')) - 1)
            tr.remove()
        })
        // 修改
        .on('click', '.editable', function () {
            var td = $(this)
            var tr = td.parents('tr')
            var value = td.html()
            Dcat.swal.fire({
                input: 'text',
                inputValue: value,
                showCancelButton: true,
                cancelButtonText: '取消',
                confirmButtonText: '确定',
            }).then(result => {
                if (result.value !== undefined && result.value) {
                    // 修改父级属性
                    if (tr.attr('data-id')) {
                        var pid = tr.attr('data-id')
                        $('tr[data-pid="'+pid+'"]').attr('data-pid', result.value)
                        tr.attr('data-id', result.value)
                    }
                    td.html(result.value)
                }
            })
        })
    })
</script>