Laravel Nova多对多关联中动态自动填充Pivot字段contract_price

核心思路 #

通过Nova的自定义脚本注入或字段组件扩展，监听产品选择事件，自动将选中产品的price值填充到关联的contract_price pivot字段，实现无刷新动态赋值。

方案一：快速实现（基于原生字段+自定义JS） #

1. 给关联字段标记自定义类
   在app/Nova/Resources/Contract.php中，给BelongsToMany字段添加自定义类名，方便JS定位元素：

BelongsToMany::make('Products')
    ->fields(function () {
        return [
            Number::make('Contract Price', 'contract_price')
                ->rules('required'),
            Number::make('Quantity', 'quantity')
                ->rules('required'),
        ];
    })
    ->extraAttributes(['class' => 'product-contract-association']),

2. 注入全局产品价格数据
   在app/Providers/NovaServiceProvider.php的boot方法中，把所有产品的ID和价格映射注入到Nova全局配置：

use App\Models\Product;

public function boot()
{
    parent::boot();
    
    Nova::provideToScript([
        'productPriceMap' => Product::pluck('price', 'id')->toArray(),
    ]);
}

3. 添加前端监听逻辑
   在resources/js/nova.js中添加事件监听，处理产品选择后的赋值：

document.addEventListener('nova-loaded', () => {
    // 监听关联管理器的变化
    document.addEventListener('click', (e) => {
        // 匹配确认选择产品的按钮
        if (e.target.matches('.modal-footer .btn-primary')) {
            setTimeout(() => {
                const associationRows = document.querySelectorAll('.product-contract-association .table-row');
                
                associationRows.forEach(row => {
                    const productId = row.querySelector('[name*="related_id"]').value;
                    const priceInput = row.querySelector('[name*="contract_price"]');
                    
                    // 仅在输入框为空时填充默认价格
                    if (productId && !priceInput.value) {
                        priceInput.value = Nova.config.productPriceMap[productId];
                    }
                });
            }, 150);
        }
    });
});

方案二：自定义字段组件（适配复杂场景） #

如果需要更灵活的自定义逻辑，可以扩展Nova的BelongsToMany字段：

1. 生成自定义字段脚手架

php artisan nova:field CustomBelongsToMany

2. 重写Vue组件逻辑
   在生成的resources/js/components/Field.vue中，监听选中资源的变化，自动填充pivot字段：

<script>
export default {
    extends: Nova.components['BelongsToManyField'],
    watch: {
        // 监听选中资源列表变化
        selectedResources(newResources) {
            newResources.forEach(resource => {
                // 找到contract_price的pivot字段
                const targetField = this.pivotFields.find(f => f.attribute === 'contract_price');
                // 为空时填充产品价格
                if (targetField && !targetField.value) {
                    targetField.value = resource.price;
                }
            });
        }
    }
}
</script>

3. 在资源中使用自定义字段

use App\Nova\Fields\CustomBelongsToMany;

CustomBelongsToMany::make('Products')
    ->fields(function () {
        return [
            Number::make('Contract Price', 'contract_price')
                ->rules('required'),
            Number::make('Quantity', 'quantity')
                ->rules('required'),
        ];
    }),

注意事项 #

• 方案一无需编写Vue组件，适合快速落地；方案二更适合需要扩展更多交互的场景。
• 若产品数据量极大，方案一的全局数据注入可改为AJAX实时请求选中产品的价格。
• 测试时需注意Nova版本兼容性，不同版本的DOM结构或事件名称可能略有差异。

内容的提问来源于stack exchange，提问作者Teletubbies