在dcat-admin中实现数据表单,根据总价和数量,自动计算单价功能示例

Laravel  /  管理员 发布于 9个月前   318

在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;
    }

完！