xyzshop/admin/templates/default/provider.amount.control.php

<link href="<?php echo ADMIN_TEMPLATES_URL; ?>/css/recharge.css?<?php echo rand(1, 10); ?>" rel="stylesheet" type="text/css" id="cssfile2" />
<style>
    .batch {
        vertical-align: middle;
        display: inline-block;
        *display: inline
            /*IE7*/
        ;
        margin-left: 4px;
        position: relative;
        z-index: 1;
        *zoom: 1
            /*IE7*/
        ;
    }

    .batch i {
        cursor: pointer;
    }

    .batch-input {
        background-color: #FFF;
        white-space: nowrap;
        padding: 4px 9px;
        border: solid 1px #BCE8F1;
        position: absolute;
        z-index: 1;
        bottom: -75px;
        left: -88px;
        box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.25);
    }

    .batch-input h6 {
        font-size: 12px;
        color: #555;
    }

    .batch-input .text {
        vertical-align: middle;
        clear: both;
        padding: 0 4px;
        vertical-align: middle;
        margin-right: 4px;
    }

    .batch-input .arrow {
        background: url(<?php echo SHOP_SITE_URL; ?>/templates/default/images/seller/ncsc_bg_img.png) no-repeat -240px -20px;
        display: block;
        width: 10px;
        height: 5px;
        margin-left: 1px;
        top: -5px;
        left: 50%;
        position: absolute;
        z-index: 2;
        transform: rotate(180deg);
    }

    .batch-input a.close {
        font-size: 11px;
        line-height: 12px;
        color: #BCE8F1;
        text-decoration: none;
        background-color: #FFF;
        text-align: center;
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 7px;
        border: solid 1px #BCE8F1;
        top: -7px;
        right: -7px;
        position: absolute;
        z-index: 2;
    }

    .text.price {
        width: 40px;
    }

    .text.pricee {
        width: 40px;
    }

    .fixed-bar {
        width: 100%;
    }

    #price_table {
        table-layout: fixed;
        width: 100%;
        height: calc(100vh - 170px);
        overflow: auto;
        display: block;
        margin-top: 30px;
    }

    #price_table tr th:first-child {
        position: sticky;
        top: 0;
        left: 0;
        background: #fff;
        box-shadow: 2px 0 2px rgb(0 0 0 / 10%);
        z-index: 11;
    }

    #price_table tr:first-child {
        position: sticky;
        top: 0;
        z-index: 11;
        background: #fff;
    }

    #price_table tr:nth-child(2) {
        position: sticky;
        top: 38px;
        z-index: 11;
        background: #fff;
    }

    #price_table tr:nth-child(3) {
        position: sticky;
        top: 76px;
        z-index: 11;
        background: #fff;
    }

    #price_table tr td:first-child {
        display: block;
        position: sticky;
        left: 0;
        box-shadow: 2px 0 2px rgb(0 0 0 / 10%);
        z-index: 10;
    }

    #price_table tbody tr:hover .batch-td {
        background: #cbe9f3 !important;
    }

    .provider_amount_control .batch-td {
        min-width: auto !important;
        width: auto;
        white-space: nowrap;

    }
</style>
<?php defined('InShopNC') or exit('Access Invalid!'); ?>
<div class="page provider_amount_control">
    <div class="fixed-bar">
        <div class="item-title">
            <h3>通道控制</h3>
            <ul class="tab-base">
                <li><a href="index.php?act=provider_ctl&op=index&type=2&form=common" class="classA" data-type="2-common"><span>普通话费单量控制</span></a></li>
                <li><a href="index.php?act=provider_ctl&op=index&type=2&form=fast" class="classA" data-type="2-fast"><span>快充话费单量控制</span></a></li>
                <li><a href="index.php?act=provider_ctl&op=index&type=2&form=card" class="classA" data-type="2-card"><span>卡密话费单量控制</span></a></li>
                <li><a href="index.php?act=provider_ctl&op=index&type=2&form=third" class="classA" data-type="2-third"><span>三方话费单量控制</span></a></li>
                <li><a href="index.php?act=provider_ctl&op=index&type=2&form=slow" class="classA" data-type="2-slow"><span>慢24话费单量控制</span></a></li>
                <li><a href="index.php?act=provider_ctl&op=index&type=2&form=slow6" class="classA" data-type="2-slow6"><span>慢6话费单量控制</span></a></li>
                <li><a href="index.php?act=provider_ctl&op=index&type=2&form=slow2" class="classA" data-type="2-slow2"><span>慢2话费单量控制</span></a></li>
                <li><a href="index.php?act=provider_ctl&op=index&type=2&form=slow48" class="classA" data-type="2-slow48"><span>慢48话费单量控制</span></a></li>
                <li><a href="index.php?act=provider_ctl&op=index&type=2&form=slow72" class="classA" data-type="2-slow72"><span>慢72话费单量控制</span></a></li>
                <li><a href="index.php?act=provider_ctl&op=index&type=2&form=fastest" class="classA" data-type="2-fastest"><span>速充话费单量控制</span></a></li>

                <li><a href="index.php?act=provider_ctl&op=index&type=1&form=common" class="classA" data-type="1-common"><span>无流水油卡单量控制</span></a></li>
                <li><a href="index.php?act=provider_ctl&op=index&type=1&form=slow" class="classA" data-type="1-slow"><span>有流水油卡单量控制</span></a></li>
                <li><a href="index.php?act=provider_ctl&op=index&type=1&form=card" class="classA" data-type="1-card"><span>卡密油卡单量控制</span></a></li>
                <li><a href="index.php?act=provider_ctl&op=index&type=1&form=fast" class="classA" data-type="1-fast"><span>快充油卡单量控制</span></a></li>
            </ul>
        </div>
    </div>
    <div class="fixed-empty"></div>
    <form id="price_form" enctype="multipart/form-data" method="post">
        <input type="hidden" name="form_submit" value="ok" />
        <table class="table tb-type2 tableFixed" style="top: 10px;">
            <tbody class="tbody">
                <tr>
                    <td colspan="2" class="required"><label></label></td>
                </tr>
                <tr>
                    <td class="tip_info">
                        单量：请输入大于等于-1的数字，-1表示不限；&nbsp;&nbsp;&nbsp;&nbsp;
                        优先级：请输入1-100的数字；&nbsp;&nbsp;&nbsp;&nbsp;是否启动：1-开启，0-关闭
                    </td>
                </tr>
                <tr class="noborder">
                    <table class="table tb-type2" id="price_table">
                        <tbody class="tbody tableContent">
                        <!-- 第一层表头开始 -->
                            <tr>
                                <th class="align-center w120 mw120">渠道名称</th>
                                <?php foreach ($output['providers'] as $provider) { ?>
                                    <th class="align-center w165 mw165">
                                        <?php echo $provider['store_name'] ?>(<?php if ($provider['opened'] == 1) { ?>
                                            <span style="color: #0bb20c">开</span>
                                            <?php } ?><?php if ($provider['opened'] == 2) { ?>
                                            <span style="color: #f30707">关</span>
                                            <?php } ?>)
                                        <?php } ?>
                                    </th>    
                            </tr>
                            <tr> 
                                <th class="align-center w120 mw120">通道单量</th>
                                <?php foreach ($output['providers'] as $provider) { ?>
                                    <th class="align-center w165 mw165">
                                        <input type="text" value="<?php echo $provider['channel_speed'] || '-1' ?>" name="channel_speed[]" class="w32" />
                                    </th>    
                                <?php } ?>
                            </tr>
                        <!-- 第一层表头结束 -->

                        <!-- 第二层表头开始 -->
                            <tr>
                                <th class="align-center w120 mw120" style="height:16px">类目</th>
                                    <?php foreach ($output['providers'] as $provider) { ?>
                                <th class="batch-td">
                                    <div class="priority">
                                        当前
                                    </div>
                                    <div class="listNum">
                                        单量
                                        <div class="batch" style="display: inline-block"><i class="icon-edit" title="批量操作"></i>
                                            <div class="batch-input" style="display:none">
                                                <h6>批量设置单量(大于等于-1)：</h6>
                                                <a href="javascript:void(0)" class="close">X</a>
                                                <input name="" type="number" class="text pricee quantity" />
                                                <a href="javascript:void(0)" class="ncsc-btn-quantity" data-type="pricee">设置</a><span class="arrow"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="priority">
                                        优先级
                                    </div>
                                    <div class="priority">
                                        开关
                                        <div class="batch" style="display: inline-block"><i class="icon-edit" title="批量操作"></i>
                                            <div class="batch-input" style="display:none">
                                                <h6>批量设置开关（0/1）：</h6>
                                                <a href="javascript:void(0)" class="close">X</a>
                                                <input name="" type="number" class="text price" />
                                                <a href="javascript:void(0)" class="ncsc-btn-mini" data-type="price">设置</a><span class="arrow"></span>
                                            </div>
                                        </div>
                                    </div>
                                </th>
                            <?php } ?>

                            </tr>
                        <!--第二层表头结束-->

                        <!--表格内容开始-->
                            <?php foreach ($output['form']['amountData'] as $key => $amount) { ?>
                                <tr class="w500 trFlex">
                                    <td style="text-align: left;width: 120px;min-width:120px;" class="tbFlex" data-color="<?php echo $amount['type']; ?>">
                                        <?php echo $amount['text'] ?>
                                    </td>
                                    <?php foreach ($output['providers'] as $provider) { ?>
                                        <input type="hidden" name="str[]" value="<?php echo "{$provider['provider_id']}-{$amount['type']}-{$amount['amount']}-{$output['datas'][$provider['provider_id']][$key]['has']}"; ?>">
                                        <td class="batch-td" data-color="<?php echo $amount['type']; ?>">
                                            <div class="priority">
                                                <?php
                                                $keyName = "{$provider['name']}-{$amount['amount']}-{$amount['type']}";
                                                if (array_key_exists($keyName, $output['channel_ctl_model'])) {
                                                    echo ceil($output['channel_ctl_model'][$keyName][0]);
                                                } else {
                                                    echo 0;
                                                }
                                                ?>
                                            </div>
                                            <div class="listNum">
                                                <input type="text" class="input-one styleOne w46" name="speed[]" autocomplete="off" value="<?php echo $output['datas'][$provider['provider_id']][$key]['speed'] ?>" <?php if ($output['datas'][$provider['provider_id']][$key]['has'] == 0) { ?> readOnly style="background-color:#eaeaea;" <?php } ?>>
                                            </div>
                                            <div class="priority">
                                                <input type="text" class="input-tow styleTow w32" name="sort[]" autocomplete="off" value="<?php echo $output['datas'][$provider['provider_id']][$key]['sort'] ?>" <?php if ($output['datas'][$provider['provider_id']][$key]['has'] == 0) { ?> readOnly style="background-color:#eaeaea;" <?php } ?>>
                                            </div>
                                            <div class="priority">
                                                <input type="text" class="input-three styleTow w32" name="opened[]" autocomplete="off" value="<?php echo $output['datas'][$provider['provider_id']][$key]['opened'] ?>" <?php if ($output['datas'][$provider['provider_id']][$key]['has'] == 0) { ?> readOnly style="background-color:#eaeaea;" <?php } ?>>
                                            </div>

                                        </td>
                                    <?php } ?>
                                </tr>
                            <?php } ?>

                        <!--表格内容结束-->
                        </tbody>
                    </table>
                </tr>
            </tbody>
            <tfoot>
                <tr class="tfoot">
                    <td colspan="15"><a href="JavaScript:void(0);" class="btn" style="margin-top: 15px" id="submitBtn"><span><?php echo $lang['nc_submit']; ?></span></a></td>
                </tr>
            </tfoot>
        </table>
    </form>
</div>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/dialog/dialog.js" id="dialog_js" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/jquery-ui/jquery.ui.js"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/ajaxfileupload/ajaxfileupload.js"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/jquery.Jcrop/jquery.Jcrop.js"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/refill/layer.js"></script>
<link href="<?php echo RESOURCE_SITE_URL; ?>/js/jquery.Jcrop/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" id="cssfile2" />
<script type="text/javascript">
    $(function() {

       const navRealHeight = $('.fixed-bar').height();
       if(navRealHeight > 50) {
        $('.tb-type2.tableFixed').css('top','60px')
        $('#price_table').css({'height': 'calc(100vh - 220px)','margin-top':'80px'});
       }

        // console.log("$output['datas']", <?php echo json_encode($output['datas']) ?>, <?php echo json_encode($output['providers']) ?>);

        // $(window).scroll(function() {
        //     let toLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        //     if (toLeft > 0) {
        //         let headLeft = toLeft - 20
        //         $('#tableHread')[0].style.left = '-' + headLeft + 'px'
        //     } else if (toLeft == 0) {
        //         $('#tableHread')[0].style.left = 20 + 'px'
        //     }
        // });
        let isSubmit = true
        $('.input-one').blur(function() {
            let value = $(this)[0].value
            if (value >= -1) {
                isSubmit = true;
                $(this)[0].style['borderColor'] = ''
            } else {
                isSubmit = false
                $(this)[0].style['borderColor'] = '#e64444'
            }
        })
        $('.input-tow').blur(function() {
            let value = $(this)[0].value
            if (value >= 1 && value <= 100) {
                isSubmit = true;
                $(this)[0].style['borderColor'] = ''
            } else {
                isSubmit = false
                $(this)[0].style['borderColor'] = '#e64444'
            }
        })
        $('.input-three').blur(function() {
            let value = $(this)[0].value
            if (value == 0 || value == 1) {
                isSubmit = true
                $(this)[0].style['borderColor'] = ''
            } else {
                isSubmit = false
                $(this)[0].style['borderColor'] = '#e64444'
            }
        })

        // 开始获取当前地址
        let type = '<?php echo $_GET['type']; ?>';
        let form = '<?php echo $_GET['form']; ?>';
        $(".classA").each(function() {
            if (type + '-' + form == $(this).attr("data-type")) {
                $(this).addClass('current')
                $(this).attr('href', 'JavaScript:void(0);')
            }
        })

        // 提交
        $("#submitBtn").click(function() {
            console.log('isSubmit', isSubmit);
            if (isSubmit) {
                $("#price_form").submit();
            }
        })

        // tab样式
        $(".tab-base a").click(function() {
            $(this).addClass('current')
            $(this).siblings().removeClass('current')
        })
        // 表格hover时背景
        $('#price_table td').each(function() {
            let colorIndex = $(this).attr('data-color')
            const colorArr = ['#fff', '#f1dde6', '#c8c6f3', '#fff', '#f1dde6', '#c8c6f3', '#f2f3c6', '#fff'];
            if (colorArr[colorIndex]) {
                $(this).css('background', colorArr[colorIndex]);
            } else {
                $(this).css('background', '#fff');
            }

            // if (color == 4 || color == 1) {
            //     $(this).css('background', '#f1dde6')
            // } else if (color == 5 || color == 2) {
            //     $(this).css('background', '#c8c6f3')
            // } else if (color == 6) {
            //     $(this).css('background', '#f2f3c6')
            // } else {
            //     $(this).css('background', '#fff')
            // }
        })

        // $('#price_table .tableContent tr').hover(function() {
        //         $(this)[0].style.backgroundColor = '#cbe9f3'
        //     }, function() {
        //         if (color == 4 || color == 1) {
        //             $(this).css('background', '#f1dde6')
        //         } else if (color == 5 || color == 2) {
        //             $(this).css('background', '#c8c6f3')

        //         } else if (color == 6) {
        //             $(this).css('background', '#f2f3c6')

        //         } else {
        //             $(this).css('background', '#fff')

        //         }
        //     })

        // 批量设置开关
        $('.batch > .icon-edit').click(function() {
            $('.batch > .batch-input').hide();
            $(this).next().show();
        });
        $('.batch-input > .close').click(function() {
            $(this).parent().hide();
        });
        $('.price').change(function() {
            let val = $(this).val()
            if (val != '1' && val != '0') {
                layer.msg('开关只能设置0或1');
            }
        })
        // 点击设置
        $('.ncsc-btn-mini').click(function() {
            let price = $(this).siblings('.price').val()
            if (price != '1' && price != '0') {
                layer.msg('开关只能设置0或1');
                return
            }
            var lie = $(this).parents('.batch-td').prevAll().length
            $('.input-three').each(function() {
                let tdCon = $(this).parents('td').prevAll().length / 2
                let readOnly = $(this).attr('readOnly')
                if (lie == tdCon && !readOnly) {
                    $(this).val(price)
                }
            })

        })
        // 单量设置开关
        $('.batch > .icon-edit').click(function() {
            $('.batch > .batch-input').hide();
            $(this).next().show();
        });
        $('.batch-input > .close').click(function() {
            $(this).parent().hide();
        });
        $('.pricee').change(function() {
            let val = $(this).val()
            if (val <= -2) {
                layer.msg('单量只能设置大于-1');
            }
        })
        // 点击设置
        $('.ncsc-btn-quantity').click(function() {
            let quantity = $(this).siblings('.quantity').val()
            if (quantity <= -2) {
                layer.msg('单量只能设置大于-1');
                return
            }
            let lie = $(this).parents('.batch-td').prevAll().length;
            $('.input-one').each(function(index, item) {
                let tdCon = $(this).parents('td').prevAll().length / 2
                let readOnly = $(this).attr('readOnly')
                if (lie == tdCon && !readOnly) {
                    $(this).val(quantity)
                }
            })
        })
    });
</script>