Administrator
2024-03-30 e6e9424a5ea658f0692fb5768a01f799bb98f3bd
WMS系统首页左侧菜单新版样式开发
4个文件已添加
357 ■■■■■ 已修改文件
HTML/img/ruku.png 补丁 | 查看 | 原始文档 | blame | 历史
HTML/img/touxiang.png 补丁 | 查看 | 原始文档 | blame | 历史
HTML/img/tuichu.png 补丁 | 查看 | 原始文档 | blame | 历史
HTML/views/index2.html 357 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
HTML/img/ruku.png
HTML/img/touxiang.png
HTML/img/tuichu.png
HTML/views/index2.html
New file
@@ -0,0 +1,357 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>仓储管理系统</title>
        <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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
        <link rel="stylesheet" href="../img/menuico/iconfont.css" media="all">
        <!-- <link rel="icon" href="../img/favicon.ico" type="image/x-icon"> -->
    </head>
    <style type="text/css">
        .menu{
            width: 100%;height: 80px;margin-top: 5px;
        }
        .menudiv{
            height: 80px;width: 80%;float: right;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 14px;color: #fff;cursor: pointer;
        }
        .menudivChoose{
            background-color: #3A3C40;
            border-left:5px solid #E35715;
        }
        .fatherMenuDiv{
            position: relative;height: 100%; width: 180px;overflow: auto;scrollbar-width: none;float: left;background-color: #24262A;
        }
        .fatherMenuTxDiv{
            margin-top: 50px;height: 80px;width: 80%;display: flex;align-items: center;justify-content: center;float: right;font-size: 1px;color: #3A3C40;cursor: pointer;
        }
        .fatherMenuDiv2{
            width: 100%;height: auto;display: flex;flex-direction: column;font-size: 14px;
        }
        .chiledMenuDiv{
            position: relative;height: 100%; width: 140px;overflow: auto;scrollbar-width: none;float: left;background-color: #3A3C40; opacity: 0.9;
        }
        .chiledMenuDiv2{
            width: 200px;height: auto;margin-left: 20px;margin-top: 140px;border-left:1px solid #737377;
        }
        .chiledMenuInfo{
            width: 100px;height: auto;margin-top: 30px;display: flex;justify-content: center;color: #fff;
        }
        .chiledMenuInfoChoose{
            color: #E35715;
            cursor: pointer;
        }
        .chiledMenuInfoChooseW{
            color: #fff;
            cursor: pointer;
        }
    </style>
    <body class="layui-layout-body">
        <div id="LAY_app">
            <div class="layui-layout layui-layout-admin">
                <div class="layui-header">
                    <!-- 头部区域 -->
                    <ul class="layui-nav layui-layout-left">
                        <!-- <li class="layui-nav-item layadmin-flexible" lay-unselect>
                            <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                                <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                            </a>
                        </li> -->
                        <li class="layui-nav-item" lay-unselect>
                            <a href="javascript:;" layadmin-event="refresh" title="刷新">
                                <i class="layui-icon layui-icon-refresh-3"></i>
                            </a>
                        </li>
                    </ul>
                    <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
                        <li class="layui-nav-item layui-hide-xs" lay-unselect>
                            <a href="javascript:;" layadmin-event="theme">
                                <i class="layui-icon layui-icon-theme"></i>
                            </a>
                        </li>
                        <li class="layui-nav-item layui-hide-xs" lay-unselect>
                            <a href="javascript:;" layadmin-event="note">
                                <i class="layui-icon layui-icon-note"></i>
                            </a>
                        </li>
                        <li class="layui-nav-item layui-hide-xs" lay-unselect>
                            <a href="javascript:;" layadmin-event="fullscreen">
                                <i class="layui-icon layui-icon-screen-full"></i>
                            </a>
                        </li>
                        <!-- <li class="layui-nav-item" lay-unselect>
                            <a href="javascript:;">
                                <cite >
                                    <a href="javascript:;" id="username"></a>
                                </cite>
                            </a>
                            <dl class="layui-nav-child">
                                <!-- <dd><a lay-href="set/user/info.html">基本资料</a></dd> -->
                                <dd><a lay-href="set/user/password.html" id="changePassword">修改密码</a></dd>
                                <hr>
                                <dd><a href="Login.html">退出</a></dd>
                            </dl>
                        </li> -->
                    </ul>
                </div>
                <!-- 侧边菜单 -->
                <div class="layui-side" id="leftmenu" style="width: auto;">
                    <div class="fatherMenuDiv">
                        <div class="fatherMenuTxDiv">
                            <dd><a lay-href="set/user/password.html" id="changePassword">
                                <img src="/img/touxiang.png" style="width: 50px;">
                                修改密码
                            </a></dd>
                        </div>
                        <div class="fatherMenuDiv2">
                            <div id="LAY-system-side-menu">
                            </div>
                            <div class="menu" style="position: relative;">
                                <div class="menudiv" onclick="loginOut()">
                                    <img src="/img/tuichu.png" style="width: 32px;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chiledMenuDiv" hidden>
                        <div class="chiledMenuDiv2" id="LAY-system-side-menu2">
                        </div>
                    </div>
                </div>
                <!-- 页面标签 -->
                <div class="layadmin-pagetabs" id="LAY_app_tabs" style="left: 180px;">
                    <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
                    <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
                    <div class="layui-icon layadmin-tabs-control layui-icon-down">
                        <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                            <li class="layui-nav-item" lay-unselect>
                                <a href="javascript:;"></a>
                                <dl class="layui-nav-child layui-anim-fadein">
                                    <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                                    <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                                    <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
                                </dl>
                            </li>
                        </ul>
                    </div>
                    <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
                        <ul class="layui-tab-title" id="LAY_app_tabsheader">
                            <li lay-id="" lay-attr="" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
                        </ul>
                    </div>
                </div>
                <!-- 主体内容 home/console.html-->
                <div class="layui-body" id="LAY_app_body" style="left: 180px;">
                    <div class="layadmin-tabsbody-item layui-show" id="bodyDIv">
                        <iframe src="home/console.html" frameborder="0" class="layadmin-iframe"></iframe>
                    </div>
                </div>
                <div class="layui-footer" style="height: 20px; z-index: 999;left: 180px;">
                    <!-- 底部固定区域 -->
                    <p>版本v1.0</p>
                </div>
                <!-- 辅助元素,一般用于移动设备下遮罩 -->
                <div class="layadmin-body-shade" layadmin-event="shade"></div>
            </div>
        </div>
        <div id="">
            df
        </div>
        <script src="../layuiadmin/layui/layui.js"></script>
        <script src="../js/public.js"></script>
        <script src="../js/jquery-3.5.1.min.js"></script>
        <script src="../js/jquery.cookie.js"></script>
        <!-- <script src="../layuiadmin/modules/console.js"></script> -->
        <script>
            var allList;
            var chooseMenuId='';
            var chooseChildMenuId='';
            //点击菜单事件
            function chooseMenu(menuId){
                if(menuId!=null && menuId!=''){
                    $('.menudiv').removeClass('menudivChoose');
                    $('#'+menuId).addClass('menudivChoose');
                    //查询有无子菜单
                    var list = allList.filter(item => item.ParentNo == menuId);
                    if(list.length>0){
                        $('.chiledMenuDiv').show();
                        $("#LAY-system-side-menu2").html('');
                        var html='';
                        for(var i=0;i<list.length;i++){
                            if(list[i].MenuNo == chooseChildMenuId){
                                html+='<div class="chiledMenuInfo">'+
                                        '<dd><a lay-href="'+list[i].Url+'" id="'+list[i].MenuNo+'" class="chiledMenuInfoChoose" onclick="chooseChiledMenu('+list[i].MenuNo+')">'+list[i].MenuName+'</a></dd>'+
                                      '</div>';
                            }else{
                                html+='<div class="chiledMenuInfo">'+
                                        '<dd><a lay-href="'+list[i].Url+'" id="'+list[i].MenuNo+'" class="chiledMenuInfoChooseW" onclick="chooseChiledMenu('+list[i].MenuNo+')">'+list[i].MenuName+'</a></dd>'+
                                      '</div>';
                            }
                        }
                        $("#LAY-system-side-menu2").append(html);
                    }else{
                        $('.chiledMenuDiv').hide();
                    }
                    chooseMenuId=menuId;
                }
            }
            //点击子菜单事件
            function chooseChiledMenu(menuId){
                $('.chiledMenuInfo').find('a').removeClass('chiledMenuInfoChoose');
                $('.chiledMenuInfo').find('a').addClass('chiledMenuInfoChooseW');
                $('#'+menuId).removeClass('chiledMenuInfoChooseW');
                $('#'+menuId).addClass('chiledMenuInfoChoose');
                chooseChildMenuId=menuId;
            }
            function loginOut(){
                window.location.href = "Login.html";
            }
            //鼠标离开子菜单事件
            $('#leftmenu').mouseleave(function(){
                $('.chiledMenuDiv').hide();
            });
             // 绑定tab标签点击事件
             $('#LAY_app_tabsheader').on('click', 'li', function(){
                var url = $(this).attr('lay-id');
                var chiledMenuInfo = allList.filter(item => item.Url == url)[0];
                chooseChildMenuId=chiledMenuInfo.MenuNo;
                $('.chiledMenuInfo').find('a').removeClass('chiledMenuInfoChoose');
                $('.chiledMenuInfo').find('a').addClass('chiledMenuInfoChooseW');
                $('#'+chooseChildMenuId).removeClass('chiledMenuInfoChooseW');
                $('#'+chooseChildMenuId).addClass('chiledMenuInfoChoose');
                chooseMenuId=chiledMenuInfo.ParentNo;
                $('.menudiv').removeClass('menudivChoose');
                $('#'+chooseMenuId).addClass('menudivChoose');
            });
            layui.config({
                base: '../layuiadmin/' //静态资源所在路径
            }).extend({
                index: 'lib/index' //主入口模块
            }).use(['element', 'index'], function() {
                if (!$.cookie('token')) {
                    layer.msg('登陆失效,请重新登陆', {
                        icon: 2,
                        time: 2000 //2秒关闭(如果不配置,默认是3秒)
                    }, function() {
                        location.href = "Login.html";
                    });
                }else{
                    $("#token").text($.cookie('token'));
                }
                var element = layui.element;
                getMenuInfo();
                var xml='';
                function getMenuInfo(){
                    sendData(IP + "/Basis/GetRoleRightList", {}, 'get', function(res) {
                        if (res.code == 0) { //成功
                            allList=res.data;
                            var list = allList.filter(item => item.level == "0");
                            if (list) {
                                for (var i = 0; i < list.length; i++) {
                                    if (list[i].MenuNo == "9000") { //判断是否是pda的权限 是:跳过
                                        continue;
                                    }
                                    if(i==0){
                                        xml+='<div class="menu">'+
                                                '<div class="menudiv menudivChoose" id="'+ list[i].MenuNo +'" onclick="chooseMenu('+list[i].MenuNo+')">'+
                                                    '<img src="/img/ruku.png" style="width: 25px;">'+
                                                    '<p style="margin-top: 15px;">'+list[i].MenuName+'</p>'+
                                                '</div>'+
                                            '</div>'
                                    }else{
                                        xml+='<div class="menu">'+
                                                '<div class="menudiv" id="'+ list[i].MenuNo +'" onclick="chooseMenu('+list[i].MenuNo+')">'+
                                                    '<img src="/img/ruku.png" style="width: 25px;">'+
                                                    '<p style="margin-top: 15px;">'+list[i].MenuName+'</p>'+
                                                '</div>'+
                                            '</div>'
                                    }
                                }
                            }
                            $("#LAY-system-side-menu").append(xml);
                            element.render("#leftmenu");
                        } else { //不成功
                            layer.msg('获取当前登录人权限信息失败', {
                                icon: 2,
                                time: 2000 //2秒关闭(如果不配置,默认是3秒)
                            }, function() {
                                //回调
                            });
                        }
                    });
                }
                sendData(IP + "/Basis/IsPassWordTime", "", 'get', function(res) {
                    if (res.code == 0 && res.data == 1) { //成功
                        layer.open({
                            type: 2,
                            title: '密码已过期,请修改密码',
                            content: 'set/user/password.html',
                            maxmin: true,
                            closeBtn: 0,
                            maxmin: false,
                            area: ['500px', '30%']
                        });
                    }
                });
                // var dataList;
                //     sendData(IP + "/IndexEchar/ImportTaskDayList", param, 'post', function(res) {
                //         if (res.code == 0) { //成功
                //             var list=res.data;
                //              $.cookie('list',JSON.stringify(list));
                //              dataList= list;
                //         } else { //不成功
                //             layer.msg(res.msg, {
                //                 icon: 2,
                //                 time: 2000 //2秒关闭(如果不配置,默认是3秒)
                //             }, function() {});
                //         }
                //     });
                //     sendData(IP + "/IndexEchar/ExportTaskDayList", param, 'post', function(res) {
                //         if (res.code == 0) { //成功
                //         var Exlist=res.data;
                //             $.cookie('Exlist',JSON.stringify(Exlist));
                //             // initEchars("测试",Exlist);
                //         } else { //不成功
                //             layer.msg(res.msg, {
                //                 icon: 2,
                //                 time: 2000 //2秒关闭(如果不配置,默认是3秒)
                //             }, function() {});
                //         }
                //     });
                // sendData(IP + "/IndexEchar/YAxis", param, 'post', function(res) {
                //     if (res.code == 0) { //成功
                //     var YAxis=res.data;
                //         $.cookie('YAxis',YAxis);
                //     } else { //不成功
                //         layer.msg(res.msg, {
                //             icon: 2,
                //             time: 2000 //2秒关闭(如果不配置,默认是3秒)
                //         }, function() {});
                //     }
                // });
                // function quit(){
                //     $.cookie('userId', '');
                //     location.href = "Login.html";
                // }
            });
        </script>
    </body>
</html>