dcat-admin 数据表单,根据总价和数量,自动计算单价

表单里根据输入一个字段,去自动计算其他字段的值.
我这里是根据总价去计算单价.

下面的是弹框表单下的

如果是控制器下的表单没有setHtmlAttribute方法,可以把jquery对form的查找去掉,
直接用class的查找,也名称

        //定义class,js里面用
        $this->number('quantity','数量')->required()->rules('required')->addElementClass('pms-quantity');
        $this->currency('unit_price','单价')->required()->rules('required')->addElementClass('pms-unit_price');
        $this->currency('total_price','合价')->required()->rules('required')->addElementClass('pms-total_price');
        //定义form的属性,用属性去定位form
        $this->setHtmlAttribute('pms-add-receipt','1');

        Admin::script(
<<<JS
        var el_total = 'form[pms-add-receipt="1"] .pms-total_price'
        var el_quantity = 'form[pms-add-receipt="1"] .pms-quantity'
        var el_price = 'form[pms-add-receipt="1"] .pms-unit_price'
        //通过pms-add-receipt="1"属性去找form
        Dcat.init('form[pms-add-receipt="1"] .pms-total_price', function (that, id) {
                that.on('change', function () {
                        var total = $(that).val()
                        var q = $(el_quantity).val()
                        var unit = (total/q).toFixed(2)
                        $(el_price).val(unit)
                });
        });
JS);

封装一下,便于复用

封装一下
    public function form()
    {
        ...
        ...
        //省略其他代码
        $this->hidden('payment_id');
        $this->text('content','内容')->required()->rules('required');
        $this->number('quantity','数量')->required()->rules('required')->addElementClass('pms-quantity');
        $this->text('unit','单位')->required()->rules('required');
        $this->currency('unit_price','单价')->required()->rules('required')->addElementClass('pms-unit_price');
        $this->currency('total_price','合价')->required()->rules('required')->addElementClass('pms-total_price');
        $this->text('note','备注');
        $this->setHtmlAttribute('pms-add-receipt','1');

        //dd($this->payload);

        Admin::script($this->script_unit_price('pms-add-receipt', 'pms-unit_price', 'pms-quantity', 'pms-total_price'));

    }
    private function script_unit_price($form_attr,$class_price,$class_quantity,$class_total){
        return <<<JS
        var el_total = 'form[{$form_attr}="1"] .{$class_total}'
        var el_quantity = 'form[{$form_attr}="1"] .{$class_quantity}'
        var el_price = 'form[{$form_attr}="1"] .{$class_price}'
        Dcat.init('form[{$form_attr}="1"] .{$class_total}', function (that, id) {
                // 这里不需要 off 再重新 on，因为这个匿名函数只会执行一次
                that.on('change', function () {
                        var total = $(that).val()
                        var q = $(el_quantity).val()
                        var unit = (total/q).toFixed(2)
                        $(el_price).val(unit)
                        console.log(unit)
                });
        });
JS;
    }

2024.1更新

上面的代码有bug 被监听的输入框如果是number,也会变成普通文本框,可能是dcat-admin的小bug
改个方式

 public  function  form()

    {
//得到表单的id
$id =  $this->getElementId();

 $this->number('unit_price', '单价')->required()->rules('required');

 $this->number('quantity', '数量')->required()->rules('required');

 $this->number('total_price', '总价')->required()->rules('required');

 Admin::script(Util::script_unit_price_form_id($id));

    }
    //封装的方法
    public static function script_unit_price_form_id($id,$unit_price_name= 'unit_price',$total_price_name='total_price',$quantity_name='quantity'){
        return <<<JS
            $(document).on('change', '#{$id} [name={$total_price_name}]',  function(){
                    let total = $('#{$id} [name={$total_price_name}]').val()
                    let quantity = $('#{$id} [name={$quantity_name}]').val()
                    let unit = (total/quantity).toFixed(2)
                    console.log(unit)
                    $('#{$id} [name={$unit_price_name}]').val(unit)
            })
JS;
    }

本作品采用《CC 协议》，转载必须注明作者和本文链接