baoying/www/static/layuiAdmin/dist/views/detection/charge_add.html

<title>收费管理</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>车辆检测管理</cite></a>
        <a><cite>收费管理</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" id="getInfo">
            <button class="layui-btn" data-type="getCarInfo" id="LAY_layer_iframe_demo">获取数据</button>
        </div>
        <!--<div class="layui-card-header">收费管理</div>-->
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="component-form-group">


                <!--<div class="layui-col-md4">-->
                    <!--<label class="layui-form-label">移交单位<span style="color:red">*</span></label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input type="text" name="HandoverCompany" id="HandoverCompany" class="layui-input" style="position:absolute;z-index:2;width:80%;" lay-verify="required" value="111" onkeyup="search()" autocomplete="off">-->
                        <!--<select type="text" id="hc_select" lay-filter="hc_select" autocomplete="off" placeholder="移交单位全称" lay-verify="required" class="layui-select" lay-search>-->
                            <!--<option value="111">111</option>-->
                            <!--<option value="222">222</option>-->
                            <!--<option value="333">333</option>-->
                            <!--<option value="444">444</option>-->
                            <!--<option value="555">555</option>-->
                        <!--</select>-->
                    <!--</div>-->
                <!--</div>-->

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">车牌号码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="license" lay-verify="required" autocomplete="off" class="layui-input" id="LAY_license">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">车架号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="VIN" lay-verify="required" autocomplete="off" class="layui-input" id="LAY_VIN">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">所有人</label>
                        <div class="layui-input-inline">
                            <input type="text" name="owner" lay-verify="required" autocomplete="off" class="layui-input" id="LAY_owner">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">环保检测</label>
                        <div class="layui-input-inline layui-form" lay-filter="detectionSelect">
                            <select name="EP_type" lay-verify="required" lay-search="" lay-filter="detectionChangeType" id="detectionSelect">
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">环检应收</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="EP_receivable" id="HJYS" value="200" readonly unselectable="on" style="background-color: #e4e4e4">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">挂账客户</label>
                        <div class="layui-input-inline layui-form" lay-filter="customerSelect">
                            <select name="customer" lay-search="" id="customerSelect"></select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">车型判断</label>
                        <div class="layui-input-inline layui-form" lay-filter="carTypeSelect">
                            <select name="car_type" lay-verify="required" lay-search="" lay-filter="carChangeType" id="carTypeSelect"></select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">安检应收</label>
                        <div class="layui-input-inline">
                            <input type="text" name="Safe_receivable" class="layui-input" id="AJYS" value="150" readonly unselectable="on" style="background-color: #e4e4e4">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">应收总和</label>
                        <div class="layui-input-inline" >
                            <input type="text" name="receivable" class="layui-input" id="YSZH" value="350" readonly unselectable="on" style="background-color: #e4e4e4">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">支付宝金额</label>
                        <div class="layui-input-inline" >
                            <input type="text" name="ali_pay" lay-verify="ali_pay" class="layui-input" id="ali_pay" autocomplete="off" placeholder="0" >
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">挂账金额</label>
                        <div class="layui-input-inline" >
                            <input type="text" name="on_account" lay-verify="on_account" class="layui-input" id="on_account" autocomplete="off" placeholder="0" >
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">实收总和</label>
                        <div class="layui-input-inline" >
                            <input type="text" name="cost" class="layui-input" id="SSZH" value="350">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">手机</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="telephone" autocomplete="off" class="layui-input" id="telephone"><!--lay-verify="phone"-->
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">签约客户</label>
                        <div class="layui-input-inline layui-form" lay-filter="contractedSelect">
                            <select name="contracted_customer" lay-search="" id="contractedSelect" lay-filter="contractedType"></select>
                        </div>
                    </div>
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">日期</label>-->
                        <!--<div class="layui-input-inline">-->
                            <!--<input type="text" name="date" id="LAY-component-form-group-date" lay-verify="date" autocomplete="off" class="layui-input" style="background-color: #e4e4e4">-->
                        <!--</div>-->
                    <!--</div>-->
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="remarks" placeholder="请输入内容" class="layui-textarea" style="width: 80%" id="remarks"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <div class="layui-footer">
                            <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'form', 'laydate'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,layer = layui.layer
            ,laydate = layui.laydate
            ,form = layui.form;

        form.render(null, 'component-form-group');

        // laydate.render({
        //     elem: '#LAY-component-form-group-date',
        //     value: new Date(),
        //     format:'yyyy-MM-dd',
        // });
        form.verify({
            on_account:function (value) {
                if (value==="") {
                    $('#on_account').val(0)//为空自动赋值0
                }else {
                    if (isNaN(value)){
                        return "请输入数字！"
                    }
                }
            },
            ali_pay:function (value) {
                if (value==="") {
                    $('#ali_pay').val(0)//为空自动赋值0
                }else {
                    if (isNaN(value)){
                        return "请输入数字！"
                    }
                }
            }
        });
        $('#on_account').focus(function () {
            if($('#customerSelect').val()===""){
                $('#on_account').val(0)//为空自动赋值0
                layer.msg("需要先选择挂账客户！")
            }
        })
        //常用挂账客户
        $.ajax({
            url:"/customer/getCustomer",
            success:function (res) {
                var data = res;
                $.each(data,function (index,item) {
                    if (index===0){
                        $('#customerSelect').append('<option value="">'+item.name+'</option>');
                    }else {
                        $('#customerSelect').append('<option value="'+item.name+'">'+item.name+'</option>');
                    }
                });
                form.render('select', 'customerSelect');
            }
        });
        //签约客户
        $.ajax({
            url:"/contracted/getContracted",
            success:function (res) {
                var data = res;
                $.each(data,function (index,item) {
                    if (index===0){
                        $('#contractedSelect').append('<option value="">'+item.name+'</option>');
                    }else {
                        $('#contractedSelect').append('<option value="'+item.name+'">'+item.name+'</option>');
                    }
                });
                form.render('select', 'contractedSelect');
            }
        });
        //环检下拉
        $.ajax({
            url:"/chargingStandard/getSelect",
            type:'POST',
            data:{"project":"环检"},
            success:function (res) {
                var data = res;
                $.each(data,function (index,item) {
                    $('#detectionSelect').append('<option value="'+item.carType+'">'+item.carType+'</option>');
                });
                form.render('select', 'detectionSelect');
            }
        });
        //安检下拉
        $.ajax({
            url:"/chargingStandard/getSelect",
            type:'POST',
            data:{"project":"安检"},
            success:function (res) {
                var data = res;
                $.each(data,function (index,item) {
                    $('#carTypeSelect').append('<option value="'+item.carType+'">'+item.carType+'</option>');
                });
                form.render('select', 'carTypeSelect');
            }
        });
        //根据carType(安检)改变，联动默认价格
        form.on('select(carChangeType)',function (data) {
            $.ajax({
                url:"/chargingStandard/getSelect",
                type:'POST',
                data:{"carType":data.value},
                success:function (res) {
                    $('#AJYS').val(res[0].cost);
                    $('#YSZH').val(parseInt($('#AJYS').val()) + parseInt($('#HJYS').val()));//应收总和
                    $('#SSZH').val($('#YSZH').val());
                }
            })
        });
        //根据EP_type(环检)改变，联动默认价格
        form.on('select(detectionChangeType)',function (data) {
            $.ajax({
                url:"/chargingStandard/getSelect",
                type:'POST',
                data:{"carType":data.value},
                success:function (res) {
                    $('#HJYS').val(res[0].cost);
                    $('#YSZH').val(parseInt($('#AJYS').val()) + parseInt($('#HJYS').val()))//应收总和
                    $('#SSZH').val($('#YSZH').val());
                }
            })
        });
        //根据签约客户的选择，自动添加备注内容和手机号
        form.on('select(contractedType)',function (data) {
            $.ajax({
                url:"/contracted/getList",
                type:"POST",
                data:{"name":data.value},
                success:function (res) {
                    //给备注栏赋值
                    $('#remarks').val(res.data[0].remarks)
                    //给手机号码赋值
                    $('#telephone').val(res.data[0].phone)
                }
            })
        });


        /* 监听提交 */
        form.on('submit(component-form-demo1)', function(data){
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            // return false;
            admin.req({
                url:"/charge/saveCharge",
                type:'POST',
                data:data.field,
                done:function (res) {
                    if (res.code===0){
                        layer.msg("提交成功")
                    }else {
                        layer.msg(res.msg)
                    }
                }
            })
        });

        //
        var active = {
            getCarInfo: function(){
                layer.open({
                    type: 2,
                    area: ['700px', '650px'],
                    fixed: false,
                    maxmin: true,
                    content: layui.setter.base + 'views/detection/layer/getCarInfo.html'
                });
            }
        }
        $('#getInfo .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] && active[type].call(this);
        });


        //可搜索、可输入暂不启用
        // form.on('select(hc_select)', function (data) {   //选择移交单位 赋值给input框
        //     $("#HandoverCompany").val(data.value);
        //     $("#hc_select").next().find("dl").css({ "display": "none" });
        //     form.render();
        // });
        // window.search = function () {
        //     var value = $("#HandoverCompany").val();
        //     $("#hc_select").val(value);
        //     form.render();
        //     $("#hc_select").next().find("dl").css({ "display": "block" });
        //     var dl = $("#hc_select").next().find("dl").children();
        //     var j = -1;
        //     for (var i = 0; i < dl.length; i++) {
        //         if (dl[i].innerHTML.indexOf(value) <= -1) {
        //             dl[i].style.display = "none";
        //             j++;
        //         }
        //         if (j == dl.length-1) {
        //             $("#hc_select").next().find("dl").css({ "display": "none" });
        //         }
        //     }
        // };

    });
</script>