企业ERP的主界面
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp" /> <title>H+ 后台主题UI框架 - 主页</title> <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台"> <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术"> <!--[if lt IE 9]> <meta http-equiv="refresh" content="0;ie.html" /> <![endif]--> <script src="jquery-3.5.1.min.js"></script> <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet"> <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> <link href="css/animate.min.css" rel="stylesheet"> <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet"> </head> <body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden"> <div id="wrapper"> <!--左侧导航开始--> <nav class="navbar-default navbar-static-side" role="navigation"> <div class="nav-close"><i class="fa fa-times-circle"></i> </div> <div class="sidebar-collapse"> <ul class="nav" id="side-menu"> <li class="nav-header"> <div class="dropdown profile-element"> <span><img alt="image" class="img-circle" src="img/profile_small.jpg" /></span> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> <span class="clear"> <span class="block m-t-xs"><strong class="font-bold">Beaut-zihan</strong></span> <span class="text-muted text-xs block">超级管理员<b class="caret"></b></span> </span> </a> <ul class="dropdown-menu animated fadeInRight m-t-xs"> <li><a class="J_menuItem" href="form_avatar.html">修改头像</a> </li> <li><a class="J_menuItem" href="profile.html">个人资料</a> </li> <li><a class="J_menuItem" href="contacts.html">联系我们</a> </li> <li><a class="J_menuItem" href="mailbox.html">信箱</a> </li> <li class="divider"></li> <li><a href="login.html">安全退出</a> </li> </ul> </div> <div class="logo-element">H+ </div> </li> <li> <a href="#"> <i class="fa fa-home"></i> <span class="nav-label">业务排产</span> <span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li> <a class="J_menuItem" href="demo1.html" data-index="0">输入订单</a> </li> <li> <a class="J_menuItem" href="demo2.html">订单管理</a> </li> <li> <a class="J_menuItem" href="demo3.html">订单完成情况</a> </li> <li> <a class="J_menuItem" href="index_v4.html">主页示例四</a> </li> <li> <a href="index_v5.html" target="_blank">主页示例五</a> </li> </ul> </li> <li> <a href="#"> <i class="fa fa-home"></i> <span class="nav-label">考核管理</span> <span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li> <a class="J_menuItem" href="#" data-index="0">支出考核</a> </li> <li> <a class="J_menuItem" href="#">收入考核</a> </li> <li> <a class="J_menuItem" href="#">考核结果</a> </li> <li> <a class="J_menuItem" href="index_v4.html">主页示例四</a> </li> <li> <a href="index_v5.html" target="_blank">主页示例五</a> </li> </ul> </li> </ul> </div> </nav> <div id="page-wrapper" class="gray-bg dashbard-1"> <div class="row content-tabs"> <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i> </button> <nav class="page-tabs J_menuTabs"> <div class="page-tabs-content"> <a href="javascript:;" class="active J_menuTab" data-id="index_v1.html">首页</a> </div> </nav> <button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i> </button> <div class="btn-group roll-nav roll-right"> <button class="dropdown J_tabClose" data-toggle="dropdown">关闭操作<span class="caret"></span> </button> <ul role="menu" class="dropdown-menu dropdown-menu-right"> <li class="J_tabShowActive"><a>定位当前选项卡</a> </li> <li class="divider"></li> <li class="J_tabCloseAll"><a>关闭全部选项卡</a> </li> <li class="J_tabCloseOther"><a>关闭其他选项卡</a> </li> </ul> </div> <a href="login.html" class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i> 退出</a> </div> <div class="row J_mainContent" id="content-main"> <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="index_v148b2.html?v=4.0" frameborder="0" data-id="index_v1.html" seamless></iframe> </div> <div class="footer"> <div class="pull-right">© 2014-2015 <a href="http://www.zi-han.net/" target="_blank">zihan's blog</a> </div> </div> </div> <!--右侧部分结束--> </div> <script src="js/jquery.min.js?v=2.1.4"></script> <script src="js/bootstrap.min.js?v=3.3.6"></script> <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script> <script src="js/plugins/layer/layer.min.js"></script> <script src="js/hplus.min.js?v=4.1.0"></script> <script type="text/javascript" src="js/contabs.min.js"></script> <script src="js/plugins/pace/pace.min.js"></script> </body> </html>
其中订单管理页面
demo2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H+ 后台主题UI框架 - Bootstrap Table</title> <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台"> <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术"> <script src="jquery-3.5.1.min.js"></script> <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet"> <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> <link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"> <link href="css/animate.min.css" rel="stylesheet"> <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet"> </head> <body> <!-- Example Events --> <div class="example-wrap"> <h4 class="example-title">事件</h4> <div class="example"> <div class="alert alert-success" id="examplebtTableEventsResult" role="alert"> 事件结果 </div> <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group"> <button a href="add.html" id="AddButton" type="button" class="btn btn-outline btn-default"> <i class="glyphicon glyphicon-plus" aria-hidden="true"></i> </button> <button type="button" class="btn btn-outline btn-default"> <i class="glyphicon glyphicon-heart" aria-hidden="true"></i> </button> <button type="button" class="btn btn-outline btn-default"> <i class="glyphicon glyphicon-trash" aria-hidden="true"></i> </button> </div> <table id="exampleTableEvents" data-height="400" data-mobile-responsive="true"> <thead> <tr> <th data-field="state" data-checkbox="true"></th> <th data-field="order_id">ID</th> <th data-field="customer_id">客户</th> <th data-field="YQ002">产品编号</th> <th data-field="product">产品名称</th> <th data-field="quantity">数量</th> <th data-field="order_date">订单日期</th> <th data-field="button">操作</th> </tr> </thead> <!-- <tbody id="tableBody"> <!– 数据将会插入到这里 –> </tbody>--> </table> </div> </div> <script> $(document).ready(function() { // 使用Ajax请求数据 $.ajax({ url: 'http://localhost:8080/ErpDemo1/OrderServlet', type: 'GET', dataType: 'json', success: function(data) { // 转换数据格式 var transformedData = data.map(function(item) { item.buttons = '<button class="btn btn-primary btn-sm" onclick="handleButton1(' + item.order_id + ')">生产</button>' + '<button class="btn btn-danger btn-sm" onclick="handleButton2(' + item.order_id + ')">删除</button>'; return { state: '', order_id: item.order_id, customer_id: item.customer_id, YQ002: item.product_code, product: item.product, quantity: item.quantity, order_date: item.order_date, button:item.buttons }; }); // 使用 Bootstrap Table 的 load 方法加载数据 $('#exampleTableEvents').bootstrapTable('load', transformedData); }, error: function(xhr, status, error) { // 请求失败时的处理 console.error('Error: ' + error); } }); }); function handleButton1(orderId) { // 处理 Button1 点击事件 alert('Button1 clicked for order ID: ' + orderId); } function handleButton2(orderId) { // 处理 Button2 点击事件 alert('Button2 clicked for order ID: ' + orderId); } </script> <script> var AddButton = document.getElementById('AddButton'); AddButton.addEventListener('click',function (){ window.location.href = 'add.html'; // 将链接替换为目标页面的URL }); </script> <script src="js/jquery.min.js?v=2.1.4"></script> <script src="js/bootstrap.min.js?v=3.3.6"></script> <script src="js/content.min.js?v=1.0.0"></script> <script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script> <script src="js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script> <script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script> <script src="js/demo/bootstrap-table-demo.min.js"></script> </body> </html>
订单添加页面
add.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H+ 后台主题UI框架 - 表单验证 jQuery Validation</title> <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台"> <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术"> <script src="jquery-3.5.1.min.js"></script> <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet"> <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> <link href="css/animate.min.css" rel="stylesheet"> <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet"> </head> <body> <div class="col-sm-6"> <div class="ibox float-e-margins"> <div class="ibox-title"> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> </div> </div> <div class="ibox-content"> <form class="form-horizontal m-t" id="commentForm"> <div class="form-group"> <label class="col-sm-3 control-label">客户名称：</label> <div class="col-sm-8"> <input id="cname" minlength="2" type="text" class="form-control" required="" aria-required="true"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">产品编号</label> <div class="col-sm-8"> <input id="cemail" type="text" class="form-control" required="" aria-required="true"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">产品名称</label> <div class="col-sm-8"> <input id="curl" type="text" class="form-control" > </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">数量</label> <div class="col-sm-8"> <input id="ccomment" class="form-control" required="" aria-required="true"></input> </div> </div> <div class="form-group"> <div class="col-sm-4 col-sm-offset-3"> <button class="btn btn-primary" type="submit">提交</button> </div> </div> </form> </div> </div> </div> <script> $(document).ready(function () { $("#commentForm").submit(function (event) { // 阻止表单默认提交行为 event.preventDefault(); // 获取表单数据 var formData = { order_id: null, customer_id: $("#cname").val(), product_code: $("#cemail").val(), product: $("#curl").val(), quantity: $("#ccomment").val(), order_date: null, delivery_date: null }; // 发送Ajax请求 $.ajax({ type: "POST", url: "http://localhost:8080/ErpDemo1/InsertOrderServlet", // 替换成你的后端接口地址 data: JSON.stringify(formData), contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { // 处理成功响应 window.location.href = 'add.html'; // 将链接替换为目标页面的URL }, error: function (error) { // 处理错误响应 window.location.href = 'demo2.html'; // 将链接替换为目标页面的URL } }); }); }); </script> <script src="js/jquery.min.js?v=2.1.4"></script> <script src="js/bootstrap.min.js?v=3.3.6"></script> <script src="js/content.min.js?v=1.0.0"></script> <script src="js/plugins/validate/jquery.validate.min.js"></script> <script src="js/plugins/validate/messages_zh.min.js"></script> <script src="js/demo/form-validate-demo.min.js"></script> </body> </html>
其他html尚未完成，且其中某些html中，已经写入了要使用ajax代码，仅仅查看页面可以无视该代码。
该页面使用一些css，js文件需要引入，引入bootsrap即可。