任务
将“抄表册管理”、“抄表计划管理”、“执行抄表”、“抄表数据审核”、“抄表数据发布”四个页面整合成一个页面:“计划抄表”,以流程图节点的形式进行串联。
效果如下
红箭头所指的地方是一个流程图,每一个节点点击后会显示该节点所对应的页面,而每个页面的显示都要从控制层为切入点进入。
代码
<%@page import="org.apache.commons.lang3.RandomUtils"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page import="org.springframework.context.i18n.LocaleContextHolder"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>计划抄表</title>
<%@ include file="/WEB-INF/view/head2.jsp" %>
<style type="text/css">
.management .power_menu {
position: relative;
left: 0px;
top: 0px;
right: auto;
bottom: auto;
}
.management .power_menu ul {
overflow: hidden;
margin-bottom: -2px;
padding-left: 1px;
background-color: #fff;
display: inline-block;
border-top: 10px solid #fff;
border-bottom: 10px solid #fff;
border-left: 10px solid #fff;
}
.management .power_menu li {
margin-left: -1px;
line-height: 30px;
text-align: center;
cursor: pointer;
float: left;
background: #efefef;
padding: 0px 15px;
position: relative;
z-index: 1;
}
.management .power_menu li.hover {
color: #fff;
background: #008feb;
z-index: 2;
}
.management .power_menu li.hover em.left {
display: inline-block;
border: 15px solid #008feb;
border-left: 15px solid #efefef;
}
.management .power_menu li.hover em.right {
display: inline-block;
border: 15px solid #efefef;
border-left: 15px solid #008feb;
}
.management .power_menu li.hover:last-child em.right {
display: inline-block;
border: 15px solid #fff;
border-left: 15px solid #008feb;
}
.management .power_menu li:last-child em.right