自动化立体仓库 - WMS系统
pang.jiabao
2025-04-10 07e07d7666cfb2d822c60db7b67d93e0610072a8
src/main/webapp/views/resource/resource.html
@@ -6,81 +6,304 @@
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/cool.css" media="all">
    <link rel="stylesheet" href="/static/css/common.css" media="all">
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/admin.css?v=318" media="all">
    <link rel="stylesheet" href="../../static/css/cool.css" media="all">
    <link rel="stylesheet" href="../../static/css/common.css" media="all">
    <style>
        #detail {
            padding: 25px 30px 0 0;
        }
        .ew-tree-table-box {
            height: 100%;
        }
    </style>
</head>
<body>
<!-- 搜索栏 -->
<div id="search-box" class="layui-form layui-card-header">
    <div class="layui-inline">
        <label class="layui-form-label">编  号:</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="id" placeholder="请输入" autocomplete="off">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">菜单名称:</label>
        <div class="layui-input-inline">
            <input name="name" class="layui-input" type="text" placeholder="菜单名称" >
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">菜单等级:</label>
        <div class="layui-input-inline">
            <select name="level">
                <option value="" style="display: none"></option>
                <option value="1">一级菜单</option>
                <option value="2">二级菜单</option>
                <option value="3">三级菜单</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">父级菜单:</label>
        <div class="layui-input-inline cool-auto-complete">
            <input id="resourceId" class="layui-input" name="resource_id" type="text" placeholder="请输入" autocomplete="off" style="display: none">
            <input id="resourceName" class="layui-input cool-auto-complete-div" onclick="autoShow(this.id)" type="text" placeholder="请输入" onfocus=this.blur()>
            <div class="cool-auto-complete-window">
                <input class="cool-auto-complete-window-input" data-key="resourceQuery" onkeyup="autoLoad(this.getAttribute('data-key'))">
                <select class="cool-auto-complete-window-select" data-key="resourceQuerySelect" onchange="confirmed(this.getAttribute('data-key'))" multiple="multiple">
                </select>
            </div>
        </div>
    </div>
    <!-- 待添加 -->
    <div id="data-search-btn" class="layui-btn-container layui-form-item">
        <button id="search" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="search">搜索</button>
        <button id="reset" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="reset">重置</button>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 数据表格 -->
            <table id="resource"></table>
        </div>
    </div>
</div>
<!-- 表格 -->
<table class="layui-hide" id="resource" lay-filter="resource"></table>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" id="btn-add" lay-event="addData">新增</button>
        <button class="layui-btn layui-btn-sm" id="btn-refresh" lay-event="refreshData">刷新</button>
        <button class="layui-btn layui-btn-sm" id="btn-delete" lay-event="deleteData">删除</button>
        <button class="layui-btn layui-btn-primary layui-btn-sm" id="btn-export" lay-event="exportData">导出</button>
    </div>
</script>
<script type="text/html" id="operate">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs btn-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs btn-edit" lay-event="edit">Изменить</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs btn-del" lay-event="del">Удалить</a>
</script>
<script type="text/javascript" src="/static/js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/resource/resource.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/cool.js" charset="utf-8"></script>
<!-- 表单弹窗 -->
<script type="text/html" id="editDialog">
    <form id="detail" lay-filter="detail" class="layui-form" style="margin: 0">
        <input name="id" type="hidden">
        <input name="uuid" type="hidden">
        <input name="level" type="hidden">
        <div class="layui-row">
<iframe id="detail-iframe" scrolling="auto" style="display:none;"></iframe>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">上级菜单</label>
                    <div class="layui-input-block">
                        <div id="resourceParentSel" class="ew-xmselect-tree"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">Код меню</label>
                    <div class="layui-input-block">
                        <input name="code" placeholder="" class="layui-input" lay-vertype="tips" lay-verify="required" required="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">Тип</label>
                    <div class="layui-input-block">
                        <select name="level" lay-vertype="tips" lay-verify="required" required="">
                            <option value=""></option>
                            <option value="1">一级菜单</option>
                            <option value="2">二级菜单</option>
                            <option value="3">按钮</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">Название</label>
                    <div class="layui-input-block">
                        <input name="name" placeholder="" class="layui-input" lay-vertype="tips" lay-verify="required" required="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Сортировка</label>
                    <div class="layui-input-block">
                        <input name="sort" placeholder="" class="layui-input" lay-verify="number">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">Статус</label>
                    <div class="layui-input-block">
                        <select name="status" lay-vertype="tips" lay-verify="required" required="">
                            <option value=""></option>
                            <option value="1">Нормально</option>
                            <option value="0">Заблокировано</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <hr class="layui-bg-gray">
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="editSubmit" lay-submit="">Сохранить</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">Отменить</button>
        </div>
    </form>
</script>
<script type="text/html" id="typeTpl">
    {{# if( d.level === 1 ){ }}
    <span name="level" class="layui-badge layui-badge-green">Меню</span>
    {{# } else if(d.level === 2){ }}
    <span name="level" class="layui-badge layui-badge-green">Меню</span>
    {{# } else if(d.level === 3){ }}
    <span name="level" class="layui-badge layui-badge-gray">按钮</span>
    {{# } }}
</script>
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script>
<script>
    layui.config({
        base: baseUrl + "/static/layui/lay/modules/"
    }).use(['form','treeTable', 'admin', 'xmSelect'], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var treeTable = layui.treeTable;
        var xmSelect = layui.xmSelect;
        var tbDataList = [];
        var insTb = treeTable.render({
            elem: '#resource',
            url: baseUrl+'/resource/tree/auth',
            headers: {token: localStorage.getItem('token')},
            height: 'full-200',
            toolbar: ['<p>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>Добавить</button>&nbsp;',
                '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>Удалить</button>',
                '</p>'].join(''),
            tree: {
                iconIndex: 2,           // 折叠图标显示在第几列
                isPidData: true,        // 是否是id、pid形式数据
                idName: 'id',           // id字段名称
                pidName: 'resourceId'     // pid字段名称
            },
            cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', sort: true,align: 'center', fixed: 'left', width: 80, hide: true}
                ,{field: 'name', align: 'left',title: 'Название'}
                ,{field: 'code', align: 'center',title: 'Код меню'}
                // ,{field: 'resourceName', align: 'center',title: '父级菜单'}
                // ,{field: 'level$', align: 'center',title: '菜单等级'}
                ,{field: 'type', align: 'center',title: 'Тип', templet: '#typeTpl', width: 120}
                ,{field: 'sort', align: 'center',title: 'Сортировка'}
                ,{field: 'status$', align: 'center',title: 'Статус'}
                ,{fixed: 'right', title:'Операция', align: 'center', toolbar: '#operate', width:180}
            ]],
            done: function (data) {
                $('.ew-tree-table-box').css('height', '100%');
                // insTb.expandAll();
                tbDataList = data;
                limit();
            }
        });
        /* 表格头工具栏点击事件 */
        treeTable.on('toolbar(resource)', function (obj) {
            if (obj.event === 'add') { // 添加
                showEditModel();
            } else if (obj.event === 'del') { // 删除
                var checkRows = insTb.checkStatus();
                if (checkRows.length === 0) {
                    layer.msg('Пожалуйста, выберите данные', {icon: 2});
                    return;
                }
                var ids = checkRows.map(function (d) {
                    if (!d.LAY_INDETERMINATE) {
                        return d.id;
                    } else {
                        return null;
                    }
                });
                doDel({ids: ids});
            }
        });
        /* 表格操作列点击事件 */
        treeTable.on('tool(resource)', function (obj) {
            if (obj.event === 'edit') { // 修改
                showEditModel(obj.data);
            } else if (obj.event === 'del') { // 删除
                doDel(obj);
            }
        });
        /* 显示表单弹窗 */
        function showEditModel(mData) {
            admin.open({
                type: 1,
                area: '600px',
                title: (mData ? 'Изменить' : 'Добавить') + 'Права',
                content: $('#editDialog').html(),
                success: function (layero, dIndex) {
                    // 回显表单数据
                    form.val('detail', mData);
                    // 表单提交事件
                    form.on('submit(editSubmit)', function (data) {
                        data.field.resourceId = insXmSel.getValue('valueStr');
                        var loadIndex = layer.load(2);
                        $.ajax({
                            url: baseUrl+"/resource/"+(mData?'update':'add')+"/auth",
                            headers: {'token': localStorage.getItem('token')},
                            data: data.field,
                            method: 'POST',
                            success: function (res) {
                                layer.close(loadIndex);
                                if (res.code === 200){
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1});
                                    insTb.refresh();
                                    setTimeout(function () {
                                        insTb.expand(data.field.resourceId);
                                    }, 200)
                                } else if (res.code === 403){
                                    top.location.href = baseUrl+"/";
                                }else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        })
                        return false;
                    });
                    // 渲染下拉树
                    var insXmSel = xmSelect.render({
                        el: '#resourceParentSel',
                        height: '250px',
                        data: insTb.options.data,
                        initValue: mData&&mData.resourceId!=null ? [mData.resourceId] : [],
                        model: {label: {type: 'text'}},
                        prop: {
                            name: 'name',
                            value: 'id'
                        },
                        radio: true,
                        clickClose: true,
                        tree: {
                            show: true,
                            indent: 15,
                            strict: false,
                            expandedKeys: false
                        }
                    });
                    // 弹窗不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    layui.form.render('select');
                }
            });
        }
        /* 删除 */
        function doDel(obj) {
            layer.confirm('Вы уверены, что хотите удалить эту запись?', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                var ids;
                if (obj.data) {
                    ids = [];
                    ids[0] = obj.data.id;
                } else {
                    ids = obj.ids;
                }
                $.ajax({
                    url: baseUrl+"/resource/delete/auth",
                    headers: {'token': localStorage.getItem('token')},
                    data: {ids: ids},
                    method: 'POST',
                    success: function (res) {
                        layer.close(loadIndex);
                        if (res.code === 200){
                            layer.msg(res.msg, {icon: 1});
                            insTb.refresh();
                        } else if (res.code === 403){
                            top.location.href = baseUrl+"/";
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                })
            });
        }
    });
</script>
</body>
</html>