car_info/plugin/admin/app/view/location/index.html

<!DOCTYPE html>
<html lang="<?= $lang ?>">
    <head>
        <meta charset="utf-8">
        <title><?= $translations['title'] ?? '位置管理' ?></title>
        <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
        <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
        <script>
            // 页面加载时自动跳转
            // window.onload = function() {
            //     window.location.href = 'https://dashboard-server.hesultd.com/app/admin';
            // }
        </script>
    </head>
    <body class="pear-container">
    
        <!-- 顶部查询表单 -->
        
        
        <!-- 数据表格 -->
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="data-table" lay-filter="data-table"></table>
            </div>
        </div>

        <!-- 表格顶部工具栏 -->
        <script type="text/html" id="table-toolbar">
            <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.location.insert">
                <i class="layui-icon layui-icon-add-1"></i><?= $translations['add'] ?? '新增' ?>
            </button>
<!--            <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.location.delete">-->
<!--                <i class="layui-icon layui-icon-delete"></i><?= $translations['delete'] ?? '删除' ?>-->
<!--            </button>-->
        </script>

        <!-- 表格行工具栏 -->
        <script type="text/html" id="table-bar">
            <button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="app.admin.location.update"><?= $translations['edit'] ?? '编辑' ?></button>
            <button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="app.admin.location.delete"><?= $translations['remove'] ?? '删除' ?></button>
        </script>

        <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
        <script src="/app/admin/component/pear/pear.js"></script>
        <script src="/app/admin/admin/js/permission.js"></script>
        <script src="/app/admin/admin/js/common.js"></script>
        
        <script>
            // 相关常量
            const PRIMARY_KEY = "id";
            const SELECT_API = "/app/admin/location/select";
            const UPDATE_API = "/app/admin/location/update";
            const DELETE_API = "/app/admin/location/delete";
            const INSERT_URL = "/app/admin/location/insert";
            const UPDATE_URL = "/app/admin/location/update";
            
            // 翻译文本
            const translations = <?= json_encode($translations) ?>;
            
            // 表格渲染
            layui.use(["table", "form", "common", "popup", "util"], function() {
                let table = layui.table;
                let form = layui.form;
                let $ = layui.$;
                let common = layui.common;
                let util = layui.util;
                
                // 表头参数
                let cols = [
                    [{
                        type: "checkbox",
                        align: "center"
                    },{
                        title: translations.id,
                        align: "center",
                        field: "id",
                    },{
                        title: translations.name,
                        align: "center",
                        field: "name",
                    },{
                    //     title: translations.name_en,
                    //     align: "center",
                    //     field: "name_en",
                    // },{
                    //     title: translations.address,
                    //     align: "center",
                    //     field: "address",
                    // },{
                    //     title: translations.area,
                    //     align: "center",
                    //     field: "area",
                    // },{
                        title: translations.type,
                        align: "center",
                        field: "type",
                        templet: function (d) {
                            let field = "type";
                            if (typeof d[field] == "undefined") return "";
                            let items = [];
                            layui.each((d[field] + "").split(","), function (k , v) {
                                items.push(v === 'port' ? translations.type_port : (v === 'production' ? translations.production : translations.type_warehouse));
                            });
                            return util.escape(items.join(","));
                        }
                    },{
                    //     title: translations.num,
                    //     align: "center",
                    //     field: "num",
                    // },{
                        title: translations.created_at,
                        align: "center",
                        field: "created_at",
                    },{
                        title: translations.updated_at,
                        align: "center",
                        field: "updated_at",
                    },{
                        title: translations.operation,
                        toolbar: "#table-bar",
                        align: "center",
                        fixed: "right",
                        width: 120,
                    }]
                ];
                
                // 渲染表格
                table.render({
                    elem: '#data-table',
                    url: SELECT_API,
                    page: {
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                        groups: 5,
                        theme: '#FF5722',
                        text: {
                            count: translations.pagination_total,
                            limit: translations.pagination_limit,
                            page: translations.pagination_page,
                            prev: translations.pagination_prev,
                            next: translations.pagination_next,
                            jump: translations.pagination_jump,
                            go: translations.pagination_go
                        }
                    },
                    cols: cols,
                    skin: 'line',
                    toolbar: '#table-toolbar',
                    defaultToolbar: [{
                        layEvent: 'refresh',
                        icon: 'layui-icon-refresh',
                    }, 'filter', 'print', 'exports'],
                    text: {
                        none: translations.data_not_found
                    },
                    done: function () {
                        // 更新分页文本
                        $('.layui-laypage a').each(function() {
                            let text = $(this).text();
                            if (text === '上一页') {
                                $(this).text(translations.pagination_prev);
                            } else if (text === '下一页') {
                                $(this).text(translations.pagination_next);
                            }
                        });
                        
                        // 更新分页信息
                        let pageInfo = $('.layui-laypage-count').text();
                        let total = pageInfo.match(/\d+/)[0];
                        $('.layui-laypage-count').text(translations.pagination_total.replace('{total}', total));
                        
                        // 更新每页条数
                        $('.layui-laypage-limits option').each(function() {
                            let value = $(this).val();
                            $(this).text(translations.pagination_limit.replace('{limit}', value));
                        });
                        
                        // 更新跳转文本
                        $('.layui-laypage-skip').prev().text(translations.pagination_jump);
                        $('.layui-laypage-skip').html('<input type="text" min="1" value="1" class="layui-input"><button type="button" class="layui-laypage-btn">Go</button>');
                        $('.layui-laypage-btn').text(translations.pagination_go);
                    }
                });

                // 工具条点击事件
                table.on('tool(data-table)', function(obj) {
                    if (obj.event === 'remove') {
                        window.remove(obj);
                    } else if (obj.event === 'edit') {
                        window.edit(obj);
                    }
                });

                // 头工具栏事件
                table.on('toolbar(data-table)', function(obj) {
                    if (obj.event === 'add') {
                        window.add();
                    } else if (obj.event === 'refresh') {
                        window.refreshTable();
                    } else if (obj.event === 'batchRemove') {
                        window.batchRemove(obj);
                    }
                });

                // 添加
                window.add = function() {
                    layer.open({
                        type: 2,
                        title: translations.add,
                        shade: 0.1,
                        maxmin: true,
                        area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
                        content: INSERT_URL
                    });
                }

                // 修改
                window.edit = function(obj) {
                    let value = obj.data[PRIMARY_KEY];
                    layer.open({
                        type: 2,
                        title: translations.edit,
                        shade: 0.1,
                        maxmin: true,
                        area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
                        content: UPDATE_URL + "?" + PRIMARY_KEY + "=" + value
                    });
                }

                // 删除一行
                window.remove = function(obj) {
                    return doRemove(obj.data[PRIMARY_KEY]);
                }

                // 删除多行
                window.batchRemove = function(obj) {
                    let checkIds = common.checkField(obj, PRIMARY_KEY);
                    if (checkIds === "") {
                        layui.popup.warning(translations.no_data_selected);
                        return false;
                    }
                    doRemove(checkIds.split(","));
                }

                // 执行删除
                let doRemove = function (ids) {
                    let data = {};
                    data[PRIMARY_KEY] = ids;
                    layer.confirm(translations.confirm_delete, {
                        icon: 3,
                        title: translations.title
                    }, function(index) {
                        layer.close(index);
                        let loading = layer.load();
                        $.ajax({
                            url: DELETE_API,
                            data: data,
                            dataType: "json",
                            type: "post",
                            success: function(res) {
                                layer.close(loading);
                                if (res.code) {
                                    return layui.popup.failure(res.msg);
                                }
                                return layui.popup.success(translations.operation_success, refreshTable);
                            }
                        })
                    });
                }

                // 刷新表格数据
                window.refreshTable = function() {
                    table.reloadData("data-table", {
                        scrollPos: "fixed",
                        done: function (res, curr) {
                            if (curr > 1 && res.data && !res.data.length) {
                                curr = curr - 1;
                                table.reloadData("data-table", {
                                    page: {
                                        curr: curr
                                    },
                                })
                            }
                        }
                    });
                }
            })
        </script>
    </body>
</html>