初始化项目

.gitignore

@@ -0,0 +1,43 @@
+######################################################################
+# Build Tools
+
+.gradle
+/build/
+!gradle/wrapper/gradle-wrapper.jar
+
+target/
+!.mvn/wrapper/maven-wrapper.jar
+
+######################################################################
+# IDE
+
+### STS ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+
+### NetBeans ###
+nbproject/private/
+build/*
+nbbuild/
+dist/
+nbdist/
+.nb-gradle/
+
+######################################################################
+# Others
+*.log
+*.xml.versionsBackup
+
+!*/build/*.java
+!*/build/*.html
+!*/build/*.xml

README.md

@@ -0,0 +1,79 @@
+## 内置功能
+
+1.  用户管理：用户是系统操作者，该功能主要完成系统用户配置。
+2.  部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。
+3.  岗位管理：配置系统用户所属担任职务。
+4.  菜单管理：配置系统菜单，操作权限，按钮权限标识等。
+5.  角色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。
+6.  字典管理：对系统中经常使用的一些较为固定的数据进行维护。
+7.  参数管理：对系统动态配置常用参数。
+8.  通知公告：系统通知公告信息发布维护。
+9.  操作日志：系统正常操作日志记录和查询；系统异常信息日志记录和查询。
+10. 登录日志：系统登录日志记录查询包含登录异常。
+11. 在线用户：当前系统中活跃用户状态监控。
+12. 定时任务：在线（添加、修改、删除)任务调度包含执行结果日志。
+13. 代码生成：前后端代码的生成（java、html、xml、sql）支持CRUD下载 。
+14. 系统接口：根据业务代码自动生成相关的api接口文档。
+15. 服务监控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。
+16. 在线构建器：拖动表单元素生成相应的HTML代码。
+17. 连接池监视：监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈。
+
+## 框架搭建
+1. 准备工作
+1.1 前置环境准备——安装Maven
+    基于Maven管理项目的构建，需要先安装好相应的版本。
+1.2 开发工具
+    建议使用IDEA
+1.3 JDK
+    jdk1.8+
+1.4 数据库
+    Mysql 5.6+
+
+2.运行系统
+2.1 修改数据库连接
+    编辑src/main/ resources目录下的application-druid.yml 文件，修改数据库地址账号信息。
+    执行sql/ Leisp_20180423.sql，quartz.sql 两个文件 日期随版本变化
+2.2 开发环境配置
+    编辑src/main/ resources目录下的application.yml 文件，
+    默认端口为80
+2.3 系统启动
+    运行 LeispApplication 
+    启动成功显示：
+   _____  ____   ____  _  __                 _____ _____  
+  / ____|/ __ \ / __ \| |/ /    /\    ___   / ____|  __ \ 
+ | (___ | |  | | |  | | ' /    /  \  ( _ ) | (___ | |__) |
+  \___ \| |  | | |  | |  <    / /\ \ / _ \/\\___ \|  ___/ 
+  ____) | |__| | |__| | . \  / ____ \ (_>  <____) | |     
+ |_____/ \____/ \____/|_|\_\/_/    \_\___/\/_____/|_|     
+   
+3. 文件结构
+com.sooka     
+├── common            // 工具类
+│       └── annotation                    // 自定义注解
+│       └── config                        // 全局配置
+│       └── constant                      // 通用常量
+│       └── core                          // 核心控制
+│       └── enums                         // 通用枚举
+│       └── exception                     // 通用异常
+│       └── json                          // JSON数据处理
+│       └── utils                         // 通用类处理
+│       └── xss                           // XSS过滤处理
+├── framework         // 框架核心
+│       └── aspectj                       // 注解实现
+│       └── config                        // 系统配置
+│       └── datasource                    // 数据权限
+│       └── interceptor                   // 拦截器
+│       └── manager                       // 异步处理
+│       └── shiro                         // 权限控制
+│       └── util                          // 通用工具
+│       └── web                           // 前端控制
+├── leiSP-generator   // 代码生成（可移除）
+├── leiSP-quartz      // 定时任务（可移除）
+├── leiSP-system      // 系统代码
+├── leiSP-admin       // 后台服务
+├── xxxxxx      // 其他模块
+
+4. 配置文件
+通用配置 application.yml
+数据源配置 application-druid.yml
+代码生成配置 generator.yml

leiSP-admin/src/main/resources/application-druid.yml

@@ -0,0 +1,84 @@
+# 数据源配置
+spring:
+    jmx:
+      default-domain: thsjzt
+    datasource:
+        type: com.alibaba.druid.pool.DruidDataSource
+        driverClassName: com.mysql.cj.jdbc.Driver
+        druid:
+            # 主库数据源
+            master:
+#                url: jdbc:mysql://36.97.65.105:53306/thsjzt?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+                # 互联网 Vpn
+                url: jdbc:mysql://10.0.51.4:8888/thsjzt?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+                # 政务网 Vpn
+#                url: jdbc:mysql://172.17.5.7:3306/thsjzt?noAccessToProcedureBodies=true&useUnicode=true&c1 haracterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+                # 政务网 dzzw
+#                url: jdbc:mysql://172.18.128.8:3306/thsjzt?useUnicode=true&c1 haracterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+                username: thsjzt
+                password: thsjzt
+
+#                url: jdbc:mysql://192.168.2.200:3306/thsjzt?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+#                username: sooka
+#                password: sooka123456
+
+#                url: jdbc:mysql://127.0.0.1:3306/thsjzt_dev?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+#                username: root
+#                password:
+            # 从库数据源,通化市公积金数据库
+            slave:
+                # 从数据源开关/默认关闭
+                enabled: true
+                # 互联网 Vpn
+                # url: jdbc:mysql://10.0.51.4:8888/thsjzt?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+                # 政务网 Vpn
+                # url: jdbc:mysql://172.17.5.7:3306/thsjzt?noAccessToProcedureBodies=true&useUnicode=true&c1 haracterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+                url: jdbc:mysql://172.17.5.7:3306/thgjj?noAccessToProcedureBodies=true&useUnicode=true&c1 haracterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+                # 政务网 dzzw
+                # url: jdbc:mysql://172.18.128.8:3306/thsjzt?useUnicode=true&c1 haracterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+                username: thsjzt
+                password: thsjzt
+
+#                url: jdbc:mysql://127.0.0.1:3306/thsjzt_dev?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+#                username: root
+#                password:
+#                password: 123456
+            # 初始连接数
+            initialSize: 5
+            # 最小连接池数量
+            minIdle: 10
+            # 最大连接池数量
+            maxActive: 20
+            # 配置获取连接等待超时的时间
+            maxWait: 60000
+            # 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒
+            timeBetweenEvictionRunsMillis: 60000
+            # 配置一个连接在池中最小生存的时间，单位是毫秒
+            minEvictableIdleTimeMillis: 300000
+            # 配置一个连接在池中最大生存的时间，单位是毫秒
+            maxEvictableIdleTimeMillis: 900000
+            # 配置检测连接是否有效
+            validationQuery: SELECT 1 FROM DUAL
+            testWhileIdle: true
+            testOnBorrow: false
+            testOnReturn: false
+            webStatFilter:
+                enabled: true
+            statViewServlet:
+                enabled: true
+                # 设置白名单，不填则允许所有访问
+                allow:
+                url-pattern: /druid/*
+                # 控制台管理用户名和密码
+                login-username:
+                login-password:
+            filter:
+                stat:
+                    enabled: true
+                    # 慢SQL记录
+                    log-slow-sql: true
+                    slow-sql-millis: 1000
+                    merge-sql: true
+                wall:
+                    config:
+                        multi-statement-allow: true

leiSP-admin/src/main/resources/application.yml

@@ -0,0 +1,141 @@
+# 项目相关配置
+leisp:
+  # 名称
+  name: LEI
+  # 版本
+  version: 1.0.0
+  # 版权年份
+  copyrightYear: 2019
+  # 实例演示开关
+  demoEnabled: false
+  # 文件路径 示例（ Windows配置D:/leisp/uploadPath，Linux配置 /home/leisp/uploadPath）
+  profile: D:/workingSpace/IEDA_Pro/lEISP/leiSP-admin/src/main/resources/static/img/upload
+  # 获取ip地址开关
+  addressEnabled: false
+
+# 开发环境配置
+server:
+  # 服务器的HTTP端口，默认为80
+  port: 9090
+  servlet:
+    # 应用的访问路径
+    context-path: /
+  tomcat:
+    # tomcat的URI编码
+    uri-encoding: UTF-8
+    # tomcat最大线程数，默认为200
+    max-threads: 800
+    # Tomcat启动初始化的线程数，默认值25
+    min-spare-threads: 30
+
+# 日志配置
+logging:
+  level:
+    com.ruoyi: debug
+    org.springframework: warn
+
+# 用户配置
+user:
+  password:
+    # 密码错误{maxRetryCount}次锁定10分钟
+    maxRetryCount: 5
+
+# Spring配置
+spring:
+  # 模板引擎
+  thymeleaf:
+    mode: HTML
+    encoding: utf-8
+    # 禁用缓存
+    cache: false
+  # 资源信息
+  messages:
+    # 国际化资源文件路径
+    basename: static/i18n/messages
+  jackson:
+    time-zone: GMT+8
+    date-format: yyyy-MM-dd HH:mm:ss
+  profiles:
+    active: druid
+  # 文件上传
+  servlet:
+     multipart:
+       # 单个文件大小
+       max-file-size:  10MB
+       # 设置总上传的文件大小
+       max-request-size:  20MB
+  # 服务模块
+  devtools:
+    restart:
+      # 热部署开关
+      enabled: true
+
+# MyBatis
+mybatis:
+    # 搜索指定包别名
+    typeAliasesPackage: com.**.domain
+    # 配置mapper的扫描，找到所有的mapper.xml映射文件
+    mapperLocations: classpath*:mapper/**/*Mapper.xml
+    # 加载全局的配置文件
+    configLocation: classpath:mybatis/mybatis-config.xml
+
+# PageHelper分页插件
+pagehelper:
+  helperDialect: mysql
+  reasonable: true
+  supportMethodsArguments: true
+  params: count=countSql
+
+# Shiro
+shiro:
+  user:
+    # 登录地址
+    loginUrl: /login
+    # 权限认证失败地址
+    unauthorizedUrl: /unauth
+    # 首页地址
+    indexUrl: /index
+    # 验证码开关
+    captchaEnabled: true
+    # 验证码类型 math 数组计算 char 字符
+    captchaType: math
+  cookie:
+    # 设置Cookie的域名 默认空，即当前访问的域名
+    domain:
+    # 设置cookie的有效访问路径
+    path: /
+    # 设置HttpOnly属性
+    httpOnly: true
+    # 设置Cookie的过期时间，天为单位
+    maxAge: 30
+    # 设置密钥，务必保持唯一性（生成方式，直接拷贝到main运行即可）KeyGenerator keygen = KeyGenerator.getInstance("AES"); SecretKey deskey = keygen.generateKey(); System.out.println(Base64.encodeToString(deskey.getEncoded()));
+    cipherKey: zSyK5Kp6PZAAjlT+eeNMlg==
+  session:
+    # Session超时时间，-1代表永不过期（默认30分钟）
+    expireTime: 30
+    # 同步session到数据库的周期（默认1分钟）
+    dbSyncPeriod: 1
+    # 相隔多久检查一次session的有效性，默认就是10分钟
+    validationInterval: 10
+    # 同一个用户最大会话数，比如2的意思是同一个账号允许最多同时两个人登录（默认-1不限制）
+    maxSession: -1
+    # 踢出之前登录的/之后登录的用户，默认踢出之前登录的用户
+    kickoutAfter: false
+
+# 防止XSS攻击
+xss:
+  # 过滤开关
+  enabled: true
+  # 排除链接（多个用逗号分隔）
+  excludes: /system/notice/*
+  # 匹配链接
+  urlPatterns: /system/*,/monitor/*,/tool/*
+
+# Swagger配置
+swagger:
+  # 是否开启swagger
+  enabled: true
+
+# 政数局部门ID，用于临期提醒判断
+dept:
+  zsjDeptId: 103

leiSP-admin/src/main/resources/banner.txt

@@ -0,0 +1,24 @@
+Application Version: ${leisp.version}
+Spring Boot Version: ${spring-boot.version}
+////////////////////////////////////////////////////////////////////
+//                          _ooOoo_                               //
+//                         o8888888o                              //
+//                         88" . "88                              //
+//                         (| ^_^ |)                              //
+//                         O\  =  /O                              //
+//                      ____/`---'\____                           //
+//                    .'  \\|     |//  `.                         //
+//                   /  \\|||  :  |||//  \                        //
+//                  /  _||||| -:- |||||-  \                       //
+//                  |   | \\\  -  /// |   |                       //
+//                  | \_|  ''\---/''  |   |                       //
+//                  \  .-\__  `-`  ___/-. /                       //
+//                ___`. .'  /--.--\  `. . ___                     //
+//              ."" '<  `.___\_<|>_/___.'  >'"".                  //
+//            | | :  `- \`.;`\ _ /`;.`/ - ` : | |                 //
+//            \  \ `-.   \_ __\ /__ _/   .-` /  /                 //
+//      ========`-.____`-.___\_____/___.-`____.-'========         //
+//                           `=---='                              //
+//      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^        //
+//             佛祖保佑       永不宕机      永无BUG               //
+////////////////////////////////////////////////////////////////////

leiSP-admin/src/main/resources/ehcache/ehcache-shiro.xml

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ehcache name="ruoyi" updateCheck="false">
+
+    <!-- 磁盘缓存位置 -->
+    <diskStore path="java.io.tmpdir"/>
+
+    <!-- maxEntriesLocalHeap:堆内存中最大缓存对象数，0没有限制 -->
+    <!-- maxElementsInMemory： 在内存中缓存的element的最大数目。-->
+    <!-- eternal:elements是否永久有效，如果为true，timeouts将被忽略，element将永不过期 -->
+    <!-- timeToIdleSeconds:失效前的空闲秒数，当eternal为false时，这个属性才有效，0为不限制 -->
+    <!-- timeToLiveSeconds:失效前的存活秒数，创建时间到失效时间的间隔为存活时间，当eternal为false时，这个属性才有效，0为不限制 -->
+    <!-- overflowToDisk： 如果内存中数据超过内存限制，是否要缓存到磁盘上 -->
+    <!-- statistics：是否收集统计信息。如果需要监控缓存使用情况，应该打开这个选项。默认为关闭（统计会影响性能）。设置statistics="true"开启统计 -->
+
+    <!-- 默认缓存 -->
+    <defaultCache
+            maxEntriesLocalHeap="1000"
+            eternal="false"
+            timeToIdleSeconds="3600"
+            timeToLiveSeconds="3600"
+            overflowToDisk="false">
+    </defaultCache>
+
+    <!-- 登录记录缓存 锁定10分钟 -->
+    <cache name="loginRecordCache"
+           maxEntriesLocalHeap="2000"
+           eternal="false"
+           timeToIdleSeconds="600"
+           timeToLiveSeconds="0"
+           overflowToDisk="false"
+           statistics="true">
+    </cache>
+
+    <!-- 系统活跃用户缓存 -->
+    <cache name="sys-userCache"
+           maxEntriesLocalHeap="10000"
+           overflowToDisk="false"
+           eternal="false"
+           diskPersistent="false"
+           timeToLiveSeconds="0"
+           timeToIdleSeconds="0"
+           statistics="true">
+    </cache>
+
+    <!-- 系统缓存 -->
+    <cache name="sys-cache"
+           maxEntriesLocalHeap="1000"
+           eternal="true"
+           overflowToDisk="true"
+           statistics="true">
+    </cache>
+
+    <!-- 系统参数缓存 -->
+    <cache name="sys-config"
+           maxEntriesLocalHeap="1000"
+           eternal="true"
+           overflowToDisk="true"
+           statistics="true">
+    </cache>
+
+    <!-- 系统字典缓存 -->
+    <cache name="sys-dict"
+           maxEntriesLocalHeap="1000"
+           eternal="true"
+           overflowToDisk="true"
+           statistics="true">
+    </cache>
+
+    <!-- 系统会话缓存 -->
+    <cache name="shiro-activeSessionCache"
+           maxElementsInMemory="10000"
+           overflowToDisk="true"
+           eternal="true"
+           timeToLiveSeconds="0"
+           timeToIdleSeconds="0"
+           diskPersistent="true"
+           diskExpiryThreadIntervalSeconds="600">
+    </cache>
+
+    <!-- 分页数缓存，用于解决日志表数据量过大问题 -->
+    <cache name="log-total"
+           maxEntriesLocalHeap="1000"
+           eternal="true"
+           overflowToDisk="true"
+           statistics="true">
+    </cache>
+
+</ehcache>

leiSP-admin/src/main/resources/logback.xml

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<configuration>
+    <!-- 日志存放路径 -->
+	<property name="log.path" value="/home/leisp/logs" />
+    <!-- 日志输出格式 -->
+	<property name="log.pattern" value="%d{HH:mm:ss.SSS} [%thread] %-5level %logger{20} - [%method,%line] - %msg%n" />
+
+	<!-- 控制台输出 -->
+	<appender name="console" class="ch.qos.logback.core.ConsoleAppender">
+		<encoder>
+			<pattern>${log.pattern}</pattern>
+		</encoder>
+	</appender>
+	
+	<!-- 系统日志输出 -->
+	<appender name="file_info" class="ch.qos.logback.core.rolling.RollingFileAppender">
+	    <file>${log.path}/sys-info.log</file>
+        <!-- 循环政策：基于时间创建日志文件 -->
+		<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
+            <!-- 日志文件名格式 -->
+			<fileNamePattern>${log.path}/sys-info.%d{yyyy-MM-dd}.log</fileNamePattern>
+			<!-- 日志最大的历史 60天 -->
+			<maxHistory>60</maxHistory>
+		</rollingPolicy>
+		<encoder>
+			<pattern>${log.pattern}</pattern>
+		</encoder>
+		<filter class="ch.qos.logback.classic.filter.LevelFilter">
+            <!-- 过滤的级别 -->
+            <level>INFO</level>
+            <!-- 匹配时的操作：接收（记录） -->
+            <onMatch>ACCEPT</onMatch>
+            <!-- 不匹配时的操作：拒绝（不记录） -->
+            <onMismatch>DENY</onMismatch>
+        </filter>
+	</appender>
+	
+	<appender name="file_error" class="ch.qos.logback.core.rolling.RollingFileAppender">
+	    <file>${log.path}/sys-error.log</file>
+        <!-- 循环政策：基于时间创建日志文件 -->
+        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
+            <!-- 日志文件名格式 -->
+            <fileNamePattern>${log.path}/sys-error.%d{yyyy-MM-dd}.log</fileNamePattern>
+			<!-- 日志最大的历史 60天 -->
+			<maxHistory>60</maxHistory>
+        </rollingPolicy>
+        <encoder>
+            <pattern>${log.pattern}</pattern>
+        </encoder>
+        <filter class="ch.qos.logback.classic.filter.LevelFilter">
+            <!-- 过滤的级别 -->
+            <level>ERROR</level>
+			<!-- 匹配时的操作：接收（记录） -->
+            <onMatch>ACCEPT</onMatch>
+			<!-- 不匹配时的操作：拒绝（不记录） -->
+            <onMismatch>DENY</onMismatch>
+        </filter>
+    </appender>
+	
+	<!-- 用户访问日志输出  -->
+    <appender name="sys-user" class="ch.qos.logback.core.rolling.RollingFileAppender">
+		<file>${log.path}/sys-user.log</file>
+        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
+            <!-- 按天回滚 daily -->
+            <fileNamePattern>${log.path}/sys-user.%d{yyyy-MM-dd}.log</fileNamePattern>
+            <!-- 日志最大的历史 60天 -->
+            <maxHistory>60</maxHistory>
+        </rollingPolicy>
+        <encoder>
+            <pattern>${log.pattern}</pattern>
+        </encoder>
+    </appender>
+	
+	<!-- 系统模块日志级别控制  -->
+	<logger name="com.sooka" level="info" />
+	<!-- Spring日志级别控制  -->
+	<logger name="org.springframework" level="warn" />
+
+	<root level="info">
+		<appender-ref ref="console" />
+	</root>
+	
+	<!--系统操作日志-->
+    <root level="info">
+        <appender-ref ref="file_info" />
+        <appender-ref ref="file_error" />
+    </root>
+	
+	<!--系统用户操作日志-->
+    <logger name="sys-user" level="info">
+        <appender-ref ref="sys-user"/>
+    </logger>
+</configuration> 

leiSP-admin/src/main/resources/mybatis/mybatis-config.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE configuration
+PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
+"http://mybatis.org/dtd/mybatis-3-config.dtd">
+<configuration>
+	
+	<settings>
+		<setting name="cacheEnabled"             value="true"  />  <!-- 全局映射器启用缓存 -->
+		<setting name="useGeneratedKeys"         value="true"  />  <!-- 允许 JDBC 支持自动生成主键 -->
+		<setting name="defaultExecutorType"      value="REUSE" />  <!-- 配置默认的执行器 -->
+		<setting name="logImpl"                  value="SLF4J" />  <!-- 指定 MyBatis 所用日志的具体实现 -->
+		<!-- <setting name="mapUnderscoreToCamelCase" value="true"/>  驼峰式命名 -->
+	</settings>
+	
+</configuration>

leiSP-admin/src/main/resources/static/file/rml.txt

@@ -0,0 +1 @@
+下载临时目录

leiSP-admin/src/main/resources/static/i18n/messages.properties

@@ -0,0 +1,36 @@
+#错误消息
+not.null=* 必须填写
+user.jcaptcha.error=验证码错误
+user.not.exists=用户不存在/密码错误
+user.password.not.match=用户不存在/密码错误
+user.password.retry.limit.count=密码输入错误{0}次
+user.password.retry.limit.exceed=密码输入错误{0}次，帐户锁定10分钟
+user.password.delete=对不起，您的账号已被删除
+user.blocked=用户已封禁，请联系管理员
+role.blocked=角色已封禁，请联系管理员
+user.logout.success=退出成功
+
+length.not.valid=长度必须在{min}到{max}个字符之间
+
+user.username.not.valid=* 2到20个汉字、字母、数字或下划线组成，且必须以非数字开头
+user.password.not.valid=* 5-50个字符
+ 
+user.email.not.valid=邮箱格式错误
+user.mobile.phone.number.not.valid=手机号格式错误
+user.login.success=登录成功
+user.register.success=注册成功
+user.notfound=请重新登录
+user.forcelogout=管理员强制退出，请重新登录
+user.unknown.error=未知错误，请重新登录
+
+##文件上传消息
+upload.exceed.maxSize=上传的文件大小超出限制的文件大小！<br/>允许的文件最大大小是：{0}MB！
+upload.filename.exceed.length=上传的文件名最长{0}个字符
+
+##权限
+no.permission=您没有数据的权限，请联系管理员添加权限 [{0}]
+no.create.permission=您没有创建数据的权限，请联系管理员添加权限 [{0}]
+no.update.permission=您没有修改数据的权限，请联系管理员添加权限 [{0}]
+no.delete.permission=您没有删除数据的权限，请联系管理员添加权限 [{0}]
+no.export.permission=您没有导出数据的权限，请联系管理员添加权限 [{0}]
+no.view.permission=您没有查看数据的权限，请联系管理员添加权限 [{0}]

leiSP-admin/src/main/resources/static/ruoyi/index.js

@@ -0,0 +1,636 @@
+/**
+ * 首页方法封装处理
+ * Copyright (c) 2019 LeiSP
+ */
+layer.config({
+    extend: 'moon/style.css',
+    skin: 'layer-ext-moon'
+});
+
+var isMobile = false;
+var sidebarHeight = isMobile ? '100%' : '96%';
+
+$(function() {
+    // MetsiMenu
+    $('#side-menu').metisMenu();
+
+    // 固定菜单栏
+    $('.sidebar-collapse').slimScroll({
+        height: sidebarHeight,
+        railOpacity: 0.9,
+        alwaysVisible: false
+    });
+
+    // 菜单切换
+    $('.navbar-minimalize').click(function() {
+    	if (isMobile) {
+    		$("body").toggleClass("canvas-menu");
+    	} else {
+    		$("body").toggleClass("mini-navbar");
+    	}
+        SmoothlyMenu();
+    });
+
+    $('#side-menu>li').click(function() {
+    	if ($('body').hasClass('canvas-menu mini-navbar')) {
+            NavToggle();
+        }
+
+    });
+    $('#side-menu>li li a:not(:has(span))').click(function() {
+        if ($(window).width() < 769) {
+            NavToggle();
+        }
+    });
+
+    $('.nav-close').click(NavToggle);
+
+    //ios浏览器兼容性处理
+    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
+        $('#content-main').css('overflow-y', 'auto');
+    }
+
+});
+
+$(window).bind("load resize", function() {
+    isMobile = $.common.isMobile() || $(window).width() < 769;
+    if (isMobile) {
+        $('body').addClass('canvas-menu');
+        $("body").removeClass("mini-navbar");
+        $("nav .logo").addClass("hide");
+        $(".slimScrollDiv").css({ "overflow": "hidden" });
+        $('.navbar-static-side').fadeOut();
+    } else {
+    	if($('body').hasClass('canvas-menu')) {
+	        $('body').addClass('fixed-sidebar');
+	        $('body').removeClass('canvas-menu');
+	        $("body").removeClass("mini-navbar");
+	        $("nav .logo").removeClass("hide");
+	        $(".slimScrollDiv").css({ "overflow": "visible" });
+	        $('.navbar-static-side').fadeIn();
+    	}
+    }
+});
+
+function syncMenuTab(dataId) {
+	if(isLinkage) {
+        var $dataObj = $('a[href$="' + decodeURI(dataId) + '"]');
+        if (!$dataObj.hasClass("noactive")) {
+            $('.nav ul').removeClass("in");
+            $dataObj.parents("ul").addClass("in")
+            $dataObj.parents("li").addClass("active").siblings().removeClass("active").find('li').removeClass("active");
+            $dataObj.parents("ul").css('height', 'auto').height();
+            $dataObj.click();
+        }
+	}
+}
+
+function NavToggle() {
+    $('.navbar-minimalize').trigger('click');
+}
+
+function fixedSidebar() {
+	$('#side-menu').hide();
+	$("nav .logo").addClass("hide");
+    setTimeout(function() {
+        $('#side-menu').fadeIn(500);
+    },
+    100);
+}
+
+function SmoothlyMenu() {
+    if (isMobile && !$('body').hasClass('canvas-menu')) {
+    	$('.navbar-static-side').fadeIn();
+    	fixedSidebar();
+    } else if (!isMobile &&!$('body').hasClass('mini-navbar')) {
+    	fixedSidebar();
+    	$("nav .logo").removeClass("hide");
+    } else if (isMobile && $('body').hasClass('fixed-sidebar')) {
+    	$('.navbar-static-side').fadeOut();
+    	fixedSidebar();
+    } else if (!isMobile && $('body').hasClass('fixed-sidebar')) {
+    	fixedSidebar();
+    } else {
+        $('#side-menu').removeAttr('style');
+    }
+}
+
+/**
+ * iframe处理
+ */
+$(function() {
+    //计算元素集合的总宽度
+    function calSumWidth(elements) {
+        var width = 0;
+        $(elements).each(function() {
+            width += $(this).outerWidth(true);
+        });
+        return width;
+    }
+
+    // 激活指定选项卡
+    function setActiveTab(element) {
+        if (!$(element).hasClass('active')) {
+            var currentId = $(element).data('id');
+            syncMenuTab(currentId);
+            // 显示tab对应的内容区
+            $('.RuoYi_iframe').each(function() {
+                if ($(this).data('id') == currentId) {
+                    $(this).show().siblings('.RuoYi_iframe').hide();
+                }
+            });
+            $(element).addClass('active').siblings('.menuTab').removeClass('active');
+            scrollToTab(element);
+        }
+    }
+
+    //滚动到指定选项卡
+    function scrollToTab(element) {
+        var marginLeftVal = calSumWidth($(element).prevAll()),
+        marginRightVal = calSumWidth($(element).nextAll());
+        // 可视区域非tab宽度
+        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
+        //可视区域tab宽度
+        var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
+        //实际滚动宽度
+        var scrollVal = 0;
+        if ($(".page-tabs-content").outerWidth() < visibleWidth) {
+            scrollVal = 0;
+        } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
+            if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
+                scrollVal = marginLeftVal;
+                var tabElement = element;
+                while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
+                    scrollVal -= $(tabElement).prev().outerWidth();
+                    tabElement = $(tabElement).prev();
+                }
+            }
+        } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
+            scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
+        }
+        $('.page-tabs-content').animate({
+            marginLeft: 0 - scrollVal + 'px'
+        },
+        "fast");
+    }
+
+    //查看左侧隐藏的选项卡
+    function scrollTabLeft() {
+        var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
+        // 可视区域非tab宽度
+        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
+        //可视区域tab宽度
+        var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
+        //实际滚动宽度
+        var scrollVal = 0;
+        if (($(".page-tabs-content").width()) < visibleWidth) {
+            return false;
+        } else {
+            var tabElement = $(".menuTab:first");
+            var offsetVal = 0;
+            while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
+                offsetVal += $(tabElement).outerWidth(true);
+                tabElement = $(tabElement).next();
+            }
+            offsetVal = 0;
+            if (calSumWidth($(tabElement).prevAll()) > visibleWidth) {
+                while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
+                    offsetVal += $(tabElement).outerWidth(true);
+                    tabElement = $(tabElement).prev();
+                }
+                scrollVal = calSumWidth($(tabElement).prevAll());
+            }
+        }
+        $('.page-tabs-content').animate({
+            marginLeft: 0 - scrollVal + 'px'
+        },
+        "fast");
+    }
+
+    //查看右侧隐藏的选项卡
+    function scrollTabRight() {
+        var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
+        // 可视区域非tab宽度
+        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
+        //可视区域tab宽度
+        var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
+        //实际滚动宽度
+        var scrollVal = 0;
+        if ($(".page-tabs-content").width() < visibleWidth) {
+            return false;
+        } else {
+            var tabElement = $(".menuTab:first");
+            var offsetVal = 0;
+            while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
+                offsetVal += $(tabElement).outerWidth(true);
+                tabElement = $(tabElement).next();
+            }
+            offsetVal = 0;
+            while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
+                offsetVal += $(tabElement).outerWidth(true);
+                tabElement = $(tabElement).next();
+            }
+            scrollVal = calSumWidth($(tabElement).prevAll());
+            if (scrollVal > 0) {
+                $('.page-tabs-content').animate({
+                    marginLeft: 0 - scrollVal + 'px'
+                },
+                "fast");
+            }
+        }
+    }
+
+    //通过遍历给菜单项加上data-index属性
+    $(".menuItem").each(function(index) {
+        if (!$(this).attr('data-index')) {
+            $(this).attr('data-index', index);
+        }
+    });
+
+    function menuItem() {
+        // 获取标识数据
+        var dataUrl = $(this).attr('href'),
+        dataIndex = $(this).data('index'),
+        menuName = $.trim($(this).text()),
+        flag = true;
+
+        if (!$('a[href$="' + dataUrl + '"]').hasClass("noactive")) {
+            $(".nav ul li, .nav li").removeClass("selected");
+            $(this).parent("li").addClass("selected");
+        }
+        setIframeUrl(dataUrl);
+        if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
+
+        // 选项卡菜单已存在
+        $('.menuTab').each(function() {
+            if ($(this).data('id') == dataUrl) {
+                if (!$(this).hasClass('active')) {
+                    $(this).addClass('active').siblings('.menuTab').removeClass('active');
+                    scrollToTab(this);
+                    // 显示tab对应的内容区
+                    $('.mainContent .RuoYi_iframe').each(function() {
+                        if ($(this).data('id') == dataUrl) {
+                            $(this).show().siblings('.RuoYi_iframe').hide();
+                            return false;
+                        }
+                    });
+                }
+                flag = false;
+                return false;
+            }
+        });
+        // 选项卡菜单不存在
+        if (flag) {
+            var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
+            $('.menuTab').removeClass('active');
+
+            // 添加选项卡对应的iframe
+            var str1 = '<iframe class="RuoYi_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
+            $('.mainContent').find('iframe.RuoYi_iframe').hide().parents('.mainContent').append(str1);
+
+            $.modal.loading("数据加载中，请稍后...");
+
+            $('.mainContent iframe:visible').load(function () {
+            	$.modal.closeLoading();
+            });
+
+            // 添加选项卡
+            $('.menuTabs .page-tabs-content').append(str);
+            scrollToTab($('.menuTab.active'));
+        }
+        return false;
+    }
+
+    function menuBlank() {
+    	// 新窗口打开外网以http://开头，如http://LeiSP.vip
+    	var dataUrl = $(this).attr('href');
+    	window.open(dataUrl);
+    	return false;
+    }
+
+    $('.menuItem').on('click', menuItem);
+
+    $('.menuBlank').on('click', menuBlank);
+
+    // 关闭选项卡菜单
+    function closeTab() {
+        var closeTabId = $(this).parents('.menuTab').data('id');
+        var currentWidth = $(this).parents('.menuTab').width();
+        var panelUrl = $(this).parents('.menuTab').data('panel');
+        // 当前元素处于活动状态
+        if ($(this).parents('.menuTab').hasClass('active')) {
+
+            // 当前元素后面有同辈元素，使后面的一个元素处于活动状态
+            if ($(this).parents('.menuTab').next('.menuTab').size()) {
+
+                var activeId = $(this).parents('.menuTab').next('.menuTab:eq(0)').data('id');
+                $(this).parents('.menuTab').next('.menuTab:eq(0)').addClass('active');
+
+                $('.mainContent .RuoYi_iframe').each(function() {
+                    if ($(this).data('id') == activeId) {
+                        $(this).show().siblings('.RuoYi_iframe').hide();
+                        return false;
+                    }
+                });
+
+                var marginLeftVal = parseInt($('.page-tabs-content').css('margin-left'));
+                if (marginLeftVal < 0) {
+                    $('.page-tabs-content').animate({
+                        marginLeft: (marginLeftVal + currentWidth) + 'px'
+                    },
+                    "fast");
+                }
+
+                //  移除当前选项卡
+                $(this).parents('.menuTab').remove();
+
+                // 移除tab对应的内容区
+                $('.mainContent .RuoYi_iframe').each(function() {
+                    if ($(this).data('id') == closeTabId) {
+                        $(this).remove();
+                        return false;
+                    }
+                });
+            }
+
+            // 当前元素后面没有同辈元素，使当前元素的上一个元素处于活动状态
+            if ($(this).parents('.menuTab').prev('.menuTab').size()) {
+                var activeId = $(this).parents('.menuTab').prev('.menuTab:last').data('id');
+                $(this).parents('.menuTab').prev('.menuTab:last').addClass('active');
+                $('.mainContent .RuoYi_iframe').each(function() {
+                    if ($(this).data('id') == activeId) {
+                        $(this).show().siblings('.RuoYi_iframe').hide();
+                        return false;
+                    }
+                });
+
+                //  移除当前选项卡
+                $(this).parents('.menuTab').remove();
+
+                // 移除tab对应的内容区
+                $('.mainContent .RuoYi_iframe').each(function() {
+                    if ($(this).data('id') == closeTabId) {
+                        $(this).remove();
+                        return false;
+                    }
+                });
+
+                if($.common.isNotEmpty(panelUrl)){
+            		$('.menuTab[data-id="' + panelUrl + '"]').addClass('active').siblings('.menuTab').removeClass('active');
+            		$('.mainContent .RuoYi_iframe').each(function() {
+                        if ($(this).data('id') == panelUrl) {
+                            $(this).show().siblings('.RuoYi_iframe').hide();
+                            return false;
+                        }
+            		});
+            	}
+            }
+        }
+        // 当前元素不处于活动状态
+        else {
+            //  移除当前选项卡
+            $(this).parents('.menuTab').remove();
+
+            // 移除相应tab对应的内容区
+            $('.mainContent .RuoYi_iframe').each(function() {
+                if ($(this).data('id') == closeTabId) {
+                    $(this).remove();
+                    return false;
+                }
+            });
+        }
+        scrollToTab($('.menuTab.active'));
+        syncMenuTab($('.page-tabs-content').find('.active').attr('data-id'));
+        return false;
+    }
+
+    $('.menuTabs').on('click', '.menuTab i', closeTab);
+
+    //滚动到已激活的选项卡
+    function showActiveTab() {
+        scrollToTab($('.menuTab.active'));
+    }
+    $('.tabShowActive').on('click', showActiveTab);
+
+    // 点击选项卡菜单
+    function activeTab() {
+        if (!$(this).hasClass('active')) {
+            var currentId = $(this).data('id');
+            syncMenuTab(currentId);
+            // 显示tab对应的内容区
+            $('.mainContent .RuoYi_iframe').each(function() {
+                if ($(this).data('id') == currentId) {
+                    $(this).show().siblings('.RuoYi_iframe').hide();
+                    return false;
+                }
+            });
+            $(this).addClass('active').siblings('.menuTab').removeClass('active');
+            scrollToTab(this);
+        }
+    }
+
+    // 点击选项卡菜单
+    $('.menuTabs').on('click', '.menuTab', activeTab);
+
+    // 刷新iframe
+    function refreshTab() {
+    	var currentId = $('.page-tabs-content').find('.active').attr('data-id');
+    	var target = $('.RuoYi_iframe[data-id="' + currentId + '"]');
+        var url = target.attr('src');
+        target.attr('src', url).ready();
+    }
+
+    // 页签全屏
+    function fullScreenTab() {
+    	var currentId = $('.page-tabs-content').find('.active').attr('data-id');
+    	var target = $('.RuoYi_iframe[data-id="' + currentId + '"]');
+	    target.fullScreen(true);
+    }
+
+    // 关闭当前选项卡
+    function tabCloseCurrent() {
+    	$('.page-tabs-content').find('.active i').trigger("click");
+    }
+
+    //关闭其他选项卡
+    function tabCloseOther() {
+        $('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function() {
+            $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
+            $(this).remove();
+        });
+        $('.page-tabs-content').css("margin-left", "0");
+    }
+
+    // 关闭全部选项卡
+    function tabCloseAll() {
+    	$('.page-tabs-content').children("[data-id]").not(":first").each(function() {
+            $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
+            $(this).remove();
+        });
+        $('.page-tabs-content').children("[data-id]:first").each(function() {
+            $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').show();
+            $(this).addClass("active");
+        });
+        $('.page-tabs-content').css("margin-left", "0");
+        syncMenuTab($('.page-tabs-content').find('.active').attr('data-id'));
+    }
+
+
+    // 全屏显示
+    $('#fullScreen').on('click', function () {
+    	$(document).toggleFullScreen();
+    });
+
+    // 页签刷新按钮
+    $('.tabReload').on('click', refreshTab);
+
+    // 页签全屏按钮
+    $('.tabFullScreen').on('click', fullScreenTab);
+
+    // 双击选项卡全屏显示
+    $('.menuTabs').on('dblclick', '.menuTab', activeTabMax);
+
+    // 左移按扭
+    $('.tabLeft').on('click', scrollTabLeft);
+
+    // 右移按扭
+    $('.tabRight').on('click', scrollTabRight);
+
+    // 关闭当前
+    $('.tabCloseCurrent').on('click', tabCloseCurrent);
+
+    // 关闭其他
+    $('.tabCloseOther').on('click', tabCloseOther);
+
+    // 关闭全部
+    $('.tabCloseAll').on('click', tabCloseAll);
+
+    // tab全屏显示
+    $('.tabMaxCurrent').on('click', function () {
+        $('.page-tabs-content').find('.active').trigger("dblclick");
+    });
+
+    // 关闭全屏
+    $('#ax_close_max').click(function(){
+    	$('#content-main').toggleClass('max');
+    	$('#ax_close_max').hide();
+    })
+
+    // 双击选项卡全屏显示
+    function activeTabMax() {
+        $('#content-main').toggleClass('max');
+        $('#ax_close_max').show();
+    }
+
+    // 设置锚点
+    function setIframeUrl(href) {
+    	if($.common.equals("history", mode)) {
+    		storage.set('publicPath', href);
+    	} else {
+    		var nowUrl = window.location.href;
+            var newUrl = nowUrl.substring(0, nowUrl.indexOf("#"));
+            window.location.href = newUrl + "#" + href;
+    	}
+    }
+
+    $(window).keydown(function(event) {
+        if (event.keyCode == 27) {
+            $('#content-main').removeClass('max');
+            $('#ax_close_max').hide();
+        }
+    });
+
+    window.onhashchange = function() {
+        var hash = location.hash;
+        var url = hash.substring(1, hash.length);
+        $('a[href$="' + url + '"]').click();
+    };
+
+    // 右键菜单实现
+    $.contextMenu({
+        selector: ".menuTab",
+        trigger: 'right',
+        autoHide: true,
+        items: {
+            "close_current": {
+                name: "关闭当前",
+                icon: "fa-close",
+                callback: function(key, opt) {
+                	opt.$trigger.find('i').trigger("click");
+                }
+            },
+            "close_other": {
+                name: "关闭其他",
+                icon: "fa-window-close-o",
+                callback: function(key, opt) {
+                	setActiveTab(this);
+                    tabCloseOther();
+                }
+            },
+            "close_left": {
+                name: "关闭左侧",
+                icon: "fa-reply",
+                callback: function(key, opt) {
+                	setActiveTab(this);
+                	this.prevAll('.menuTab').not(":last").each(function() {
+                	    if ($(this).hasClass('active')) {
+                	        setActiveTab(this);
+                	    }
+                	    $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
+                	    $(this).remove();
+                	});
+                	$('.page-tabs-content').css("margin-left", "0");
+                }
+            },
+            "close_right": {
+                name: "关闭右侧",
+                icon: "fa-share",
+                callback: function(key, opt) {
+                	setActiveTab(this);
+                	this.nextAll('.menuTab').each(function() {
+                        $('.menuTab[data-id="' + $(this).data('id') + '"]').remove();
+                        $(this).remove();
+                    });
+                }
+            },
+            "close_all": {
+                name: "全部关闭",
+                icon: "fa-window-close",
+                callback: function(key, opt) {
+                    tabCloseAll();
+                }
+            },
+            "step": "---------",
+            "full": {
+                name: "全屏显示",
+                icon: "fa-arrows-alt",
+                callback: function(key, opt) {
+                	setActiveTab(this);
+                    var target = $('.RuoYi_iframe[data-id="' + this.data('id') + '"]');
+                	target.fullScreen(true);
+                }
+            },
+            "refresh": {
+                name: "刷新页面",
+                icon: "fa-refresh",
+                callback: function(key, opt) {
+                	setActiveTab(this);
+                	var target = $('.RuoYi_iframe[data-id="' + this.data('id') + '"]');
+                	var url = target.attr('src');
+                    $.modal.loading("数据加载中，请稍后...");
+                    target.attr('src', url).load(function () {
+                    	$.modal.closeLoading();
+                    });
+                }
+            },
+            "open": {
+                name: "新窗口打开",
+                icon: "fa-link",
+                callback: function(key, opt) {
+                	var target = $('.RuoYi_iframe[data-id="' + this.data('id') + '"]');
+                    window.open(target.attr('src'));
+                }
+            },
+        }
+    })
+});

leiSP-admin/src/main/resources/static/ruoyi/js/common.js

@@ -0,0 +1,431 @@
+/**
+ * 通用方法封装处理
+ * Copyright (c) 2019 ruoyi 
+ */
+$(function() {
+	
+	//  layer扩展皮肤
+	if (window.layer !== undefined) {
+		layer.config({
+		    extend: 'moon/style.css',
+		    skin: 'layer-ext-moon'
+		});
+	}
+	
+	// 回到顶部绑定
+	if ($.fn.toTop !== undefined) {
+		$('#scroll-up').toTop();
+	}
+	
+	// select2复选框事件绑定
+	if ($.fn.select2 !== undefined) {
+        $.fn.select2.defaults.set( "theme", "bootstrap" );
+		$("select.form-control:not(.noselect2)").each(function () {
+			$(this).select2().on("change", function () {
+				$(this).valid();
+			})
+		})
+	}
+	
+	// iCheck单选框及复选框事件绑定
+	if ($.fn.iCheck !== undefined) {
+		$(".check-box:not(.noicheck),.radio-box:not(.noicheck)").each(function() {
+            $(this).iCheck({
+                checkboxClass: 'icheckbox-blue',
+                radioClass: 'iradio-blue',
+            })
+        })
+	}
+	
+	// 气泡弹出框特效（移到元素时）
+	$(document).on("mouseenter", '.table [data-toggle="popover"]', function() {
+		var _this = this;
+		$(this).popover("show");
+		$(".popover").on("mouseleave", function() {
+			$(_this).popover('hide');
+		});
+	})
+
+	// 气泡弹出框特效（离开元素时）
+	$(document).on("mouseleave", '.table [data-toggle="popover"]', function() {
+		var _this = this;
+		setTimeout(function() {
+			if (!$(".popover:hover").length) $(_this).popover("hide");
+		}, 100);
+	});
+	
+	// 取消回车自动提交表单
+	$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
+        if (event.keyCode == 13) {
+            event.preventDefault();
+        }
+    });
+	 
+	// laydate 时间控件绑定
+	if ($(".select-time").length > 0) {
+		layui.use('laydate', function() {
+		    var laydate = layui.laydate;
+		    var startDate = laydate.render({
+		        elem: '#startTime',
+		        max: $('#endTime').val(),
+		        theme: 'molv',
+		        trigger: 'click',
+		        done: function(value, date) {
+		            // 结束时间大于开始时间
+		            if (value !== '') {
+		                endDate.config.min.year = date.year;
+		                endDate.config.min.month = date.month - 1;
+		                endDate.config.min.date = date.date;
+		            } else {
+		                endDate.config.min.year = '';
+		                endDate.config.min.month = '';
+		                endDate.config.min.date = '';
+		            }
+		        }
+		    });
+		    var endDate = laydate.render({
+		        elem: '#endTime',
+		        min: $('#startTime').val(),
+		        theme: 'molv',
+		        trigger: 'click',
+		        done: function(value, date) {
+		            // 开始时间小于结束时间
+		            if (value !== '') {
+		                startDate.config.max.year = date.year;
+		                startDate.config.max.month = date.month - 1;
+		                startDate.config.max.date = date.date;
+		            } else {
+		                startDate.config.max.year = '2099';
+		                startDate.config.max.month = '12';
+		                startDate.config.max.date = '31';
+		            }
+		        }
+		    });
+		});
+	}
+	
+	// laydate time-input 时间控件绑定
+	if ($(".time-input").length > 0) {
+		layui.use('laydate', function () {
+			var com = layui.laydate;
+			$(".time-input").each(function (index, item) {
+				var time = $(item);
+				// 控制控件外观
+				var type = time.attr("data-type") || 'date';
+				// 控制回显格式
+				var format = time.attr("data-format") || 'yyyy-MM-dd';
+				// 控制日期控件按钮
+				var buttons = time.attr("data-btn") || 'clear|now|confirm', newBtnArr = [];
+				// 日期控件选择完成后回调处理
+				var callback = time.attr("data-callback") || {};
+				if (buttons) {
+					if (buttons.indexOf("|") > 0) {
+						var btnArr = buttons.split("|"), btnLen = btnArr.length;
+						for (var j = 0; j < btnLen; j++) {
+							if ("clear" === btnArr[j] || "now" === btnArr[j] || "confirm" === btnArr[j]) {
+								newBtnArr.push(btnArr[j]);
+							}
+						}
+					} else {
+						if ("clear" === buttons || "now" === buttons || "confirm" === buttons) {
+							newBtnArr.push(buttons);
+						}
+					}
+				} else {
+					newBtnArr = ['clear', 'now', 'confirm'];
+				}
+				com.render({
+					elem: item,
+					theme: 'molv',
+					trigger: 'click',
+					type: type,
+					format: format,
+					btns: newBtnArr,
+					done: function (value, data) {
+						if (typeof window[callback] != 'undefined'
+							&& window[callback] instanceof Function) {
+							window[callback](value, data);
+						}
+					}
+				});
+			});
+		});
+	}
+	
+	// tree 关键字搜索绑定
+	if ($("#keyword").length > 0) {
+		$("#keyword").bind("focus", function focusKey(e) {
+		    if ($("#keyword").hasClass("empty")) {
+		        $("#keyword").removeClass("empty");
+		    }
+		}).bind("blur", function blurKey(e) {
+		    if ($("#keyword").val() === "") {
+		        $("#keyword").addClass("empty");
+		    }
+		    $.tree.searchNode(e);
+		}).bind("input propertychange", $.tree.searchNode);
+	}
+	
+	// tree表格树 展开/折叠
+	var expandFlag;
+	$("#expandAllBtn").click(function() {
+		var dataExpand = $.common.isEmpty(table.options.expandAll) ? true : table.options.expandAll;
+		expandFlag = $.common.isEmpty(expandFlag) ? dataExpand : expandFlag;
+	    if (!expandFlag) {
+	    	$.bttTable.bootstrapTreeTable('expandAll');
+	    } else {
+	    	$.bttTable.bootstrapTreeTable('collapseAll');
+	    }
+	    expandFlag = expandFlag ? false: true;
+	})
+	
+	// 按下ESC按钮关闭弹层
+	$('body', document).on('keyup', function(e) {
+	    if (e.which === 27) {
+	        $.modal.closeAll();
+	    }
+	});
+});
+
+(function ($) {
+    'use strict';
+    $.fn.toTop = function(opt) {
+        var elem = this;
+        var win = $(window);
+        var doc = $('html, body');
+        var options = $.extend({
+            autohide: true,
+            offset: 50,
+            speed: 500,
+            position: true,
+            right: 15,
+            bottom: 5
+        }, opt);
+        elem.css({
+            'cursor': 'pointer'
+        });
+        if (options.autohide) {
+            elem.css('display', 'none');
+        }
+        if (options.position) {
+            elem.css({
+                'position': 'fixed',
+                'right': options.right,
+                'bottom': options.bottom,
+            });
+        }
+        elem.click(function() {
+            doc.animate({
+                scrollTop: 0
+            }, options.speed);
+        });
+        win.scroll(function() {
+            var scrolling = win.scrollTop();
+            if (options.autohide) {
+                if (scrolling > options.offset) {
+                    elem.fadeIn(options.speed);
+                } else elem.fadeOut(options.speed);
+            }
+        });
+    };
+})(jQuery);
+
+/** 刷新选项卡 */
+var refreshItem = function(){
+    var topWindow = $(window.parent.document);
+	var currentId = $('.page-tabs-content', topWindow).find('.active').attr('data-id');
+	var target = $('.RuoYi_iframe[data-id="' + currentId + '"]', topWindow);
+    var url = target.attr('src');
+    target.attr('src', url).ready();
+}
+
+/** 关闭选项卡 */
+var closeItem = function(dataId){
+	var topWindow = $(window.parent.document);
+	if($.common.isNotEmpty(dataId)){
+		window.parent.$.modal.closeLoading();
+		// 根据dataId关闭指定选项卡
+		$('.menuTab[data-id="' + dataId + '"]', topWindow).remove();
+		// 移除相应tab对应的内容区
+		$('.mainContent .RuoYi_iframe[data-id="' + dataId + '"]', topWindow).remove();
+		return;
+	}
+	var panelUrl = window.frameElement.getAttribute('data-panel');
+	$('.page-tabs-content .active i', topWindow).click();
+	if($.common.isNotEmpty(panelUrl)){
+		$('.menuTab[data-id="' + panelUrl + '"]', topWindow).addClass('active').siblings('.menuTab').removeClass('active');
+		$('.mainContent .RuoYi_iframe', topWindow).each(function() {
+            if ($(this).data('id') == panelUrl) {
+                $(this).show().siblings('.RuoYi_iframe').hide();
+                return false;
+            }
+		});
+	}
+}
+
+/** 创建选项卡 */
+function createMenuItem(dataUrl, menuName) {
+	var panelUrl = window.frameElement.getAttribute('data-id');
+    dataIndex = $.common.random(1, 100),
+    flag = true;
+    if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
+    var topWindow = $(window.parent.document);
+    // 选项卡菜单已存在
+    $('.menuTab', topWindow).each(function() {
+        if ($(this).data('id') == dataUrl) {
+            if (!$(this).hasClass('active')) {
+                $(this).addClass('active').siblings('.menuTab').removeClass('active');
+                scrollToTab(this);
+                $('.page-tabs-content').animate({ marginLeft: ""}, "fast");
+                // 显示tab对应的内容区
+                $('.mainContent .RuoYi_iframe', topWindow).each(function() {
+                    if ($(this).data('id') == dataUrl) {
+                        $(this).show().siblings('.RuoYi_iframe').hide();
+                        return false;
+                    }
+                });
+            }
+            flag = false;
+            return false;
+        }
+    });
+    // 选项卡菜单不存在
+    if (flag) {
+        var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '" data-panel="' + panelUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
+        $('.menuTab', topWindow).removeClass('active');
+
+        // 添加选项卡对应的iframe
+        var str1 = '<iframe class="RuoYi_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" data-panel="' + panelUrl + '" seamless></iframe>';
+        $('.mainContent', topWindow).find('iframe.RuoYi_iframe').hide().parents('.mainContent').append(str1);
+        
+        window.parent.$.modal.loading("数据加载中，请稍后...");
+        $('.mainContent iframe:visible', topWindow).load(function () {
+        	window.parent.$.modal.closeLoading();
+        });
+
+        // 添加选项卡
+        $('.menuTabs .page-tabs-content', topWindow).append(str);
+        scrollToTab($('.menuTab.active', topWindow));
+    }
+    return false;
+}
+
+// 滚动到指定选项卡
+function scrollToTab(element) {
+	var topWindow = $(window.parent.document);
+    var marginLeftVal = calSumWidth($(element).prevAll()),
+    marginRightVal = calSumWidth($(element).nextAll());
+    // 可视区域非tab宽度
+    var tabOuterWidth = calSumWidth($(".content-tabs", topWindow).children().not(".menuTabs"));
+    //可视区域tab宽度
+    var visibleWidth = $(".content-tabs", topWindow).outerWidth(true) - tabOuterWidth;
+    //实际滚动宽度
+    var scrollVal = 0;
+    if ($(".page-tabs-content", topWindow).outerWidth() < visibleWidth) {
+        scrollVal = 0;
+    } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
+        if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
+            scrollVal = marginLeftVal;
+            var tabElement = element;
+            while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content", topWindow).outerWidth() - visibleWidth)) {
+                scrollVal -= $(tabElement).prev().outerWidth();
+                tabElement = $(tabElement).prev();
+            }
+        }
+    } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
+        scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
+    }
+    $('.page-tabs-content', topWindow).animate({ marginLeft: 0 - scrollVal + 'px' }, "fast");
+}
+
+//计算元素集合的总宽度
+function calSumWidth(elements) {
+    var width = 0;
+    $(elements).each(function() {
+        width += $(this).outerWidth(true);
+    });
+    return width;
+}
+
+// 日志打印封装处理
+var log = {
+    log: function(msg) {
+        console.log(msg);
+    },
+    info: function(msg) {
+        console.info(msg);
+    },
+    warn: function(msg) {
+        console.warn(msg);
+    },
+    error: function(msg) {
+        console.error(msg);
+    }
+};
+
+// 本地缓存处理
+var storage = {
+    set: function(key, value) {
+        window.localStorage.setItem(key, value);
+    },
+    get: function(key) {
+        return window.localStorage.getItem(key);
+    },
+    remove: function(key) {
+        window.localStorage.removeItem(key);
+    },
+    clear: function() {
+        window.localStorage.clear();
+    }
+};
+
+// 主子表操作封装处理
+var sub = {
+    editColumn: function() {
+    	var count = $("#" + table.options.id).bootstrapTable('getData').length;
+    	var params = new Array();
+    	for (var dataIndex = 0; dataIndex <= count; dataIndex++) {
+    		var columns = $('#' + table.options.id + ' tr[data-index="' + dataIndex + '"] td');
+    		var obj = new Object();
+    		for (var i = 0; i < columns.length; i++) {
+    			var inputValue = $(columns[i]).find('input');
+    			var selectValue = $(columns[i]).find('select');
+    			var key = table.options.columns[i].field;
+    			if ($.common.isNotEmpty(inputValue.val())) {
+    				obj[key] = inputValue.val();
+    			} else if ($.common.isNotEmpty(selectValue.val())) {
+    				obj[key] = selectValue.val();
+    			} else {
+    				obj[key] = "";
+    			}
+    		}
+    		params.push({ index: dataIndex, row: obj });
+    	}
+    	$("#" + table.options.id).bootstrapTable("updateRow", params);
+    },
+    delColumn: function(column) {
+    	sub.editColumn();
+    	var subColumn = $.common.isEmpty(column) ? "index" : column;
+    	var ids = $.table.selectColumns(subColumn);
+        if (ids.length == 0) {
+            $.modal.alertWarning("请至少选择一条记录");
+            return;
+        }
+        $("#" + table.options.id).bootstrapTable('remove', { field: subColumn, values: ids });
+    }
+};
+
+/** 设置全局ajax处理 */
+$.ajaxSetup({
+    complete: function(XMLHttpRequest, textStatus) {
+        if (textStatus == 'timeout') {
+        	$.modal.alertWarning("服务器超时，请稍后再试！");
+        	$.modal.enable();
+            $.modal.closeLoading();
+        } else if (textStatus == "parsererror" || textStatus == "error") {
+        	$.modal.alertWarning("服务器错误，请联系管理员！");
+        	$.modal.enable();
+            $.modal.closeLoading();
+        }
+    }
+});

leiSP-admin/src/main/resources/static/ruoyi/login.js

@@ -0,0 +1,96 @@
+
+$(function() {
+	validateKickout();
+    validateRule();
+	$('.imgcode').click(function() {
+		var url = ctx + "captcha/captchaImage?type=" + captchaType + "&s=" + Math.random();
+		$(".imgcode").attr("src", url);
+	});
+});
+
+/* 设置默认属性 */
+$.validator.setDefaults({
+    submitHandler: function() {
+		login();
+    }
+});
+
+function login() {
+	$.modal.loading($("#btnSubmit").data("loading"));
+	var username = $.common.trim($("input[name='username']").val());
+    var password = $.common.trim($("input[name='password']").val());
+    var validateCode = $("input[name='validateCode']").val();
+    var rememberMe = $("input[name='rememberme']").is(':checked');
+    $.ajax({
+        type: "post",
+        url: ctx + "login",
+        data: {
+            "username": username,
+            "password": password,
+            "validateCode": validateCode,
+            "rememberMe": rememberMe
+        },
+        success: function(r) {
+            if (r.code == 0) {
+                location.href = ctx + 'index';
+            } else {
+            	$.modal.closeLoading();
+            	$('.imgcode').click();
+            	$(".code").val("");
+            	$.modal.msg(r.msg);
+            }
+        }
+    });
+}
+
+function validateRule() {
+    var icon = "<i class='fa fa-times-circle'></i> ";
+    $("#signupForm").validate({
+        rules: {
+            username: {
+                required: true
+            },
+            password: {
+                required: true
+            }
+        },
+        messages: {
+            username: {
+                required: icon + "请输入您的用户名",
+            },
+            password: {
+                required: icon + "请输入您的密码",
+            }
+        }
+    })
+}
+
+function validateKickout() {
+	if (getParam("kickout") == 1) {
+	    layer.alert("<font color='red'>您已在别处登录，请您修改密码或重新登录</font>", {
+	        icon: 0,
+	        title: "系统提示"
+	    },
+	    function(index) {
+	        //关闭弹窗
+	        layer.close(index);
+	        if (top != self) {
+	            top.location = self.location;
+	        } else {
+	            var url  =  location.search;
+	            if (url) {
+	                var oldUrl  = window.location.href;
+	                var newUrl  = oldUrl.substring(0,  oldUrl.indexOf('?'));
+	                self.location  = newUrl;
+	            }
+	        }
+	    });
+	}
+}
+
+function getParam(paramName) {
+    var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)");
+    var r = window.location.search.substr(1).match(reg);
+    if (r != null) return decodeURI(r[2]);
+    return null;
+}

leiSP-admin/src/main/resources/static/ruoyi/register.js

@@ -0,0 +1,82 @@
+
+$(function() {
+    validateRule();
+    $('.imgcode').click(function() {
+		var url = ctx + "captcha/captchaImage?type=" + captchaType + "&s=" + Math.random();
+		$(".imgcode").attr("src", url);
+	});
+});
+
+$.validator.setDefaults({
+    submitHandler: function() {
+    	register();
+    }
+});
+
+function register() {
+	$.modal.loading($("#btnSubmit").data("loading"));
+	var username = $.common.trim($("input[name='username']").val());
+    var password = $.common.trim($("input[name='password']").val());
+    var validateCode = $("input[name='validateCode']").val();
+    $.ajax({
+        type: "post",
+        url: ctx + "register",
+        data: {
+            "loginName": username,
+            "password": password,
+            "validateCode": validateCode
+        },
+        success: function(r) {
+            if (r.code == 0) {
+            	layer.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", {
+        	        icon: 1,
+        	        title: "系统提示"
+        	    },
+        	    function(index) {
+        	        //关闭弹窗
+        	        layer.close(index);
+        	        location.href = ctx + 'login';
+        	    });
+            } else {
+            	$.modal.closeLoading();
+            	$('.imgcode').click();
+            	$(".code").val("");
+            	$.modal.msg(r.msg);
+            }
+        }
+    });
+}
+
+function validateRule() {
+	var icon = "<i class='fa fa-times-circle'></i> ";
+    $("#registerForm").validate({
+        rules: {
+            username: {
+                required: true,
+                minlength: 2
+            },
+            password: {
+                required: true,
+                minlength: 5
+            },
+            confirmPassword: {
+                required: true,
+                equalTo: "[name='password']"
+            }
+        },
+        messages: {
+            username: {
+                required: icon + "请输入您的用户名",
+                minlength: icon + "用户名不能小于2个字符"
+            },
+            password: {
+            	required: icon + "请输入您的密码",
+                minlength: icon + "密码不能小于5个字符",
+            },
+            confirmPassword: {
+                required: icon + "请再次输入您的密码",
+                equalTo: icon + "两次密码输入不一致"
+            }
+        }
+    })
+}

leiSP-admin/src/main/resources/templates/demo/form/autocomplete.html

@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('搜索自动补全')" />
+</head>
+<body class="gray-bg">
+      <div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>搜索自动补全<small>https://github.com/lzwme/bootstrap-suggest-plugin</small></h5>
+                    </div>  
+                    <div class="ibox-content">
+                        <p>展示下拉菜单按钮。</p>
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <div class="input-group">
+                                    <input type="text" class="form-control" id="suggest-demo-1">
+                                    <div class="input-group-btn">
+                                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
+                                            <span class="caret"></span>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <p>不展示下拉菜单按钮。</p>
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <div class="input-group">
+                                    <input type="text" class="form-control" id="suggest-demo-2">
+                                    <div class="input-group-btn">
+                                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
+                                            <span class="caret"></span>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <p>前端json中获取数据</p>
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <div class="input-group">
+                                    <input type="text" class="form-control" id="suggest-demo-3">
+                                    <div class="input-group-btn">
+                                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
+                                            <span class="caret"></span>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                                        </ul>
+                                    </div>
+                                    <!-- /btn-group -->
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <h3>百度搜索</h3>
+                        <p>支持逗号分隔多关键字</p>
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <div class="input-group" style="width: 300px;">
+                                    <input type="text" class="form-control" id="baidu">
+                                    <div class="input-group-btn">
+                                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
+                                            <span class="caret"></span>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                                        </ul>
+                                    </div>
+                                    <!-- /btn-group -->
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <h3>淘宝搜索</h3>
+                        <p>支持逗号分隔多关键字</p>
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <div class="input-group" style="width: 400px;">
+                                    <input type="text" class="form-control" id="taobao">
+                                    <div class="input-group-btn">
+                                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
+                                            <span class="caret"></span>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                                        </ul>
+                                    </div>
+                                    <!-- /btn-group -->
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <label class="font-noraml">相关参数详细信息</label>
+                            <div><a href="#" target="_blank">http://www.sooka.com</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>搜索自动补全<small>https://github.com/bassjobsen/Bootstrap-3-Typeahead</small></h5>
+                    </div>  
+                    <div class="ibox-content">
+                        <p>通过数据属性的基本示例。</p>
+                        <div class="row">
+                            <div class="col-lg-6">
+                           	    <input type="text" placeholder="ruoyi..." data-provide="typeahead" data-source='["ruoyi 1","ruoyi 2","ruoyi 3"]' class="form-control" />
+                            </div>
+                        </div>
+                        <hr>
+                        
+                        <p>通过javascript的基本示例。</p>
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-1"/>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <p>通过javascript的复杂示例。</p>
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-2"/>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <p>后台url中获取简单数据</p>
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-3"/>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="form-group">
+                            <label class="font-noraml">相关参数详细信息</label>
+                            <div><a href="http://www.sooka.com/document/zjwd.html#bootstrap-typeahead" target="_blank">http://www.sooka.com/document/zjwd.html#bootstrap-typeahead</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: bootstrap-suggest-js" />
+    <th:block th:include="include :: bootstrap-typeahead-js" />
+    <script type="text/javascript">
+        
+	    var testBsSuggest = $("#suggest-demo-1").bsSuggest({
+	        url: ctx + "demo/form/userModel",
+	        idField: "userId",
+	        keyField: "userName"
+	    }).on('onDataRequestSuccess', function (e, result) {
+	        console.log('onDataRequestSuccess: ', result);
+	    }).on('onSetSelectValue', function (e, keyword) {
+	        console.log('onSetSelectValue: ', keyword);
+	    }).on('onUnsetSelectValue', function (e) {
+	        console.log("onUnsetSelectValue");
+	    });
+	    
+	    var testBsSuggest = $("#suggest-demo-2").bsSuggest({
+	        url: ctx + "demo/form/userModel",
+	        showBtn: false,
+	        idField: "userId",
+	        keyField: "userName"
+	    }).on('onDataRequestSuccess', function (e, result) {
+	        console.log('onDataRequestSuccess: ', result);
+	    }).on('onSetSelectValue', function (e, keyword) {
+	        console.log('onSetSelectValue: ', keyword);
+	    }).on('onUnsetSelectValue', function (e) {
+	        console.log("onUnsetSelectValue");
+	    });
+	
+	    //data 数据中获取
+	    var testdataBsSuggest = $("#suggest-demo-3").bsSuggest({
+	        indexId: 1,
+	        indexKey: 2,
+	        data: {
+	            'value': [
+	                {
+	                    'userId': '1',
+	                    'userCode': '1000001',
+	                    'userName': '测试1',
+	                    'userPhone': '15888888888'
+	                },
+	                {
+	                    'userId': '2',
+	                    'userCode': '1000002',
+	                    'userName': '测试2',
+	                    'userPhone': '15888888888'
+	                },
+	                {
+	                    'userId': '3',
+	                    'userCode': '1000003',
+	                    'userName': '测试3',
+	                    'userPhone': '15888888888'
+	                },
+	                {
+	                    'userId': '4',
+	                    'userCode': '1000004',
+	                    'userName': '测试4',
+	                    'userPhone': '15888888888'
+	                },
+	                {
+	                    'userId': '5',
+	                    'userCode': '1000005',
+	                    'userName': '测试5',
+	                    'userPhone': '15888888888'
+	                }
+				],
+	            'defaults': 'http://www.sooka.com'
+	        }
+	    });
+	    
+	    //百度搜索测试
+	    var baiduBsSuggest = $("#baidu").bsSuggest({
+	        allowNoKeyword: false, //是否允许无关键字时请求数据
+	        multiWord: true, //以分隔符号分割的多关键字支持
+	        separator: ",", //多关键字支持时的分隔符，默认为空格
+	        getDataMethod: "url", //获取数据的方式，总是从 URL 获取
+	        url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
+	        /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
+	        jsonp: 'cb',
+	        /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
+	        processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
+	            var i, len, data = {
+	                value: []
+	            };
+	            if (!json || !json.s || json.s.length === 0) {
+	                return false;
+	            }
+	
+	            console.log(json);
+	            len = json.s.length;
+	
+	            jsonStr = "{'value':[";
+	            for (i = 0; i < len; i++) {
+	                data.value.push({
+	                    word: json.s[i]
+	                });
+	            }
+	            data.defaults = 'baidu';
+	
+	            //字符串转化为 js 对象
+	            return data;
+	        }
+	    });
+	    
+	    //淘宝搜索建议测试
+	    var taobaoBsSuggest = $("#taobao").bsSuggest({
+	        indexId: 2, //data.value 的第几个数据，作为input输入框的内容
+	        indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
+	        allowNoKeyword: false, //是否允许无关键字时请求数据
+	        multiWord: true, //以分隔符号分割的多关键字支持
+	        separator: ",", //多关键字支持时的分隔符，默认为空格
+	        getDataMethod: "url", //获取数据的方式，总是从 URL 获取
+	        effectiveFieldsAlias: {
+	            Id: "序号",
+	            Keyword: "关键字",
+	            Count: "数量"
+	        },
+	        showHeader: true,
+	        url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
+	        /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
+	        jsonp: 'callback',
+	        /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
+	        processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
+	            var i, len, data = {
+	                value: []
+	            };
+	
+	            if (!json || !json.result || json.result.length == 0) {
+	                return false;
+	            }
+	
+	            console.log(json);
+	            len = json.result.length;
+	
+	            for (i = 0; i < len; i++) {
+	                data.value.push({
+	                    "Id": (i + 1),
+	                    "Keyword": json.result[i][0],
+	                    "Count": json.result[i][1]
+	                });
+	            }
+	            console.log(data);
+	            return data;
+	        }
+	    });
+	    
+	    $('#typeahead-demo-1').typeahead({
+            source: ["ruoyi 1","ruoyi 2","ruoyi 3"]
+        });
+	    
+	    $('#typeahead-demo-2').typeahead({
+            source: [
+                {"name": "Afghanistan", "code": "AF", "ccn0": "040"},
+                {"name": "Land Islands", "code": "AX", "ccn0": "050"},
+                {"name": "Albania", "code": "AL","ccn0": "060"},
+                {"name": "Algeria", "code": "DZ","ccn0": "070"}
+            ]
+        });
+	    
+	    $.get(ctx + "demo/form/collection", function(data){
+	    	$("#typeahead-demo-3").typeahead({
+		        source: data.value
+		    });
+        },'json');
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/basic.html

@@ -0,0 +1,593 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('基本表单')" />
+</head>
+<body class="gray-bg">
+    <div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-7">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>基本表单 <small>简单登录表单示例</small></h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <div class="row">
+                            <div class="col-sm-6 b-r">
+                                <h3 class="m-t-none m-b">登录</h3>
+                                <p>欢迎登录本站(⊙o⊙)</p>
+                                <form role="form">
+                                    <div class="form-group">
+                                        <label>用户名</label>
+                                        <input type="email" placeholder="请输入您注册的E-mail" class="form-control">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>密码</label>
+                                        <input type="password" placeholder="请输入密码" class="form-control">
+                                    </div>
+                                    <div>
+                                        <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登 录</strong>
+                                        </button>
+                                        <label>
+                                            <input type="checkbox">自动登录</label>
+                                    </div>
+                                </form>
+                            </div>
+                            <div class="col-sm-6">
+                                <h4>还不是会员？</h4>
+                                <p>您可以注册一个新账户</p>
+                                <p class="text-center">
+                                    <a href="#"><i class="fa fa-sign-in big-icon"></i></a>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-5">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>横向表单</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <form class="form-horizontal">
+                            <p>欢迎登录本站(⊙o⊙)</p>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">用户名：</label>
+
+                                <div class="col-sm-8">
+                                    <input type="email" placeholder="用户名" class="form-control"> <span class="help-block m-b-none">请输入您注册时所填的E-mail</span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">密码：</label>
+
+                                <div class="col-sm-8">
+                                    <input type="password" placeholder="密码" class="form-control">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div class="col-sm-offset-3 col-sm-8">
+                                    <button class="btn btn-sm btn-white" type="submit">登 录</button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-8">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>内联表单</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <form role="form" class="form-inline">
+                            <div class="form-group">
+                                <label for="exampleInputEmail2" class="sr-only">用户名</label>
+                                <input type="email" placeholder="请输入用户名" id="exampleInputEmail2" class="form-control">
+                            </div>
+                            <div class="form-group">
+                                <label for="exampleInputPassword2" class="sr-only">密码</label>
+                                <input type="password" placeholder="请输入密码" id="exampleInputPassword2" class="form-control">
+                            </div>
+                            <div class="checkbox m-l m-r-xs">
+                                <label>
+                                    <input type="checkbox"><i></i> 自动登录</label>
+                            </div>
+                            <button class="btn btn-white" type="submit">登录</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-4">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>弹出表单 <small>弹出框登录示例</small></h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <div class="text-center">
+                            <a data-toggle="modal" class="btn btn-primary" href="#modal-form">打开登录窗口</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>所有表单元素 <small>包括自定义样式的复选和单选按钮</small></h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <form method="get" class="form-horizontal">
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">普通</label>
+
+                                <div class="col-sm-10">
+                                    <input type="text" class="form-control">
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">带说明信息</label>
+                                <div class="col-sm-10">
+                                    <input type="text" class="form-control"> <span class="help-block m-b-none">帮助文本，可能会超过一行，以块级元素显示</span>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">密码</label>
+
+                                <div class="col-sm-10">
+                                    <input type="password" class="form-control" name="password">
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">提示</label>
+
+                                <div class="col-sm-10">
+                                    <input type="text" placeholder="提示信息" class="form-control">
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">禁用</label>
+
+                                <div class="col-sm-10">
+                                    <input type="text" disabled="" placeholder="已被禁用" class="form-control">
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">静态控制</label>
+
+                                <div class="col-sm-10">
+                                    <p class="form-control-static">leisp</p>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">复选框&amp;单选框
+                                    <br/>
+                                    <small class="text-navy">普通Bootstrap元素</small>
+                                </label>
+
+                                <div class="col-sm-10">
+                                    <div class="checkbox">
+                                        <label>
+                                            <input type="checkbox" value="">选项1</label>
+                                    </div>
+                                    <div class="radio">
+                                        <label>
+                                            <input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios">选项1</label>
+                                    </div>
+                                    <div class="radio">
+                                        <label>
+                                            <input type="radio" value="option2" id="optionsRadios2" name="optionsRadios">选项2</label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">内联复选框</label>
+
+                                <div class="col-sm-10">
+                                    <label class="checkbox-inline">
+                                        <input type="checkbox" value="option1" id="inlineCheckbox1">a</label>
+                                    <label class="checkbox-inline">
+                                        <input type="checkbox" value="option2" id="inlineCheckbox2">b</label>
+                                    <label class="checkbox-inline">
+                                        <input type="checkbox" value="option3" id="inlineCheckbox3">c</label>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">复选框&amp;单选框
+                                    <br/><small class="text-navy">自定义样式</small>
+                                </label>
+
+                                <div class="col-sm-10">
+                                    <div class="checkbox check-box">
+                                        <label>
+                                            <input type="checkbox" value=""> <i></i> 选项1</label>
+                                    </div>
+                                    <div class="checkbox check-box">
+                                        <label>
+                                            <input type="checkbox" value="" checked=""> <i></i> 选项2（选中）</label>
+                                    </div>
+                                    <div class="checkbox check-box">
+                                        <label>
+                                            <input type="checkbox" value="" disabled="" checked=""> <i></i> 选项3（选中并禁用）</label>
+                                    </div>
+                                    <div class="checkbox check-box">
+                                        <label>
+                                            <input type="checkbox" value="" disabled=""> <i></i> 选项4（禁用）</label>
+                                    </div>
+                                    <div class="radio check-box">
+                                        <label>
+                                            <input type="radio" value="option1" name="a"> <i></i> 选项1</label>
+                                    </div>
+                                    <div class="radio check-box">
+                                        <label>
+                                            <input type="radio" checked="" value="option2" name="a"> <i></i> 选项2（选中）</label>
+                                    </div>
+                                    <div class="radio check-box">
+                                        <label>
+                                            <input type="radio" disabled="" checked="" value="option2"> <i></i> 选项3（选中并禁用）</label>
+                                    </div>
+                                    <div class="radio check-box">
+                                        <label>
+                                            <input type="radio" disabled="" name="a"> <i></i> 选项4（禁用）</label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">内联复选框</label>
+
+                                <div class="col-sm-10">
+                                    <label class="checkbox-inline check-box">
+                                        <input type="checkbox" value="option1">a</label>
+                                    <label class="checkbox-inline check-box">
+                                        <input type="checkbox" value="option2">b</label>
+                                    <label class="checkbox-inline check-box">
+                                        <input type="checkbox" value="option3">c</label>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">Select</label>
+
+                                <div class="col-sm-10">
+                                    <select class="form-control m-b" name="account">
+                                        <option>选项 1</option>
+                                        <option>选项 2</option>
+                                        <option>选项 3</option>
+                                        <option>选项 4</option>
+                                    </select>
+
+                                    <div class="col-sm-4 m-l-n">
+                                        <select class="form-control" multiple="">
+                                            <option>选项 1</option>
+                                            <option>选项 2</option>
+                                            <option>选项 3</option>
+                                            <option>选项 4</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group has-success">
+                                <label class="col-sm-2 control-label">验证通过</label>
+
+                                <div class="col-sm-10">
+                                    <input type="text" class="form-control">
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group has-warning">
+                                <label class="col-sm-2 control-label">未填写</label>
+
+                                <div class="col-sm-10">
+                                    <input type="text" class="form-control">
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group has-error">
+                                <label class="col-sm-2 control-label">验证未通过</label>
+
+                                <div class="col-sm-10">
+                                    <input type="text" class="form-control">
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">自定义尺寸</label>
+
+                                <div class="col-sm-10">
+                                    <input type="text" placeholder=".input-lg" class="form-control input-lg m-b">
+                                    <input type="text" placeholder="Default input" class="form-control m-b">
+                                    <input type="text" placeholder=".input-sm" class="form-control input-sm">
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">列尺寸</label>
+
+                                <div class="col-sm-10">
+                                    <div class="row">
+                                        <div class="col-md-2">
+                                            <input type="text" placeholder=".col-md-2" class="form-control">
+                                        </div>
+                                        <div class="col-md-3">
+                                            <input type="text" placeholder=".col-md-3" class="form-control">
+                                        </div>
+                                        <div class="col-md-4">
+                                            <input type="text" placeholder=".col-md-4" class="form-control">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">文本框组</label>
+
+                                <div class="col-sm-10">
+                                    <div class="input-group m-b"><span class="input-group-addon">@</span>
+                                        <input type="text" placeholder="用户名" class="form-control">
+                                    </div>
+                                    <div class="input-group m-b">
+                                        <input type="text" class="form-control"> <span class="input-group-addon">.00</span>
+                                    </div>
+                                    <div class="input-group m-b"><span class="input-group-addon">&yen;</span>
+                                        <input type="text" class="form-control"> <span class="input-group-addon">.00</span>
+                                    </div>
+                                    <div class="input-group m-b"><span class="input-group-addon"> <input type="checkbox"> </span>
+                                        <input type="text" class="form-control">
+                                    </div>
+                                    <div class="input-group"><span class="input-group-addon"> <input type="radio"> </span>
+                                        <input type="text" class="form-control">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">按钮插件</label>
+
+                                <div class="col-sm-10">
+                                    <div class="input-group m-b"><span class="input-group-btn">
+                                            <button type="button" class="btn btn-primary">搜</button> </span>
+                                        <input type="text" class="form-control">
+                                    </div>
+                                    <div class="input-group">
+                                        <input type="text" class="form-control"> <span class="input-group-btn"> <button type="button" class="btn btn-primary">搜索
+                                        </button> </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">带下拉框</label>
+
+                                <div class="col-sm-10">
+                                    <div class="input-group m-b">
+                                        <div class="input-group-btn">
+                                            <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">操作 <span class="caret"></span>
+                                            </button>
+                                            <ul class="dropdown-menu">
+                                                <li><a href="#">选项1</a>
+                                                </li>
+                                                <li><a href="#">选项2</a>
+                                                </li>
+                                                <li><a href="#">选项3</a>
+                                                </li>
+                                                <li class="divider"></li>
+                                                <li><a href="#">选项4</a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <input type="text" class="form-control">
+                                    </div>
+                                    <div class="input-group">
+                                        <input type="text" class="form-control">
+
+                                        <div class="input-group-btn">
+                                            <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">操作 <span class="caret"></span>
+                                            </button>
+                                            <ul class="dropdown-menu pull-right">
+                                                <li><a href="#">选项1</a>
+                                                </li>
+                                                <li><a href="#">选项2</a>
+                                                </li>
+                                                <li><a href="#">选项3</a>
+                                                </li>
+                                                <li class="divider"></li>
+                                                <li><a href="#">选项4</a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">分段</label>
+
+                                <div class="col-sm-10">
+                                    <div class="input-group m-b">
+                                        <div class="input-group-btn">
+                                            <button tabindex="-1" class="btn btn-white" type="button">操作</button>
+                                            <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"><span class="caret"></span>
+                                            </button>
+                                            <ul class="dropdown-menu">
+                                                <li><a href="#">选项1</a>
+                                                </li>
+                                                <li><a href="#">选项2</a>
+                                                </li>
+                                                <li><a href="#">选项3</a>
+                                                </li>
+                                                <li class="divider"></li>
+                                                <li><a href="#">选项4</a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <input type="text" class="form-control">
+                                    </div>
+                                    <div class="input-group">
+                                        <input type="text" class="form-control">
+
+                                        <div class="input-group-btn">
+                                            <button tabindex="-1" class="btn btn-white" type="button">操作</button>
+                                            <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"><span class="caret"></span>
+                                            </button>
+                                            <ul class="dropdown-menu pull-right">
+                                                	分段
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <div class="col-sm-4 col-sm-offset-2">
+                                    <button class="btn btn-primary" type="submit">保存内容</button>
+                                    <button class="btn btn-white" type="submit">取消</button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="modal-form" class="modal fade" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-sm-6 b-r">
+                            <h3 class="m-t-none m-b">登录</h3>
+
+                            <p>欢迎登录本站(⊙o⊙)</p>
+
+                            <form role="form">
+                                <div class="form-group">
+                                    <label>用户名：</label>
+                                    <input type="email" placeholder="请输入用户名" class="form-control">
+                                </div>
+                                <div class="form-group">
+                                    <label>密码：</label>
+                                    <input type="password" placeholder="请输入密码" class="form-control">
+                                </div>
+                                <div>
+                                    <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登录</strong>
+                                    </button>
+                                    <label>
+                                        <input type="checkbox" class="i-checks">自动登录</label>
+                                </div>
+                            </form>
+                        </div>
+                        <div class="col-sm-6">
+                            <h4>还不是会员？</h4>
+                            <p>您可以注册一个账户</p>
+                            <p class="text-center">
+                                <a href="#"><i class="fa fa-sign-in big-icon"></i></a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/button.html

@@ -0,0 +1,620 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('按钮')" />
+</head>
+<body class="gray-bg">
+     <div class="row wrapper wrapper-content animated fadeInRight">
+        <div class="col-sm-4">
+            <div class="ibox float-e-margins">
+                <div class="ibox-title">
+                    <h5>按钮颜色</h5>
+                    <div class="ibox-tools">
+                        <a class="collapse-link">
+                            <i class="fa fa-chevron-up"></i>
+                        </a>
+                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                            <i class="fa fa-wrench"></i>
+                        </a>
+                        <ul class="dropdown-menu dropdown-user">
+                            <li><a href="#">选项1</a>
+                            </li>
+                            <li><a href="#">选项2</a>
+                            </li>
+                        </ul>
+                        <a class="close-link">
+                            <i class="fa fa-times"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="ibox-content">
+                    <p>
+                        可使用class来快速改变按钮的颜色，如<code>.btn-primary</code>
+                    </p>
+
+                    <h3 class="font-bold">
+                            普通按钮
+                        </h3>
+                    <p>
+                        <button type="button" class="btn btn-w-m btn-default">btn-default</button>
+                        <button type="button" class="btn btn-w-m btn-primary">btn-primary</button>
+                        <button type="button" class="btn btn-w-m btn-success">btn-success</button>
+                        <button type="button" class="btn btn-w-m btn-info">btn-info</button>
+                        <button type="button" class="btn btn-w-m btn-warning">btn-warning</button>
+                        <button type="button" class="btn btn-w-m btn-danger">btn-danger</button>
+                        <button type="button" class="btn btn-w-m btn-white">btn-white</button>
+                        <button type="button" class="btn btn-w-m btn-link">btn-link</button>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-4">
+            <div class="ibox float-e-margins">
+                <div class="ibox-title">
+                    <h5>按钮大小</h5>
+                    <div class="ibox-tools">
+                        <a class="collapse-link">
+                            <i class="fa fa-chevron-up"></i>
+                        </a>
+                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                            <i class="fa fa-wrench"></i>
+                        </a>
+                        <ul class="dropdown-menu dropdown-user">
+                            <li><a href="#">选项1</a>
+                            </li>
+                            <li><a href="#">选项2</a>
+                            </li>
+                        </ul>
+                        <a class="close-link">
+                            <i class="fa fa-times"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="ibox-content">
+                    <p>
+                        可以通过添加class的值为<code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code>来修改按钮的大小
+                    </p>
+                    <h3 class="font-bold">按钮尺寸</h3>
+                    <p>
+                        <button type="button" class="btn btn-primary btn-lg">大按钮</button>
+                        <button type="button" class="btn btn-default btn-lg">大按钮</button>
+                        <br/>
+                        <button type="button" class="btn btn-primary">默认按钮</button>
+                        <button type="button" class="btn btn-default">默认按钮</button>
+                        <br/>
+                        <button type="button" class="btn btn-primary btn-sm">小按钮</button>
+                        <button type="button" class="btn btn-default btn-sm">小按钮</button>
+                        <br/>
+                        <button type="button" class="btn btn-primary btn-xs">Mini按钮</button>
+                        <button type="button" class="btn btn-default btn-xs">Mini按钮</button>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-4">
+            <div class="ibox float-e-margins">
+                <div class="ibox-title">
+                    <h5>线性按钮</h5>
+                    <div class="ibox-tools">
+                        <a class="collapse-link">
+                            <i class="fa fa-chevron-up"></i>
+                        </a>
+                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                            <i class="fa fa-wrench"></i>
+                        </a>
+                        <ul class="dropdown-menu dropdown-user">
+                            <li><a href="#">选项1</a>
+                            </li>
+                            <li><a href="#">选项2</a>
+                            </li>
+                        </ul>
+                        <a class="close-link">
+                            <i class="fa fa-times"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="ibox-content">
+                    <p>
+                        要使用线性按钮，可添加class<code>.btn-block</code>或<code>.btn-outline</code>
+                    </p>
+
+                    <h3 class="font-bold">线性按钮</h3>
+                    <p>
+                        <button type="button" class="btn btn-outline btn-default">默认</button>
+                        <button type="button" class="btn btn-outline btn-primary">主要</button>
+                        <button type="button" class="btn btn-outline btn-success">成功</button>
+                        <button type="button" class="btn btn-outline btn-info">信息</button>
+                        <button type="button" class="btn btn-outline btn-warning">警告</button>
+                        <button type="button" class="btn btn-outline btn-danger">危险</button>
+                        <button type="button" class="btn btn-outline btn-link">链接</button>
+                    </p>
+                    <h3 class="font-bold">块级按钮</h3>
+                    <p>
+                        <button type="button" class="btn btn-block btn-outline btn-primary">这是一个块级按钮</button>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-12">
+            <div class="ibox float-e-margins">
+                <div class="ibox-title">
+                    <h5>3D按钮</h5>
+                    <div class="ibox-tools">
+                        <a class="collapse-link">
+                            <i class="fa fa-chevron-up"></i>
+                        </a>
+                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                            <i class="fa fa-wrench"></i>
+                        </a>
+                        <ul class="dropdown-menu dropdown-user">
+                            <li><a href="#">选项1</a>
+                            </li>
+                            <li><a href="#">选项2</a>
+                            </li>
+                        </ul>
+                        <a class="close-link">
+                            <i class="fa fa-times"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="ibox-content">
+                    <p>
+                        可以通过添加<code>.dim</code>class来使用3D按钮.
+                    </p>
+                    <h3 class="font-bold">3D按钮</h3>
+
+                    <button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-money"></i>
+                    </button>
+                    <button class="btn btn-warning dim btn-large-dim" type="button"><i class="fa fa-warning"></i>
+                    </button>
+                    <button class="btn btn-danger  dim btn-large-dim" type="button"><i class="fa fa-heart"></i>
+                    </button>
+                    <button class="btn btn-primary  dim btn-large-dim" type="button"><i class="fa fa-dollar"></i>6</button>
+                    <button class="btn btn-info  dim btn-large-dim btn-outline" type="button"><i class="fa fa-ruble"></i>
+                    </button>
+                    <button class="btn btn-primary dim" type="button"><i class="fa fa-money"></i>
+                    </button>
+                    <button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i>
+                    </button>
+                    <button class="btn btn-primary dim" type="button"><i class="fa fa-check"></i>
+                    </button>
+                    <button class="btn btn-success  dim" type="button"><i class="fa fa-upload"></i>
+                    </button>
+                    <button class="btn btn-info  dim" type="button"><i class="fa fa-paste"></i>
+                    </button>
+                    <button class="btn btn-warning  dim" type="button"><i class="fa fa-warning"></i>
+                    </button>
+                    <button class="btn btn-default  dim " type="button"><i class="fa fa-star"></i>
+                    </button>
+                    <button class="btn btn-danger  dim " type="button"><i class="fa fa-heart"></i>
+                    </button>
+
+                    <button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-money"></i>
+                    </button>
+                    <button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i>
+                    </button>
+                    <button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-check"></i>
+                    </button>
+                    <button class="btn btn-outline btn-success  dim" type="button"><i class="fa fa-upload"></i>
+                    </button>
+                    <button class="btn btn-outline btn-info  dim" type="button"><i class="fa fa-paste"></i>
+                    </button>
+                    <button class="btn btn-outline btn-warning  dim" type="button"><i class="fa fa-warning"></i>
+                    </button>
+                    <button class="btn btn-outline btn-danger  dim " type="button"><i class="fa fa-heart"></i>
+                    </button>
+
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-12">
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="ibox float-e-margins">
+                        <div class="ibox-title">
+                            <h5>下拉按钮</h5>
+                            <div class="ibox-tools">
+                                <a class="collapse-link">
+                                    <i class="fa fa-chevron-up"></i>
+                                </a>
+                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                    <i class="fa fa-wrench"></i>
+                                </a>
+                                <ul class="dropdown-menu dropdown-user">
+                                    <li><a href="#">选项1</a>
+                                    </li>
+                                    <li><a href="#">选项2</a>
+                                    </li>
+                                </ul>
+                                <a class="close-link">
+                                    <i class="fa fa-times"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="ibox-content">
+                            <p>
+                                下拉按钮可使用任何颜色任何大小
+                            </p>
+
+                            <h3 class="font-bold">下拉按钮</h3>
+                            <div class="btn-group">
+                                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">操作 <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li><a href="#">置顶</a>
+                                    </li>
+                                    <li><a href="#" class="font-bold">修改</a>
+                                    </li>
+                                    <li><a href="#">禁用</a>
+                                    </li>
+                                    <li class="divider"></li>
+                                    <li><a href="#">删除</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="btn-group">
+                                <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">操作 <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li><a href="#">置顶</a>
+                                    </li>
+                                    <li><a href="#">修改</a>
+                                    </li>
+                                    <li><a href="#">禁用</a>
+                                    </li>
+                                    <li class="divider"></li>
+                                    <li><a href="#">删除</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="btn-group">
+                                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">操作 <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li><a href="#">置顶</a>
+                                    </li>
+                                    <li><a href="#" class="font-bold">修改</a>
+                                    </li>
+                                    <li><a href="#">禁用</a>
+                                    </li>
+                                    <li class="divider"></li>
+                                    <li><a href="#">删除</a>
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <br/>
+                            <div class="btn-group">
+                                <button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">操作 <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li><a href="#">置顶</a>
+                                    </li>
+                                    <li><a href="#" class="font-bold">修改</a>
+                                    </li>
+                                    <li><a href="#">禁用</a>
+                                    </li>
+                                    <li class="divider"></li>
+                                    <li><a href="#">删除</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="btn-group">
+                                <button data-toggle="dropdown" class="btn btn-warning btn-sm dropdown-toggle">操作 <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li><a href="#">置顶</a>
+                                    </li>
+                                    <li><a href="#" class="font-bold">修改</a>
+                                    </li>
+                                    <li><a href="#">禁用</a>
+                                    </li>
+                                    <li class="divider"></li>
+                                    <li><a href="#">删除</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="btn-group">
+                                <button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle">操作 <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li><a href="#">置顶</a>
+                                    </li>
+                                    <li><a href="#" class="font-bold">修改</a>
+                                    </li>
+                                    <li><a href="#">禁用</a>
+                                    </li>
+                                    <li class="divider"></li>
+                                    <li><a href="#">删除</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <br/>
+                            <div class="btn-group">
+                                <button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">操作 <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li><a href="#">置顶</a>
+                                    </li>
+                                    <li><a href="#" class="font-bold">修改</a>
+                                    </li>
+                                    <li><a href="#">禁用</a>
+                                    </li>
+                                    <li class="divider"></li>
+                                    <li><a href="#">删除</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="btn-group">
+                                <button data-toggle="dropdown" class="btn btn-warning btn-xs dropdown-toggle">操作 <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li><a href="#">置顶</a>
+                                    </li>
+                                    <li><a href="#" class="font-bold">修改</a>
+                                    </li>
+                                    <li><a href="#">禁用</a>
+                                    </li>
+                                    <li class="divider"></li>
+                                    <li><a href="#">删除</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="btn-group">
+                                <button data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">操作 <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li><a href="#">置顶</a>
+                                    </li>
+                                    <li><a href="#" class="font-bold">修改</a>
+                                    </li>
+                                    <li><a href="#">禁用</a>
+                                    </li>
+                                    <li class="divider"></li>
+                                    <li><a href="#">删除</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="ibox float-e-margins">
+                        <div class="ibox-title">
+                            <h5>按钮组</h5>
+                            <div class="ibox-tools">
+                                <a class="collapse-link">
+                                    <i class="fa fa-chevron-up"></i>
+                                </a>
+                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                    <i class="fa fa-wrench"></i>
+                                </a>
+                                <ul class="dropdown-menu dropdown-user">
+                                    <li><a href="#">选项1</a>
+                                    </li>
+                                    <li><a href="#">选项2</a>
+                                    </li>
+                                </ul>
+                                <a class="close-link">
+                                    <i class="fa fa-times"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="ibox-content">
+
+                            <h3 class="font-bold">按钮组</h3>
+                            <div class="btn-group">
+                                <button class="btn btn-white" type="button">左</button>
+                                <button class="btn btn-primary" type="button">中</button>
+                                <button class="btn btn-white" type="button">右</button>
+                            </div>
+                            <br/>
+                            <br/>
+                            <div class="btn-group">
+                                <button type="button" class="btn btn-white"><i class="fa fa-chevron-left"></i>
+                                </button>
+                                <button class="btn btn-white">1</button>
+                                <button class="btn btn-white  active">2</button>
+                                <button class="btn btn-white">3</button>
+                                <button class="btn btn-white">4</button>
+                                <button type="button" class="btn btn-white"><i class="fa fa-chevron-right"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="ibox float-e-margins">
+                <div class="ibox-title">
+                    <h5>图标按钮 </h5>
+                    <div class="ibox-tools">
+                        <a class="collapse-link">
+                            <i class="fa fa-chevron-up"></i>
+                        </a>
+                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                            <i class="fa fa-wrench"></i>
+                        </a>
+                        <ul class="dropdown-menu dropdown-user">
+                            <li><a href="#">选项1</a>
+                            </li>
+                            <li><a href="#">选项2</a>
+                            </li>
+                        </ul>
+                        <a class="close-link">
+                            <i class="fa fa-times"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="ibox-content">
+                    <p>
+                        任何按钮都可以在左侧或右侧添加图标
+                    </p>
+
+                    <h3 class="font-bold">图标按钮</h3>
+                    <p>
+                        <button class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;提交</button>
+                        <button class="btn btn-success " type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">上传</span>
+                        </button>
+                        <button class="btn btn-info " type="button"><i class="fa fa-paste"></i> 编辑</button>
+                        <button class="btn btn-warning " type="button"><i class="fa fa-warning"></i> <span class="bold">警告</span>
+                        </button>
+                        <button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;百度地图</button>
+
+                        <a class="btn btn-success">
+                            <i class="fa fa-weixin"> </i> 分享到微信
+                        </a>
+                        <a class="btn btn-success btn-outline">
+                            <i class="fa fa-qq"> </i> 使用QQ账号登录
+                        </a>
+                        <a class="btn btn-white btn-bitbucket">
+                            <i class="fa fa-user-md"></i>
+                        </a>
+                        <a class="btn btn-white btn-bitbucket">
+                            <i class="fa fa-group"></i>
+                        </a>
+                        <a class="btn btn-white btn-bitbucket">
+                            <i class="fa fa-wrench"></i>
+                        </a>
+                        <a class="btn btn-white btn-bitbucket">
+                            <i class="fa fa-exchange"></i>
+                        </a>
+                        <a class="btn btn-white btn-bitbucket">
+                            <i class="fa fa-check-circle-o"></i>
+                        </a>
+                        <a class="btn btn-white btn-bitbucket">
+                            <i class="fa fa-road"></i>
+                        </a>
+                        <a class="btn btn-white btn-bitbucket">
+                            <i class="fa fa-ambulance"></i>
+                        </a>
+                        <a class="btn btn-white btn-bitbucket">
+                            <i class="fa fa-star"></i> 收藏
+                        </a>
+                    </p>
+
+                    <h3 class="font-bold">按钮切换</h3>
+                    <button data-toggle="button" class="btn btn-primary btn-outline" type="button">按钮1</button>
+                    <button data-toggle="button" class="btn btn-primary" type="button">按钮2</button>
+                    <div data-toggle="buttons-checkbox" class="btn-group">
+                        <button class="btn btn-primary active" type="button"><i class="fa fa-bold"></i> 粗体</button>
+                        <button class="btn btn-primary" type="button"><i class="fa fa-underline"></i> 下划线</button>
+                        <button class="btn btn-primary active" type="button"><i class="fa fa-italic"></i> 斜体</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-12">
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="ibox float-e-margins">
+                        <div class="ibox-title">
+                            <h5>圆形图标按钮</h5>
+                            <div class="ibox-tools">
+                                <a class="collapse-link">
+                                    <i class="fa fa-chevron-up"></i>
+                                </a>
+                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                    <i class="fa fa-wrench"></i>
+                                </a>
+                                <ul class="dropdown-menu dropdown-user">
+                                    <li><a href="#">选项1</a>
+                                    </li>
+                                    <li><a href="#">选项2</a>
+                                    </li>
+                                </ul>
+                                <a class="close-link">
+                                    <i class="fa fa-times"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="ibox-content">
+                            <p>
+                                要使用圆形图标按钮，可以通过添加class为<code>.btn-circle</code>实现
+                            </p>
+
+                            <h3 class="font-bold">圆形按钮</h3>
+                            <br/>
+                            <button class="btn btn-default btn-circle" type="button"><i class="fa fa-check"></i>
+                            </button>
+                            <button class="btn btn-primary btn-circle" type="button"><i class="fa fa-list"></i>
+                            </button>
+                            <button class="btn btn-success btn-circle" type="button"><i class="fa fa-link"></i>
+                            </button>
+                            <button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i>
+                            </button>
+                            <button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i>
+                            </button>
+                            <button class="btn btn-danger btn-circle" type="button"><i class="fa fa-heart"></i>
+                            </button>
+                            <button class="btn btn-danger btn-circle btn-outline" type="button"><i class="fa fa-heart"></i>
+                            </button>
+                            <br/>
+                            <br/>
+                            <button class="btn btn-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
+                            </button>
+                            <button class="btn btn-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i>
+                            </button>
+                            <button class="btn btn-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i>
+                            </button>
+                            <button class="btn btn-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
+                            </button>
+                            <button class="btn btn-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i>
+                            </button>
+                            <button class="btn btn-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i>
+                            </button>
+                            <button class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i>
+                            </button>
+
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="ibox float-e-margins">
+                        <div class="ibox-title">
+                            <h5>圆角按钮</h5>
+                            <div class="ibox-tools">
+                                <a class="collapse-link">
+                                    <i class="fa fa-chevron-up"></i>
+                                </a>
+                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                    <i class="fa fa-wrench"></i>
+                                </a>
+                                <ul class="dropdown-menu dropdown-user">
+                                    <li><a href="#">选项1</a>
+                                    </li>
+                                    <li><a href="#">选项2</a>
+                                    </li>
+                                </ul>
+                                <a class="close-link">
+                                    <i class="fa fa-times"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="ibox-content">
+                            <p>
+                                可以通过添加class的值微<code>.btn-rounded</code>来实现圆角按钮
+                            </p>
+
+                            <h3 class="font-bold">按钮组</h3>
+                            <p>
+                                <a class="btn btn-default btn-rounded" href="#">默认</a>
+                                <a class="btn btn-primary btn-rounded" href="#">主要</a>
+                                <a class="btn btn-success btn-rounded" href="#">成果</a>
+                                <a class="btn btn-info btn-rounded" href="#">信息</a>
+                                <a class="btn btn-warning btn-rounded" href="#">警告</a>
+                                <a class="btn btn-danger btn-rounded" href="#">危险</a>
+                                <a class="btn btn-danger btn-rounded btn-outline" href="#">危险</a>
+                                <br/>
+                                <br/>
+                                <a class="btn btn-primary btn-rounded btn-block" href="#"><i class="fa fa-info-circle"></i> 圆角块级带图标按钮</a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/cards.html

@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('卡片列表')" />
+</head>
+<body class="gray-bg">
+    <div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-4">
+                <div class="ibox">
+                    <div class="ibox-title">
+                        <span class="label label-primary pull-right">NEW</span>
+                        <h5>IT-01 - 设计部</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <h4>部门简介</h4>
+                        <p>
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
+                        </p>
+                        <div>
+                            <span>当前项目进度：</span>
+                            <div class="stat-percent">48%</div>
+                            <div class="progress progress-mini">
+                                <div style="width: 48%;" class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="row  m-t-sm">
+                            <div class="col-sm-4">
+                                <div class="font-bold">项目</div>
+                                12
+                            </div>
+                            <div class="col-sm-4">
+                                <div class="font-bold">周期</div>
+                                4个月
+                            </div>
+                            <div class="col-sm-4 text-right">
+                                <div class="font-bold">预算</div>
+                                &yen;200,913 <i class="fa fa-level-up text-navy"></i>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="ibox">
+                    <div class="ibox-title">
+                        <h5>IT-04 - 市场部</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <h4>部门简介</h4>
+                        <p>
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
+                        </p>
+                        <div>
+                            <span>当前项目进度：</span>
+                            <div class="stat-percent">32%</div>
+                            <div class="progress progress-mini">
+                                <div style="width: 32%;" class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="row  m-t-sm">
+                            <div class="col-sm-4">
+                                <div class="font-bold">项目</div>
+                                24
+                            </div>
+                            <div class="col-sm-4">
+                                <div class="font-bold">周期</div>
+                                3个月
+                            </div>
+                            <div class="col-sm-4 text-right">
+                                <div class="font-bold">预算</div>
+                                &yen;190,325 <i class="fa fa-level-up text-navy"></i>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="ibox">
+                    <div class="ibox-title">
+                        <h5>IT-07 - 财务部</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <h4>部门简介</h4>
+                        <p>
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
+                        </p>
+                        <div>
+                            <span>当前项目进度：</span>
+                            <div class="stat-percent">73%</div>
+                            <div class="progress progress-mini">
+                                <div style="width: 73%;" class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="row  m-t-sm">
+                            <div class="col-sm-4">
+                                <div class="font-bold">项目</div>
+                                11
+                            </div>
+                            <div class="col-sm-4">
+                                <div class="font-bold">周期</div>
+                                6个月
+                            </div>
+                            <div class="col-sm-4 text-right">
+                                <div class="font-bold">预算</div>
+                                &yen;560,105 <i class="fa fa-level-up text-navy"></i>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-4">
+                <div class="ibox">
+                    <div class="ibox-title">
+                        <h5>IT-02 - 开发部</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <h4>部门简介</h4>
+                        <p>
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
+                        </p>
+                        <div>
+                            <span>当前项目进度：</span>
+                            <div class="stat-percent">61%</div>
+                            <div class="progress progress-mini">
+                                <div style="width: 61%;" class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="row  m-t-sm">
+                            <div class="col-sm-4">
+                                <div class="font-bold">项目</div>
+                                43
+                            </div>
+                            <div class="col-sm-4">
+                                <div class="font-bold">周期</div>
+                                1个月
+                            </div>
+                            <div class="col-sm-4 text-right">
+                                <div class="font-bold">预算</div>
+                                &yen;705,913 <i class="fa fa-level-up text-navy"></i>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="ibox">
+                    <div class="ibox-title">
+                        <span class="label label-warning pull-right">截止</span>
+                        <h5>IT-05 - 管理层</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <h4>部门简介</h4>
+                        <p>
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
+                        </p>
+                        <div>
+                            <span>当前项目进度：</span>
+                            <div class="stat-percent">14%</div>
+                            <div class="progress progress-mini">
+                                <div style="width: 14%;" class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="row  m-t-sm">
+                            <div class="col-sm-4">
+                                <div class="font-bold">项目</div>
+                                8
+                            </div>
+                            <div class="col-sm-4">
+                                <div class="font-bold">周期</div>
+                                7个月
+                            </div>
+                            <div class="col-sm-4 text-right">
+                                <div class="font-bold">预算</div>
+                                &yen;40,200 <i class="fa fa-level-up text-navy"></i>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="ibox">
+                    <div class="ibox-title">
+                        <h5>IT-08 - 销售部</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <h4>部门简介</h4>
+                        <p>
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
+                        </p>
+                        <div>
+                            <span>当前项目进度：</span>
+                            <div class="stat-percent">25%</div>
+                            <div class="progress progress-mini">
+                                <div style="width: 25%;" class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="row  m-t-sm">
+                            <div class="col-sm-4">
+                                <div class="font-bold">项目</div>
+                                25
+                            </div>
+                            <div class="col-sm-4">
+                                <div class="font-bold">周期</div>
+                                4个月
+                            </div>
+                            <div class="col-sm-4 text-right">
+                                <div class="font-bold">预算</div>
+                                &yen;140,105 <i class="fa fa-level-up text-navy"></i>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-4">
+                <div class="ibox">
+                    <div class="ibox-title">
+
+                        <h5>IT-02 - 销售部</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <h4>部门简介</h4>
+                        <p>
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
+                        </p>
+                        <div>
+                            <span>当前项目进度：</span>
+                            <div class="stat-percent">82%</div>
+                            <div class="progress progress-mini">
+                                <div style="width: 82%;" class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="row  m-t-sm">
+                            <div class="col-sm-4">
+                                <div class="font-bold">项目</div>
+                                68
+                            </div>
+                            <div class="col-sm-4">
+                                <div class="font-bold">周期</div>
+                                2个月
+                            </div>
+                            <div class="col-sm-4 text-right">
+                                <div class="font-bold">预算</div>
+                                &yen;701,400 <i class="fa fa-level-up text-navy"></i>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="ibox">
+                    <div class="ibox-title">
+                        <h5>IT-06 - 销售部</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <h4>部门简介</h4>
+                        <p>
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
+                        </p>
+                        <div>
+                            <span>当前项目进度：</span>
+                            <div class="stat-percent">26%</div>
+                            <div class="progress progress-mini">
+                                <div style="width: 26%;" class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="row  m-t-sm">
+                            <div class="col-sm-4">
+                                <div class="font-bold">项目</div>
+                                16
+                            </div>
+                            <div class="col-sm-4">
+                                <div class="font-bold">周期</div>
+                                8个月
+                            </div>
+                            <div class="col-sm-4 text-right">
+                                <div class="font-bold">预算</div>
+                                &yen;160,100 <i class="fa fa-level-up text-navy"></i>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="ibox">
+                    <div class="ibox-title">
+                        <h5>IT-09 - 销售部</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <h4>部门简介</h4>
+                        <p>
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
+                        </p>
+                        <div>
+                            <span>当前项目进度：</span>
+                            <div class="stat-percent">18%</div>
+                            <div class="progress progress-mini">
+                                <div style="width: 18%;" class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="row  m-t-sm">
+                            <div class="col-sm-4">
+                                <div class="font-bold">项目</div>
+                                53
+                            </div>
+                            <div class="col-sm-4">
+                                <div class="font-bold">周期</div>
+                                9个月
+                            </div>
+                            <div class="col-sm-4 text-right">
+                                <div class="font-bold">预算</div>
+                                &yen;60,140 <i class="fa fa-level-up text-navy"></i>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/cxselect.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('多级联动下拉')" />
+</head>
+<body class="gray-bg">
+      <div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>多级联动下拉<small>https://github.com/ciaoca/cxSelect</small></h5>
+                    </div>  
+                    <div class="ibox-content">
+                        <p>简单联动示例。</p>
+                        <div id="element" class="row">
+                            <div class="col-sm-2">
+	                            <select class="type form-control m-b" data-first-title="请选择">
+				                  <option value="">请选择</option>
+				                </select>
+			                </div>
+			                <div class="col-sm-2">
+				                <select class="router form-control m-b" data-first-title="请选择">
+				                  <option value="">请选择</option>
+				                </select>
+			                </div>
+                        </div>
+                        <hr>
+                        
+                        <p>国内省市区联动。</p>
+                        <div id="element1" class="row">
+                            <div class="col-sm-2">
+	                            <select class="province form-control m-b" data-first-title="选择省">
+				                  <option value="">请选择</option>
+				                  <option value="广东省" selected>广东省</option>
+				                </select>
+			                </div>
+			                <div class="col-sm-2">
+				                <select class="city form-control m-b" data-first-title="选择市">
+				                  <option value="">请选择</option>
+				                  <option value="深圳市" selected>深圳市</option>
+				                </select>
+			                </div>
+			                <div class="col-sm-2">
+				                <select class="area form-control m-b" data-first-title="选择地区">
+				                  <option value="">请选择</option>
+				                  <option value="南山区" selected>南山区</option>
+				                </select>
+			                </div>
+                        </div>
+                        <hr>
+                        
+                        <p>自定义选项。</p>
+                        <div id="element2" class="row">
+                            <div class="col-sm-2">
+	                            <select class="first form-control m-b"></select>
+			                </div>
+			                <div class="col-sm-2">
+				                <select class="second form-control m-b"></select>
+			                </div>
+			                <div class="col-sm-2">
+				                <select class="third form-control m-b"></select>
+			                </div>
+			                <div class="col-sm-2">
+				                <select class="fourth form-control m-b"></select>
+			                </div>
+			                <div class="col-sm-2">
+			                    <select class="fifth form-control m-b"></select>
+			                </div>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <label class="font-noraml">相关参数详细信息</label>
+                            <div><a href="#" target="_blank">http://www.sooka.com</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: jquery-cxselect-js" />
+    <script th:inline="javascript">
+        // 直接返回获取
+   		var data = [[${data}]];
+    	$('#element').cxSelect({
+    	  selects: ['type', 'router'],
+    	  jsonValue: 'v',
+    	  data: data
+    	});
+    	
+    	// 通过默认url获取
+    	var urlChina = 'cityData';
+    	$.cxSelect.defaults.url = urlChina;
+    	$('#element1').cxSelect({
+   		  selects: ['province', 'city', 'area'],
+   		  nodata: 'none'
+   		});
+    	
+    	// 固定值获取
+    	$('#element2').cxSelect({
+   		  selects: ['first', 'second', 'third', 'fourth', 'fifth'],
+   		  required: true,
+   		  jsonValue: 'v',
+   		  data: [
+   			{'v': '1', 'n': '第一级 >', 's': [
+   			  {'v': '2', 'n': '第二级 >', 's': [
+   				{'v': '3', 'n': '第三级 >', 's': [
+   				  {'v': '4', 'n': '第四级 >', 's': [
+   					{'v': '5', 'n': '第五级 >', 's': [
+   					  {'v': '6', 'n': '第六级 >'}
+   					]}
+   				  ]}
+   				]}
+   			  ]}
+   			]},
+   			{'v': 'test number', 'n': '测试数字', 's': [
+   			  {'v': 'text', 'n': '文本类型', 's': [
+   				{'v': '4', 'n': '4'},
+   				{'v': '5', 'n': '5'},
+   				{'v': '6', 'n': '6'},
+   				{'v': '7', 'n': '7'},
+   				{'v': '8', 'n': '8'},
+   				{'v': '9', 'n': '9'},
+   				{'v': '10', 'n': '10'}
+   			  ]},
+   			  {'v': 'number', 'n': '数值类型', 's': [
+   				{'v': 11, 'n': 11},
+   				{'v': 12, 'n': 12},
+   				{'v': 13, 'n': 13},
+   				{'v': 14, 'n': 14},
+   				{'v': 15, 'n': 15},
+   				{'v': 16, 'n': 16},
+   				{'v': 17, 'n': 17}
+   			  ]}
+   			]},
+   			{'v': 'test boolean','n': '测试 Boolean 类型', 's': [
+   			  {'v': true ,'n': true},
+   			  {'v': false ,'n': false}
+   			]},
+   			{v: 'test quotes', n: '测试属性不加引号', s: [
+   			  {v: 'quotes', n: '引号'}
+   			]},
+   			{v: 'test other', n: '测试奇怪的值', s: [
+   			  {v: '[]', n: '数组（空）'},
+   			  {v: [1,2,3], n: '数组（数值）'},
+   			  {v: ['a','b','c'], n: '数组（文字）'},
+   			  {v: new Date(), n: '日期'},
+   			  {v: new RegExp('\\d+'), n: '正则对象'},
+   			  {v: /\d+/, n: '正则直接量'},
+   			  {v: {}, n: '对象'},
+   			  {v: document.getElementById('custom_data'), n: 'DOM'},
+   			  {v: null, n: 'Null'},
+   			  {n: '未设置 value'}
+   			]},
+   			{'v': '' , 'n': '无子级'}
+   		  ]
+   		});
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/datetime.html

@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('日期和时间')" />
+	<th:block th:include="include :: datetimepicker-css" />
+</head>
+<body class="gray-bg">
+      <div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>日期选择器 <small>https://github.com/smalot/bootstrap-datetimepicker</small></h5>
+                    </div>
+                    <div class="ibox-content">
+                        <div class="form-group">
+                            <label class="font-noraml">简单示例</label>
+                            <div class="input-group date">
+                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+                                <input type="text" class="form-control" id="datetimepicker-demo-1" placeholder="yyyy-MM-dd HH:mm">
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">显示年月日</label>
+                            <div class="input-group date">
+                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+                                <input type="text" class="form-control" id="datetimepicker-demo-2" placeholder="yyyy-MM-dd">
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">显示年月日时分秒</label>
+                            <div class="input-group date">
+                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+                                <input type="text" class="form-control" id="datetimepicker-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+			                <label class="font-noraml">带清空的按钮</label>
+			                <div class="input-group date form_date">
+			                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+			                    <input class="form-control" size="16" type="text" readonly>
+			                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
+			                </div>
+			            </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">日期范围选择</label>
+                            <div class="input-daterange input-group">
+                                <input type="text" class="input-sm form-control" id="datetimepicker-startTime" placeholder="yyyy-MM-dd"/>
+                                <span class="input-group-addon">到</span>
+                                <input type="text" class="input-sm form-control" id="datetimepicker-endTime" placeholder="yyyy-MM-dd"/>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <label class="font-noraml">相关参数详细信息</label>
+                            <div><a href="http://www.sooka.com" target="_blank">http://www.sooka.com</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>日期选择器 <small>https://github.com/sentsin/laydate</small></h5>
+                    </div>
+                    <div class="ibox-content">
+                        <div class="form-group">
+                            <label class="font-noraml">简单示例</label>
+                            <div class="input-group date">
+                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+                                <input type="text" class="form-control" id="laydate-demo-1" placeholder="yyyy-MM-dd">
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">显示年月日</label>
+                            <div class="input-group date">
+                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+                                <input type="text" class="form-control" id="laydate-demo-2" placeholder="yyyy-MM-dd">
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">显示年月日时分秒</label>
+                            <div class="input-group date">
+                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+                                <input type="text" class="form-control" id="laydate-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">单框范围选择</label>
+                            <div class="input-group date">
+                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+                                <input type="text" class="form-control" id="laydate-demo-4" placeholder="yyyy-MM-dd - yyyy-MM-dd">
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">日期范围选择</label>
+                            <div class="input-daterange input-group">
+                                <input type="text" class="input-sm form-control" id="laydate-startTime" placeholder="yyyy-MM-dd"/>
+                                <span class="input-group-addon">到</span>
+                                <input type="text" class="input-sm form-control" id="laydate-endTime" placeholder="yyyy-MM-dd"/>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <label class="font-noraml">相关参数详细信息</label>
+                            <div><a href="http://www.sooka.com" target="_blank">http://www.sooka.com</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: datetimepicker-js" />
+    <script type="text/javascript">
+        $(function(){
+        	<!-- datetimepicker示例 -->
+        	$("#datetimepicker-demo-1").datetimepicker();
+        	
+        	$("#datetimepicker-demo-2").datetimepicker({
+       		    format: "yyyy-mm-dd",
+       		    minView: "month",
+       		    autoclose: true
+       		});
+        	
+        	$("#datetimepicker-demo-3").datetimepicker({
+       		    format: "yyyy-mm-dd hh:ii:ss",
+       		    autoclose: true
+       		});
+        	
+        	$('.form_date').datetimepicker({
+        		format: "yyyy-mm-dd",
+       		    minView: "month",
+       		    autoclose: true
+            });
+        	
+        	$("#datetimepicker-startTime").datetimepicker({
+        		format: 'yyyy-mm-dd',
+        		minView: "month",
+        	    todayBtn:  true,
+        	    autoclose: true,
+        		endDate : new Date(),
+        	}).on('changeDate', function(event) {
+        		event.preventDefault();
+        		event.stopPropagation();
+        		var startTime = event.date;
+        		$('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
+        	});
+        	
+        	$("#datetimepicker-endTime").datetimepicker({
+        		format: 'yyyy-mm-dd',
+        		minView: "month",
+        		todayBtn:  true,
+        		autoclose: true,
+        		endDate : new Date(),
+        	}).on('changeDate', function(event) {
+        		event.preventDefault();
+        		event.stopPropagation();
+        		var endTime = event.date;
+        		$("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
+        	});
+        	
+        	<!-- laydate示例 -->
+        	layui.use('laydate', function(){
+       		  var laydate = layui.laydate;
+       		  
+       		  laydate.render({
+       		    elem: '#laydate-demo-1'
+       		  });
+       		  
+       		  laydate.render({ 
+       		    elem: '#laydate-demo-2',
+       		    type: 'date'
+       		  });
+       		  
+       		  laydate.render({ 
+       		    elem: '#laydate-demo-3',
+       		    type: 'datetime',
+       		    trigger: 'click'
+       		  });
+       		  
+       		  laydate.render({
+       		    elem: '#laydate-demo-4',
+       		    range: true
+       		  });
+       		  
+       		  var startDate = laydate.render({
+		        elem: '#laydate-startTime',
+		        max: $('#laydate-endTime').val(),
+		        theme: 'molv',
+		        trigger: 'click',
+		        done: function(value, date) {
+		            // 结束时间大于开始时间
+		            if (value !== '') {
+		                endDate.config.min.year = date.year;
+		                endDate.config.min.month = date.month - 1;
+		                endDate.config.min.date = date.date;
+		            } else {
+		                endDate.config.min.year = '';
+		                endDate.config.min.month = '';
+		                endDate.config.min.date = '';
+		            }
+		        }
+		      });
+       		
+		      var endDate = laydate.render({
+		        elem: '#laydate-endTime',
+		        min: $('#laydate-startTime').val(),
+		        theme: 'molv',
+		        trigger: 'click',
+		        done: function(value, date) {
+		            // 开始时间小于结束时间
+		            if (value !== '') {
+		                startDate.config.max.year = date.year;
+		                startDate.config.max.month = date.month - 1;
+		                startDate.config.max.date = date.date;
+		            } else {
+		                startDate.config.max.year = '';
+		                startDate.config.max.month = '';
+		                startDate.config.max.date = '';
+		            }
+		        }
+		      });
+       	   });
+        });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/duallistbox.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('左右互选组件')" />
+	<th:block th:include="include :: bootstrap-duallistbox-css" />
+</head>
+<body class="gray-bg">
+	<div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-lg-12">
+                <div class="ibox">
+                    <div class="ibox-title">
+                        <h5>双重列表框 <small>https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox</small></h5>
+                    </div>  
+                    <div class="ibox-content">
+                        <p>
+                            Bootstrap Dual Listbox是针对Twitter Bootstrap进行了优化的响应式双列表框。它适用于所有现代浏览器和触摸设备。
+                        </p>
+
+                        <form id="form" action="#" class="wizard-big">
+                            <select class="form-control dual_select" multiple>
+                                <option value="1">若依1</option>
+                                <option value="2">若依2</option>
+                                <option value="3">若依3</option>
+                                <option selected value="4">若依4</option>
+                                <option selected value="5">若依5</option>
+                                <option value="6">若依6</option>
+                                <option value="7">若依7</option>
+                                <option value="8">若依8</option>
+                                <option value="9">若依9</option>
+                                <option value="10">若依10</option>
+                                <option value="11">若依11</option>
+                                <option value="12">若依12</option>
+                            </select>
+                        </form>
+                        <hr>
+                        <div class="form-group">
+                            <label class="font-noraml">相关参数详细信息</label>
+                            <div><a href="http://www.sooka.com/document/zjwd.html#bootstrap-duallistbox" target="_blank">http://www.sooka.com/document/zjwd.html#bootstrap-duallistbox</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: bootstrap-duallistbox-js" />
+    <script type="text/javascript">
+	    $('.dual_select').bootstrapDualListbox({
+	    	nonSelectedListLabel: '未有用户',
+            selectedListLabel: '已有用户',
+            preserveSelectionOnMove: 'moved',
+            moveOnSelect: false,           // 出现一个剪头，表示可以一次选择一个
+            filterTextClear: '展示所有',
+            moveSelectedLabel: "添加",
+            moveAllLabel: '添加所有',
+            removeSelectedLabel: "移除",
+            removeAllLabel: '移除所有',
+            infoText: '共{0}个',
+            showFilterInputs: false,       // 是否带搜索
+	        selectorMinimalHeight: 160
+	    });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/grid.html

@@ -0,0 +1,432 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('栅格')" />
+</head>
+<body class="gray-bg">
+    <div class="wrapper wrapper-content">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>栅格设置</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+
+                        <p>通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。</p>
+                        <div class="table-responsive">
+                            <table class="table table-bordered table-striped">
+                                <thead>
+                                    <tr>
+                                        <th></th>
+                                        <th>
+                                            超小屏幕
+                                            <small>手机 (&lt;768px)</small>
+                                        </th>
+                                        <th>
+                                            小屏幕
+                                            <small>平板 (≥768px)</small>
+                                        </th>
+                                        <th>
+                                            中等屏幕
+                                            <small>桌面显示器 (≥992px)</small>
+                                        </th>
+                                        <th>
+                                            大屏幕
+                                            <small>大桌面显示器 (≥1200px)</small>
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <th class="text-nowrap">栅格系统行为</th>
+                                        <td>总是水平排列</td>
+                                        <td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
+                                    </tr>
+                                    <tr>
+                                        <th class="text-nowrap"><code>.container</code> 最大宽度</th>
+                                        <td>None （自动）</td>
+                                        <td>750px</td>
+                                        <td>970px</td>
+                                        <td>1170px</td>
+                                    </tr>
+                                    <tr>
+                                        <th class="text-nowrap">类前缀</th>
+                                        <td><code>.col-xs-</code>
+                                        </td>
+                                        <td><code>.col-sm-</code>
+                                        </td>
+                                        <td><code>.col-md-</code>
+                                        </td>
+                                        <td><code>.col-lg-</code>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <th class="text-nowrap">列（column）数</th>
+                                        <td colspan="4">12</td>
+                                    </tr>
+                                    <tr>
+                                        <th class="text-nowrap">最大列（column）宽</th>
+                                        <td class="text-muted">自动</td>
+                                        <td>~62px</td>
+                                        <td>~81px</td>
+                                        <td>~97px</td>
+                                    </tr>
+                                    <tr>
+                                        <th class="text-nowrap">槽（gutter）宽</th>
+                                        <td colspan="4">30px （每列左右均有 15px）</td>
+                                    </tr>
+                                    <tr>
+                                        <th class="text-nowrap">可嵌套</th>
+                                        <td colspan="4">是</td>
+                                    </tr>
+                                    <tr>
+                                        <th class="text-nowrap">偏移（Offsets）</th>
+                                        <td colspan="4">是</td>
+                                    </tr>
+                                    <tr>
+                                        <th class="text-nowrap">列排序</th>
+                                        <td colspan="4">是</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+
+
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>从堆叠到水平排列</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+
+                        <p>使用单一的一组 <code>.col-md-*</code> 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” <code>.row</code> 内。</p>
+                        <div class="row show-grid">
+                            <div class="col-md-1">.col-md-1</div>
+                            <div class="col-md-1">.col-md-1</div>
+                            <div class="col-md-1">.col-md-1</div>
+                            <div class="col-md-1">.col-md-1</div>
+                            <div class="col-md-1">.col-md-1</div>
+                            <div class="col-md-1">.col-md-1</div>
+                            <div class="col-md-1">.col-md-1</div>
+                            <div class="col-md-1">.col-md-1</div>
+                            <div class="col-md-1">.col-md-1</div>
+                            <div class="col-md-1">.col-md-1</div>
+                            <div class="col-md-1">.col-md-1</div>
+                            <div class="col-md-1">.col-md-1</div>
+                        </div>
+                        <div class="row show-grid">
+                            <div class="col-md-8">.col-md-8</div>
+                            <div class="col-md-4">.col-md-4</div>
+                        </div>
+                        <div class="row show-grid">
+                            <div class="col-md-4">.col-md-4</div>
+                            <div class="col-md-4">.col-md-4</div>
+                            <div class="col-md-4">.col-md-4</div>
+                        </div>
+                        <div class="row show-grid">
+                            <div class="col-md-6">.col-md-6</div>
+                            <div class="col-md-6">.col-md-6</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>移动设备和桌面屏幕</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+
+                        <p>是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 <code>.col-xs-*</code> 和 <code>.col-md-*</code>。请看下面的实例，研究一下这些是如何工作的。</p>
+                        <div class="row show-grid">
+                            <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+                            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+                        </div>
+                        <div class="row show-grid">
+                            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+                            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+                            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+                        </div>
+                        <div class="row show-grid">
+                            <div class="col-xs-6">.col-xs-6</div>
+                            <div class="col-xs-6">.col-xs-6</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>手机、平板、桌面</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+
+                        <p>在上面案例的基础上，通过使用针对平板设备的 <code>.col-sm-*</code> 类，我们来创建更加动态和强大的布局吧。</p>
+                        <div class="row show-grid">
+                            <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
+                            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+                        </div>
+                        <div class="row show-grid">
+                            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+                            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+                            <!-- Optional: clear the XS cols if their content doesn't match in height -->
+                            <div class="clearfix visible-xs"></div>
+                            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>多余的列（column）将另起一行排列</h5>
+
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <p>在等宽的4网格中，网格不等高会碰到问题，为了解决这个问题，可使用<code>.clearfix</code>。<a href="#responsive-utilities">响应实用工具类</a>
+                        </p>
+                        <div class="row show-grid">
+                            <div class="col-xs-6 col-sm-3">
+                                .col-xs-6 .col-sm-3
+                                <br>调整窗口大小或者在手机上查看本示例
+                            </div>
+                            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+
+                            <!-- Add the extra clearfix for only the required viewport -->
+                            <div class="clearfix visible-xs"></div>
+
+                            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+                            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>列偏移</h5>
+
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+
+                        <p>使用 <code>.col-md-offset-*</code> 类可以将列向右侧偏移。这些类实际是通过使用 <code>*</code> 选择器为当前元素增加了左侧的边距（margin）。例如，<code>.col-md-offset-4</code> 类将 <code>.col-md-4</code> 元素向右侧偏移了4个列（column）的宽度。</p>
+                        <div class="row show-grid">
+                            <div class="col-md-4">.col-md-4</div>
+                            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+                        </div>
+                        <div class="row show-grid">
+                            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+                            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+                        </div>
+                        <div class="row show-grid">
+                            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>嵌套列</h5>
+
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <p>为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 <code>.row</code> 元素和一系列 <code>.col-sm-*</code> 元素到已经存在的 <code>.col-sm-*</code> 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。</p>
+                        <div class="row show-grid">
+                            <div class="col-md-9">
+                                第一级： .col-md-9
+                                <div class="row show-grid">
+                                    <div class="col-md-6">
+                                        第二级： .col-md-6
+                                    </div>
+                                    <div class="col-md-6">
+                                        第二级： .col-md-6
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>列排序</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <p>通过使用 <code>.col-md-push-*</code> 和 <code>.col-md-pull-*</code> 类就可以很容易的改变列（column）的顺序。</p>
+                        <div class="row show-grid">
+                            <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+                            <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/jasny.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('功能扩展')" />
+	<th:block th:include="include :: jasny-bootstrap-css" />
+</head>
+<body class="gray-bg">
+<div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>文件上传控件 <small>https://github.com/jasny/bootstrap</small></h5>
+                    </div>
+                    <div class="ibox-content">
+                    	<div class="form-group">
+                            <label class="font-noraml">输入组示例</label>
+                            
+	                        <div class="fileinput fileinput-new input-group" data-provides="fileinput">
+	                            <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
+	                            <span class="input-group-addon btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file"></span>
+	                            <a href="#" class="input-group-addon btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
+	                        </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">按钮示例</label>
+                            <br/>
+	                        <div class="fileinput fileinput-new" data-provides="fileinput">
+	                            <span class="btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file" name="..."></span>
+	                            <span class="fileinput-filename"></span>
+	                            <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
+	                        </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">图片上传示例</label>
+                            <br/>
+	                        <div class="fileinput fileinput-new" data-provides="fileinput">
+					            <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
+					            <div>
+					                <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
+					                <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
+					            </div>
+					        </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">图片预览示例</label>
+                            <br/>
+	                        <div class="fileinput fileinput-new" data-provides="fileinput">
+						        <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
+						          <img th:src="@{/img/profile.jpg}">
+						        </div>
+						        <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
+						        <div>
+						          <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
+						          <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
+						        </div>
+						      </div>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <label class="font-noraml">相关参数详细信息</label>
+                            <div><a href="http://www.sooka.com/document/zjwd.html#jasny-bootstrap" target="_blank">http://www.sooka.com/document/zjwd.html#jasny-bootstrap</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>固定格式文本 <small>https://github.com/jasny/bootstrap</small></h5>
+                    </div>
+                    <div class="ibox-content">
+                        <div class="form-group">
+                            <label class="font-noraml">手机号码格式</label>
+                             <input type="text" class="form-control" data-mask="999-9999-9999" placeholder="请输入手机号码">
+                             <span class="help-block">158-8888-88888</span>
+                       	 </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">电话号码格式</label>
+                            <input type="text" class="form-control" data-mask="9999-9999999" placeholder="请输入电话号码">
+                            <span class="help-block">0730-8888888</span>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">日期格式</label>
+                            <input type="text" class="form-control" data-mask="9999-99-99" placeholder="请输入日期格式">
+                            <span class="help-block">yyyy-mm-dd</span>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">IPV4格式</label>
+                            <input type="text" class="form-control" data-mask="999.999.999.999" placeholder="请输入IP地址">
+                            <span class="help-block">192.168.100.200</span>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">税务代码格式</label>
+                            <input type="text" class="form-control" data-mask="99-9999999" placeholder="请输入税务代码">
+                            <span class="help-block">99-9999999</span>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <label class="font-noraml">相关参数详细信息</label>
+                            <div><a href="http://www.sooka.com/document/zjwd.html#jasny-bootstrap" target="_blank">http://www.sooka.com/document/zjwd.html#jasny-bootstrap</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: jasny-bootstrap-js" />
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/select.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('下拉框')" />
+	<th:block th:include="include :: select2-css" />
+	<th:block th:include="include :: bootstrap-select-css" />
+</head>
+<body class="gray-bg">
+     <form>
+      <div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>下拉框 <small>https://github.com/select2/select2</small></h5>
+                    </div>  
+                    <div class="ibox-content">
+                        <div class="form-group">
+                            <label class="font-noraml">单选</label>
+                            <select class="form-control">
+                            	<option value="">--请选择开发语言--</option>
+                            	<option value="Java">Java</option>
+                            	<option value="PHP">PHP</option>
+                            	<option value=".NET">.NET</option>
+                            </select>
+                        </div>
+                        
+                        <div class="form-group">
+                             <label class="font-noraml">分组单选</label>
+                             <select class="form-control">
+                               <optgroup label="--请选择开发语言--">
+								 <option value="Java">Java</option>
+                                 <option value="PHP">PHP</option>
+                                 <option value=".NET">.NET</option>
+							   </optgroup>
+							   <optgroup label="--请选择数据库--">
+							     <option value="Oracle">Oracle</option>
+                                 <option value="Mysql">Mysql</option>
+                                 <option value="Sysbase">Sysbase</option>
+						       </optgroup>
+                             </select>
+                        </div>
+						  
+                        <div class="form-group">
+                            <label class="font-noraml">多选</label>
+                            <select class="form-control select2-multiple" multiple>
+                            	<option value="">请选择开发语言</option>
+                            	<option value="Java">Java</option>
+                            	<option value="PHP">PHP</option>
+                            	<option value=".NET">.NET</option>
+                            </select>
+                        </div>
+                        
+                        <div class="form-group">
+                             <label class="font-noraml">分组多选</label>
+                             <select class="form-control select2-multiple" multiple>
+                               <optgroup label="--请选择开发语言--">
+								 <option value="Java">Java</option>
+                                 <option value="PHP">PHP</option>
+                                 <option value=".NET">.NET</option>
+							   </optgroup>
+							   <optgroup label="--请选择数据库--">
+							     <option value="Oracle">Oracle</option>
+                                 <option value="Mysql">Mysql</option>
+                                 <option value="Sysbase">Sysbase</option>
+						       </optgroup>
+                             </select>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <label class="font-noraml">相关参数详细信息</label>
+                            <div><a href="#" target="_blank">http://www.sooka.com</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>下拉框 <small>https://github.com/snapappointments/bootstrap-select</small></h5>
+                    </div>
+                     <div class="ibox-content">
+                        <div class="form-group">
+                            <label class="font-noraml">单选</label>
+                            <select class="form-control noselect2 selectpicker">
+                            	<option value="">--请选择开发语言--</option>
+                            	<option value="Java">Java</option>
+                            	<option value="PHP">PHP</option>
+                            	<option value=".NET">.NET</option>
+                            </select>
+                        </div>
+                        
+                        <div class="form-group">
+                             <label class="font-noraml">分组多选</label>
+                             <select class="form-control noselect2 selectpicker">
+                               <optgroup label="--请选择开发语言--">
+								 <option value="Java">Java</option>
+                                 <option value="PHP">PHP</option>
+                                 <option value=".NET">.NET</option>
+							   </optgroup>
+							   <optgroup label="--请选择数据库--">
+							     <option value="Oracle">Oracle</option>
+                                 <option value="Mysql">Mysql</option>
+                                 <option value="Sysbase">Sysbase</option>
+						       </optgroup>
+                             </select>
+                        </div>
+						  
+                        <div class="form-group">
+                            <label class="font-noraml">多选</label>
+                            <select class="form-control noselect2 selectpicker" data-none-selected-text="请选择开发语言" multiple>
+                            	<option value="Java">Java</option>
+                            	<option value="PHP">PHP</option>
+                            	<option value=".NET">.NET</option>
+                            </select>
+                        </div>
+                        
+                        <div class="form-group">
+                             <label class="font-noraml">分组多选</label>
+                             <select class="form-control noselect2 selectpicker" data-none-selected-text="请选择" multiple>
+                               <optgroup label="--请选择开发语言--">
+								 <option value="Java">Java</option>
+                                 <option value="PHP">PHP</option>
+                                 <option value=".NET">.NET</option>
+							   </optgroup>
+							   <optgroup label="--请选择数据库--">
+							     <option value="Oracle">Oracle</option>
+                                 <option value="Mysql">Mysql</option>
+                                 <option value="Sysbase">Sysbase</option>
+						       </optgroup>
+                             </select>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <label class="font-noraml">相关参数详细信息</label>
+                            <div><a href="#" target="_blank">http://www.sooka.com</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+   </form>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: select2-js" />
+    <th:block th:include="include :: bootstrap-select-js" />
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/sortable.html

@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('拖动排序')" />
+</head>
+<body class="gray-bg">
+    <div class="wrapper wrapper-content  animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-4">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h3>任务列表</h3>
+                        <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
+
+                        <div class="input-group">
+                            <input type="text" placeholder="添加新任务" class="input input-sm form-control">
+                            <span class="input-group-btn">
+                                        <button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> 添加</button>
+                                </span>
+                        </div>
+
+                        <ul class="sortable-list connectList agile-list">
+                            <li class="warning-element">
+                                加强过程管理，及时统计教育经费使用情况，做到底码清楚，
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
+                                    <i class="fa fa-clock-o"></i> 2018.09.01
+                                </div>
+                            </li>
+                            <li class="success-element">
+                                支持财会人员的继续培训工作。
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
+                                    <i class="fa fa-clock-o"></i> 2018.05.12
+                                </div>
+                            </li>
+                            <li class="info-element">
+                                协同教导处搞好助学金、减免教科书费的工作。
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
+                                    <i class="fa fa-clock-o"></i> 2018.09.10
+                                </div>
+                            </li>
+                            <li class="danger-element">
+                                要求会计、出纳人员严格执行财务制度，遵守岗位职责，按时上报各种资料。
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
+                                    <i class="fa fa-clock-o"></i> 2018.06.10
+                                </div>
+                            </li>
+                            <li class="warning-element">
+                                做好职工公费医疗工作，按时发放门诊费。
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
+                                    <i class="fa fa-clock-o"></i> 2018.09.09
+                                </div>
+                            </li>
+                            <li class="warning-element">
+                                有计划地把课本复习三至五遍。
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
+                                    <i class="fa fa-clock-o"></i> 2018.08.04
+                                </div>
+                            </li>
+                            <li class="success-element">
+                                看一本高质量的高中语法书
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
+                                    <i class="fa fa-clock-o"></i> 2018.05.12
+                                </div>
+                            </li>
+                            <li class="info-element">
+                                选择一份较好的英语报纸，通过阅读提高英语学习效果。
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
+                                    <i class="fa fa-clock-o"></i> 2018.09.10
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-4">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h3>进行中</h3>
+                        <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
+                        <ul class="sortable-list connectList agile-list">
+                            <li class="success-element">
+                                全面、较深入地掌握我们“产品”的功能、特色和优势并做到应用自如。
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
+                                    <i class="fa fa-clock-o"></i> 2018.09.01
+                                </div>
+                            </li>
+                            <li class="success-element">
+                                根据自己以前所了解的和从其他途径搜索到的信息，录入客户资料150家。
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
+                                    <i class="fa fa-clock-o"></i> 2018.05.12
+                                </div>
+                            </li>
+                            <li class="warning-element">
+                                锁定有意向客户20家。
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
+                                    <i class="fa fa-clock-o"></i> 2018.09.10
+                                </div>
+                            </li>
+                            <li class="warning-element">
+                                力争完成销售指标。
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
+                                    <i class="fa fa-clock-o"></i> 2018.09.09
+                                </div>
+                            </li>
+                            <li class="info-element">
+                                在总结和摸索中前进。
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
+                                    <i class="fa fa-clock-o"></i> 2018.08.04
+                                </div>
+                            </li>
+                            <li class="success-element">
+                                不断学习行业知识、产品知识，为客户带来实用介绍内容
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
+                                    <i class="fa fa-clock-o"></i> 2018.05.12
+                                </div>
+                            </li>
+                            <li class="danger-element">
+                                先友后单：与客户发展良好友谊，转换销售员角色，处处为客户着想
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
+                                    <i class="fa fa-clock-o"></i> 2018.11.04
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-4">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h3>已完成</h3>
+                        <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
+                        <ul class="sortable-list connectList agile-list">
+                            <li class="info-element">
+                                制定工作日程表
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
+                                    <i class="fa fa-clock-o"></i> 2018.09.10
+                                </div>
+                            </li>
+                            <li class="warning-element">
+                                每天坚持打40个有效电话，挖掘潜在客户
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
+                                    <i class="fa fa-clock-o"></i> 2018.09.09
+                                </div>
+                            </li>
+                            <li class="warning-element">
+                                拜访客户之前要对该客户做全面的了解(客户的潜在需求、职位、权限以及个人性格和爱好)
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
+                                    <i class="fa fa-clock-o"></i> 2018.09.09
+                                </div>
+                            </li>
+                            <li class="warning-element">
+                                提高自己电话营销技巧，灵活专业地与客户进行电话交流
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
+                                    <i class="fa fa-clock-o"></i> 2018.08.04
+                                </div>
+                            </li>
+                            <li class="success-element">
+                                通过电话销售过程中了解各盛市的设备仪器使用、采购情况及相关重要追踪人
+                                <div class="agile-detail">
+                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
+                                    <i class="fa fa-clock-o"></i> 2018.05.12
+                                </div>
+                            </li>
+
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
+    <script>
+	    $(document).ready(function () {
+	        $(".sortable-list").sortable({connectWith: ".connectList"}).disableSelection()
+	    });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/timeline.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>时间轴</title>
+	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
+    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
+    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
+    <link th:href="@{/css/style.css}" rel="stylesheet"/>
+</head>
+<body class="gray-bg">
+    <div class="row animated fadeInRight">
+        <div class="ibox float-e-margins">
+            <div class="text-center float-e-margins p-md">
+                <span>打开/关闭颜色/背景或方向版本: </span>
+                <a href="#" class="btn btn-xs btn-primary" id="lightVersion">轻型版本 </a>
+                <a href="#" class="btn btn-xs btn-primary" id="darkVersion">黑色版本 </a>
+            </div>
+            <div id="ibox-content">
+                 <div id="vertical-timeline" class="vertical-container light-timeline">
+                     <div class="vertical-timeline-block">
+                         <div class="vertical-timeline-icon navy-bg">
+                             <i class="fa fa-briefcase"></i>
+                         </div>
+
+                         <div class="vertical-timeline-content">
+                             <h2>会议</h2>
+                             <p>上一年的销售业绩发布会。总结产品营销和销售趋势及销售的现状。
+                             </p>
+                             <a href="#" class="btn btn-sm btn-primary"> 更多信息</a>
+                             <span class="vertical-date">
+                         	今天 <br>
+                         <small>2月3日</small>
+                     </span>
+                         </div>
+                     </div>
+
+                     <div class="vertical-timeline-block">
+                         <div class="vertical-timeline-icon blue-bg">
+                             <i class="fa fa-file-text"></i>
+                         </div>
+
+                         <div class="vertical-timeline-content">
+                             <h2>给张三发送文档</h2>
+                             <p>发送上年度《销售业绩报告》</p>
+                             <a href="#" class="btn btn-sm btn-success"> 下载文档 </a>
+                             <span class="vertical-date">
+                         	今天 <br>
+                         <small>2月3日</small>
+                     </span>
+                         </div>
+                     </div>
+
+                     <div class="vertical-timeline-block">
+                         <div class="vertical-timeline-icon lazur-bg">
+                             <i class="fa fa-coffee"></i>
+                         </div>
+
+                         <div class="vertical-timeline-content">
+                             <h2>喝咖啡休息</h2>
+                             <p>喝咖啡啦，啦啦啦~~</p>
+                             <a href="#" class="btn btn-sm btn-info">更多</a>
+                             <span class="vertical-date"> 昨天 <br><small>2月2日</small></span>
+                         </div>
+                     </div>
+
+                     <div class="vertical-timeline-block">
+                         <div class="vertical-timeline-icon yellow-bg">
+                             <i class="fa fa-phone"></i>
+                         </div>
+
+                         <div class="vertical-timeline-content">
+                             <h2>给李四打电话</h2>
+                             <p>给李四打电话分配本月工作任务</p>
+                             <span class="vertical-date">昨天 <br><small>2月2日</small></span>
+                         </div>
+                     </div>
+
+                     <div class="vertical-timeline-block">
+                         <div class="vertical-timeline-icon lazur-bg">
+                             <i class="fa fa-user-md"></i>
+                         </div>
+
+                         <div class="vertical-timeline-content">
+                             <h2>公司年会</h2>
+                             <p>发年终奖啦，啦啦啦~~</p>
+                             <span class="vertical-date">前天 <br><small>2月1日</small></span>
+                         </div>
+                     </div>
+                 </div>
+             </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <script>
+        $(document).ready(function(){
+            $('#lightVersion').click(function(event) {
+                event.preventDefault()
+                $('#ibox-content').removeClass('ibox-content');
+                $('#vertical-timeline').removeClass('dark-timeline');
+                $('#vertical-timeline').addClass('light-timeline');
+            });
+            $('#darkVersion').click(function(event) {
+                event.preventDefault()
+                $('#ibox-content').addClass('ibox-content');
+                $('#vertical-timeline').removeClass('light-timeline');
+                $('#vertical-timeline').addClass('dark-timeline');
+            });
+        });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/upload.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('文件上传')" />
+	<th:block th:include="include :: bootstrap-fileinput-css" />
+</head>
+<body class="gray-bg">
+<div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>文件上传控件 <small>https://github.com/kartik-v/bootstrap-fileinput</small></h5>
+                    </div>
+                    <div class="ibox-content">
+                    	<div class="form-group">
+                            <label class="font-noraml">简单示例</label>
+	                        <div class="file-loading">
+					            <input class="file" type="file" multiple data-min-file-count="1" data-theme="fas">
+					        </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label class="font-noraml">多文件上传</label>
+	                        <div class="file-loading">
+					            <input id="fileinput-demo-1" type="file" multiple>
+					        </div>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <label class="font-noraml">相关参数详细信息</label>
+                            <div><a href="http://www.sooka.com/document/zjwd.html#bootstrap-fileinput" target="_blank">http://www.sooka.com/document/zjwd.html#bootstrap-fileinput</a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: bootstrap-fileinput-js" />
+    <script type="text/javascript">
+    $(document).ready(function () {
+        $("#fileinput-demo-1").fileinput({
+            'theme': 'explorer-fas',
+            'uploadUrl': '#',
+            overwriteInitial: false,
+            initialPreviewAsData: true,
+            initialPreview: [
+                "/img/profile.jpg"
+            ]
+        });
+    });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/validate.html

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('表单校验')" />
+</head>
+<body class="gray-bg">
+<div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>jQuery Validate 简介</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <p>jquery.validate.js 是一款优秀的jQuery表单验证插件。它具有如下特点：</p>
+                        <ul>
+                            <li>安装简单</li>
+                            <li>内置超过20种数据验证方法</li>
+                            <li>直列错误提示信息</li>
+                            <li>可扩展的数据验证方法</li>
+                            <li>使用内置的元数据或插件选项来指定您的验证规则</li>
+                            <li>优雅的交互设计</li>
+                        </ul>
+                        <p>官网：<a href="http://jqueryvalidation.org/" target="_blank">http://jqueryvalidation.org/</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>简单示例</h5>
+                    </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" name="name" minlength="2" type="text" class="form-control" required>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">E-mail：</label>
+                                <div class="col-sm-8">
+                                    <input id="cemail" type="email" class="form-control" name="email" required>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">网站：</label>
+                                <div class="col-sm-8">
+                                    <input id="curl" type="url" class="form-control" name="url">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">说明：</label>
+                                <div class="col-sm-8">
+                                    <textarea id="ccomment" name="comment" class="form-control" required></textarea>
+                                </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 class="ibox float-e-margins">
+                    <div class="ibox-content">
+                        <p class="m-t">更多示例请访问官方示例页面：<a href="http://jqueryvalidation.org/files/demo/" target="_blank">查看</a>
+                        </p>
+                        <p>中文API可参考：<a href="http://www.sooka.com" target="_blank">http://www.sooka.com</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>完整验证表单</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <form class="form-horizontal m-t" id="signupForm">
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">姓氏：</label>
+                                <div class="col-sm-8">
+                                    <input id="firstname" name="firstname" class="form-control" type="text">
+                                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 这里写点提示的内容</span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">名字：</label>
+                                <div class="col-sm-8">
+                                    <input id="lastname" name="lastname" class="form-control" type="text" required>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">用户名：</label>
+                                <div class="col-sm-8">
+                                    <input id="username" name="username" class="form-control" type="text" required>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">密码：</label>
+                                <div class="col-sm-8">
+                                    <input id="password" name="password" class="form-control" type="password">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">确认密码：</label>
+                                <div class="col-sm-8">
+                                    <input id="confirm_password" name="confirm_password" class="form-control" type="password">
+                                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">E-mail：</label>
+                                <div class="col-sm-8">
+                                    <input id="email" name="email" class="form-control" type="email">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div class="col-sm-8 col-sm-offset-3">
+                                    <button class="btn btn-primary" type="submit">提交</button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <script type="text/javascript">
+    $(function(){
+        $("#commentForm").validate();
+
+        var icon = "<i class='fa fa-times-circle'></i> ";
+        $("#signupForm").validate({
+            rules: {
+                firstname: "required",
+                lastname: "required",
+                username: {
+                    required: true,
+                    minlength: 2
+                },
+                password: {
+                    required: true,
+                    minlength: 5
+                },
+                confirm_password: {
+                    required: true,
+                    minlength: 5,
+                    equalTo: "#password"
+                },
+                email: {
+                    required: true,
+                    email: true
+                }
+            },
+            messages: {
+                firstname: icon + "请输入你的姓",
+                lastname: icon + "请输入您的名字",
+                username: {
+                    required: icon + "请输入您的用户名",
+                    minlength: icon + "用户名必须两个字符以上"
+                },
+                password: {
+                    required: icon + "请输入您的密码",
+                    minlength: icon + "密码必须5个字符以上"
+                },
+                confirm_password: {
+                    required: icon + "请再次输入密码",
+                    minlength: icon + "密码必须5个字符以上",
+                    equalTo: icon + "两次输入的密码不一致"
+                },
+                email: icon + "请输入您的E-mail"
+            }
+        });
+
+        $("#username").focus(function () {
+            var firstname = $("#firstname").val();
+            var lastname = $("#lastname").val();
+            if (firstname && lastname && !this.value) {
+                this.value = firstname + "." + lastname;
+            }
+        });
+    });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/form/wizard.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('基本表单')" />
+	<th:block th:include="include :: jquery-steps-css" />
+</head>
+<body class="gray-bg">
+    <div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-5">
+                <div class="jumbotron">
+                    <h1>表单向导</h1>
+                    <p>Smart UI 部件允许您快速创建表单向导接口。</p>
+                    <p><a href="https://github.com/rstaib/jquery-steps" target="_blank" class="btn btn-primary btn-lg" role="button">了解 jQuery Steps</a>
+                    </p>
+                </div>
+            </div>
+            <div class="col-sm-7">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>基础表单向导</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <p>
+                                                                      这是一个简单的表单向导示例
+                        </p>
+                        <div id="wizard">
+                            <h1>第一步</h1>
+                            <div class="step-content">
+                                <div class="text-center m-t-md">
+                                    <h2>第一步</h2>
+                                    <p>
+                                                                                                       这是第一步的内容
+                                    </p>
+                                </div>
+                            </div>
+
+                            <h1>第二步</h1>
+                            <div class="step-content">
+                                <div class="text-center m-t-md">
+                                    <h2>第二步</h2>
+                                    <p>
+                                                                                                       这是第二步的内容
+                                    </p>
+                                </div>
+                            </div>
+
+                            <h1>第三步</h1>
+                            <div class="step-content">
+                                <div class="text-center m-t-md">
+                                    <h2>第三步</h2>
+                                    <p>
+                                                                                                      这是第三步的内容
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox">
+                    <div class="ibox-title">
+                        <h5>带验证的表单向导</h5>
+                    </div>
+                    <div class="ibox-content">
+                        <h2>
+                                                                               带验证的表单向导
+                            </h2>
+                        <p>
+                                                                              下面这个示例展示了如何在表单向导中使用 jQuery Validation 插件
+                        </p>
+
+                        <form id="form" action="" class="wizard-big">
+                            <h1>账户</h1>
+                            <fieldset>
+                                <h2>账户信息</h2>
+                                <div class="row">
+                                    <div class="col-sm-8">
+                                        <div class="form-group">
+                                            <label>用户名 *</label>
+                                            <input id="userName" name="userName" type="text" class="form-control required">
+                                        </div>
+                                        <div class="form-group">
+                                            <label>密码 *</label>
+                                            <input id="password" name="password" type="text" class="form-control required">
+                                        </div>
+                                        <div class="form-group">
+                                            <label>确认密码 *</label>
+                                            <input id="confirm" name="confirm" type="text" class="form-control required">
+                                        </div>
+                                    </div>
+                                    <div class="col-sm-4">
+                                        <div class="text-center">
+                                            <div style="margin-top: 20px">
+                                                <i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </fieldset>
+                            <h1>个人资料</h1>
+                            <fieldset>
+                                <h2>个人资料信息</h2>
+                                <div class="row">
+                                    <div class="col-sm-6">
+                                        <div class="form-group">
+                                            <label>姓名 *</label>
+                                            <input id="name" name="name" type="text" class="form-control required">
+                                        </div>
+                                    </div>
+                                    <div class="col-sm-6">
+                                        <div class="form-group">
+                                            <label>Email *</label>
+                                            <input id="email" name="email" type="text" class="form-control required email">
+                                        </div>
+                                        <div class="form-group">
+                                            <label>地址 *</label>
+                                            <input id="address" name="address" type="text" class="form-control">
+                                        </div>
+                                    </div>
+                                </div>
+                            </fieldset>
+
+                            <h1>警告</h1>
+                            <fieldset>
+                                <div class="text-center" style="margin-top: 120px">
+                                    <h2>你是火星人 :-)</h2>
+                                </div>
+                            </fieldset>
+
+                            <h1>完成</h1>
+                            <fieldset>
+                                <h2>条款</h2>
+                                <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required">
+                                <label for="acceptTerms">我同意注册条款</label>
+                            </fieldset>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: jquery-steps-js" />
+    <script>
+	    $(document).ready(function () {
+	        $("#wizard").steps();
+	        $("#form").steps({
+	            bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) {
+	                if (currentIndex > newIndex) {
+	                    return true
+	                }
+	                if (newIndex === 3 && Number($("#age").val()) < 18) {
+	                    return false
+	                }
+	                var form = $(this);
+	                if (currentIndex < newIndex) {
+	                    $(".body:eq(" + newIndex + ") label.error", form).remove();
+	                    $(".body:eq(" + newIndex + ") .error", form).removeClass("error")
+	                }
+	                form.validate().settings.ignore = ":disabled,:hidden";
+	                return form.valid()
+	            }, onStepChanged: function (event, currentIndex, priorIndex) {
+	                if (currentIndex === 2 && Number($("#age").val()) >= 18) {
+	                    $(this).steps("next")
+	                }
+	                if (currentIndex === 2 && priorIndex === 3) {
+	                    $(this).steps("previous")
+	                }
+	            }, onFinishing: function (event, currentIndex) {
+	                var form = $(this);
+	                form.validate().settings.ignore = ":disabled";
+	                return form.valid()
+	            }, onFinished: function (event, currentIndex) {
+	                var form = $(this);
+	                form.submit()
+	            }
+	        }).validate({
+	            errorPlacement: function (error, element) {
+	                element.before(error)
+	            }, rules: {confirm: {equalTo: "#password"}}
+	        })
+	    });
+	</script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/modal/form.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
+<head>
+	<th:block th:include="include :: header('新增用户')" />
+</head>
+<body>
+    <div class="main-content">
+        <form id="form-user-add" class="form-horizontal">
+            <div class="row">
+            	<div class="col-sm-6">
+                    <div class="form-group">
+                        <label class="col-sm-4 control-label is-required">用户名称：</label>
+                        <div class="col-sm-8">
+                            <input name="userName" placeholder="请输入用户名称" class="form-control" type="text">
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group">
+                        <label class="col-sm-4 control-label is-required">归属部门：</label>
+                        <div class="col-sm-8">
+                            <div class="input-group">
+                            	<input name="deptName" type="text" placeholder="请选择归属部门" class="form-control">
+                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group">
+                        <label class="col-sm-4 control-label is-required">手机号码：</label>
+                        <div class="col-sm-8">
+                            <input name="phonenumber" placeholder="请输入手机号码" class="form-control" type="text">
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group">
+                        <label class="col-sm-4 control-label is-required">邮箱：</label>
+                        <div class="col-sm-8">
+                            <input name="email" class="form-control" type="text" placeholder="请输入邮箱">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group">
+                        <label class="col-sm-4 control-label is-required">登录账号：</label>
+                        <div class="col-sm-8">
+                            <input name="loginName" placeholder="请输入登录账号" class="form-control" type="text">
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group">
+                        <label class="col-sm-4 control-label is-required">登录密码：</label>
+                        <div class="col-sm-8">
+                            <input name="password" placeholder="请输入登录密码" class="form-control" type="password">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group">
+                        <label class="col-sm-4 control-label">用户性别：</label>
+                        <div class="col-sm-8">
+                            <div class="input-group" style="width: 100%">
+                                <select name="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
+				                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
+				                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group">
+                        <label class="col-sm-4 control-label">用户状态：</label>
+                        <div class="col-sm-8">
+                            <label class="toggle-switch switch-solid">
+	                            <input type="checkbox" id="status" checked>
+	                            <span></span>
+	                        </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+	<th:block th:include="include :: footer" />
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/modal/layer.html

@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('弹层组件')" />
+</head>
+<body class="gray-bg">
+	<div class="wrapper wrapper-content fadeInRight">
+	    <div class="row">
+	        <div class="col-sm-6">
+	            <div class="ibox">
+	                <div class="ibox-title">
+	                <h5>信息框</h5>
+	                </div>
+	                <div class="ibox-content" id="test">
+	                    <p>通过调用<code>$.modal.alert()</code>实现。 </p>
+	                    <button type="button" class="btn btn-primary" onclick="$.modal.alert('Hi，你好！')">普通</button>
+	                    <button type="button" class="btn btn-success" onclick="$.modal.alertSuccess('Hi，你好！')">成功</button>
+	                    <button type="button" class="btn btn-warning" onclick="$.modal.alertWarning('Hi，你好！')">警告</button>
+	                    <button type="button" class="btn btn-danger" onclick="$.modal.alertError('Hi，你好！')">失败</button>
+	                </div>
+	            </div>
+	        </div>
+	        
+	        <div class="col-sm-6">
+	            <div class="ibox">
+	                <div class="ibox-title">
+	                <h5>提示框</h5>
+	                </div>
+	                <div class="ibox-content">
+	                    <p>通过调用<code>$.modal.msg()</code>实现。 </p>
+	                    <button type="button" class="btn btn-primary" onclick="$.modal.msg('Hi，你好！')">普通</button>
+	                    <button type="button" class="btn btn-success" onclick="$.modal.msgSuccess('Hi，你好！')">成功</button>
+	                    <button type="button" class="btn btn-warning" onclick="$.modal.msgWarning('Hi，你好！')">警告</button>
+	                    <button type="button" class="btn btn-danger" onclick="$.modal.msgError('Hi，你好！')">失败</button>
+	                </div>
+	            </div>
+	        </div>
+	    </div>
+	
+	    <div class="row">
+	        <div class="col-sm-6">
+	            <div class="ibox">
+	                <div class="ibox-title">
+	                <h5>询问框</h5>
+	                </div>
+	                <div class="ibox-content">
+	                    <p>通过调用<code>$.modal.confirm()</code>实现。 </p>
+	                    <button type="button" class="btn btn-primary" id="button-confirm">询问按钮</button>
+	                </div>
+	            </div>
+	        </div>
+	        
+	        <div class="col-sm-6">
+	            <div class="ibox ">
+	                <div class="ibox-title">
+	                <h5>消息提示并刷新父窗体</h5>
+	                </div>
+	                <div class="ibox-content">
+	                    <p>通过调用<code>$.modal.msgReload()</code>实现。 </p>
+	                    <button type="button" class="btn btn-primary" id="button-msgReload">提示刷新按钮</button>
+	                </div>
+	            </div>
+	        </div>
+	        
+	        <div class="col-sm-6">
+	            <div class="ibox">
+	                <div class="ibox-title">
+	                <h5>普通弹出层</h5>
+	                </div>
+	                <div class="ibox-content">
+	                    <p>通过调用<code>$.modal.open()</code>实现。 </p>
+	                    <button type="button" class="btn btn-primary" id="button-open-1">默认</button>
+	                    <button type="button" class="btn btn-success" id="button-open-2">设置宽高</button>
+	                    <button type="button" class="btn btn-warning" id="button-open-3">回调函数</button>
+	                    <button type="button" class="btn btn-danger" id="button-open-4">自定义选项</button>
+	                    <button type="button" class="btn btn-primary" id="button-open-5">全屏弹出</button>
+	                </div>
+	            </div>
+	        </div>
+	        
+	        <div class="col-sm-6">
+	            <div class="ibox">
+	                <div class="ibox-title">
+	                <h5>选卡页方式</h5>
+	                </div>
+	                <div class="ibox-content">
+	                    <p>通过调用<code>$.modal.openTab()</code>实现。 </p>
+	                    <button type="button" class="btn btn-primary" id="button-open-6">新窗口打开</button>
+	                    <button type="button" class="btn btn-warning" id="button-open-7">关闭当前</button>
+	                    <button type="button" class="btn btn-primary" id="button-open-14">选卡页同一页签打开</button>
+	                    <button type="button" class="btn btn-warning" id="button-open-15">关闭指定</button>
+	                </div>
+	            </div>
+	        </div>
+	        
+	        <div class="col-sm-6">
+	            <div class="ibox">
+	                <div class="ibox-title">
+	                <h5>其他内容</h5>
+	                </div>
+	                <div class="ibox-content">
+	                    <p>通过调用<code>layer</code>实现。 </p>
+	                    <button type="button" class="btn btn-primary" id="button-open-8">tab层</button>
+	                    <button type="button" class="btn btn-primary" id="button-open-9">prompt层</button>
+	                    <button type="button" class="btn btn-primary" id="button-open-10">捕获页</button>
+	                </div>
+	            </div>
+	        </div>
+	        
+	        <div class="col-sm-6">
+	            <div class="ibox">
+	                <div class="ibox-title">
+	                <h5>遮罩层</h5>
+	                </div>
+	                <div class="ibox-content">
+	                    <p>通过调用<code>blockUI</code>实现。 </p>
+	                    <button type="button" class="btn btn-primary" id="button-open-11">打开</button>
+	                    <button type="button" class="btn btn-warning" id="button-open-12">关闭</button>
+	                    <button type="button" class="btn btn-primary" id="button-open-13">layer遮罩</button>
+	                </div>
+	            </div>
+	        </div>
+	        
+	        <div class="col-sm-12">
+	            <div class="ibox">
+	                <div class="ibox-title">
+                        <label class="font-noraml">相关参数详细信息</label>
+                        <div><a href="#" target="_blank">http://www.sooka.com</a></div>
+	            </div>
+	        </div>
+	        
+	    </div>
+	</div>
+    <th:block th:include="include :: footer" />
+    <script type="text/javascript">
+        var prefix = ctx + "demo/modal";
+        
+	    $("#button-confirm").click(function(){
+	    	$.modal.confirm("确认要点击确定吗?", function() {
+	    		$.modal.alert("ok");
+	    	});
+	    })
+	    
+	    $("#button-msgReload").click(function(){
+	        $.modal.msgReload("保存成功,正在刷新数据请稍后……", modal_status.SUCCESS);
+	    })
+	    
+	    $("#button-open-1").click(function(){
+	    	$.modal.open('添加用户', prefix + "/form");
+	    })
+	    
+	    $("#button-open-2").click(function(){
+	    	$.modal.open('添加用户', prefix + "/form", '900', '320');
+	    })
+	    
+	    $("#button-open-3").click(function(){
+	    	$.modal.open('添加用户', prefix + "/form", '900', '320', callback);
+	    })
+	    
+	    $("#button-open-4").click(function(){
+	    	var btn = ['<i class="fa fa-check"></i> 点我回调', '<i class="fa fa-close"></i> 点我关闭'];
+			var options = {
+				title: '添加用户',
+				width: "900",
+				height: "320",
+				url: prefix + "/form",
+				btn: btn,
+				callBack: doSubmit
+			};
+			$.modal.openOptions(options);
+	    })
+	    
+	    function doSubmit(index, layero) {
+	    	alert("进入了自定义选项提交方法");
+	    }
+	    
+	    function callback(index, layero) {
+	    	alert("进入了回调函数提交方法");
+	    }
+	    
+	    $("#button-open-5").click(function(){
+	    	$.modal.openFull('添加用户', prefix + "/form");
+	    })
+	    
+	    $("#button-open-6").click(function(){
+	    	$.modal.openTab('添加用户', prefix + "/form");
+	    })
+	    
+	    $("#button-open-7").click(function(){
+	    	$.modal.closeTab();
+	    })
+	    
+	     $("#button-open-8").click(function(){
+	    	//tab层
+	    	 layer.tab({
+	    	     area: ['600px', '300px'],
+	    	     tab: [{
+	    	         title: 'TAB1',
+	    	         content: '内容1'
+	    	     },
+	    	     {
+	    	         title: 'TAB2',
+	    	         content: '内容2'
+	    	     },
+	    	     {
+	    	         title: 'TAB3',
+	    	         content: '内容3'
+	    	     }]
+	    	 });
+	    })
+	    
+	    $("#button-open-9").click(function(){
+	    	layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
+	    	  layer.close(index);
+	    	  layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
+	    	    layer.close(index);
+	    	    layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
+	    	  });
+	    	});
+	    })
+	    
+	    $("#button-open-10").click(function(){
+	    	layer.open({
+    		  type: 1,
+    		  shade: false,
+    		  title: false, //不显示标题
+    		  content: $('#test'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
+    		  cancel: function(){
+    		    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
+    		  }
+    		});
+	    })
+	    
+	    $("#button-open-11").click(function(){
+	    	$.modal.loading("数据加载中");
+	    })
+	    
+	    $("#button-open-12").click(function(){
+	    	$.modal.closeLoading();
+	    })
+	    
+	    $("#button-open-13").click(function(){
+	    	layer.load(0, {shade: false}); // 0代表加载的风格，支持0-2
+	    })
+	    
+	    $("#button-open-14").click(function(){
+	    	$.modal.parentTab('添加用户', prefix + "/form");
+	    })
+	    
+	    $("#button-open-15").click(function(){
+	    	// 需要关闭窗口的url
+	    	$.modal.closeTab(prefix + "/form");
+	    })
+	</script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/modal/table.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('弹层表格')" />
+</head>
+<body class="gray-bg">
+	<div class="wrapper wrapper-content fadeInRight">
+	    <div class="row">
+	        <div class="col-sm-12">
+	            <div class="ibox">
+	                <div class="ibox-title">
+	                <h5>弹层框</h5>
+	                </div>
+	                <div class="ibox-content" id="test">
+	                    <p>弹出复选框表格及单选框表格（点击提交后得到数据）。 </p>
+	                    <button type="button" class="btn btn-primary" onclick="selectCheckUser()">弹出表格（复选框）</button>
+	                    <button type="button" class="btn btn-success" onclick="selectRadioUser()">弹出表格（单选框）</button>
+	                </div>
+	            </div>
+	        </div>
+	        <div class="col-sm-12">
+	            <div class="ibox">
+	                <div class="ibox-title">
+	                <h5>弹层框</h5>
+	                </div>
+	                <div class="ibox-content" id="test">
+	                    <p>弹出复选框表格及单选框表格（点击提交后得到数据并回显到父窗体）。 </p>
+	                    <button type="button" class="btn btn-info" onclick="selectUsersToParent()">弹出表格（复选框）</button>
+	                    <p id="userids"> </p>
+	                </div>
+	            </div>
+	        </div>
+	    </div>
+	</div>
+    <th:block th:include="include :: footer" />
+    <script type="text/javascript">
+        var prefix = ctx + "demo/modal";
+        
+        function selectCheckUser(){
+        	$.modal.open("选择用户", prefix + "/check");
+        }
+        
+		function selectRadioUser(){
+			$.modal.open("选择用户", prefix + "/radio");
+        }
+		
+		function selectUsersToParent(){
+			$.modal.open("选择用户", prefix + "/parent");
+        }
+		
+		function selectUsers(){
+			alert(1);
+		}
+	</script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/modal/table/check.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('check表格页')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+        
+        /* 添加用户-选择用户-提交 */
+		function submitHandler() {
+			var rows = $.table.selectFirstColumns();
+			if (rows.length == 0) {
+       			$.modal.alertWarning("请至少选择一条记录");
+       			return;
+       		}
+			alert(rows.join());
+		}
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/modal/table/parent.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('表格传值给父页面')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+        
+        /* 添加用户-选择用户-提交 */
+		function submitHandler(index, layero) {
+			var rows = $.table.selectFirstColumns();
+			if (rows.length == 0) {
+       			$.modal.alertWarning("请至少选择一条记录");
+       			return;
+       		}
+			$.modal.close();
+			// 父页面的方法
+			// parent.selectUsers();
+			// 父页面的变量
+			parent.$('#userids').html(rows.join());
+		}
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/modal/table/radio.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('radio表格页')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+                columns: [{
+		            radio: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+        
+        /* 添加用户-选择用户-提交 */
+		function submitHandler() {
+			var rows = $.table.selectFirstColumns();
+			if (rows.length == 0) {
+       			$.modal.alertWarning("请至少选择一条记录");
+       			return;
+       		}
+			alert(rows.join());
+		}
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/operate/add.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
+<head>
+	<th:block th:include="include :: header('新增用户')" />
+</head>
+<body class="white-bg">
+	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
+		<form class="form-horizontal m" id="form-user-add">
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户编号：</label>
+				<div class="col-sm-8">
+					<input class="form-control" type="text" name="userCode" id="userCode" required>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户姓名：</label>
+				<div class="col-sm-8">
+					<input class="form-control" type="text" name="userName" id="userName" required>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户性别：</label>
+                <div class="col-sm-8">
+                    <div class="input-group" style="width: 100%">
+                        <select name="userSex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
+			                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
+			            </select>
+                    </div>
+                </div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户手机：</label>
+				<div class="col-sm-8">
+					<input class="form-control" type="text" name="userPhone" id="userPhone">
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户邮箱：</label>
+				<div class="col-sm-8">
+					<input class="form-control" type="text" name="userEmail" id="userEmail">
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户状态：</label>
+				<div class="col-sm-8">
+				    <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
+						<input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}">
+						<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
+					</div>
+				</div>
+			</div>
+		</form>
+	</div>
+	<th:block th:include="include :: footer" />
+	<script type="text/javascript">
+		var prefix = ctx + "demo/operate";
+		
+		$("#form-user-add").validate({
+			onkeyup: false,
+			rules:{
+				userPhone:{
+					isPhone:true
+				},
+				userEmail:{
+					email:true
+				},
+			},
+		    focusCleanup: true
+		});
+		
+		function submitHandler() {
+	        if ($.validate.form()) {
+	        	$.operate.save(prefix + "/add", $('#form-user-add').serialize());
+	        }
+	    }
+	</script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/operate/detail.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
+<head>
+	<th:block th:include="include :: header('用户详细')" />
+</head>
+<body class="white-bg">
+	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
+		<form class="form-horizontal m" id="form-user-edit">
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户编号：</label>
+				<div class="form-control-static" th:text="${user.userCode}"></div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户姓名：</label>
+				<div class="col-sm-8">
+				    <div class="form-control-static" th:text="${user.userName}"></div>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户性别：</label>
+                <div class="col-sm-8">
+                    <div class="form-control-static" th:text="${@dict.getLabel('sys_user_sex', user.status)}"></div>
+                </div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户手机：</label>
+				<div class="col-sm-8">
+				    <div class="form-control-static" th:text="${user.userPhone}"></div>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户邮箱：</label>
+				<div class="col-sm-8">
+				    <div class="form-control-static" th:text="${user.userEmail}"></div>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户状态：</label>
+				<div class="col-sm-8">
+				    <div class="form-control-static" th:text="${@dict.getLabel('sys_normal_disable', user.status)}"></div>
+				</div>
+			</div>
+		</form>
+	</div>
+	<th:block th:include="include :: footer" />
+	<script type="text/javascript">
+		var prefix = ctx + "demo/operate";
+		
+		$("#form-user-add").validate({
+			onkeyup: false,
+			rules:{
+				userPhone:{
+					isPhone:true
+				},
+				userEmail:{
+					email:true
+				},
+			},
+		    focusCleanup: true
+		});
+		
+		function submitHandler() {
+	        if ($.validate.form()) {
+	        	$.operate.save(prefix + "/edit", $('#form-user-edit').serialize());
+	        }
+	    }
+	</script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/operate/edit.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
+<head>
+	<th:block th:include="include :: header('修改用户')" />
+</head>
+<body class="white-bg">
+	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
+		<form class="form-horizontal m" id="form-user-edit" th:object="${user}">
+		    <input name="userId" type="hidden"  th:field="*{userId}" />
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户编号：</label>
+				<div class="col-sm-8">
+					<input class="form-control" type="text" name="userCode" id="userCode" th:field="*{userCode}" required>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户姓名：</label>
+				<div class="col-sm-8">
+					<input class="form-control" type="text" name="userName" id="userName" th:field="*{userName}" required>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户性别：</label>
+                <div class="col-sm-8">
+                    <div class="input-group" style="width: 100%">
+                        <select name="userSex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
+			                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{userSex}"></option>
+			            </select>
+                    </div>
+                </div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户手机：</label>
+				<div class="col-sm-8">
+					<input class="form-control" type="text" name="userPhone" th:field="*{userPhone}" id="userPhone">
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户邮箱：</label>
+				<div class="col-sm-8">
+					<input class="form-control" type="text" name="userEmail" th:field="*{userEmail}" id="userEmail">
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="col-sm-3 control-label">用户状态：</label>
+				<div class="col-sm-8">
+				    <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
+						<input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:field="*{status}">
+						<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
+					</div>
+				</div>
+			</div>
+		</form>
+	</div>
+	<th:block th:include="include :: footer" />
+	<script type="text/javascript">
+		var prefix = ctx + "demo/operate";
+		
+		$("#form-user-add").validate({
+			onkeyup: false,
+			rules:{
+				userPhone:{
+					isPhone:true
+				},
+				userEmail:{
+					email:true
+				},
+			},
+		    focusCleanup: true
+		});
+		
+		function submitHandler() {
+	        if ($.validate.form()) {
+	        	$.operate.save(prefix + "/edit", $('#form-user-edit').serialize());
+	        }
+	    }
+	</script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/operate/other.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('其他操作')" />
+</head>
+<body class="white-bg">
+	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
+	    <form class="form-horizontal" id="form-demo-1">
+	        <div class="form-group">
+	            <label class="col-sm-2 control-label">用户名称：</label>
+	            <div class="col-sm-10">
+	                <input type="text" class="form-control" name="userName"placeholder="请输入用户名称">
+	            </div>
+	        </div>
+	        <div class="form-group">
+	            <label class="col-sm-2 control-label">手机号码：</label>
+	            <div class="col-sm-10">
+	                <input type="text" class="form-control" name="phonenumber" maxlength="11"placeholder="请输入手机号码">
+	            </div>
+	        </div>
+	        <div class="form-group">
+	            <div class="col-sm-offset-2 col-sm-10">
+	                <button type="button" class="btn btn-sm btn-primary" onclick="submit1()"><i class="fa fa-check"></i>保 存（不刷新当前页）</button>&nbsp;
+	            </div>
+	        </div>
+	    </form>
+	    <hr/>
+	    <form class="form-horizontal" id="form-demo-2">
+	        <div class="form-group">
+	            <label class="col-sm-2 control-label">用户名称：</label>
+	            <div class="col-sm-10">
+	                <input type="text" class="form-control" name="userName"placeholder="请输入用户名称">
+	            </div>
+	        </div>
+	        <div class="form-group">
+	            <label class="col-sm-2 control-label">手机号码：</label>
+	            <div class="col-sm-10">
+	                <input type="text" class="form-control" name="phonenumber" maxlength="11"placeholder="请输入手机号码">
+	            </div>
+	        </div>
+	        <div class="form-group">
+	            <div class="col-sm-offset-2 col-sm-10">
+	                <button type="button" class="btn btn-sm btn-primary" onclick="submit2()"><i class="fa fa-check"></i>保 存（刷新当前页）</button>&nbsp;
+	            </div>
+	        </div>
+	    </form>
+    </div>
+    <th:block th:include="include :: footer" />
+	<script type="text/javascript">
+	    var prefix = ctx + "demo/operate";
+	    function submit1(){
+	    	$.operate.saveModal(prefix + "/edit", $('#form-demo-1').serialize());
+	    }
+	    
+	    function submit2(){
+	    	$.ajax({
+	            url: prefix + "/edit",
+	            data: $('#form-demo-2').serialize(),
+	            type: "post",
+	            success: function(result) {
+	            	if (result.code == 0) {
+	            		layer.msg("保存成功,正在刷新数据请稍后……", {
+		            	    icon: 1,
+		            	    time: 500,
+		            	    shade: [0.1, '#8F8F8F']
+		            	},function() {
+		            		location.reload();
+		            	});
+	            	} else {
+	            		alert(result.msg);
+	            	}
+	            }
+	        })
+	    }
+	</script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/operate/table.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('其他操作')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+     	<div class="btn-group-sm" id="toolbar" role="group">
+	        <a class="btn btn-success" onclick="$.operate.add()">
+	            <i class="fa fa-plus"></i> 新增
+	        </a>
+	        <a class="btn btn-primary single disabled" onclick="$.operate.edit()">
+	            <i class="fa fa-edit"></i> 修改
+	        </a>
+	        <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
+	            <i class="fa fa-remove"></i> 删除
+	        </a>
+	        <a class="btn btn-info" onclick="$.table.importExcel()">
+	            <i class="fa fa-upload"></i> 导入
+	        </a>
+	        <a class="btn btn-warning" onclick="$.table.exportExcel()">
+	            <i class="fa fa-download"></i> 导出
+	        </a>
+	        <a class="btn btn-info single disabled" onclick="$.operate.detail()">
+	            <i class="fa fa-search"></i> 详细
+	        </a>
+	        <a class="btn btn-danger" onclick="$.operate.clean()">
+	            <i class="fa fa-trash"></i> 清空
+	        </a>
+        </div>
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/operate";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+                createUrl: prefix + "/add",
+                updateUrl: prefix + "/edit/{id}",
+                removeUrl: prefix + "/remove",
+                exportUrl: prefix + "/export",
+                importUrl: prefix + "/importData",
+                importTemplateUrl: prefix + "/importTemplate",
+                detailUrl: prefix + "/detail/{id}",
+                cleanUrl: prefix + "/clean",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+		        search: true,
+		        modalName: "用户",
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#" onclick="$.operate.edit(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-info btn-xs" href="#" onclick="$.operate.detail(\'' + row.userId + '\')"><i class="fa fa-search"></i>详细</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+    </script>
+</body>
+<!-- 导入区域 -->
+<script id="importTpl" type="text/template">
+<form enctype="multipart/form-data" class="mt20 mb10">
+	<div class="col-xs-offset-1">
+		<input type="file" id="file" name="file"/>
+		<div class="mt10 pt5">
+			<input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据
+			 &nbsp;	<a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
+		</div>
+		<font color="red" class="pull-left mt10">
+			提示：仅允许导入“xls”或“xlsx”格式文件！
+		</font>
+	</div>
+</form>
+</script>
+</html>

leiSP-admin/src/main/resources/templates/demo/report/metrics.html

@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('图表组合')" />
+</head>
+<body class="gray-bg">
+    <div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5 class="m-b-md">Q1 销量</h5>
+                        <h2 class="text-navy">
+                                    <i class="fa fa-play fa-rotate-270"></i> 上升
+                                </h2>
+                        <small>更新时间：12天以前</small>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content ">
+                        <h5 class="m-b-md">Q2 销量</h5>
+                        <h2 class="text-navy">
+                                    <i class="fa fa-play fa-rotate-270"></i> 上升
+                                </h2>
+                        <small>更新时间：12天以前</small>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5 class="m-b-md">Q3 销量</h5>
+                        <h2 class="text-danger">
+                                    <i class="fa fa-play fa-rotate-90"></i> 下降
+                                </h2>
+                        <small>更新时间：12天以前</small>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5 class="m-b-md">Q4 销量</h5>
+                        <h2 class="text-danger">
+                                    <i class="fa fa-play fa-rotate-90"></i> 下降
+                                </h2>
+                        <small>更新时间：12天以前</small>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="row">
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>本日访问量</h5>
+                        <h2>198 009</h2>
+                        <div id="sparkline1"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>本周访问量</h5>
+                        <h2>65 000</h2>
+                        <div id="sparkline2"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>本月访问量</h5>
+                        <h2>680 900</h2>
+                        <div id="sparkline3"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>平均停留时间</h5>
+                        <h2>00:06:40</h2>
+                        <div id="sparkline4"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>使用率</h5>
+                        <h2>65%</h2>
+                        <div class="progress progress-mini">
+                            <div style="width: 68%;" class="progress-bar"></div>
+                        </div>
+
+                        <div class="m-t-sm small">4:32更新</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>使用率</h5>
+                        <h2>50%</h2>
+                        <div class="progress progress-mini">
+                            <div style="width: 78%;" class="progress-bar"></div>
+                        </div>
+
+                        <div class="m-t-sm small">4:32更新</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>使用率</h5>
+                        <h2>14%</h2>
+                        <div class="progress progress-mini">
+                            <div style="width: 38%;" class="progress-bar progress-bar-danger"></div>
+                        </div>
+
+                        <div class="m-t-sm small">4:32更新</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>使用率</h5>
+                        <h2>20%</h2>
+                        <div class="progress progress-mini">
+                            <div style="width: 28%;" class="progress-bar progress-bar-danger"></div>
+                        </div>
+
+                        <div class="m-t-sm small">4:32更新</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>百分比</h5>
+                        <h2>42/20</h2>
+                        <div class="text-center">
+                            <div id="sparkline5"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>百分比</h5>
+                        <h2>100/54</h2>
+                        <div class="text-center">
+                            <div id="sparkline6"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>百分比</h5>
+                        <h2>685/211</h2>
+                        <div class="text-center">
+                            <div id="sparkline7"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>百分比</h5>
+                        <h2>240/32</h2>
+                        <div class="text-center">
+                            <div id="sparkline8"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>收入</h5>
+                        <h1 class="no-margins">886,200</h1>
+                        <div class="stat-percent font-bold text-navy">98% <i class="fa fa-bolt"></i></div>
+                        <small>总收入</small>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>本月收入</h5>
+                        <h1 class="no-margins">1 738,200</h1>
+                        <div class="stat-percent font-bold text-navy">98% <i class="fa fa-bolt"></i></div>
+                        <small>总收入</small>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>本日收入</h5>
+                        <h1 class="no-margins">-200,100</h1>
+                        <div class="stat-percent font-bold text-danger">12% <i class="fa fa-level-down"></i></div>
+                        <small>总收入</small>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>搜索有收入</h5>
+                        <h1 class="no-margins">54,200</h1>
+                        <div class="stat-percent font-bold text-danger">24% <i class="fa fa-level-down"></i></div>
+                        <small>总收入</small>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>预警</h5>
+                        <table class="table table-stripped small m-t-md">
+                            <tbody>
+                                <tr>
+                                    <td class="no-borders">
+                                        <i class="fa fa-circle text-navy"></i>
+                                    </td>
+                                    <td class="no-borders">
+                                        示例 01
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <i class="fa fa-circle text-navy"></i>
+                                    </td>
+                                    <td>
+                                        示例 02
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <i class="fa fa-circle text-navy"></i>
+                                    </td>
+                                    <td>
+                                        示例 03
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>项目</h5>
+                        <table class="table table-stripped small m-t-md">
+                            <tbody>
+                                <tr>
+                                    <td class="no-borders">
+                                        <i class="fa fa-circle text-navy"></i>
+                                    </td>
+                                    <td class="no-borders">
+                                        示例 01
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <i class="fa fa-circle text-navy"></i>
+                                    </td>
+                                    <td>
+                                        示例 02
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <i class="fa fa-circle text-navy"></i>
+                                    </td>
+                                    <td>
+                                        示例 03
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>消息</h5>
+                        <table class="table table-stripped small m-t-md">
+                            <tbody>
+                                <tr>
+                                    <td class="no-borders">
+                                        <i class="fa fa-circle text-danger"></i>
+                                    </td>
+                                    <td class="no-borders">
+                                        示例 01
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <i class="fa fa-circle text-danger"></i>
+                                    </td>
+                                    <td>
+                                        示例 02
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <i class="fa fa-circle text-danger"></i>
+                                    </td>
+                                    <td>
+                                        示例 03
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="ibox">
+                    <div class="ibox-content">
+                        <h5>通知</h5>
+                        <table class="table table-stripped small m-t-md">
+                            <tbody>
+                                <tr>
+                                    <td class="no-borders">
+                                        <i class="fa fa-circle text-danger"></i>
+                                    </td>
+                                    <td class="no-borders">
+                                        示例 01
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <i class="fa fa-circle text-danger"></i>
+                                    </td>
+                                    <td>
+                                        示例 02
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <i class="fa fa-circle text-danger"></i>
+                                    </td>
+                                    <td>
+                                        示例 03
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: peity-js" />
+    <th:block th:include="include :: sparkline-js" />
+    <script type="text/javascript">
+	    $(document).ready(function () {
+	        $("#sparkline1").sparkline([34, 43, 43, 35, 44, 32, 44, 52], {
+	            type: 'line',
+	            width: '100%',
+	            height: '60',
+	            lineColor: '#1ab394',
+	            fillColor: "#ffffff"
+	        });
+	
+	        $("#sparkline2").sparkline([24, 43, 43, 55, 44, 62, 44, 72], {
+	            type: 'line',
+	            width: '100%',
+	            height: '60',
+	            lineColor: '#1ab394',
+	            fillColor: "#ffffff"
+	        });
+	
+	        $("#sparkline3").sparkline([74, 43, 23, 55, 54, 32, 24, 12], {
+	            type: 'line',
+	            width: '100%',
+	            height: '60',
+	            lineColor: '#ed5565',
+	            fillColor: "#ffffff"
+	        });
+	
+	        $("#sparkline4").sparkline([24, 43, 33, 55, 64, 72, 44, 22], {
+	            type: 'line',
+	            width: '100%',
+	            height: '60',
+	            lineColor: '#ed5565',
+	            fillColor: "#ffffff"
+	        });
+	
+	        $("#sparkline5").sparkline([1, 4], {
+	            type: 'pie',
+	            height: '140',
+	            sliceColors: ['#1ab394', '#F5F5F5']
+	        });
+	
+	        $("#sparkline6").sparkline([5, 3], {
+	            type: 'pie',
+	            height: '140',
+	            sliceColors: ['#1ab394', '#F5F5F5']
+	        });
+	
+	        $("#sparkline7").sparkline([2, 2], {
+	            type: 'pie',
+	            height: '140',
+	            sliceColors: ['#ed5565', '#F5F5F5']
+	        });
+	
+	        $("#sparkline8").sparkline([2, 3], {
+	            type: 'pie',
+	            height: '140',
+	            sliceColors: ['#ed5565', '#F5F5F5']
+	        });
+	    });
+	    
+	    $(function() {
+	        $("span.pie").peity("pie", {
+	            fill: ['#1ab394', '#d7d7d7', '#ffffff']
+	        })
+	
+	        $(".line").peity("line",{
+	            fill: '#1ab394',
+	            stroke:'#169c81',
+	        })
+	
+	        $(".bar").peity("bar", {
+	            fill: ["#1ab394", "#d7d7d7"]
+	        })
+	
+	        $(".bar_dashboard").peity("bar", {
+	            fill: ["#1ab394", "#d7d7d7"],
+	            width:100
+	        })
+	
+	        var updatingChart = $(".updating-chart").peity("line", { fill: '#1ab394',stroke:'#169c81', width: 64 })
+	
+	        setInterval(function() {
+	            var random = Math.round(Math.random() * 10)
+	            var values = updatingChart.text().split(",")
+	            values.shift()
+	            values.push(random)
+	
+	            updatingChart
+	                .text(values.join(","))
+	                .change()
+	        }, 1000);
+	    });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/report/peity.html

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('图表')" />
+</head>
+<body class="gray-bg">
+    <div class="wrapper wrapper-content animated fadeInDown">
+
+        <div class="row">
+            <div class="col-sm-5">
+                <div class="jumbotron">
+                    <h1>Peity图表</h1>
+                    <p>是一个内嵌数据图形可视化的图表库</p>
+                    <p><a href="http://benpickles.github.io/peity/" target="_blank" class="btn btn-primary btn-lg" role="button">了解 Peity</a>
+                    </p>
+                </div>
+            </div>
+            <div class="col-sm-7">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>饼状图 <small>自定义颜色</small></h5>
+                        <div class="ibox-tools">
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div>
+                        <table class="table table-bordered white-bg">
+                            <thead>
+                                <tr>
+                                    <th>图表</th>
+                                    <th>代码</th>
+                                </tr>
+                            </thead>
+
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <span class="pie">1/5</span>
+                                    </td>
+                                    <td>
+                                        <code>&lt;span class="pie"&gt;1/5&lt;/span&gt;</code>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span class="pie">226/360</span>
+                                    </td>
+                                    <td>
+                                        <code>&lt;span class="pie"&gt;226/360&lt;/span&gt;</code>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span class="pie">0.52/1.561</span>
+                                    </td>
+                                    <td>
+                                        <code>&lt;span class="pie"&gt;0.52/1.561&lt;/span&gt;</code>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span class="pie">1,4</span>
+                                    </td>
+                                    <td>
+                                        <code>&lt;span class="pie"&gt;1,4&lt;/span&gt;</code>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span class="pie">226,134</span>
+                                    </td>
+                                    <td>
+                                        <code>&lt;span class="pie"&gt;226,134&lt;/span&gt;</code>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span class="pie">0.52,1.041</span>
+                                    </td>
+                                    <td>
+                                        <code>&lt;span class="pie"&gt;0.52,1.041&lt;/span&gt;</code>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>线性图</h5>
+                        <div class="ibox-tools">
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div>
+                        <table class="table table-bordered white-bg">
+                            <thead>
+                                <tr>
+                                    <th>图表</th>
+                                    <th>代码</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <span data-diameter="40" class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>
+                                    </td>
+                                    <td>
+                                        <code>&lt;span class="line"&gt;5,3,9,6,5,9,7,3,5,2&lt;/span&gt;</code>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span class="line">5,3,9,6,5,9,7,3,5,2</span>
+                                    </td>
+                                    <td>
+                                        <code>&lt;span class="line"&gt;5,3,9,6,5,9,7,3,5,2&lt;/span&gt;</code>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span class="line">5,3,2,-1,-3,-2,2,3,5,2</span>
+                                    </td>
+                                    <td>
+                                        <code>&lt;span class="line"&gt;5,3,2,-1,-3,-2,2,3,5,2&lt;/span&gt;</code>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span class="line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
+                                    </td>
+                                    <td>
+                                        <code>&lt;span class="line"&gt;0,-3,-6,-4,-5,-4,-7,-3,-5,-2&lt;/span&gt;</code>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span class="bar">5,3,9,6,5,9,7,3,5,2</span>
+                                    </td>
+                                    <td>
+                                        <code>&lt;span class="bar"&gt;5,3,9,6,5,9,7,3,5,2&lt;/span&gt;</code>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span class="bar">5,3,2,-1,-3,-2,2,3,5,2</span>
+                                    </td>
+                                    <td>
+                                        <code>&lt;span class="bar"&gt;5,3,2,-1,-3,-2,2,3,5,2&lt;/span&gt;</code>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: peity-js" />
+    <script type="text/javascript">
+	    $(function() {
+	        $("span.pie").peity("pie", {
+	            fill: ['#1ab394', '#d7d7d7', '#ffffff']
+	        })
+	
+	        $(".line").peity("line",{
+	            fill: '#1ab394',
+	            stroke:'#169c81',
+	        })
+	
+	        $(".bar").peity("bar", {
+	            fill: ["#1ab394", "#d7d7d7"]
+	        })
+	
+	        $(".bar_dashboard").peity("bar", {
+	            fill: ["#1ab394", "#d7d7d7"],
+	            width:100
+	        })
+	
+	        var updatingChart = $(".updating-chart").peity("line", { fill: '#1ab394',stroke:'#169c81', width: 64 })
+	
+	        setInterval(function() {
+	            var random = Math.round(Math.random() * 10)
+	            var values = updatingChart.text().split(",")
+	            values.shift()
+	            values.push(random)
+	
+	            updatingChart
+	                .text(values.join(","))
+	                .change()
+	        }, 1000);
+	
+	    });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/report/sparkline.html

@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('线状图')" />
+</head>
+<body class="gray-bg">
+    <div class="wrapper wrapper-content animated fadeInDown">
+
+        <div class="row">
+            <div class="col-sm-5">
+                <div class="jumbotron">
+                    <h1>Sparkline</h1>
+                    <p>这是另一个可视化图表库</p>
+                    <p><a href="http://omnipotent.net/jquery.sparkline" target="_blank" class="btn btn-primary btn-lg" role="button">了解 Sparkline</a>
+                    </p>
+                </div>
+            </div>
+            <div class="col-sm-7">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>Sparkline图表 <small>自定义颜色</small></h5>
+                        <div class="ibox-tools">
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div>
+                        <table class="table table-bordered white-bg">
+                            <thead>
+                                <tr>
+                                    <th>图表</th>
+                                    <th>类型</th>
+                                </tr>
+                            </thead>
+
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <span id="sparkline1"></span>
+                                    </td>
+                                    <td>
+                                        内联线性图
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span id="sparkline2"></span>
+                                    </td>
+                                    <td>
+                                        柱状图
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span id="sparkline3"></span>
+                                    </td>
+                                    <td>
+                                        饼状图
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span id="sparkline4"></span>
+                                    </td>
+                                    <td>
+                                        长线性图
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span id="sparkline5"></span>
+                                    </td>
+                                    <td>
+                                        三态图
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span id="sparkline6"></span>
+                                    </td>
+                                    <td>
+                                        散点图
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-4">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>自定义饼状图尺寸</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content text-center h-200">
+                        <span id="sparkline7"></span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-4">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>自定义柱状图尺寸</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content text-center h-200">
+                        <span id="sparkline8"></span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-4">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>自定义线性图尺寸</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content text-center h-200">
+                        <span id="sparkline9"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: sparkline-js" />
+    <script type="text/javascript">
+	    $(function () {
+	        $("#sparkline1").sparkline([34, 43, 43, 35, 44, 32, 44, 52, 25], {
+	            type: 'line',
+	            lineColor: '#17997f',
+	            fillColor: '#1ab394',
+	        });
+	        $("#sparkline2").sparkline([5, 6, 7, 2, 0, -4, -2, 4], {
+	            type: 'bar',
+	            barColor: '#1ab394',
+	            negBarColor: '#c6c6c6'});
+	
+	        $("#sparkline3").sparkline([1, 1, 2], {
+	            type: 'pie',
+	            sliceColors: ['#1ab394', '#b3b3b3', '#e4f0fb']});
+	
+	        $("#sparkline4").sparkline([34, 43, 43, 35, 44, 32, 15, 22, 46, 33, 86, 54, 73, 53, 12, 53, 23, 65, 23, 63, 53, 42, 34, 56, 76, 15, 54, 23, 44], {
+	            type: 'line',
+	            lineColor: '#17997f',
+	            fillColor: '#ffffff',
+	        });
+	
+	        $("#sparkline5").sparkline([1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1], {
+	            type: 'tristate',
+	            posBarColor: '#1ab394',
+	            negBarColor: '#bfbfbf'});
+	
+	
+	        $("#sparkline6").sparkline([4, 6, 7, 7, 4, 3, 2, 1, 4, 4, 5, 6, 3, 4, 5, 8, 7, 6, 9, 3, 2, 4, 1, 5, 6, 4, 3, 7, ], {
+	            type: 'discrete',
+	            lineColor: '#1ab394'});
+	
+	        $("#sparkline7").sparkline([52, 12, 44], {
+	            type: 'pie',
+	            height: '150px',
+	            sliceColors: ['#1ab394', '#b3b3b3', '#e4f0fb']});
+	
+	        $("#sparkline8").sparkline([5, 6, 7, 2, 0, 4, 2, 4, 5, 7, 2, 4, 12, 14, 4, 2, 14, 12, 7], {
+	            type: 'bar',
+	            barWidth: 8,
+	            height: '150px',
+	            barColor: '#1ab394',
+	            negBarColor: '#c6c6c6'});
+	
+	        $("#sparkline9").sparkline([34, 43, 43, 35, 44, 32, 15, 22, 46, 33, 86, 54, 73, 53, 12, 53, 23, 65, 23, 63, 53, 42, 34, 56, 76, 15, 54, 23, 44], {
+	            type: 'line',
+	            lineWidth: 1,
+	            height: '150px',
+	            lineColor: '#17997f',
+	            fillColor: '#ffffff',
+	        });
+	    });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/button.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('点击按钮加载表格')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 search-collapse">
+				<form id="ordinary-form">
+					<div class="select-list">
+						<ul>
+							<li>
+								用户名称：<input type="text" name="userName"/>
+							</li>
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+			
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        function query() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        }
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/child.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('表格父子视图')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+		        detailView: true,
+				onExpandRow : function(index, row, $detail) {
+					initChildTable(index, row, $detail);
+				},
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+        
+		initChildTable = function(index, row, $detail) {
+			var childTable = $detail.html('<table style="table-layout:fixed"></table>').find('table');
+    	    $(childTable).bootstrapTable({
+    	        url: prefix + "/list",
+    	        method: 'post',
+    	        sidePagination: "server",
+    	        contentType: "application/x-www-form-urlencoded",
+    	        queryParams : {
+                    userName: '测试8'
+				},
+    	        columns: [{
+					field : 'userId', 
+					title : '子表ID'
+				},
+				{
+					field : 'userCode', 
+					title : '子表编号'
+				},
+				{
+					field : 'userName', 
+					title : '子表姓名'
+				},
+				{
+                    field: 'status',
+                    title: '子表状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                }]
+    	    });
+		};
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/curd.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('动态增删改查')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+        <div class="btn-group-sm" id="toolbar" role="group">
+	        <a class="btn btn-success" onclick="insertRow()">
+	            <i class="fa fa-plus"></i> 新增行
+	        </a>
+	        <a class="btn btn-danger multiple disabled" onclick="removeRow()">
+	            <i class="fa fa-remove"></i> 删除选择行
+	        </a>
+	        <a class="btn btn-danger" onclick="removeRowByUniqueId()">
+	            <i class="fa fa-remove"></i> 根据值删除行
+	        </a>
+	        <a class="btn btn-danger" onclick="removeRowAll()">
+	            <i class="fa fa-remove"></i> 删除所有行
+	        </a>
+	        <a class="btn btn-info" onclick="updateRow()">
+	            <i class="fa fa-edit"></i> 修改行
+	        </a>
+	        <a class="btn btn-info" onclick="updateRowByUniqueId()">
+	            <i class="fa fa-edit"></i> 根据值修改行
+	        </a>
+	        <a class="btn btn-info" onclick="getSelections()">
+	            <i class="fa fa-search"></i> 查询选择数据
+	        </a>
+	        <a class="btn btn-info" onclick="getRowByUniqueId()">
+	            <i class="fa fa-search"></i> 根据值查询行
+	        </a>
+	        <a class="btn btn-primary" onclick="getData()">
+	            <i class="fa fa-search"></i> 查询所有数据
+	        </a>
+        </div>
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+		        pagination: false,
+		        uniqueId: "userId",
+		        height: 400,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				}]
+            };
+            $.table.init(options);
+        });
+        
+        /* 新增表格行 */
+        function insertRow(){
+        	var randomId = 100 + ~~(Math.random() * 100)
+        	$("#" + table.options.id).bootstrapTable('insertRow', {
+        		index: 0, // 你想插入到哪，0表示第一行
+                row: {
+                	userId: randomId,
+                	userCode: 2000000 + randomId,
+                	userName: '测试' + randomId,
+                	userPhone: '1588888888',
+                	userEmail: 'ry1@qq.com',
+                	userBalance: 10 + randomId,
+                }
+        	})
+        }
+        
+        /* 删除指定表格行 */
+        function removeRow(){
+        	var ids = $.table.selectColumns("userId");
+        	if (ids.length == 0) {
+    			$.modal.alertWarning("请至少选择一条记录");
+    			return;
+    		}
+        	$("#" + table.options.id).bootstrapTable('remove', {
+        	    field: 'userId',
+        	    values: ids
+        	})
+        }
+        
+        /* 删除行ID值为1的数据 */
+        function removeRowByUniqueId(){
+        	$("#" + table.options.id).bootstrapTable('removeByUniqueId', 1)
+        }
+        
+        /* 删除所有表格行 */
+        function removeRowAll(){
+        	$("#" + table.options.id).bootstrapTable('removeAll')
+        }
+        
+        /* 修改表格行 */
+        function updateRow(){
+        	var randomId = 100 + ~~(Math.random() * 100)
+        	$("#" + table.options.id).bootstrapTable('updateRow', {
+        		index: 0, // 你想修改哪行，0表示第一行
+                row: {
+                	userId: randomId,
+                	userCode: 3000000 + randomId,
+                	userName: '测试' + randomId,
+                	userPhone: '1599999999',
+                	userEmail: 'ry2@qq.com',
+                	userBalance: 50 + randomId,
+                }
+        	})
+        }
+        
+        /* 修改行ID值为1的数据 */
+        function updateRowByUniqueId(){
+        	var randomId = 100 + ~~(Math.random() * 100)
+        	$("#" + table.options.id).bootstrapTable('updateByUniqueId', {
+        		id: 1,
+                row: {
+                	userId: randomId,
+                	userCode: 3000000 + randomId,
+                	userName: '测试' + randomId,
+                	userPhone: '1599999999',
+                	userEmail: 'ry2@qq.com',
+                	userBalance: 50 + randomId,
+                }
+        	})
+        }
+        
+        /* 查询表格所有数据值 */
+        function getData(){
+        	var data = $("#" + table.options.id).bootstrapTable('getData');
+            alert(JSON.stringify(data))
+        }
+        
+        /* 查询行ID值为1的数据 */
+        function getRowByUniqueId(){
+        	var data = $("#" + table.options.id).bootstrapTable('getRowByUniqueId', 1);
+            alert(JSON.stringify(data))
+        }
+        
+        /* 查询表格选择行数据值 */
+        function getSelections(){
+        	var data = $("#" + table.options.id).bootstrapTable('getSelections');
+        	alert(JSON.stringify(data))
+        }
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/data.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('加载data数据')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                data: [[${users}]],
+                sidePagination: "client",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/detail.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('表格细节视图')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+		        detailView: true,
+		        detailFormatter: detailFormatter,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+        
+        function detailFormatter(index, row) {
+        	var html = [];
+        	$.each(row, function(key, value) {
+        		html.push('<p><b>' + key + ':</b> ' + value + '</p>');
+        	});
+        	return html.join('');
+       	}
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/editable.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('表格行内编辑')" />
+	<th:block th:include="include :: bootstrap-editable-css" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+        <div class="btn-group-sm" id="toolbar" role="group">
+             <a class="btn btn-info" onclick="getSelections()">
+	            <i class="fa fa-search"></i> 查询选择数据
+	        </a>
+	        <a class="btn btn-primary" onclick="getData()">
+	            <i class="fa fa-search"></i> 获取所有数据
+	        </a>
+        </div>
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+	
+	<th:block th:include="include :: footer" />
+	<th:block th:include="include :: bootstrap-table-editable-js" />
+	
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+		        showPageGo: true,
+		        onEditableSave: onEditableSave,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号',
+					editable: true
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名',
+					editable : {
+						type : 'text',
+						title : '名称',
+						emptytext : "【名称】为空",
+						validate : function(value) {
+							if (value.length > 30) {
+								return '名称不能超过30个字符';
+							}
+							if (value.length == 0) {
+								return '名称不能为空';
+							}
+						}
+					}
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    editable : {
+						type : 'select',
+						title : '状态',
+						source : [{
+							value : 0,
+							text : "正常"
+						}, {
+							value : 1,
+							text : "停用"
+						}]
+					}
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+        
+        function onEditableSave (field, row, oldValue, $el) {
+        	alert("字段名：" + field + "，当前值：" + row[field]  + "，旧值：" + oldValue);
+        }
+        
+        /* 查询表格所有数据值 */
+        function getData(){
+        	var data = $("#" + table.options.id).bootstrapTable('getData');
+            alert(JSON.stringify(data))
+        }
+        
+        /* 查询表格选择行数据值 */
+        function getSelections(){
+        	var data = $("#" + table.options.id).bootstrapTable('getSelections');
+        	alert(JSON.stringify(data))
+        }
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/event.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('自定义触发事件')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+			    <p class="select-title">自定义触发事件（点击某行/双击某行/单击某格/双击某格/服务器发送数据前触发/数据被加载时触发）</p>
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+		        onClickRow: onClickRow,
+		        onDblClickRow: onDblClickRow,
+		        onClickCell: onClickCell,
+		        onDblClickCell: onDblClickCell,
+		        responseHandler: responseHandler,
+		        onLoadSuccess: onLoadSuccess,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+        
+        function onClickRow(row, $element){
+        	alert("单击行userId：" + row.userId + " userName：" + row.userName);
+        }
+        
+        function onDblClickRow(row, $element){
+        	alert("双击行userId：" + row.userId + " userName：" + row.userName);
+        }
+        
+        function onClickCell(field, value, row, $element){
+        	alert("单击格name：" + field + " value：" + value);
+        }
+        
+        function onDblClickCell(field, value, row, $element){
+        	alert("双击格name：" + field + " value：" + value);
+        }
+        
+        function responseHandler(res){
+        	alert("请求获取数据后处理回调函数");
+        }
+        
+        function onLoadSuccess(data){
+        	alert("当所有数据被加载时触发");
+        }
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/export.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('导出')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <th:block th:include="include :: bootstrap-table-export-js" />
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+		        showExport: true,
+		        exportOptions: {
+		        	ignoreColumn: [0, 8]  //忽略第一列和最后一列
+		        },
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/fixedColumns.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('冻结列')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="btn-group-sm" id="toolbar" role="group">
+				<a class="btn btn-success">
+	                <i class="fa fa-plus"></i> 新增
+	            </a>
+				<a class="btn btn-primary single disabled">
+		            <i class="fa fa-edit"></i> 修改
+		        </a>
+				<a class="btn btn-danger multiple disabled">
+		            <i class="fa fa-remove"></i> 删除
+		        </a>
+	        </div>
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <th:block th:include="include :: bootstrap-table-fixed-columns-js" />
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+		        fixedColumns: true,
+    		    fixedNumber: 3,
+    		    fixedRightNumber: 3,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+				{
+				    field : 'userBalance',
+				    title : '测试1'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试2'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试3'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试4'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试5'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试6'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试7'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试8'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试9'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试10'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试11'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试12'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试13'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试14'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试15'
+				},
+				{
+				    field : 'userBalance',
+				    title : '测试16'
+				}]
+            };
+            $.table.init(options);
+        });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/footer.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('表格数据汇总')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showFooter: true,
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额',
+				    footerFormatter:function (value) {
+				    	var sumBalance = 0;
+				        for (var i in value) {
+				        	sumBalance += parseFloat(value[i].userBalance);
+				        }
+				        return "总金额：" + sumBalance;
+				    }
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/groupHeader.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('组合表头')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-bordered">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+		        columns : [
+        				[{
+        					title : '基本信息',
+        					align : 'center',
+        					colspan : 6
+        				}, {
+        					title : '其他信息',
+        					align : 'center',
+        					colspan : 3
+        				}
+        			],
+        			[{
+        					checkbox : true
+        				}, {
+        					field : 'userId',
+        					title : '用户ID'
+        				}, {
+        					field : 'userCode',
+        					title : '用户编号'
+        				}, {
+        					field : 'userName',
+        					title : '用户姓名'
+        				}, {
+        					field : 'userPhone',
+        					title : '用户手机'
+        				}, {
+        					field : 'userEmail',
+        					title : '用户邮箱'
+        				}, {
+        					field : 'userBalance',
+        					title : '用户余额'
+        				}, {
+        					field : 'status',
+        					title : '用户状态',
+        					formatter : function (value, row, index) {
+        						return $.table.selectDictLabel(datas, value);
+        					}
+        				}, {
+        					title : '操作',
+        					align : 'center',
+        					formatter : function (value, row, index) {
+        						var actions = [];
+        						actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+        						actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+        						return actions.join('');
+        					}
+        				}
+        			]
+        		]
+            };
+            $.table.init(options);
+        });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/image.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('跳转至指定页')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+				    title: '图片',
+				    formatter: function(value, row, index) {
+				    	// 图片预览（注意：如存储在本地直接获取数据库路径，如有配置context-path需要使用ctx+路径）
+				    	// 如：/profile/upload/2019/08/08/3b7a839aced67397bac694d77611ce72.png
+				    	if(index % 2 == 0){
+				    		return $.table.imageView('#');
+				    	}else {
+				    		return $.table.imageView('#');
+				    	}
+				    }
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/multi.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('初始多表格')" />
+</head>
+<body class="gray-bg">
+    <div class="container-div">
+        <div class="row">
+            <div class="col-sm-12 search-collapse">
+                <form id="form1">
+                    <div class="select-list">
+                        <ul>
+						    <li>
+								用户名称：<input type="text" name="userName"/>
+							</li>
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('form1', 'bootstrap-table1')"><i class="fa fa-search"></i>&nbsp;搜索</a>
+							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('form1', 'bootstrap-table1')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+            <div class="btn-group-sm" id="toolbar1" role="group">
+                <a class="btn btn-success" onclick="options1()">
+	                <i class="fa fa-search"></i> options
+	            </a>
+	            <a class="btn btn-success" onclick="$.operate.add()">
+	                <i class="fa fa-plus"></i> 新增
+	            </a>
+	            <a class="btn btn-primary single disabled" onclick="$.operate.edit()">
+	                <i class="fa fa-edit"></i> 修改
+	            </a>
+	            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
+	                <i class="fa fa-remove"></i> 删除
+	            </a>
+            </div>
+			<div class="col-xs-12 select-table table-striped">
+				<table id="bootstrap-table1"></table>
+			</div>
+		</div>
+	</div>
+	
+	<div class="container-div">
+        <div class="row">
+            <div class="col-sm-12 search-collapse">
+                <form id="form2">
+                    <div class="select-list">
+                        <ul>
+                            <li>
+								用户名称：<input type="text" name="userName"/>
+							</li>
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('form2', 'bootstrap-table2')"><i class="fa fa-search"></i>&nbsp;搜索</a>
+							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('form2', 'bootstrap-table2')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+			
+            <div class="btn-group-sm" id="toolbar2" role="group">
+                <a class="btn btn-success" onclick="options2()">
+	                <i class="fa fa-search"></i> options
+	            </a>
+	            <a class="btn btn-success" onclick="$.operate.add()">
+	                <i class="fa fa-plus"></i> 新增
+	            </a>
+	            <a class="btn btn-primary single disabled" onclick="$.operate.edit()">
+	                <i class="fa fa-edit"></i> 修改
+	            </a>
+	            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
+	                <i class="fa fa-remove"></i> 删除
+	            </a>
+            </div>
+			<div class="col-xs-12 select-table table-striped">
+				<table id="bootstrap-table2"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/operate";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+            	id: "bootstrap-table1",
+            	toolbar: "toolbar1",
+                url: prefix + "/list",
+                createUrl: prefix + "/add",
+                removeUrl: prefix + "/remove",
+                updateUrl: prefix + "/edit/{id}",
+		        modalName: "用户",
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="###" onclick="$.operate.edit(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="###" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+        
+        
+        $(function() {
+            var options = {
+            	id: "bootstrap-table2",
+            	toolbar: "toolbar2",
+                url: prefix + "/list",
+                createUrl: prefix + "/add",
+                removeUrl: prefix + "/remove",
+                updateUrl: prefix + "/edit/{id}",
+		        modalName: "用户",
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="###" onclick="$.operate.edit(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
+		            	actions.push('<a class="btn btn-danger btn-xs" href="###" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+        
+        function options1() {
+        	var temp = "";
+        	var obj = table.config['bootstrap-table1'];
+        	for (var i in obj) {
+        	    temp += i + ":" + obj[i] + "<br/>";
+        	}
+        	$.modal.alert(temp);
+        }
+        
+        function options2() {
+        	var temp = "";
+        	var obj = table.config['bootstrap-table2'];
+        	for (var i in obj) {
+        	    temp += i + ":" + obj[i] + "<br/>";
+        	}
+        	$.modal.alert(temp);
+        }
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/other.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('其他操作')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+     	<div class="btn-group-sm" id="toolbar" role="group">
+	        <a class="btn btn-success" onclick="$.table.showColumn('userName')">
+	            <i class="fa fa-check"></i> 显示姓名
+	        </a>
+	        <a class="btn btn-danger" onclick="$.table.hideColumn('userName')">
+	            <i class="fa fa-close"></i> 隐藏姓名
+	        </a>
+	        <a class="btn btn-info" onclick="selectColumns()">
+	            <i class="fa fa-search"></i> 获取选中姓名
+	        </a>
+	        <a class="btn btn-warning" onclick="$.table.refresh()">
+	            <i class="fa fa-refresh"></i> 刷新
+	        </a>
+	        <a class="btn btn-danger" onclick="$.table.destroy()">
+	            <i class="fa fa-refresh"></i> 销毁
+	        </a>
+	        <a class="btn btn-primary" onclick="selectFirstColumns()">
+	            <i class="fa fa-search"></i> 获取选中首列值
+	        </a>
+        </div>
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+        
+        function selectColumns() {
+        	var column = $.table.selectColumns('userName');
+        	alert(column);
+        }
+        
+        function selectFirstColumns() {
+        	var column = $.table.selectFirstColumns();
+        	alert(column);
+        }
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/pageGo.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('跳转至指定页')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+		        showPageGo: true,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/params.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('自定义查询参数')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<p class="select-title">通过queryParams方法设置</p>
+				<table id="bootstrap-table"></table>
+			</div>
+			
+			<div class="col-sm-12 search-collapse">
+				<form id="post-form">
+					<div class="select-list">
+						<ul>
+							<li>
+								用户姓名：<input type="text" name="userName" value="测试6"/>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+			<div class="col-sm-12 select-table table-striped">
+				<p class="select-title">通过form自动填充</p>
+				<table id="bootstrap-table-form"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+		        queryParams: queryParams,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+        
+        function queryParams(params) {
+            var search = $.table.queryParams(params);
+            search.userName = '测试1';
+            return search;
+        }
+        
+        
+        $(function() {
+            var options = {
+            	id: "bootstrap-table-form",
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/remember.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('翻页记住选择')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+     	<div class="btn-group-sm" id="toolbar" role="group">
+	        <a class="btn btn-success" onclick="checkItem()">
+	            <i class="fa fa-check"></i> 选中项
+	        </a>
+        </div>
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        rememberSelected: true,
+                columns: [{
+                	field: 'state',
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	var actions = [];
+		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
+                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
+						return actions.join('');
+		            }
+		        }]
+            };
+            $.table.init(options);
+        });
+        
+        // 选中数据
+        function checkItem(){
+        	// var arrays = $.table.selectColumns("userId");
+        	var arrays = $.table.selectColumns("userCode");
+        	alert(arrays);
+        }
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/reorder.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('表格拖拽操作')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 select-table table-striped">
+			    <p class="select-title">按住表格拖拽</p>
+				<table id="bootstrap-table"
+				 data-use-row-attr-func="true"
+				 data-reorderable-rows="true"></table>
+			</div>
+		</div>
+	</div>
+    <div th:include="include :: footer"></div>
+    <th:block th:include="include :: bootstrap-table-reorder-js" />
+    <script th:inline="javascript">
+        var prefix = ctx + "demo/table";
+        var datas = [[${@dict.getType('sys_normal_disable')}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+		        showSearch: false,
+		        showRefresh: false,
+		        showToggle: false,
+		        showColumns: false,
+		        onReorderRow: function (data) {
+		        	 //当拖拽结束后，data为整个表格的数据
+		            console.log('拖拽结束' + JSON.stringify(data))
+		            return false;
+		        },
+                columns: [{
+		            checkbox: true
+		        },
+				{
+					field : 'userId', 
+					title : '用户ID'
+				},
+				{
+					field : 'userCode', 
+					title : '用户编号'
+				},
+				{
+					field : 'userName', 
+					title : '用户姓名'
+				},
+				{
+					field : 'userPhone', 
+					title : '用户手机'
+				},
+				{
+					field : 'userEmail', 
+					title : '用户邮箱'
+				},
+				{
+				    field : 'userBalance',
+				    title : '用户余额'
+				},
+				{
+                    field: 'status',
+                    title: '用户状态',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                    	return $.table.selectDictLabel(datas, value);
+                    }
+                }]
+            };
+            $.table.init(options);
+        });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/search.html

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('表格搜索')" />
+	<th:block th:include="include :: bootstrap-select-css" />
+</head>
+<body class="gray-bg">
+    <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 search-collapse">
+			    <p class="select-title">普通条件查询</p>
+				<form id="ordinary-form">
+					<div class="select-list">
+						<ul>
+							<li>
+								商户编号：<input type="text" name="userId"/>
+							</li>
+							<li>
+								终端编号：<input type="text" name="termId"/>
+							</li>
+							<li>
+								处理状态：<select name="status">
+									<option value="">所有</option>
+									<option value="0">初始</option>
+									<option value="1">处理中</option>
+									<option value="2">交易成功</option>
+									<option value="3">交易失败</option>
+								</select>
+							</li>
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+
+			<div class="col-sm-12 search-collapse">
+			    <p class="select-title">时间条件查询</p>
+				<form id="time-form">
+					<div class="select-list">
+						<ul>
+							<li>
+								商户编号：<input type="text" name="userId"/>
+							</li>
+							<li>
+								终端编号：<input type="text" name="termId"/>
+							</li>
+							<li class="select-time">
+								<label>创建时间： </label>
+								<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
+								<span>-</span>
+								<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
+							</li>
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('time-form')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+
+			<div class="col-sm-12 search-collapse">
+			    <p class="select-title">多级联动下拉查询</p>
+				<form id="cxselect-form">
+					<div class="select-list">
+						<ul id="element">
+						    <li>
+								商户编号：<input type="text" name="userId"/>
+							</li>
+							<li>
+								充值类型：<select class="type"></select>
+							</li>
+							<li>
+								充值路由：<select class="router"></select>
+							</li>
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('cxselect-form')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+
+			<div class="col-sm-12 search-collapse">
+			    <p class="select-title">下拉多选条件查询</p>
+				<form id="select-form">
+					<div class="select-list">
+						<ul>
+							<li>
+								商户编号：<input type="text" name="userId"/>
+							</li>
+							<li>
+								终端编号：<input type="text" name="termId"/>
+							</li>
+							<li class="select-selectpicker">
+								<label>操作类型： </label><select class="selectpicker" data-none-selected-text="请选择" multiple>
+									<option value="">所有</option>
+									<option value="0">初始</option>
+									<option value="1">处理中</option>
+									<option value="2">交易成功</option>
+									<option value="3">交易失败</option>
+								</select>
+							</li>
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('select-form')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+
+			<div class="col-sm-12 search-collapse">
+			    <p class="select-title">复杂条件查询</p>
+				<form id="complex-form">
+					<div class="select-list">
+						<ul>
+							<li>
+								<label style="width: 80px">商户编号：</label>
+								<input type="text" name="userId"/>
+							</li>
+							<li>
+								<label style="width: 80px">订单号：</label>
+								<input type="text" name="orderNo"/>
+							</li>
+							<li>
+								<label style="width: 80px">日期：</label>
+								<input type="text" class="time-input" placeholder="日期"/>
+							</li>
+							<li class="select-selectpicker">
+								<label style="width: 80px">状态：</label>
+								<select class="selectpicker" data-none-selected-text="请选择" multiple>
+									<option value="">所有</option>
+									<option value="0">初始</option>
+									<option value="1">处理中</option>
+									<option value="2">交易成功</option>
+									<option value="3">交易失败</option>
+								</select>
+							</li>
+							<li>
+								<label style="width: 80px">供货商通道：</label>
+								<select>
+									<option value="">所有</option>
+									<option value="0">腾讯</option>
+									<option value="1">天猫</option>
+									<option value="2">京东</option>
+								</select>
+							</li>
+							<li>
+								<label style="width: 80px">来源：</label>
+								<select>
+									<option value="">所有</option>
+									<option value="0">手机</option>
+									<option value="1">电脑</option>
+									<option value="2">第三方</option>
+								</select>
+							</li>
+							<li>
+								<label style="width: 80px">运营商：</label>
+								<select>
+									<option value="">所有</option>
+									<option value="0">移动</option>
+									<option value="1">电信</option>
+									<option value="2">联通</option>
+								</select>
+							</li>
+							<li class="select-time">
+								<label style="width: 80px">回调时间：</label>
+								<input type="text" class="time-input" placeholder="开始时间"/>
+								<span>-</span>
+								<input type="text" class="time-input" placeholder="结束时间"/>
+							</li>
+
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm m50" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('complex-form')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+	<th:block th:include="include :: footer" />
+	<th:block th:include="include :: bootstrap-select-js" />
+	<th:block th:include="include :: jquery-cxselect-js" />
+
+	<script th:inline="javascript">
+	    // 直接返回获取
+   		var data = [{"v":"taobao","n":"淘宝","s":[{"v":"tm","n":"天猫"},{"v":"jhs","n":"聚划算"}]},{"v":"jd","n":"京东","s":[{"v":"jdcs","n":"京东超市"},{"v":"jdsx","n":"京东生鲜"}]}];
+    	$('#element').cxSelect({
+    	  selects: ['type', 'router'],
+    	  jsonValue: 'v',
+    	  data: data
+    	});
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/demo/table/subdata.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('主子表提交')" />
+    <th:block th:include="include :: datetimepicker-css" />
+</head>
+<body class="gray-bg">
+    <div class="main-content">
+        <form id="form-add" class="form-horizontal">
+            <input name="deptId" type="hidden" id="treeId"/>
+            <h4 class="form-header h4">客户信息</h4>
+            <div class="row">
+            	<div class="col-sm-6">
+                    <div class="form-group">
+                        <label class="col-sm-4 control-label is-required">客户名称：</label>
+                        <div class="col-sm-8">
+                            <input name="name" placeholder="请输入客户名称" class="form-control" type="text" maxlength="30">
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group">
+                        <label class="col-sm-4 control-label is-required">用户性别：</label>
+                        <div class="col-sm-8">
+                            <select name="sex" class="form-control" th:with="type=${@dict.getType('sys_user_sex')}">
+				                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
+				            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group">
+                        <label class="col-sm-4 control-label is-required">手机号码：</label>
+                        <div class="col-sm-8">
+                            <input id="phonenumber" name="phonenumber" placeholder="请输入手机号码" class="form-control" type="text" maxlength="11">
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group">
+                        <label class="col-sm-4 control-label is-required">生日：</label>
+                        <div class="col-sm-8">
+                            <div class="input-group date">
+		                        <input name="birthday" class="form-control" placeholder="yyyy-MM-dd" type="text">
+		                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+		                    </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-12">
+                    <div class="form-group">
+                        <label class="col-xs-2 control-label">备注：</label>
+                        <div class="col-xs-10">
+                            <textarea name="remark" maxlength="500" class="form-control" rows="3"></textarea>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <h4 class="form-header h4">商品数据</h4>
+            <div class="row">
+                <div class="col-sm-12">
+                    <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
+                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
+                    <div class="col-sm-12 select-table table-striped">
+					    <table id="bootstrap-table"></table>
+					</div>
+                </div>
+            </div>
+        </form>
+    </div>
+      
+    <div class="row">
+        <div class="col-sm-offset-5 col-sm-10">
+            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
+            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: datetimepicker-js" />
+    <script th:src="@{/js/jquery.tmpl.js}"></script>
+	<script th:inline="javascript">
+	    $(function() {
+		    var options = {
+                pagination: false,
+		        showSearch: false,
+                showRefresh: false,
+                showToggle: false,
+                showColumns: false,
+		        columns: [{
+		            checkbox: true
+		        },
+		        {
+		        	field: 'index',
+		        	align: 'center',
+		        	title: "序号",
+                    formatter: function (value, row, index) {
+                    	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
+                    	return columnIndex + $.table.serialNumber(index);
+                    }
+                },
+		        {
+		            field: 'name',
+		            align: 'center',
+		            title: '商品名称',
+		            formatter: function(value, row, index) {
+		            	var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].name' value='%s'>", index, value);
+		        		return html;
+                    }
+		        },
+		        {
+		            field: 'weight',
+		            align: 'center',
+		            title: '商品重量',
+		            formatter: function(value, row, index) {
+		            	var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].weight' value='%s'>", index, value);
+		        		return html;
+                    }
+		        },
+		        {
+		            field: 'price',
+		            align: 'center',
+		            title: '商品价格',
+		            formatter: function(value, row, index) {
+		            	var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].price' value='%s'>", index, value);
+		        		return html;
+                    }
+		        },
+		        {
+		            field: 'type',
+		            align: 'center',
+		            title: '商品种类',
+		            formatter: function(value, row, index) {
+		        		var data = [{ index: index, type: value }];
+		                return $("#goodsTypeTpl").tmpl(data).html();
+                    }
+		        }]
+		    };
+		    $.table.init(options);
+		});
+	    
+	    /* 主子表-提交 */
+        function submitHandler(index, layero){
+        	var data = $("#form-add").serializeArray();
+			$.operate.saveModal("/demo/operate/customer/add", data);
+        }
+	    
+        $("input[name='birthday']").datetimepicker({
+            format: "yyyy-mm-dd",
+            minView: "month",
+            autoclose: true
+        });
+        
+        function addColumn() {
+        	var count = $("#" + table.options.id).bootstrapTable('getData').length;
+        	sub.editColumn();
+        	
+        	$("#" + table.options.id).bootstrapTable('insertRow', {
+        		index: count,
+                row: {
+                	index: $.table.serialNumber(count),
+                	name: "",
+                	weight: "",
+                	price: "",
+                	type: "",
+                }
+        	});
+        }
+    </script>
+</body>
+</html>
+
+<!-- 商品类型 -->
+<script id="goodsTypeTpl" type="text/x-jquery-tmpl">
+<div>
+<select class='form-control' name='goods[${index}].type'>
+    <option value="">所有</option>
+    <option value="0" {{if type==="0"}}selected{{/if}}>寒性</option>
+    <option value="1" {{if type==="1"}}selected{{/if}}>热性</option>
+</select>
+</div>
+</script>

leiSP-admin/src/main/resources/templates/error/404.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LeiSP - 404</title>
+    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
+    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
+    <link th:href="@{/css/style.css}" rel="stylesheet"/>
+</head>
+<body class="gray-bg">
+    <div class="middle-box text-center animated fadeInDown">
+        <h1>404</h1>
+        <h3 class="font-bold">找不到网页！</h3>
+        <div class="error-desc">
+                                对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
+            <a href="javascript:index()" class="btn btn-primary m-t">主页</a>
+        </div>
+    </div>
+    <script th:inline="javascript">
+      var ctx = [[@{/}]];
+      function index() {
+          window.parent.frames.location.href = ctx + "index";
+      }
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/error/500.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LeiSP - 500</title>
+	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
+    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
+    <link th:href="@{/css/style.css}" rel="stylesheet"/>
+</head>
+<body class="gray-bg">
+    <div class="middle-box text-center animated fadeInDown">
+        <h1>500</h1>
+        <h3 class="font-bold">内部服务器错误！</h3>
+
+        <div class="error-desc">
+                                服务器遇到意外事件，不允许完成请求。我们抱歉。您可以返回主页面。
+            <a href="javascript:index()" class="btn btn-primary m-t">主页</a>
+        </div>
+    </div>
+    <script th:inline="javascript">
+      var ctx = [[@{/}]];
+      function index() {
+          window.parent.frames.location.href = ctx + "index";
+      }
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/error/business.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LeiSP - 403</title>
+	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
+    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
+    <link th:href="@{/css/style.css}" rel="stylesheet"/>
+</head>
+<body class="gray-bg">
+    <div class="middle-box text-center animated fadeInDown">
+        <h3 class="font-bold">操作异常！</h3>
+
+        <div class="error-desc">
+            [[${errorMessage}]]
+        </div>
+    </div>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/error/unauth.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LeiSP - 403</title>
+	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
+    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
+    <link th:href="@{/css/style.css}" rel="stylesheet"/>
+</head>
+<body class="gray-bg">
+    <div class="middle-box text-center animated fadeInDown">
+        <h1>403</h1>
+        <h3 class="font-bold">您没有访问权限！</h3>
+
+        <div class="error-desc">
+                                对不起，您没有访问权限，请不要进行非法操作！您可以返回主页面
+            <a href="javascript:index()" class="btn btn-outline btn-primary btn-xs">返回主页</a>
+        </div>
+    </div>
+    <script th:inline="javascript">
+      var ctx = [[@{/}]];
+      function index() {
+          window.parent.frames.location.href = ctx + "index";
+      }
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/include.html

@@ -0,0 +1,209 @@
+<!-- 通用CSS -->
+<head th:fragment=header(title)>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="keywords" content="">
+	<meta name="description" content="">
+	<title th:text="${title}"></title>
+	<link rel="shortcut icon" href="sooka.ico">
+	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
+	<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
+	<!-- bootstrap-table 表格插件样式 -->
+	<link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=20200727}" rel="stylesheet"/>
+	<link th:href="@{/css/animate.css}" rel="stylesheet"/>
+	<link th:href="@{/css/style.css?v=20200727}" rel="stylesheet"/>
+	<link th:href="@{/ruoyi/css/ry-ui.css?v=4.3.1}" rel="stylesheet"/>
+</head>
+
+<!-- 通用JS -->
+<div th:fragment="footer">
+    <a id="scroll-up" href="#" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a>
+	<script th:src="@{/js/jquery.min.js}"></script>
+	<script th:src="@{/js/bootstrap.min.js}"></script>
+	<!-- bootstrap-table 表格插件 -->
+	<script th:src="@{/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=20200727}"></script>
+	<script th:src="@{/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20200727}"></script>
+	<script th:src="@{/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=20200727}"></script>
+	<!-- jquery-validate 表单验证插件 -->
+	<script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
+	<script th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
+	<script th:src="@{/ajax/libs/validate/jquery.validate.extend.js}"></script>
+	<!-- jquery-validate 表单树插件 -->
+	<script th:src="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.js}"></script>
+	<!-- 遮罩层 -->
+	<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
+    <script th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
+	<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
+	<script th:src="@{/ajax/libs/layui/layui.js}"></script>
+	<script th:src="@{/ruoyi/js/common.js?v=4.3.1}"></script>
+	<script th:src="@{/ruoyi/js/ry-ui.js?v=4.3.1}"></script>
+	<script th:inline="javascript"> var ctx = [[@{/}]]; </script>
+</div>
+
+<!-- ztree树插件 -->
+<div th:fragment="ztree-css">
+    <link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="ztree-js">
+    <script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
+</div>
+
+<!-- select2下拉框插件 -->
+<div th:fragment="select2-css">
+    <link th:href="@{/ajax/libs/select2/select2.min.css}" rel="stylesheet"/>
+    <link th:href="@{/ajax/libs/select2/select2-bootstrap.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="select2-js">
+    <script th:src="@{/ajax/libs/select2/select2.min.js}"></script>
+</div>
+
+<!-- bootstrap-select下拉框插件 -->
+<div th:fragment="bootstrap-select-css">
+    <link th:href="@{/ajax/libs/bootstrap-select/bootstrap-select.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="bootstrap-select-js">
+    <script th:src="@{/ajax/libs/bootstrap-select/bootstrap-select.js}"></script>
+</div>
+
+<!-- datetimepicker日期和时间插件 -->
+<div th:fragment="datetimepicker-css">
+    <link th:href="@{/ajax/libs/datapicker/bootstrap-datetimepicker.min.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="datetimepicker-js">
+    <script th:src="@{/ajax/libs/datapicker/bootstrap-datetimepicker.min.js}"></script>
+</div>
+
+<!-- ui布局插件 -->
+<div th:fragment="layout-latest-css">
+    <link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="layout-latest-js">
+    <script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
+</div>
+
+<!-- summernote富文本编辑器插件 -->
+<div th:fragment="summernote-css">
+    <link th:href="@{/ajax/libs/summernote/summernote.css}" rel="stylesheet"/>
+	<link th:href="@{/ajax/libs/summernote/summernote-bs3.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="summernote-js">
+    <script th:src="@{/ajax/libs/summernote/summernote.min.js}"></script>
+	<script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
+</div>
+
+<!-- cropper图像裁剪插件 -->
+<div th:fragment="cropper-css">
+    <link th:href="@{/ajax/libs/cropper/cropper.min.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="cropper-js">
+    <script th:src="@{/ajax/libs/cropper/cropper.min.js}"></script>
+</div>
+
+<!-- jasny功能扩展插件 -->
+<div th:fragment="jasny-bootstrap-css">
+    <link th:href="@{/ajax/libs/jasny/jasny-bootstrap.min.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="jasny-bootstrap-js">
+    <script th:src="@{/ajax/libs/jasny/jasny-bootstrap.min.js}"></script>
+</div>
+
+<!-- fileinput文件上传插件 -->
+<div th:fragment="bootstrap-fileinput-css">
+    <link th:href="@{/ajax/libs/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="bootstrap-fileinput-js">
+    <script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.min.js}"></script>
+</div>
+
+<!-- duallistbox双列表框插件 -->
+<div th:fragment="bootstrap-duallistbox-css">
+    <link th:href="@{/ajax/libs/duallistbox/bootstrap-duallistbox.min.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="bootstrap-duallistbox-js">
+    <script th:src="@{/ajax/libs/duallistbox/bootstrap-duallistbox.min.js}"></script>
+</div>
+
+<!-- suggest搜索自动补全 -->
+<div th:fragment="bootstrap-suggest-js">
+    <script th:src="@{/ajax/libs/suggest/bootstrap-suggest.min.js}"></script>
+</div>
+
+<!-- typeahead搜索自动补全 -->
+<div th:fragment="bootstrap-typeahead-js">
+    <script th:src="@{/ajax/libs/typeahead/bootstrap3-typeahead.min.js}"></script>
+</div>
+
+<!-- 多级联动下拉 -->
+<div th:fragment="jquery-cxselect-js">
+    <script th:src="@{/ajax/libs/cxselect/jquery.cxselect.min.js}"></script>
+</div>
+
+<!-- jsonview格式化和语法高亮JSON格式数据查看插件 -->
+<div th:fragment="jsonview-css">
+    <link th:href="@{/ajax/libs/jsonview/jquery.jsonview.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="jsonview-js">
+    <script th:src="@{/ajax/libs/jsonview/jquery.jsonview.js}"></script>
+</div>
+
+<!-- jquery.steps表单向导插件 -->
+<div th:fragment="jquery-steps-css">
+    <link th:href="@{/ajax/libs/staps/jquery.steps.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="jquery-steps-js">
+    <script th:src="@{/ajax/libs/staps/jquery.steps.min.js}"></script>
+</div>
+
+<!-- ECharts百度统计图表插件 -->
+<div th:fragment="echarts-js">
+    <script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
+</div>
+
+<!-- peity图表组合插件 -->
+<div th:fragment="peity-js">
+    <script th:src="@{/ajax/libs/report/peity/jquery.peity.min.js}"></script>
+</div>
+
+<!-- sparkline线状图插件 -->
+<div th:fragment="sparkline-js">
+    <script th:src="@{/ajax/libs/report/sparkline/jquery.sparkline.min.js}"></script>
+</div>
+
+<!-- 表格拖拽插件 -->
+<div th:fragment="bootstrap-table-reorder-js">
+	<script th:src="@{/ajax/libs/bootstrap-table/extensions/reorder/bootstrap-table-reorder.js}"></script>
+	<script th:src="@{/ajax/libs/bootstrap-table/extensions/reorder/jquery.tablednd.js}"></script>
+</div>
+
+<!-- 表格行内编辑插件 -->
+<div th:fragment="bootstrap-editable-css">
+    <link th:href="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.css}" rel="stylesheet"/>
+</div>
+<div th:fragment="bootstrap-table-editable-js">
+	<script th:src="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.min.js}"></script>
+    <script th:src="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js?v=20200727}"></script>
+</div>
+
+<!-- 表格导出插件 -->
+<div th:fragment="bootstrap-table-export-js">
+	<script th:src="@{/ajax/libs/bootstrap-table/extensions/export/bootstrap-table-export.js}"></script>
+	<script th:src="@{/ajax/libs/bootstrap-table/extensions/export/tableExport.js}"></script>
+</div>
+
+<!-- 表格冻结列插件 -->
+<div th:fragment="bootstrap-table-fixed-columns-js">
+	<script th:src="@{/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.min.js?v=20200727}"></script>
+</div>
+
+<!-- lusetp.css -->
+<div th:fragment="lustep-css">
+	<link th:href="@{/ajax/libs/lustep/step.css}" rel="stylesheet"/>
+</div>
+
+<!-- lusetp.js -->
+<div th:fragment="lustep-js">
+	<script th:src="@{/ajax/libs/lustep/step.js}"></script>
+</div>
+
+

leiSP-admin/src/main/resources/templates/index.html

@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="renderer" content="webkit">
+    <title>系统首页</title>
+    <!-- 避免IE使用兼容模式 -->
+ 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link th:href="@{sooka.ico}" rel="stylesheet"/>
+    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
+    <link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>
+    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
+    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
+    <link th:href="@{/css/style.css}" rel="stylesheet"/>
+    <link th:href="@{/css/skins.css}" rel="stylesheet"/>
+    <link th:href="@{/ruoyi/css/ry-ui.css}" 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>
+        <a th:href="@{/index}">
+            <li class="logo hidden-xs">
+                <span class="logo-lg">LEI.SF</span>
+            </li>
+         </a>
+        <div class="sidebar-collapse">
+            <ul class="nav" id="side-menu">
+            	<li>
+            		<div class="user-panel">
+            			<a class="menuItem noactive" title="个人中心" th:href="@{/system/user/profile}">
+            				<div class="hide" th:text="个人中心"></div>
+					        <div class="pull-left image">
+		                    	<img th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="this.src='img/profile.jpg'" class="img-circle" alt="User Image">
+					        </div>
+				        </a>
+				        <div class="pull-left info">
+				          <p>[[${user.loginName}]]</p>
+				          <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
+				          <a th:href="@{logout}" style="padding-left:5px;"><i class="fa fa-sign-out text-danger"></i> 注销</a>
+				        </div>
+				    </div>
+            	</li>
+                <li>
+                    <a class="menuItem" th:href="@{/system/main}"><i class="fa fa-home"></i> <span class="nav-label">首页</span> </a>
+                </li>
+                <li th:each="menu : ${menus}">
+                	<a th:class="@{${menu.url != '' && menu.url != '#'} ? ${menu.target}}" th:href="@{${menu.url == ''} ? |#| : ${menu.url}}">
+                		<i class="fa fa-bar-chart-o" th:class="${menu.icon}"></i>
+                    	<span class="nav-label" th:text="${menu.menuName}">一级菜单</span>
+                    	<span th:class="${menu.url == '' || menu.url == '#'} ? |fa arrow|"></span>
+                	</a>
+                    <ul class="nav nav-second-level collapse">
+						<li th:each="cmenu : ${menu.children}">
+							<a th:if="${#lists.isEmpty(cmenu.children)}" th:class="${cmenu.target == ''} ? |menuItem| : ${cmenu.target}" th:utext="${cmenu.menuName}" th:href="@{${cmenu.url}}">二级菜单</a>
+							<a th:if="${not #lists.isEmpty(cmenu.children)}" href="#">[[${cmenu.menuName}]]<span class="fa arrow"></span></a>
+							<ul th:if="${not #lists.isEmpty(cmenu.children)}" class="nav nav-third-level">
+								<li th:each="emenu : ${cmenu.children}">
+								    <a th:if="${#lists.isEmpty(emenu.children)}" th:class="${emenu.target == ''} ? |menuItem| : ${emenu.target}" th:text="${emenu.menuName}" th:href="@{${emenu.url}}">三级菜单</a>
+								    <a th:if="${not #lists.isEmpty(emenu.children)}" href="#">[[${emenu.menuName}]]<span class="fa arrow"></span></a>
+								    <ul th:if="${not #lists.isEmpty(emenu.children)}" class="nav nav-four-level">
+								      	<li th:each="fmenu : ${emenu.children}"><a th:if="${#lists.isEmpty(fmenu.children)}" th:class="${fmenu.target == ''} ? |menuItem| : ${fmenu.target}" th:text="${fmenu.menuName}" th:href="@{${fmenu.url}}">四级菜单</a></li>
+								    </ul>
+								</li>
+							</ul>
+						</li>
+					</ul>
+                </li>
+                <li th:if="${demoEnabled}">
+                    <a href="#"><i class="fa fa-desktop"></i><span class="nav-label">实例演示</span><span class="fa arrow"></span></a>
+                    <ul class="nav nav-second-level collapse">
+                        <li> <a>表单<span class="fa arrow"></span></a>
+                            <ul class="nav nav-third-level">
+								<li><a class="menuItem" th:href="@{/demo/form/button}">按钮</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/grid}">栅格</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/select}">下拉框</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/timeline}">时间轴</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/basic}">基本表单</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/cards}">卡片列表</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/jasny}">功能扩展</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/sortable}">拖动排序</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/tabs_panels}">选项卡 & 面板</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/validate}">表单校验</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/wizard}">表单向导</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/upload}">文件上传</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/datetime}">日期和时间</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/summernote}">富文本编辑器</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/duallistbox}">左右互选组件</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/autocomplete}">搜索自动补全</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/cxselect}">多级联动下拉</a></li>
+							</ul>
+                        </li>
+                        <li> <a>表格<span class="fa arrow"></span></a>
+                            <ul class="nav nav-third-level">
+								<li><a class="menuItem" th:href="@{/demo/table/search}">查询条件</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/footer}">数据汇总</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/groupHeader}">组合表头</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/export}">表格导出</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/remember}">翻页记住选择</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/pageGo}">跳转至指定页</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/params}">自定义查询参数</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/multi}">初始多表格</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/button}">点击按钮加载表格</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/data}">直接加载表格数据</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/fixedColumns}">表格冻结列</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/event}">自定义触发事件</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/detail}">表格细节视图</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/child}">表格父子视图</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/image}">表格图片预览</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/curd}">动态增删改查</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/reorder}">表格拖拽操作</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/editable}">表格行内编辑</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/subdata}">主子表提交</a></li>
+								<li><a class="menuItem" th:href="@{/demo/table/other}">表格其他操作</a></li>
+							</ul>
+                        </li>
+                        <li> <a>弹框<span class="fa arrow"></span></a>
+                            <ul class="nav nav-third-level">
+								<li><a class="menuItem" th:href="@{/demo/modal/dialog}">模态窗口</a></li>
+								<li><a class="menuItem" th:href="@{/demo/modal/layer}">弹层组件</a></li>
+								<li><a class="menuItem" th:href="@{/demo/modal/table}">弹层表格</a></li>
+							</ul>
+                        </li>
+                        <li> <a>操作<span class="fa arrow"></span></a>
+                            <ul class="nav nav-third-level">
+								<li><a class="menuItem" th:href="@{/demo/operate/table}">表格</a></li>
+								<li><a class="menuItem" th:href="@{/demo/operate/other}">其他</a></li>
+							</ul>
+                        </li>
+                        <li> <a>报表<span class="fa arrow"></span></a>
+                            <ul class="nav nav-third-level">
+								<li><a class="menuItem" th:href="@{/demo/report/echarts}">百度ECharts</a></li>
+								<li><a class="menuItem" th:href="@{/demo/report/peity}">peity</a></li>
+								<li><a class="menuItem" th:href="@{/demo/report/sparkline}">sparkline</a></li>
+								<li><a class="menuItem" th:href="@{/demo/report/metrics}">图表组合</a></li>
+							</ul>
+                        </li>
+                        <li> <a>图标<span class="fa arrow"></span></a>
+                            <ul class="nav nav-third-level">
+								<li><a class="menuItem" th:href="@{/demo/icon/fontawesome}">Font Awesome</a></li>
+								<li><a class="menuItem" th:href="@{/demo/icon/glyphicons}">Glyphicons</a></li>
+							</ul>
+                        </li>
+                        <li>
+	                        <a href="#"><i class="fa fa-sitemap"></i>四层菜单<span class="fa arrow"></span></a>
+	                        <ul class="nav nav-third-level collapse">
+	                            <li>
+	                                <a href="#" id="damian">三级菜单1<span class="fa arrow"></span></a>
+	                                <ul class="nav nav-third-level">
+	                                    <li>
+	                                        <a href="#">四级菜单1</a>
+	                                    </li>
+	                                    <li>
+	                                        <a href="#">四级菜单2</a>
+	                                    </li>
+	                                </ul>
+	                            </li>
+	                            <li><a href="#">三级菜单2</a></li>
+	                        </ul>
+	                    </li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </nav>
+    <!--左侧导航结束-->
+
+    <!--右侧部分开始-->
+    <div id="page-wrapper" class="gray-bg dashbard-1">
+        <div class="row border-bottom">
+            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
+                <div class="navbar-header">
+                    <a class="navbar-minimalize minimalize-styl-2" style="color:#FFF;" href="#" title="收起菜单">
+                    	<i class="fa fa-bars"></i>
+                    </a>
+                </div>
+				<h6 >
+					通化市数据共享交换前置机平台
+				</h6>
+                <ul class="nav navbar-top-links navbar-right welcome-message">
+					<li><a title="可视化" th:href="@{/visualization/index}" target="_blank"><i class="fa fa-bar-chart"></i> 可视化</a></li>
+<!--					<li><a title="示例" href="" target="_blank"><i class="fa fa-video-camera"></i> 示例</a></li>-->
+<!--                    <li><a title="文档" href="" target="_blank"><i class="fa fa-question-circle"></i> 文档</a></li>-->
+	                <li><a title="全屏显示" href="javascript:void(0)" id="fullScreen"><i class="fa fa-arrows-alt"></i> 全屏</a></li>
+                    <li class="dropdown user-menu">
+						<a href="javascript:void(0)" class="dropdown-toggle" data-hover="dropdown">
+							<img th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="this.src='img/profile.jpg'" class="user-image">
+							<span class="hidden-xs">[[${#strings.defaultString(user.userName, '-')}]]</span>
+						</a>
+						<ul class="dropdown-menu">
+							<li class="mt5">
+								<a th:href="@{/system/user/profile}" class="menuItem">
+								<i class="fa fa-user"></i> 个人中心</a>
+							</li>
+							<li>
+								<a onclick="resetPwd()">
+								<i class="fa fa-key"></i> 修改密码</a>
+							</li>
+							<li>
+								<a onclick="switchSkin()">
+								<i class="fa fa-dashboard"></i> 切换主题</a>
+							</li>
+							<li class="divider"></li>
+							<li>
+								<a th:href="@{logout}">
+								<i class="fa fa-sign-out"></i> 退出登录</a>
+							</li>
+						</ul>
+					</li>
+                </ul>
+            </nav>
+        </div>
+        <div class="row content-tabs">
+            <button class="roll-nav roll-left tabLeft">
+                <i class="fa fa-backward"></i>
+            </button>
+            <nav class="page-tabs menuTabs">
+                <div class="page-tabs-content">
+                    <a href="javascript:;" class="active menuTab" th:data-id="@{/system/main}">首页</a>
+                </div>
+            </nav>
+            <button class="roll-nav roll-right tabRight">
+                <i class="fa fa-forward"></i>
+            </button>
+            <a href="javascript:void(0);" class="roll-nav roll-right tabReload"><i class="fa fa-refresh"></i> 刷新</a>
+        </div>
+
+        <a id="ax_close_max" class="ax_close_max" href="#" title="关闭全屏"> <i class="fa fa-times-circle-o"></i> </a>
+
+        <div class="row mainContent" id="content-main">
+            <iframe class="RuoYi_iframe" name="iframe0" width="100%" height="100%" th:data-id="@{/system/main}"
+                    th:src="@{/system/main}" frameborder="0" seamless></iframe>
+        </div>
+        <!--<div class="footer">-->
+            <!--<div class="pull-right">© [[${copyrightYear}]] LeiSP Copyright </div>-->
+        <!--</div>-->
+    </div>
+    <!--右侧部分结束-->
+</div>
+<!-- 全局js -->
+<script th:src="@{/js/jquery.min.js}"></script>
+<script th:src="@{/js/bootstrap.min.js}"></script>
+<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
+<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
+<script th:src="@{/js/jquery.contextMenu.min.js}"></script>
+<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
+<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
+<script th:src="@{/ruoyi/js/ry-ui.js}"></script>
+<script th:src="@{/ruoyi/js/common.js}"></script>
+<script th:src="@{/ruoyi/index.js}"></script>
+<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
+<script th:inline="javascript">
+var ctx = [[@{/}]];
+// 皮肤缓存
+var skin = storage.get("skin");
+// history（表示去掉地址的#）否则地址以"#"形式展示
+var mode = "history";
+// 历史访问路径缓存
+var historyPath = storage.get("historyPath");
+// 是否页签与菜单联动
+var isLinkage = true;
+
+// 本地主题优先，未设置取系统配置
+if($.common.isNotEmpty(skin)){
+	$("body").addClass(skin.split('|')[0]);
+	$("body").addClass(skin.split('|')[1]);
+} else {
+	$("body").addClass([[${sideTheme}]]);
+	$("body").addClass([[${skinName}]]);
+}
+
+/* 用户管理-重置密码 */
+function resetPwd() {
+    var url = ctx + 'system/user/profile/resetPwd';
+    $.modal.open("重置密码", url, '770', '380');
+}
+/* 切换主题 */
+function switchSkin() {
+    layer.open({
+		type : 2,
+		shadeClose : true,
+		title : "切换主题",
+		area : ["530px", "386px"],
+		content : [ctx + "system/switchSkin", 'no']
+	})
+}
+
+/** 刷新时访问路径页签 */
+function applyPath(url) {
+	$('a[href$="' + decodeURI(url) + '"]').click();
+	if (!$('a[href$="' + url + '"]').hasClass("noactive")) {
+	    $('a[href$="' + url + '"]').parent("li").addClass("selected").parents("li").addClass("active").end().parents("ul").addClass("in");
+	}
+}
+
+
+$(function() {
+	if($.common.equals("history", mode) && window.performance.navigation.type == 1) {
+		var url = storage.get('publicPath');
+	    if ($.common.isNotEmpty(url)) {
+	    	applyPath(url);
+	    }
+	} else {
+		var hash = location.hash;
+	    if ($.common.isNotEmpty(hash)) {
+	        var url = hash.substring(1, hash.length);
+	        applyPath(url);
+	    }
+	}
+});
+</script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/login.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <title>登录管理系统</title>
+    <meta name="description" content="后台管理框架">
+    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
+    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
+    <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
+    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
+    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.3.1}" rel="stylesheet"/>
+    <!-- 360浏览器急速模式 -->
+    <meta name="renderer" content="webkit">
+    <!-- 避免IE使用兼容模式 -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="shortcut icon" href="../static/sooka.png" th:href="@{sooka.png}"/>
+    <style type="text/css">label.error { position:inherit;  }</style>
+    <script>
+        if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
+    </script>
+</head>
+<body class="signin">
+<div id="large-header">
+    <canvas id="demo-canvas"></canvas>
+</div>
+    <div class="signinpanel">
+
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="signin-info">
+
+                    <h6><i>通化市数据共享交换前置机平台</i></h6>
+                    <i class="xx_i"><img src="../img/thjk_dlimg2.png"/> </i>
+                    <strong th:if="${@config.getKey('sys.account.registerUser')}">还没有账号？ <a th:href="@{/register}">立即注册&raquo;</a></strong>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-7">
+                <div class="dl_left">
+
+                </div>
+            </div>
+            <div class="col-sm-5">
+                <form id="signupForm" autocomplete="off">
+                    <h4  style="color: #fff;font-size: 18px;">登录：</h4>
+                    <input type="text"     name="username" class="form-control uname" placeholder="用户名" value="" />
+                    <input type="password" name="password" class="form-control pword" placeholder="密码"   value="" />
+					<!--<div class="row m-t" th:if="${captchaEnabled==true}">-->
+						<!--<div class="col-xs-6">-->
+						    <!--<input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" />-->
+						<!--</div>-->
+						<!--<div class="col-xs-6">-->
+							<!--<a href="javascript:void(0);" title="点击更换验证码">-->
+								<!--<img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>-->
+							<!--</a>-->
+						<!--</div>-->
+					<!--</div>-->
+                    <!--<div class="checkbox-custom" th:classappend="${captchaEnabled==false} ? 'm-t'">-->
+				        <!--<input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme">记住我</label>-->
+				    <!--</div>-->
+                    <button class="btn btn-success-login btn-block" id="btnSubmit" data-loading="正在验证登录，请稍后...">登录</button>
+                </form>
+            </div>
+        </div>
+
+    </div>
+<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
+<!-- 全局js -->
+<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
+<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
+<!-- 验证插件 -->
+<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
+<script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
+<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
+<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
+<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js}"></script>
+<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
+<script src="../static/js/EasePack.min.js" th:src="@{/js/EasePack.min.js}"></script>
+<script src="../static/js/TweenLite.min.js" th:src="@{/js/TweenLite.min.js}"></script>
+<script src="../static/js/canvasindex.js" th:src="@{/js/canvasindex.js}"></script>
+
+</body>
+</html>

leiSP-admin/src/main/resources/templates/main.html

@@ -0,0 +1,374 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>统计</title>
+    <link rel="shortcut icon" href="sooka.ico">
+    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
+    <link href="../static/css/toast.style.css" th:href="@{/css/toast.style.css}" rel="stylesheet"/>
+    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
+    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
+    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
+    <style type="text/css">
+        /*新*/
+        .ibox-left-th {
+            left: -10px;
+            font-size: 16px;
+            text-align: center;
+            color: #fff;
+            float: left;
+        }
+
+        .ibox-left-th img {
+            width: 50px;
+            height: 50px;
+        }
+
+        .ibox-left-th h5 {
+            font-size: 16px;
+            color: #fff;
+            margin: 15px 0 0 0
+        }
+
+        .ibox-right-th {
+            left: -35px;
+            float: right;
+            font-size: 48px;
+            color: #fff;
+            text-align: center;
+            line-height: 80px;
+        }
+
+        .th-wid-6 {
+            width: 16.01%;
+            padding: 30px 10px;
+            border-radius: 5px;
+            float: left;
+        }
+
+        .ibox-th-colorbar1 {
+            background: #44aeff;
+
+        }
+
+        .ibox-th-colorbar2 {
+            background: #53bb4c;
+            margin-left: 13px;
+        }
+
+        .ibox-th-colorbar3 {
+            background: #f68539;
+            margin-left: 13px;
+        }
+
+        .ibox-th-colorbar4 {
+            background: #23dca1;
+            margin-left: 13px;
+        }
+
+        .ibox-th-colorbar5 {
+            background: #f1cb1b;
+            margin-left: 13px;
+        }
+
+        .ibox-th-colorbar6 {
+            background: #7c82cb;
+            margin-left: 13px;
+        }
+        .flot-chart{
+            height: 500px!important;
+        }
+        .mg-top-15{
+            margin-top: 15px;
+        }
+
+    </style>
+</head>
+
+<body class="gray-bg">
+<div class="wrapper wrapper-content">
+
+    <div class="row" style="padding:0 15px">
+        <div class="th-wid-6 ibox-th-colorbar1">
+
+            <div class="col-sm-6 ibox-left-th">
+                <img th:src="@{/img/jkzs.png}">
+                <h5>接口总数</h5>
+            </div>
+            <div class="col-sm-6 ibox-right-th">
+                <span style="font-size: 14px;position: absolute;top: -50px;left: 55px;display: block;height: 25px;right: -35px;">单位：个</span>
+                <span id="tj_interface_total">[[${count}]]</span>
+            </div>
+        </div>
+        <div class="th-wid-6 ibox-th-colorbar2">
+
+            <div class="col-sm-6 ibox-left-th">
+                <img th:src="@{/img/dypc.png}">
+                <h5>调用频次</h5>
+            </div>
+            <div class="col-sm-6 ibox-right-th">
+                <span style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: -35px;">单位：次</span>
+                <span id="tj_dypc">[[${callFrequency}]]</span>
+            </div>
+        </div>
+        <div class="th-wid-6 ibox-th-colorbar3">
+
+            <div class="col-sm-6 ibox-left-th">
+                <img th:src="@{/img/gjpc.png}">
+                <h5>归集频次</h5>
+            </div>
+            <div class="col-sm-6 ibox-right-th">
+                <span style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: -35px;">单位：次</span>
+                <span id="tj_gjpc">[[${pushFrequency}]]</span>
+            </div>
+        </div>
+        <div class="th-wid-6 ibox-th-colorbar4">
+
+            <div class="col-sm-6 ibox-left-th">
+                <img th:src="@{/img/gxpc.png}">
+                <h5>共享频次</h5>
+            </div>
+            <div class="col-sm-6 ibox-right-th">
+                <span style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: -35px;">单位：次</span>
+                <span id="tj_gxpc">[[${pullFrequency}]]</span>
+            </div>
+        </div>
+        <div class="th-wid-6 ibox-th-colorbar5">
+
+            <div class="col-sm-6 ibox-left-th">
+                <img th:src="@{/img/jrbm.png}">
+                <h5 >接入部门</h5>
+            </div>
+            <div class="col-sm-6 ibox-right-th">
+                <span style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: -35px;">单位：个</span>
+                <span id="tj_jrbm">[[${depts}]]</span>
+            </div>
+        </div>
+        <div class="th-wid-6 ibox-th-colorbar6">
+
+            <div class="col-sm-6 ibox-left-th">
+                <img th:src="@{/img/jkgz.png}">
+                <h5>接口故障</h5>
+            </div>
+            <div class="col-sm-6 ibox-right-th">
+                <span style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: -35px;">单位：个</span>
+                <span id="tj_jkgz">[[${faultCount}]]</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="row mg-top-15">
+        <div class="col-sm-12">
+            <div class="ibox float-e-margins ">
+                <div class="ibox-title">
+                    <h5>月度申请频次统计</h5>
+                    <div class="pull-right">
+                    </div>
+                </div>
+                <div class="ibox-content">
+                    <div class="row">
+                        <div class="col-sm-12">
+                            <div class="flot-chart">
+                                <div class="flot-chart-content" id="container"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+<script th:src="@{/js/jquery.min.js}"></script>
+<script th:src="@{/js/bootstrap.min.js}"></script>
+<script th:src="@{/js/toast.script.js}"></script>
+<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
+<script type="text/javascript" th:src="@{/visualization/js/echarts.min.js}"></script>
+
+<th:block th:include="include :: sparkline-js"/>
+<script type="text/javascript">
+    let dom = document.getElementById('container');
+    let myChart = echarts.init(dom, null, {
+        renderer: 'canvas',
+        useDirtyRect: false
+    });
+    let app = {};
+
+    let option;
+
+    const categories = (function () {
+        let res = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
+        return res;
+    })();
+    const categories2 = (function () {
+        let res = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
+        return res;
+    })();
+    //省数据
+    const data = (function () {
+        let data = "";
+        let res = [[${province}]];
+        return res;
+    })();
+    //市数据
+    const data2 = (function () {
+        let data = "[[${city}]]";
+        let res = [[${city}]];
+        return res;
+    })();
+    option = {
+        title: {},
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#283b56'
+                }
+            }
+        },
+        legend: {},
+        toolbox: {
+            show: true,
+            feature: {
+                dataView: { readOnly: false },
+                restore: {},
+                saveAsImage: {}
+            }
+        },
+        dataZoom: {
+            show: false,
+            start: 0,
+            end: 100
+        },
+        xAxis: [
+            {
+                type: 'category',
+                boundaryGap: true,
+                data: categories
+            },
+            {
+                type: 'category',
+                boundaryGap: true,
+                data: categories2
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                scale: true,
+                name: '市接口',
+                min: 0,
+                boundaryGap: [0.2, 0.2]
+            },
+            {
+                type: 'value',
+                scale: true,
+                name: '省接口',
+                min: 0,
+                boundaryGap: [0.2, 0.2]
+            }
+        ],
+        series: [
+            {
+                name: '省接口申请频次',
+                type: 'bar',
+                xAxisIndex: 1,
+                yAxisIndex: 1,
+                data: data
+            },
+            {
+                name: '市接口申请频次',
+                type: 'line',
+                data: data2
+            }
+        ]
+    };
+    app.count = 11;
+
+
+    if (option && typeof option === 'object') {
+        myChart.setOption(option);
+    }
+
+    window.addEventListener('resize', myChart.resize);
+
+
+    function gd(year, month, day) {
+        return new Date(year, month - 1, day).getTime();
+    }
+
+    $(document).ready(function () {
+        // getVisualization();
+        addToast();
+    });
+</script>
+<script>
+    function getVisualization() {
+        $.ajax({
+            url: '/MainPageController/getVisualization',
+            method: 'POST',
+            success: getVisualization_Success
+        })
+    }
+    function getVisualization_Success(d) {
+
+        $("#tj_interface_total").text(d.tj_interface_total);
+        $("#tj_dypc").text(d.tj_dypc);
+        $("#tj_gjpc").text(d.tj_gjpc);
+        $("#tj_gxpc").text(d.tj_gxpc);
+        $("#tj_jrbm").text(d.tj_jrbm);
+        $("#tj_jkgz").text(d.tj_jkgz);
+
+        var d2=[];
+        $.each(d.interfacePinci_day_list,function (index,data) {
+            var s = data.day.split("/");
+            var k =[gd(s[0],s[1],s[2]), data.cou];
+            d2.push(k);
+        });
+        drawPlot(d2);
+    }
+
+    /** 用户临期提醒 **/
+    function addToast(){
+        let url = '/system/tempPer/expirationList';
+        $.ajax({
+            url: url,
+            type: "post",
+            success: function(result) {
+                let content = "";
+                for(let i=0;i<result.length;i++){
+                    let temp = "<p style='font-size: 15px;'><a style='color: #333;' onclick='openPerTab()'>【{deptName}】用户【{userName}】的权限已到期，请及时处理！</a></p>";
+                    if(result[i].remainingDays >= 0){
+                        temp = "<p style='font-size: 15px;'><a style='color: #333;' onclick='openPerTab()'>【{deptName}】用户【{userName}】的权限还有{remainingDays}天到期，请及时处理！</a></p>";
+                        temp = temp.replace("{remainingDays}",result[i].remainingDays);
+                    }
+                    temp = temp.replace("{deptName}",result[i].deptName);
+                    temp = temp.replace("{userName}",result[i].userName);
+                    content += temp;
+                }
+                if(content != ""){
+                    $.Toast("<p  style='font-size: 18px;color: #c70000;font-weight: 900;height: 35px;line-height: 35px;'>临期提醒</p>", content, "success",{
+                        stack: true,
+                        has_icon:true,
+                        has_close_btn:true,
+                        fullscreen:false,
+                        width:250,
+                        timeout:10000,
+                        sticky:false,
+                        has_progress:true,
+                        rtl:false,
+                    });
+                }
+            }
+        })
+    }
+
+    function openPerTab(){
+        $("a[href='/system/tempPer']",parent.document)[0].click();
+    }
+
+</script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/monitor/logininfor/logininfor.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('登录日志列表')" />
+</head>
+<body class="gray-bg">
+	<div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 search-collapse">
+				<form id="logininfor-form">
+					<div class="select-list">
+						<ul>
+							<li>
+								<label>登录地址：</label><input type="text" name="ipaddr"/>
+							</li>
+							<li>
+								<label>登录名称：</label><input type="text" name="loginName"/>
+							</li>
+							<li>
+								<label>登录状态：</label><select name="status" th:with="type=${@dict.getType('sys_common_status')}">
+									<option value="">所有</option>
+									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
+								</select>
+							</li>
+							<li class="select-time">
+								<label>登录时间： </label>
+								<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
+								<span>-</span>
+								<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
+							</li>
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+			
+			<div class="btn-group-sm" id="toolbar" role="group">
+				<a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="monitor:logininfor:remove">
+		            <i class="fa fa-remove"></i> 删除
+		        </a>
+		        <a class="btn btn-danger" onclick="$.operate.clean()" shiro:hasPermission="monitor:logininfor:remove">
+	                <i class="fa fa-trash"></i> 清空
+	            </a>
+				<a class="btn btn-primary single disabled" onclick="unlock()" shiro:hasPermission="monitor:logininfor:unlock">
+					<i class="fa fa-unlock"></i> 解锁
+				</a>
+	            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="monitor:logininfor:export">
+		            <i class="fa fa-download"></i> 导出
+		        </a>
+	        </div>
+        
+	        <div class="col-sm-12 select-table table-striped">
+			    <table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+	
+	<th:block th:include="include :: footer" />
+	<script th:inline="javascript">
+	    var datas = [[${@dict.getType('sys_common_status')}]];
+		var prefix = ctx + "monitor/logininfor";
+	
+		$(function() {
+		    var options = {
+		        url: prefix + "/list",
+		        cleanUrl: prefix + "/clean",
+		        removeUrl: prefix + "/remove",
+		        exportUrl: prefix + "/export",
+		        sortName: "loginTime",
+		        sortOrder: "desc",
+		        modalName: "登录日志",
+		        escape: true,
+		        showPageGo: true,
+		        rememberSelected: true,
+		        columns: [{
+		        	field: 'state',
+		            checkbox: true
+		        },
+		        {
+		            field: 'infoId',
+		            title: '访问编号'
+		        },
+		        {
+		            field: 'loginName',
+		            title: '登录名称',
+		            sortable: true
+		        },
+		        {
+		            field: 'ipaddr',
+		            title: '登录地址'
+		        },
+		        {
+		            field: 'loginLocation',
+		            title: '登录地点'
+		        },
+		        {
+		            field: 'browser',
+		            title: '浏览器'
+		        },
+		        {
+		            field: 'os',
+		            title: '操作系统'
+		        },
+		        {
+		            field: 'status',
+		            title: '登录状态',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	return $.table.selectDictLabel(datas, value);
+		            }
+		        },
+		        {
+		            field: 'msg',
+		            title: '操作信息'
+		        },
+		        {
+		            field: 'loginTime',
+		            title: '登录时间',
+		            sortable: true
+		        }]
+		    };
+		    $.table.init(options);
+		});
+		
+		function unlock() {
+            $.operate.post(prefix + "/unlock?loginName=" + $.table.selectColumns("loginName"));
+        }
+	</script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/monitor/online/online.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('在线用户列表')" />
+</head>
+<body class="gray-bg">
+    <div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 search-collapse">
+				<form id="online-form">
+					<div class="select-list">
+						<ul>
+							<li>
+								登录地址：<input type="text" name="ipaddr"/>
+							</li>
+							<li>
+								登录名称：<input type="text" name="loginName"/>
+							</li>
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+			
+	        <div class="btn-group-sm" id="toolbar" role="group">
+	            <a class="btn btn-danger multiple disabled" onclick="javascript:batchForceLogout()" shiro:hasPermission="monitor:online:batchForceLogout">
+	                <i class="fa fa-sign-out"></i> 强退
+	            </a>
+	        </div>
+	        
+	        <div class="col-sm-12 select-table table-striped">
+			    <table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+	<th:block th:include="include :: footer" />
+	<th:block th:include="include :: bootstrap-table-export-js" />
+	<script th:inline="javascript">
+		var forceFlag = [[${@permission.hasPermi('monitor:online:forceLogout')}]];
+		var prefix = ctx + "monitor/online";
+
+		$(function() {
+		    var options = {
+		    	uniqueId: "sessionId",
+		        url: prefix + "/list",
+		        exportUrl: prefix + "/export",
+		        sortName: "lastAccessTime",
+		        sortOrder: "desc",
+		        showExport: true,
+		        escape: true,
+		        columns: [{
+		            checkbox: true
+		        },
+		        {
+                    title: "序号",
+                    formatter: function (value, row, index) {
+                 	    return $.table.serialNumber(index);
+                    }
+                },
+		        {
+		            field: 'sessionId',
+		            title: '会话编号'
+		        },
+		        {
+		            field: 'loginName',
+		            title: '登录名称',
+		            sortable: true
+		        },
+		        {
+		            field: 'deptName',
+		            title: '部门名称'
+		        },
+		        {
+		            field: 'ipaddr',
+		            title: '主机'
+		        },
+		        {
+		            field: 'loginLocation',
+		            title: '登录地点'
+		        },
+		        {
+		            field: 'browser',
+		            title: '浏览器'
+		        },
+		        {
+		            field: 'os',
+		            title: '操作系统'
+		        },
+		        {
+		            field: 'status',
+		            title: '会话状态',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		                if (value == 'on_line') {
+		                    return '<span class="badge badge-primary">在线</span>';
+		                } else if (value == 'off_line') {
+		                    return '<span class="badge badge-danger">离线</span>';
+		                }
+		            }
+		        },
+		        {
+		            field: 'startTimestamp',
+		            title: '登录时间',
+		            sortable: true
+		        },
+		        {
+		            field: 'lastAccessTime',
+		            title: '最后访问时间',
+		            sortable: true
+		        },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		                var msg = '<a class="btn btn-danger btn-xs ' + forceFlag + '" href="javascript:void(0)" onclick="forceLogout(\'' + row.sessionId + '\')"><i class="fa fa-sign-out"></i>强退</a> ';
+		                return msg;
+		            }
+		        }]
+		    };
+		    $.table.init(options);
+		});
+
+		// 单条强退
+		function forceLogout(sessionId) {
+		    $.modal.confirm("确定要强制选中用户下线吗？", function() {
+		    	var data = { "ids": sessionId };
+		        $.operate.post(prefix + "/batchForceLogout", data);
+		    })
+		}
+
+		// 批量强退
+		function batchForceLogout() {
+		    var rows = $.table.selectColumns("sessionId");
+		    if (rows.length == 0) {
+		        $.modal.alertWarning("请选择要强退的用户");
+		        return;
+		    }
+		    $.modal.confirm("确认要强退选中的" + rows.length + "条数据吗?", function() {
+		        var url = prefix + "/batchForceLogout";
+		        var data = { "ids": rows.join() };
+		        $.operate.post(url, data);
+		    });
+		}
+	</script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/monitor/operlog/detail.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
+<head>
+	<th:block th:include="include :: header('操作日志详细')" />
+	<th:block th:include="include :: jsonview-css" />
+</head>
+<body class="white-bg">
+	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
+	<form class="form-horizontal m-t" id="signupForm">
+		<div class="form-group">
+			<label class="col-sm-2 control-label">操作模块：</label>
+			<div class="form-control-static" th:text="${operLog.title} + ' / ' + ${@dict.getLabel('sys_oper_type',operLog.businessType)}">
+			</div>
+		</div>
+		<div class="form-group">
+			<label class="col-sm-2 control-label">登录信息：</label>
+			<div class="form-control-static" th:text="${operLog.operName} + ' / ' + ${operLog.deptName} + ' / ' + ${operLog.operIp}+ ' / ' + ${operLog.operLocation}">
+			</div>
+		</div>
+		<div class="form-group">
+			<label class="col-sm-2 control-label">请求地址：</label>
+			<div class="form-control-static" th:text="${operLog.operUrl}">
+			</div>
+		</div>
+		<div class="form-group">
+			<label class="col-sm-2 control-label">请求方式：</label>
+			<div class="form-control-static" th:text="${operLog.requestMethod}">
+			</div>
+		</div>
+		<div class="form-group">
+			<label class="col-sm-2 control-label">操作方法：</label>
+			<div class="form-control-static" th:text="${operLog.method}">
+			</div>
+		</div>
+		<div class="form-group">
+			<label class="col-sm-2 control-label">请求参数：</label>
+			<div class="form-control-static"><pre id="operParam"></pre></div>
+		</div>
+		<div class="form-group">
+			<label class="col-sm-2 control-label">返回参数：</label>
+			<div class="form-control-static"><pre id="jsonResult"></pre></div>
+		</div>
+		<div class="form-group">
+			<label class="col-sm-2 control-label">状态：</label>
+			<div class="form-control-static" th:class="${operLog.status == 0 ? 'label label-primary' : 'label label-danger'}" th:text="${operLog.status == 0 ? '正常' : '异常'}">
+			</div>
+		</div>
+		<div class="form-group" th:style="'display:' + ${operLog.status == 0 ? 'none' : 'block'}">
+			<label class="col-sm-2 control-label">异常信息：</label>
+			<div class="form-control-static" th:text="${operLog.errorMsg}">
+			</div>
+		</div>
+	</form>
+    </div>
+    <th:block th:include="include :: footer" />
+    <th:block th:include="include :: jsonview-js" />
+    <script th:inline="javascript">
+	    $(function() {
+	    	var operParam = [[${operLog.operParam}]];
+	    	if ($.common.isNotEmpty(operParam) && operParam.length < 2000) {
+	    		$("#operParam").JSONView(operParam);
+	    	} else {
+	    		$("#operParam").text(operParam);
+	    	}
+	    	var jsonResult = [[${operLog.jsonResult}]];
+	    	if ($.common.isNotEmpty(jsonResult) && jsonResult.length < 2000) {
+	    		$("#jsonResult").JSONView(jsonResult);
+	    	} else {
+	    		$("#jsonResult").text(jsonResult);
+	    	}
+	    });
+    </script>
+</body>
+</html>

leiSP-admin/src/main/resources/templates/monitor/operlog/operlog.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="include :: header('操作日志列表')" />
+	<th:block th:include="include :: bootstrap-select-css" />
+</head>
+<body class="gray-bg">
+	<div class="container-div">
+		<div class="row">
+			<div class="col-sm-12 search-collapse">
+				<form id="operlog-form">
+					<div class="select-list">
+						<ul>
+							<li>
+								<label>系统模块： </label><input type="text" name="title"/>
+							</li>
+							<li>
+								<label>操作人员： </label><input type="text" name="operName"/>
+							</li>
+							<li class="select-selectpicker">
+								<label>操作类型： </label><select id="businessTypes" th:with="type=${@dict.getType('sys_oper_type')}" class="selectpicker" data-none-selected-text="请选择" multiple>
+									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
+								</select>
+							</li>
+							<li>
+								<label>操作状态：</label><select name="status" th:with="type=${@dict.getType('sys_common_status')}">
+									<option value="">所有</option>
+									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
+								</select>
+							</li>
+							<li class="select-time">
+								<label>操作时间： </label>
+								<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
+								<span>-</span>
+								<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
+							</li>
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm" onclick="searchPre()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+								<a class="btn btn-warning btn-rounded btn-sm" onclick="resetPre()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+			
+			<div class="btn-group-sm" id="toolbar" role="group">
+				<a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="monitor:operlog:remove">
+		            <i class="fa fa-remove"></i> 删除
+		        </a>
+		        <a class="btn btn-danger" onclick="$.operate.clean()" shiro:hasPermission="monitor:operlog:remove">
+	                <i class="fa fa-trash"></i> 清空
+	            </a>
+	            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="monitor:operlog:export">
+		            <i class="fa fa-download"></i> 导出
+		        </a>
+	        </div>
+	        
+			<div class="col-sm-12 select-table table-striped">
+				<table id="bootstrap-table"></table>
+			</div>
+		</div>
+	</div>
+	
+	<th:block th:include="include :: footer" />
+	<th:block th:include="include :: bootstrap-select-js" />
+	<script th:inline="javascript">
+		var detailFlag = [[${@permission.hasPermi('monitor:operlog:detail')}]];
+		var datas = [[${@dict.getType('sys_oper_type')}]];
+		var prefix = ctx + "monitor/operlog";
+
+		$(function() {
+		    var options = {
+		        url: prefix + "/list",
+		        cleanUrl: prefix + "/clean",
+		        detailUrl: prefix + "/detail/{id}",
+		        removeUrl: prefix + "/remove",
+		        exportUrl: prefix + "/export",
+		        sortName: "operTime",
+		        sortOrder: "desc",
+		        modalName: "操作日志",
+		        escape: true,
+		        showPageGo: true,
+		        rememberSelected: true,
+		        columns: [{
+		        	field: 'state',
+		            checkbox: true
+		        },
+		        {
+		            field: 'operId',
+		            title: '日志编号'
+		        },
+		        {
+		            field: 'title',
+		            title: '系统模块'
+		        },
+		        {
+		            field: 'businessType',
+		            title: '操作类型',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		            	return $.table.selectDictLabel(datas, value);
+		            }
+		        },
+		        {
+		            field: 'operName',
+		            title: '操作人员',
+		            sortable: true
+		        },
+		        {
+		            field: 'deptName',
+		            title: '部门名称'
+		        },
+		        {
+		            field: 'operIp',
+		            title: '主机'
+		        },
+		        {
+		            field: 'operLocation',
+		            title: '操作地点'
+		        },
+		        {
+		            field: 'status',
+		            title: '操作状态',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		                if (value == 0) {
+		                    return '<span class="badge badge-primary">成功</span>';
+		                } else if (value == 1) {
+		                    return '<span class="badge badge-danger">失败</span>';
+		                }
+		            }
+		        },
+		        {
+		            field: 'operTime',
+		            title: '操作时间',
+		            sortable: true
+		        },
+		        {
+		            title: '操作',
+		            align: 'center',
+		            formatter: function(value, row, index) {
+		                var actions = [];
+		                actions.push('<a class="btn btn-warning btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="$.operate.detail(\'' + row.operId + '\')"><i class="fa fa-search"></i>详细</a>');
+		                return actions.join('');
+		            }
+		        }]
+		    };
+		    $.table.init(options);
+		});
+		
+		function searchPre() {
+		    var data = {};
+		    data.businessTypes = $.common.join($('#businessTypes').selectpicker('val'));
+		    $.table.search('operlog-form', 'bootstrap-table', data);
+		}
+		
+		function resetPre() {
+			$("#operlog-form")[0].reset();
+			$("#businessTypes").selectpicker('refresh');
+			$.table.search('operlog-form', 'bootstrap-table');
+		}
+	</script>
+</body>
+</html>