locky
/
ASJLanguageSys


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487
							<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>afaa</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery_cookie_min.js"></script>
    <script src="js/scripts.js"></script>
    <script src="js/jqhttpsdk.js"></script>
    <script src="js/jkcor.js"></script>
    <script src="js/pages.js"></script>
</head>
<body>
<div class="clear-backend">
    <div class="avatar">
        <div>
            <a href="#" target="_blank">
                <img src="img/admin.png" alt="">
            </a>
        </div>
    </div>

    <!-- tab-menu -->
    <input type="radio" class="tab-1" name="tab" checked="checked">
    <span>Home</span><i class="fa fa-home"></i>

    <input type="radio" class="tab-2" name="tab">
    <span>Lang</span><i class="fa fa-medium"></i>

    <input type="radio" class="tab-3" name="tab">
    <span>Users</span><i class="fa fa-user"></i>

    <input type="radio" class="tab-4" name="tab">
    <span>Comments</span><i class="fa fa-comment"></i>

    <input type="radio" class="tab-5" name="tab">
    <span>Upload</span><i class="fa fa-cloud-upload"></i>

    <input type="radio" class="tab-6" name="tab">
    <span>Favorite</span><i class="fa fa-star"></i>

    <input type="radio" class="tab-7" name="tab">
    <span>Photos</span><i class="fa fa-photo"></i>

    <input type="radio" class="tab-8" name="tab">
    <span>Analysis</span><i class="fa fa-line-chart"></i>

    <input type="radio" class="tab-9" name="tab">
    <span>Links</span><i class="fa fa-link"></i>

    <input type="radio" class="tab-10" name="tab">
    <span>Settings</span><i class="fa fa-cog"></i>

    <!-- tab-top-bar -->
    <div class="top-bar">
        <ul>
            <li>
                <a href="" title="Log Out">
                    <i class="fa fa-sign-out"></i>
                </a>
            </li>
            <li>
                <a href="" title="Messages">
                    <i class="fa fa-envelope"></i>
                </a>
            </li>
            <li>
                <a href="" title="Edit">
                    <i class="fa fa-edit"></i>
                </a>
            </li>
        </ul>
    </div>

    <!-- tab-content -->
    <div class="tab-content">
        <section class="tab-item-1">
            <!--<header></header>-->
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <form role="form">
                            <div class="form-group">

                                <label for="InputLangArea">
                                    langArea
                                </label>
                                <input type="text" class="form-control" id="InputLangArea"/>
                            </div>

                            <button type="submit" class="btn btn-primary" onclick="subLangAre();return false;">
                                Submit
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            <!--add area-->
            <!--table-->
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--add-->
                    <div class="col-md-12">
                        <table class="table table-bordered table-hover">
                            <thead id="langTableHead"></thead>
                            <tbody id="langTableBody"></tbody>
                        </table>
                    </div>
                </div>
                <div id="pagination"></div>
            </div>


            <!---->
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="modal fade" id="modal-container-593541" role="dialog" aria-labelledby="myModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="myModalLabel">
                                            EDIT
                                        </h5>
                                        <button type="button" class="close" data-dismiss="modal">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="form-group" id="edit_model_form">
                                            <!--<label for="InputLangArea">-->
                                            <!--langArea-->
                                            <!--</label>-->
                                            <!--<input type="text" class="form-control" id="InputLangArea"/>-->
                                        </div>
                                    </div>
                                    <div class="modal-footer">

                                        <button type="button" class="btn btn-primary editRowSaveBtn"
                                                onclick="editRow(this);return false;">
                                            Save changes
                                        </button>
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                            Close
                                        </button>
                                    </div>
                                </div>

                            </div>

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

            <!---->

            <script type="text/javascript">
                $(function () {
                    let post_data = {
                        'token': $.cookie('access_token'),
                        'page': 1,
                        'line': 10
                    };
                    $.postJSON(
                        http_ip_prot + 'langWord/query', JSON.stringify(post_data),
                        function (data) {
                            if (data['code'] == 0) {
                                // console.log(data['res'])
                                console.log(data)
                                addTable(data['res'])
                                let count_page = Math.ceil(data['res']['count'] / 10)
                                $('#pagination').pagination({
                                    pages: count_page, //总页数
                                    // pages: 10000, //总页数
                                    edges: 2,
                                    cssStyle: 'pagination-sm', //按纽大小pagination-lg或写入自定义css
                                    displayedPages: 5, //显示几个
                                    onPageClick: function (pageNumber, event) {
                                        //点击时调用
                                        // alert(pageNumber);
                                        queryData(pageNumber)
                                    },
                                    onInit: function (getid) {
                                        //刷新时或初始化调用
                                        // alert(getid);
                                    }
                                });
                            } else {
                                alert(data['msg'])
                            }
                        }
                    );
                    // $('#pagination').pagination({
                    //     pages: 50, //总页数
                    //     edges: 2,
                    //     cssStyle: 'pagination-sm', //按纽大小pagination-lg或写入自定义css
                    //     displayedPages: 5, //显示几个
                    //     onPageClick: function(pageNumber, event) {
                    //         //点击时调用
                    //         // alert(pageNumber);
                    //     },
                    //     onInit: function(getid) {
                    //         //刷新时或初始化调用
                    //         // alert(getid);
                    //     }
                    // });
                });
                let la_list
                let checkboxInput = '<input type="checkbox" aria-label="Checkbox for following text input">'
                let lw_data

                function queryData(page) {
                    let post_data = {
                        'token': $.cookie('access_token'),
                        'page': page,
                        'line': 10
                    };
                    $.postJSON(
                        http_ip_prot + 'langWord/query', JSON.stringify(post_data),
                        function (data) {
                            if (data['code'] == 0) {
                                // console.log(data['res'])
                                console.log(data)
                                addTable(data['res'])
                            } else {
                                alert(data['msg'])
                            }
                        }
                    );
                }

                function addTable(data) {
                    //头部多区域语言
                    let head_data = data['la_list'];
                    la_list = head_data
                    // body部详细语言
                    let body_data = data['lw_dict'];
                    lw_data = body_data
                    let head_html = '<tr><th>en</th>';
                    //头部标签添加
                    $.each(head_data, function (idx, obj) {
                        // console.log(idx)
                        head_html += ('<th>' + obj['lang'] + '</th>')
                    });
                    head_html += '<th width="180px"><a href="#" onclick="addRow()">add</a></th></tr>';

                    let body_html = '';


                    $.each(body_data, function (idx, obj) {
                        // console.log(idx)
                        // console.log(obj)
                        let edit_btn = '<a href="#" title="Edit" onclick="editFunc(\'' + idx + '\')"><i class="fa fa-edit"></i></a>';
                        let del_btn = '<a href="#" title="Delete" onclick="deleteFunc(\'' + idx + '\')"><i class="fa fa-ban"></i></a>';
                        body_html += '<tr>';
                        body_html += ('<td>' + idx + '</td>');
                        console.log('--------');
                        $.each(la_list, function (x, y) {
                            if (obj[y['lang']]) {
                                body_html += ('<td>' + obj[y['lang']] + '</td>')
                            } else {
                                body_html += ('<td></td>')
                            }
                        });
                        body_html += '<td>' + edit_btn + '&nbsp;&nbsp;&nbsp;' + del_btn + '</td></tr>';
                    });

                    $('#langTableHead').html(head_html);
                    $('#langTableBody').html(body_html);
                    addDelFunc()
                }

                function addRow() {

                    let newRow = '<tr><td><input class="form-control" type="text" langID="key" id="newRow_key"></td>'
                    $.each(la_list, function (idx, obj) {
                        // console.log(idx)
                        // newRow += ('<td>' + obj['id'] + '</td>')
                        newRow += ('<td>' +
                            '<input class="form-control" type="text" langID="' + obj['id'] + '" id="newRow_lang_' + obj['id'] + '">' +
                            '</td>')
                    })
                    let save_btn = '<a href="" title="Save" class="save_row"><i class="fa fa-check-circle-o"></i></a>';
                    let del_btn = '<a href="" title="Delete" class="del_row"><i class="fa fa-ban"></i></a>';

                    newRow += '<td>' + save_btn + '&nbsp;&nbsp;&nbsp;' + del_btn + '</td></tr>'
                    $('#langTableBody').prepend(newRow)
                    addDelFunc()
                    addSaveFunc()
                }

                function addDelFunc() {
                    $(".del_row").bind("click", function () {
                        let trRow = $(this).parent().parent()
                        trRow.remove()
                    });
                }

                function addSaveFunc() {
                    $(".save_row").bind("click", function () {
                        let post_data = {
                            'token': $.cookie('access_token')
                        }
                        let post_list = []
                        let trRow = $(this).parent().parent()
                        trRow.find('input').each(function () {
                            // console.log($(this).attr('id'))
                            // console.log($(this).attr('langID'))
                            let inputVal = $(this).val()
                            let langID = $(this).attr('langID')
                            if (langID === 'key') {
                                post_data['word_key'] = inputVal
                            } else {
                                post_list.push({'la_id': langID, 'val': inputVal})
                            }
                        })
                        post_data['word_arr'] = post_list
                        console.log(post_data)
                        $.postJSON(
                            http_ip_prot + 'langWord/add', JSON.stringify(post_data),
                            function (data) {
                                if (data['code'] == 0) {
                                    // console.log(data['res'])
                                    window.location.reload();
                                    console.log(data)
                                } else {
                                    alert(data['msg'])
                                }
                            }
                        )
                    })
                }


                // 编辑模态框
                function editFunc(langKey) {
                    console.log(lw_data);
                    console.log(la_list);
                    // alert(langKey)
                    $('#modal-container-593541').modal('show')
                    // let post_data = {'token': $.cookie('access_token')};
                    let html_per = '<label for="lang_key_edit">KEY</label><input class="form-control" type="text" id="lang_key_edit" oldkey="' + langKey + '" value="' + langKey + '"> '
                    $.each(la_list, function (idx, obj) {
                        console.log(obj);
                        html_per += ('<label for="InputLangArea">' + obj['lang'] + ':</label>' +
                            '<input type="text" class="form-control" lang="' + obj['lang'] + '" value="' + (lw_data[langKey][obj['lang']] ? lw_data[langKey][obj['lang']] : '') + '"/>')
                    });
                    // console.log(html_per)
                    $('#edit_model_form').html(html_per)
                }

                function deleteFunc(langKey) {
                    var r = confirm("Press a button")
                    if (r) {
                        let post_data = {
                            'token': $.cookie('access_token'),
                            'word_key': langKey
                        }
                        console.log(post_data)
                        $.postJSON(
                            http_ip_prot + 'langWord/delete', JSON.stringify(post_data),
                            function (data) {
                                if (data['code'] == 0) {
                                    // console.log(data['res'])
                                    console.log(data);
                                    alert(data['msg']);
                                    window.location.reload();
                                } else {
                                    alert(data['msg'])
                                }
                            }
                        )
                    }
                }

                /*post_data = {
                    word_key_id:1,
                    word_key:xxx,
                    word_arr:[
                        {'lang':'','val':''},
                        {'lang':'','val':''},
                        {'lang':'','val':''}
                    ]
                }*/
                function editRow() {
                    let post_data = {}
                    post_data['token'] = $.cookie('access_token')
                    post_data['word_key'] = $('#lang_key_edit').val()
                    post_data['old_word_key'] = $('#lang_key_edit').attr('oldkey')
                    post_data['word_arr'] = {}
                    $('#edit_model_form').find('input').each(function () {
                        let langArea = $(this).attr('lang')
                        if (langArea) {
                            post_data['word_arr'][langArea] = $(this).val()
                        }
                    })
                    console.log(post_data)
                    $.postJSON(
                        http_ip_prot + 'langWord/update', JSON.stringify(post_data),
                        function (data) {
                            if (data['code'] == 0) {
                                // console.log(data['res'])
                                console.log(data)
                                alert(data['msg'])

                                window.location.reload();
                            } else {
                                alert(data['msg'])
                            }
                        }
                    )
                    // $('.editRowSaveBtn').bind('click', function () {
                    //     console.log('adjslkfjsdalkfj')
                    // })
                }
                function subLangAre() {
                    let access_token = $.cookie('access_token')
                    let langArea = $('#InputLangArea').val()
                    let post_data = {
                        'token': access_token,
                        'lang': langArea,
                    }
                    console.log(post_data)
                    $.postJSON(
                        http_ip_prot + 'langArea/add',
                        JSON.stringify(post_data),
                        function (data) {
                            if (data['code'] == 0) {
                                alert(data['msg'])
                            } else {
                                alert(data['msg'])
                            }
                        }
                    );
                }
            </script>
        </section>
        <section class="tab-item-2">
            <h1>Two</h1>
        </section>
        <section class="tab-item-3">
            <h1>Three</h1>
        </section>
        <section class="tab-item-4">
            <h1>Four</h1>
        </section>
        <section class="tab-item-5">
            <h1>Five</h1>
        </section>
        <section class="tab-item-6">
            <h1>Six</h1>
        </section>
        <section class="tab-item-7">
            <h1>Sever</h1>
        </section>
        <section class="tab-item-8">
            <h1>Eight</h1>
        </section>
        <section class="tab-item-9">
            <h1>Nine</h1>
        </section>
        <section class="tab-item-10">
            <h1>Ten</h1>
        </section>
    </div>
</div>
</body>
</html>