cf-platform/Application/Admin/View/GameRebate/props.html

<extend name="Public/base"/>
<block name="css">
    <link rel="stylesheet" href="__CSS__/select2.min.css" type="text/css" />
    <link rel="stylesheet" href="__CSS__/promote.css" type="text/css"/>
    <script src="__STATIC__/laydate/laydate.js"></script>
    <link rel="stylesheet" type="text/css" href="__STATIC__/webuploader/webuploader.css" media="all">
    <style>
        .select2-container--default .select2-selection--single {
            color: #000;
            resize: none;
            border-width: 1px;
            border-style: solid;
            border-color: #a7b5bc #ced9df #ced9df #a7b5bc;
            box-shadow: 0px 3px 3px #F7F8F9 inset;height:35px;
            height:28px;border-radius:3px;font-size:12px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height:35px;
            line-height:28px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height:26px;
        }
        .select2-container--default .select2-search--dropdown .select2-search__field {
            height:26px;line-height:26px;font-size:12px;
        }
        .select2-results__option[aria-selected] {font-size:12px;}
        .textarea-style {
            width: 200px;
            height: 80px;
            border-radius: 5px;
            padding: 5px;
        }
        .mustmark {
            color: #FF0000;
            font-style: normal;
            margin: 0 3px;
        }
        .butnbox {
            padding: 10px 0 10px;
        }
        .butnbox .butnlist .butn {
            display: inline-block;
            width: 120px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            color: #FFF;
            background: #3C95C8;
            border-radius: 3px;
            cursor: pointer;
        }
        .layui-layer-content .layer-box .form-group {
            display: block;
            /* width: 460px; */
        }
        .layui-layer-content .layer-box .form-group .form-item {
            width: 445px;
        }
        .data_list table td .status-0 {
            color: #e6a23c;
        }
        .data_list table td .status-1 {
            color: #67c23a;
        }
        .data_list table td .status-2 {
            color: #f56c6c;
        }
        .select2-container--open {
            z-index: 1001;
        }
        .notice-text {
            font-size: 12px;
            color: #999;
            margin-left: 30px;
            line-height: 30px;
            height: 30px;
            white-space: pre-wrap;
        }
    </style>
</block>
<block name="body">
    <script type="text/javascript" src="__JS__/bootstrap.min.js"></script>
    <script type="text/javascript" src="__JS__/select2.min.js"></script>
    <script type="text/javascript" src="__JS__/jquery.form.js"></script>
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>

    <script src="__STATIC__/md5.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script>
    <script src="__STATIC__/layer/layer.js" type="text/javascript"></script>
    <script type="text/javascript" src="__STATIC__/layer/extend/layer.ext.js"></script>
    <div class="cf main-place top_nav_list navtab_list">
        <h3 class="page_title">定制道具列表</h3>
    </div>
    <div class="cf top_nav_list" style="height: 38px;">
        <!-- 高级搜索 -->
        <div class="jssearch cf search_list">
            <div class="input-list search-title-box">
                <label>搜索：</label>
            </div>
            <input type="hidden" name="base_game_id" value="{:I('base_game_id')}">
            <div class="input-list">
                <input type="text"  name="ref_id" class="" placeholder="道具ID" value="{:I('ref_id')}"/>&nbsp;
            </div>
            <div class="input-list">
                <input type="text"  name="name" class="" placeholder="道具名称" value="{:I('name')}"/>&nbsp;
            </div>
            <div class="input-list">
                <a class="sch-btn" href="javascript:;" id="search" url="{:U('GameRebate/props')}">搜索</a>
            </div>
            <!-- <div class="input-list">
                <a class="sch-btn" href="{:U('Export/expUser',array_merge(array('id'=>12,),I('get.')))}">导出</a>
            </div> -->
        </div>
    </div>

    <div class="butnbox">
        <div class="butnlist jscheckbutn" style="margin-left: 2px">
            <a class="butn" id="import-btn">道具导入</a>
            <a class="butn" id="batch-delete-btn" style="background-color: red;">批量删除</a>
        </div>
    </div>

    <!-- 数据列表 -->
    <div class="data_list">
        <div class="">
            <table>
                <!-- 表头 -->
                <thead>
                <tr>
                    <th>
                        <input class="check-all" type="checkbox">
                    </th>
                    <th>道具ID</th>
                    <th>道具名称</th>
                    <th>道具价值</th>
                    <th>操作</th>
                </tr>
                </thead>

                <!-- 列表 -->
                <tbody>
                <empty name ="records">
                    <td colspan="99" class="text-center">aOh! 暂时还没有内容!</td>
                    <else />
                    <volist name="records" id="data">
                        <tr data-id="<?=$data['id']?>">
                            <td>
                                <input class="ids" type="checkbox" value="{$data['id']}" name="ids[]">
                            </td>
                            <td class="item-ref-id" data-value="{$data.ref_id}">{$data.ref_id}</td>
                            <td class="item-name" data-value="{$data.name}">{$data.name}</td>
                            <td class="item-value" data-value="{$data.value}">{$data.value}</td>
                            <td>
                                <a  href="javascript:;" class="prop-edit-btn">编辑</a>
                                <a href="javascript:;" class="delete-btn">删除</a>
                            </td>
                        </tr>
                    </volist>
                </empty>
                </tbody>
            </table>
        </div>
    </div>
    <div class="page">
        <a class="sch-btn export-btn"
            href="{:U(CONTROLLER_NAME.'/'.ACTION_NAME,array_merge(['export'=>1],I('get.')))}" target="_blank">导出</a>
        {$_page|default=''}
    </div>

    <div id="prop-box" class="layer-box" style="display: none;">
        <form method="post" enctype="multipart/form-data">
            <input type="hidden" name="id" value="">
            <div class="form-group">
                <label>道具ID</label>
                <div class="form-item" style="width:200px">
                    <input type="text" class="form-input" name="ref_id" style="width:200px" value="" placeholder="请输入道具ID">
                </div>
            </div>
            <div class="form-group">
                <label>道具名称</label>
                <div class="form-item" style="width:200px">
                    <input type="text" class="form-input" name="name" style="width:155px" value="" placeholder="请输入道具名称">
                </div>
            </div>
            <div class="form-group">
                <label>道具价值</label>
                <div class="form-item" style="width:200px">
                    <input type="text" class="form-input" name="value" style="width:155px" value="" placeholder="请输入道具价值">&nbsp;&nbsp;元
                </div>
            </div>
            <div class="form-group">
                <label></label>
                <a id="save-prop-submit" href="javascript:;" class="add-submit btn">保存</a>
            </div>
        </form>
    </div>

    <div id="import-box" class="layer-box" style="display: none;">
        <form method="post" enctype="multipart/form-data">
            <input type="hidden" name="id" value="">
            <div class="form-group">
                <label style="width: 80px;">文件上传</label>
                <div class="form-item">
                    <input type="file" id="fileinput" name="file" style="display: inline-block;">
                    <span class="notice-text" style="margin-left: 0;">暂只支持.xls .xlsx 格式文件</span>
                </div>
            </div>
            <div class="form-group">
                <label style="width: 80px;"></label>
                <a id="save-props-submit" href="javascript:;" class="add-submit btn">保存</a>
            </div>
            <div class="form-group" style="margin-top: 15px;">
                <h5 style="margin-bottom: 5px;">文件格式参考<span style="color: red;">（请严格按此格式，文件的第一行必须是字段名,且字段名不允许修改）</span></h5>
                <div class="data_list">
                    <table>
                        <thead>
                            <tr>
                                <th>道具ID</th>
                                <th>道具名称</th>
                                <th>道具价值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1340002</td>
                                <td>火龙坐骑</td>
                                <td>300</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>

    <div class="common_settings">
        <span class="plus_icon"><span><img src="__IMG__/zwmimages/icon_jia.png"></span></span>
        <form class="addShortcutIcon">
            <input type="hidden" name="title" value="{$m_title}">
            <input type="hidden" name="url" value="Query/withdraw">
        </form>
        <a class="ajax-post add-butn <notempty name='commonset'>addSIsetted</notempty>" href="javascript:;" target-form="addShortcutIcon" url="{:U('Think/addShortcutIcon')}"><img src="__IMG__/zwmimages/icon_jia.png"><span><notempty name='commonset'>已添加<else />添加至常用设置</notempty></span></a>
    </div>
</block>

<block name="script">
    <script type="text/javascript" src="__STATIC__/xlsx.core.min.js" charset="UTF-8"></script>
    <script src="__STATIC__/layer/layer.js" type="text/javascript"></script>
    <script type="text/javascript" src="__STATIC__/layer/extend/layer.ext.js" ></script>
    <script src="__STATIC__/jquery.cookie.js" charset="utf-8"></script>
    <script>
        <volist name=":I('get.')" id="vo">
            Think.setValue('{$key}',"{$vo}");
        </volist>
        $(".select_gallery").select2();
    </script>
    <script type="text/javascript">
        //导航高亮
        highlight_subnav("{:U('GameRebate/props')}");
        $(function(){
            // 添加全部选项
            var baseGameId = '{:I("base_game_id", 0)}'
            if ('all' == "{:I('row', 0)}") {
                
                $("#pagechange").prepend("<option value='all' selected>全部</option>");
            } else {
                $("#pagechange").prepend("<option value='all'>全部</option>");
            }

            $('.time-select').each(function(){
                laydate.render({
                elem: this,
                type: 'date'
                });
            });
            //搜索功能
            $("#search").click(function(){
                var sdate = Date.parse($("input[name='send_time_start']").val()) / 1000;
                var edate = Date.parse($("input[name='send_time_end']").val()) / 1000;
                if (sdate > edate) {
                    layer.msg('开始时间必须小于等于结束时间');
                    return false;
                }
                if ((edate - sdate) > 2592000) {
                    layer.msg('时间间隔不能超过31天，请重新选择日期');
                    return false;
                }

                var url = $(this).attr('url');
                var query  = $('.jssearch').find('input').serialize();
                query  += "&"+$('.jssearch').find('select').serialize();
                //query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g,'');
                query = query.replace(/^&/g,'');
                if( url.indexOf('?')>0 ){
                    url += '&' + query;
                }else{
                    url += '?' + query;
                }
                window.location.href = url;
            });
            //回车自动提交
            $('.jssearch').find('input').keyup(function(event){
                if(event.keyCode===13){
                    $("#search").click();
                }
            });
            function getIds() {
                var ids = [];
                $('.ids:checked').each(function() {
                    ids.push($(this).val());
                })
                return ids;
            }
            $('.delete-btn').on({
                click:function () {
                    var tr = $(this).parents('tr').eq(0)
                    var id = tr.attr('data-id')
                    layer.confirm('确定要删除这条记录吗？', {
                        title: '删除',
                        btn: ['确定']
                    }, function(){
                        deleteOne(id)
                    })
                }
            })
            function deleteOne(id) {
                $.ajax({
                    url: "{:U('deleteProp')}",
                    type: "post",
                    data: { id: id },
                    dataType: 'json',
                    success: function (result ) {
                        if (result.status == 1) {
                            layer.msg(result.message, function(){
                                window.location.href = window.location.href
                            })
                        } else {
                            layer.msg(result.message)
                        }
                    }
                })
            }
            $('#batch-delete-btn').on({
                click:function () {
                    var ids = getIds()
                    if (ids.length == 0) {
                        return layer.msg('请选择要操作的记录')
                    }
                    layer.confirm('确定要删除这些记录吗？', {
                        title: '批量删除',
                        btn: ['确定']
                    }, function(){
                        batchDelete(ids, 1)
                    })
                }
            })
            function batchDelete(ids) {
                $.ajax({
                    url: "{:U('batchDeleteProp')}",
                    type: "post",
                    data: { ids: ids, base_game_id: baseGameId },
                    dataType: 'json',
                    success: function (result ) {
                        if (result.status == 1) {
                            layer.msg(result.message, function(){
                                window.location.href = window.location.href
                            })
                        } else {
                            layer.msg(result.message)
                        }
                    }
                })
            }
            function setPropForm(prop) {
                var box = $('#prop-box')
                box.find('[name=id]').val(prop.id)
                box.find('[name=ref_id]').val(prop.ref_id)
                box.find('[name=name]').val(prop.name)
                box.find('[name=value]').val(prop.value)
            }
            $('.prop-edit-btn').click(function () {
                var box = $('#prop-box')
                
                var tr = $(this).parents('tr').eq(0)
                var id = tr.attr('data-id')
                var refId = tr.find('td.item-ref-id').attr('data-value')
                var name = tr.find('td.item-name').attr('data-value')
                var value = tr.find('td.item-value').attr('data-value')
                setPropForm({
                    id: id,
                    ref_id: refId,
                    name: name,
                    value: value
                });

                layer.open({
                    title: '道具编辑',
                    type: 1,
                    content: box,
                    area: ['500px', '300px'],
                    zIndex: 250,
                })
                $(".select_gallery").select2();
            });
            $('#save-prop-submit').on({
                click: function () {
                    var box = $('#prop-box')
                    var data = {}
                    data.id = box.find('[name=id]').val()
                    data.ref_id = box.find('[name=ref_id]').val()
                    data.name = box.find('[name=name]').val()
                    data.value = box.find('[name=value]').val()
                    saveProp(data)
                }
            })
            function saveProp(data) {
                $.ajax({
                    url: "{:U('saveProp')}",
                    type: "post",
                    data: data,
                    dataType: 'json',
                    success: function (result ) {
                        if (result.status == 1) {
                            layer.msg(result.message, function(){
                                window.location.href = window.location.href
                            })
                        } else {
                            layer.msg(result.message)
                        }
                    }
                })
            }
            $('#import-btn').click(function () {
                var box = $('#import-box')

                layer.open({
                    title: '道具表导入',
                    type: 1,
                    content: box,
                    area: ['600px', '400px'],
                    zIndex: 250,
                })
            });

            var isfile = false
            var rABS = false; //是否将文件读取为二进制字符串
            var props = []

            $("#fileinput").change(function () {
                var p = $(this).val();
                var ext = p.substr(p.lastIndexOf(".")).toLowerCase();
                if (ext != ".xls" && ext != ".xlsx") {
                    layer.msg("文件仅支持excel文件格式");
                    $(this).val('');
                    p = '';
                }

                if (p != '') {
                    isfile = true;
                } else {
                    isfile = false;
                }
            })

            function saveProps(data) {
                $.ajax({
                    url: "{:U('saveProps')}",
                    type: "post",
                    data: data,
                    dataType: 'json',
                    success: function (result ) {
                        if (result.status == 1) {
                            layer.msg(result.message, function(){
                                window.location.href = window.location.href
                            })
                        } else {
                            layer.msg(result.message)
                        }
                    }
                })
            }

            $("#save-props-submit").on("click", function () {
                //获取文件
                if (!isfile) {
                    layer.msg('excel文件不能为空');
                    return false;
                }
                //执行
                readFileInput(function () {
                    if (props.length == 0) {
                        layer.msg('表格中无道具');
                        return false;
                    }
                    saveProps({
                        base_game_id: baseGameId,
                        props: props
                    })
                })
            })

            function readFileInput(callback) {
                // MSG.showmsg("读取excle中。。。");
                var wb;//读取完成的数据
                var f = $("#fileinput")[0].files[0];
                var reader = new FileReader();
                if (rABS) {
                    reader.readAsArrayBuffer(f);
                } else {
                    reader.readAsBinaryString(f);
                }
                reader.onload = function (e) {
                    // MSG.showmsg("文件读取完成，比较命令初始化。。。");
                    var data = e.target.result;
                    if (rABS) {
                        wb = XLSX.read(btoa(fixdata(data)), {
                            type: 'base64'
                        });
                    } else {
                        wb = XLSX.read(data, {
                            type: 'binary'
                        });
                    }
                    try {
                        props = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
                        callback();
                    } catch (error) {
                        // MSG.hidemsg();
                        isfile = false;
                        layer.msg('excel内容不符或不能为空');
                        return false;
                    }
                    
                    // document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
                };
            }
            

            function fixdata(data) { //文件流转BinaryString
                var o = "",
                    l = 0,
                    w = 10240;
                for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
                o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
                return o;
            }
        });
        $(".export-btn").on("click",function(e){
            e.preventDefault();
            window.location.href=$(this).attr("href")
        })
    </script>
</block>