作为学习计算机的“半路出家”之人，堆砌的垃圾代码。
一、pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.5</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>tools</artifactId>
<version>1.0.0</version>
<name>tools</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
<maven-jar-plugin.version>3.1.1</maven-jar-plugin.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>2.0.19</version>
</dependency>
<!--mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- 连接池druid -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.8</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!--mybatis分页插件-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.4.1</version>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.2</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--拼音pingyin4j-->
<dependency>
<groupId>com.belerweb</groupId>
<artifactId>pinyin4j</artifactId>
<version>2.5.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
二、application.properties
server.port=8091
server.servlet.context-path=/
#thymeleaf config
#spring.thymeleaf.prefix=classpath:/templates
spring.thymeleaf.cache=false
spring.thymeleaf.suffix=.html
#druid
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.url=jdbc:mysql://localhost:3306/tools?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=UTF-8&allowMultiQueries=true
spring.datasource.username=root
spring.datasource.password=sa@123
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#mybatis,指定POJO扫描包来让mybatis自动扫描到自定义的POJO
mybatis.mapper-locations=classpath:mybatis/*.xml,classpath:mybatis/**/*.xml
#别名
mybatis.type-aliases-package=com.example.entity
#org.springframework.web包下的日志以DEBUG级别输出
logging.level.org.springframework.web=DEBUG
#DateConvert
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
spring.mvc.format.date=yyyy-MM-dd
#分页
pagehelper.helperDialect=mysql
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql
三、实体类
@Data
public class Jg_jfsh {
private Integer id;
private String xm;
private String sfzh;
private Integer yueshu;
private List<Jg_jfsh_detail> jgJfshDetails;
//若不加注解，报错400(年月日)
@DateTimeFormat(pattern = "yyyy-MM")
private Date rq1;
//若不加注解，报错400(年月日)
@DateTimeFormat(pattern = "yyyy-MM")
private Date rq2;
//Integer默认是null,但是int默认是0
private int ggqjf;
}
四、Mybatis.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="pers.gl.mapper.jg.Jg_jfshMapper">
<resultMap id="getOneByIdMap" type="pers.gl.model.jg.Jg_jfsh">
<id property="id" column="id"></id>
<result property="xm" column="xm"></result>
<result property="sfzh" column="sfzh"></result>
<result property="yueshu" column="yueshu"></result>
<collection property="jgJfshDetails"
ofType="pers.gl.model.jg.Jg_jfsh_detail">
<id column="ryid" property="id"></id> <!--修改为ryid,原因是https://www.bbsmax.com/A/1O5E2Gp4d7/，Mybatis一对多/多对多查询时只查出了一条数据-->
<result column="rq1" property="rq1"></result>
<result column="rq2" property="rq2"></result>
<result column="lx" property="lx"></result>
</collection>
</resultMap>
<!-- 根据实体查询数据，返回列表,用于list页面-->
<select id="listJg_jfsh_jbxx" resultType="pers.gl.model.jg.Jg_jfsh_jbxx" parameterType="pers.gl.model.jg.Jg_jfsh_jbxx">
SELECT id,xm,sfzh,gzdw FROM `jg_jfsh_jbxx`
<where>
<if test="xm != null and xm !=''">
xm like concat('%',#{xm},'%')
</if>
<if test="sfzh != null and sfzh !=''">
AND sfzh= #{sfzh}
</if>
</where>
order by id desc
</select>
<!-- 根据sfzh显示人员明细,用于detail页面 -->
<select id="listJg_jfsh_detail" parameterType="String" resultType="pers.gl.model.jg.Jg_jfsh_detail">
SELECT *,TIMESTAMPDIFF(MONTH,rq1,rq2)+1 as yueshu from `jg_jfsh_detail`
where sfzh=#{sfzh}
order by id desc
</select>
<!-- 插入数据-->
<insert id="insertJg_jfsh_detail" parameterType="pers.gl.model.jg.Jg_jfsh_detail">
insert into `jg_jfsh_detail`(sfzh,rq1,rq2,lx,bz)
VALUES(#{sfzh},#{rq1},#{rq2},#{lx},#{bz})
</insert>
<!-- 查询打印某人的详细信息 -->
<select id="getOneBySfzh" parameterType="String" resultMap="getOneByIdMap">
SELECT a.id,a.xm,a.sfzh,b.rq1,b.rq2,b.lx,bz,TIMESTAMPDIFF(MONTH,rq1,rq2)+1 as yueshu FROM jg_jfsh_jbxx a
inner join `jg_jfsh_detail` b
on b.sfzh=a.sfzh
where a.sfzh=#{sfzh}
order by a.id desc
</select>
<!-- 打印查看时，分类显示起止年月 -->
<select id="listJg_jfsh_detail_2" resultType="pers.gl.model.jg.Jg_jfsh_detail">
SELECT *,TIMESTAMPDIFF(MONTH,rq1,rq2)+1 as yueshu from `jg_jfsh_detail`
where sfzh=#{sfzh} and lx=#{lx}
order by id desc
</select>
<!-- 汇总某人的缴费历史 -->
<select id="countBySfzh" parameterType="String" resultType="pers.gl.model.jg.Jg_jfsh_detail">
SELECT
sum(case when lx='改革前缴费' then TIMESTAMPDIFF(MONTH,rq1,rq2)+1 end) as ggqjf
,sum(case when lx='改革前中断' then TIMESTAMPDIFF(MONTH,rq1,rq2)+1 end) as ggqzd
,sum(case when lx='实际缴费' then TIMESTAMPDIFF(MONTH,rq1,rq2)+1 end) as sjjf
,sum(case when lx='实际中断' then TIMESTAMPDIFF(MONTH,rq1,rq2)+1 end) as sjzd
,sum(case when lx='养老转移' then TIMESTAMPDIFF(MONTH,rq1,rq2)+1 end) as ylzy
from jg_jfsh_detail where sfzh=#{sfzh}
</select>
<!-- 删除明细数据 -->
<delete id="deleteJg_jfsh_detailById" parameterType="int">
delete from `Jg_jfsh_detail` where id=#{id}
</delete>
<!-- 删除基本信息数据 -->
<delete id="deleteJg_jfsh_jbxxById" parameterType="int">
delete from `Jg_jfsh_jbxx` where id=#{id}
</delete>
<!-- 根据sfzh查询明细表数据量 -->
<select id="countJg_jfsh_detail" parameterType="String" resultType="java.lang.Integer">
SELECT count(*) from `jg_jfsh_detail`
where sfzh=#{sfzh}
</select>
<!-- 插入基本信息数据-->
<insert id="insertJg_jfsh_jbxx" parameterType="pers.gl.model.jg.Jg_jfsh_jbxx">
insert into `jg_jfsh_jbxx`(xm,sfzh,gzdw)
VALUES(#{xm},#{sfzh},#{gzdw})
</insert>
<select id="selectJg_jfsh_jbxxById" parameterType="Integer" resultType="pers.gl.model.jg.Jg_jfsh_jbxx">
select * from `Jg_jfsh_jbxx` where id=#{id}
</select>
<!-- 更新修改数据 -->
<update id="updateJg_jfsh_jbxxById" parameterType="pers.gl.model.jg.Jg_jfsh_jbxx">
update `jg_jfsh_jbxx`
set xm=#{xm},sfzh=#{sfzh},gzdw=#{gzdw}
where id = #{id}
</update>
</mapper>
五、Mapper接口
package pers.gl.mapper.jg;
import org.apache.ibatis.annotations.Param;
import pers.gl.model.jg.Jg_jfsh;
import pers.gl.model.jg.Jg_jfsh_detail;
import pers.gl.model.jg.Jg_jfsh_jbxx;
import java.util.List;
public interface Jg_jfshMapper {
//显示基本信息列表,用于list页面
public List<Jg_jfsh_jbxx> listJg_jfsh_jbxx(Jg_jfsh_jbxx jg_jfsh_jbxx);
//根据sfzh查询，审核历史的详情
public List<Jg_jfsh_detail> listJg_jfsh_detail(String sfzh);
//插入数据到明细表
public int insertJg_jfsh_detail(Jg_jfsh_detail jg_jfsh_detail);
//根据sfzh,查询到实体类列表,用于打印查看按钮
public List<Jg_jfsh> getOneBySfzh(String sfzh);
//汇总某个sfzh的类型和月数
public List<Jg_jfsh_detail> countBySfzh(String sfzh);
//打印查看时，分类显示起止年月
public List<Jg_jfsh_detail> listJg_jfsh_detail_2(@Param("sfzh") String sfzh, @Param("lx") String lx);
//删除明细表的一条记录
public int deleteJg_jfsh_detailById(Integer id);
//删除基本信息表的一条数据
public int deleteJg_jfsh_jbxxById(Integer id);
//根据sfzh查询明细表的数据量
public int countJg_jfsh_detail(String sfzh);
//插入基本信息数据
public int insertJg_jfsh_jbxx(Jg_jfsh_jbxx jg_jfsh_jbxx);
//根据ID查找实体
public Jg_jfsh_jbxx selectJg_jfsh_jbxxById(Integer id);
//更新修改基本信息数据
public int updateJg_jfsh_jbxxById(Jg_jfsh_jbxx jg_jfsh_jbxx);
}
六、Service
package pers.gl.service.jg;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import pers.gl.mapper.jg.Jg_jfshMapper;
import pers.gl.model.Jbtxf_jb;
import pers.gl.model.jg.Jg_jfsh;
import pers.gl.model.jg.Jg_jfsh_detail;
import pers.gl.model.jg.Jg_jfsh_jbxx;
import pers.gl.vo.ResultData;
import java.util.List;
@Service
public class Jg_jfshService {
@Autowired
private Jg_jfshMapper jg_jfshMapper;
// 使用分页插件pagehelper,用于list页面
public ResultData<Jg_jfsh_jbxx> listJg_jfsh_jbxx(Jg_jfsh_jbxx jg_jfsh_jbxx,int page, int limit) {
Page<Jg_jfsh_jbxx> pages = PageHelper.startPage(page, limit);
List<Jg_jfsh_jbxx> lists = jg_jfshMapper.listJg_jfsh_jbxx(jg_jfsh_jbxx); // 根据实体类条件，查询数据
ResultData<Jg_jfsh_jbxx> listData = new ResultData<>(); // 组装
listData.setCode(0);
listData.setMsg("");
listData.setCount(pages.getTotal());
listData.setData(lists);
return listData; // 返回组装后的数据
}
//根据sfzh查询，审核历史的详情
public List<Jg_jfsh_detail> listJg_jfsh_detail(String sfzh){
List<Jg_jfsh_detail> jg_jfsh_details = jg_jfshMapper.listJg_jfsh_detail(sfzh);
return jg_jfsh_details;
}
// 插入明细数据
public int insertJg_jfsh_detail(Jg_jfsh_detail jg_jfsh_detail) {
return jg_jfshMapper.insertJg_jfsh_detail(jg_jfsh_detail);
}
//根据一个sfzh查询到一个一对多的实体
public List<Jg_jfsh> getOneBySfzh(String sfzh){
List<Jg_jfsh> oneBySfzh = jg_jfshMapper.getOneBySfzh(sfzh);
return oneBySfzh;
}
//根据sfzh汇总某人的类型和月数
public List<Jg_jfsh_detail> countBySfzh(String sfzh){
return jg_jfshMapper.countBySfzh(sfzh);
}
//根据不同的sfzh和类型lx,查询分类汇总
public List<Jg_jfsh_detail> listJg_jfsh_detail_2(String sfzh,String lx){
return jg_jfshMapper.listJg_jfsh_detail_2(sfzh, lx);
}
//根据ID删除明细表一条记录
public int deleteJg_jfsh_detailById(Integer id){
return jg_jfshMapper.deleteJg_jfsh_detailById(id);
}
//根据ID删除基本信息表中的一条记录
public int deleteJg_jfsh_jbxxById(Integer id){
return jg_jfshMapper.deleteJg_jfsh_jbxxById(id);
}
//根据sfzh查询明细表的数据量
public int countJg_jfsh_detail(String sfzh){
return jg_jfshMapper.countJg_jfsh_detail(sfzh);
}
//插入基本信息数据
public int insertJg_jfsh_jbxx(Jg_jfsh_jbxx jg_jfsh_jbxx){
return jg_jfshMapper.insertJg_jfsh_jbxx(jg_jfsh_jbxx);
}
//根据id查询到jbxx实体类
public Jg_jfsh_jbxx selectJg_jfsh_jbxxById(Integer id){
return jg_jfshMapper.selectJg_jfsh_jbxxById(id);
}
//更新保存基本信息数据
public int updateJg_jfsh_jbxxById(Jg_jfsh_jbxx jg_jfsh_jbxx){
return jg_jfshMapper.updateJg_jfsh_jbxxById(jg_jfsh_jbxx);
}
}
七、Controller
package pers.gl.controller.jg;
import com.alibaba.fastjson.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import pers.gl.model.bank.JM_kkpc;
import pers.gl.model.jg.Jg_jfsh;
import pers.gl.model.jg.Jg_jfsh_detail;
import pers.gl.model.jg.Jg_jfsh_jbxx;
import pers.gl.service.jg.Jg_jfshService;
import pers.gl.util.MonthConvertUtil;
import pers.gl.vo.ResultData;
import java.util.List;
@Controller
@RequestMapping("/jgjfsh")
public class Jg_jfshController {
@Autowired
private Jg_jfshService jg_jfshService;
//跳转到list模板页面
@GetMapping("/list")
public String toListPage() {
return "admin/jg/jfsh/list";
}
//list页面的数据接口
@ResponseBody
@RequestMapping("/listquery")
public ResultData<Jg_jfsh_jbxx> getQueryList(Jg_jfsh_jbxx jg_jfsh_jbxx, @RequestParam("page") Integer page,
@RequestParam("limit") Integer limit) {
ResultData<Jg_jfsh_jbxx> reslist =jg_jfshService.listJg_jfsh_jbxx(jg_jfsh_jbxx,page,limit);
return reslist;
}
//根据sfzh查询，审核历史的详情
@RequestMapping("/listdetail/{sfzh}")
public String listJb_jfsh_detail(@PathVariable("sfzh") String sfzh, Model model){
List<Jg_jfsh_detail> jg_jfsh_details = jg_jfshService.listJg_jfsh_detail(sfzh);
model.addAttribute("listdetails", jg_jfsh_details);
model.addAttribute("sfzh", sfzh);
return "admin/jg/jfsh/listdetail";
}
// 保存新数据
@ResponseBody
@PostMapping("/save")
public JSONObject saveData(Jg_jfsh_detail jg_jfsh_detail) throws Exception {
JSONObject result = new JSONObject();
int res=jg_jfshService.insertJg_jfsh_detail(jg_jfsh_detail);
if (res > 0) {
result.put("success", true);
result.put("msg", "添加成功");
} else {
result.put("success", false);
result.put("msg", "失败");
}
return result;
}
// 查询一条记录，点击每行的查看按钮,返回页面
@RequestMapping("/print/{sfzh}")
public String getOneMore(@PathVariable("sfzh") String sfzh, Model model) {
List<Jg_jfsh> oneBySfzh = jg_jfshService.getOneBySfzh(sfzh);
model.addAttribute("onebysfzh", oneBySfzh);
List<Jg_jfsh_detail> ggqjf=jg_jfshService.listJg_jfsh_detail_2(sfzh,"改革前缴费");
model.addAttribute("ggqjf",ggqjf);
List<Jg_jfsh_detail> ggqzd=jg_jfshService.listJg_jfsh_detail_2(sfzh,"改革前中断");
model.addAttribute("ggqzd",ggqzd);
List<Jg_jfsh_detail> sjjf=jg_jfshService.listJg_jfsh_detail_2(sfzh,"实际缴费");
model.addAttribute("sjjf",sjjf);
List<Jg_jfsh_detail> sjzd=jg_jfshService.listJg_jfsh_detail_2(sfzh,"实际中断");
model.addAttribute("sjzd",sjzd);
List<Jg_jfsh_detail> ylzy=jg_jfshService.listJg_jfsh_detail_2(sfzh,"养老转移");
model.addAttribute("ylzy",ylzy);
List<Jg_jfsh_detail> countBySfzh=jg_jfshService.countBySfzh(sfzh);
model.addAttribute("countBySfzh",countBySfzh);
System.out.println(countBySfzh);
return "admin/jg/jfsh/print";
}
//删除明细表一条记录
@RequestMapping("/del")
public String delJg_jfsh_detailbyid(Integer id,String sfzh){
jg_jfshService.deleteJg_jfsh_detailById(id);
return "forward:/jgjfsh/listdetail/"+sfzh;
}
// 删除基本信息表单条记录
@RequestMapping("/delete")
@ResponseBody
public JSONObject deleteJg_jfsh_jbxxById(@RequestParam("id") int id,@RequestParam("sfzh") String sfzh) {
JSONObject result = new JSONObject();
int countdetl=jg_jfshService.countJg_jfsh_detail(sfzh);
if (countdetl>0){
result.put("status", false);
result.put("msg", "基本信息删除失败；明细表中有数据，请先删除");
}else{
int res = jg_jfshService.deleteJg_jfsh_jbxxById(id);
if (res > 0) {
result.put("status", true);
result.put("msg", "删除成功");
}
}
return result;
}
//添加页面
@GetMapping("/add")
public String Add() {
return "admin/jg/jfsh/add";
}
// 保存新数据
@ResponseBody
@PostMapping("/insertjbxx")
public JSONObject saveData(Jg_jfsh_jbxx jg_jfsh_jbxx) throws Exception {
JSONObject result = new JSONObject();
int res = jg_jfshService.insertJg_jfsh_jbxx(jg_jfsh_jbxx);
if (res > 0) {
result.put("status", true);
result.put("msg", "添加成功");
} else {
result.put("status", false);
result.put("msg", "失败");
}
return result;
}
//更新一条记录，跳转到页面
@GetMapping("/edit/{id}")
public String updateJg_jfsh_jbxxById(@PathVariable("id") int id,Model model) {
Jg_jfsh_jbxx jg_jfsh_jbxx=jg_jfshService.selectJg_jfsh_jbxxById(id);
model.addAttribute("jg_jfsh_jbxx",jg_jfsh_jbxx);
return "admin/jg/jfsh/edit";
}
//更新保存基本信息数据
@ResponseBody
@PostMapping("/updatesave")
public JSONObject updateJg_jfsh_jbxx(Jg_jfsh_jbxx jg_jfsh_jbxx) throws Exception {
JSONObject result = new JSONObject();
int res = jg_jfshService.updateJg_jfsh_jbxxById(jg_jfsh_jbxx);
if (res > 0) {
result.put("status", true);
result.put("msg", "更新成功");
} else {
result.put("status", false);
result.put("msg", "失败");
}
return result;
}
}
八、前端页面
1.Layui显示JSON的list
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>机关缴费审核列表</title>
<link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">
<style>
.div-content {
background-color: white;
border-radius: 15px;
padding: 15px;
}
.table-search-fieldset {
margin: 0;
border: 1px solid #e6e6e6;
padding: 10px 20px 5px 20px;
color: #6b6b6b;
}
.layui-layout-body{
overflow-y:auto;
}
</style>
</head>
<body>
<div class="div-content">
<form class="layui-form layui-form-pane" action="" id="form-search">
<fieldset class="table-search-fieldset">
<legend>搜索条件</legend>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">姓名:</label>
<div class="layui-input-inline" style="width: 150px;">
<input type="text" name="xm" id="xm" placeholder="请输入姓名" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">身份证号:</label>
<div class="layui-input-inline" style="width: 200px;">
<input type="text" name="sfzh" id="sfzh" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
</div>
</div>
<button id="btn-search" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-primary">
<i class="layui-icon layui-icon-fonts-clear"></i>
清空条件
</button>
</div>
</fieldset>
</form>
<table id="table-list" lay-filter="table-list-filter"></table>
</div>
<!-- 表格头部按钮 -->
<script type="text/html" id="table-list-toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">添加人员基本信息</button>
</div>
</script>
<!-- 每行记录后面显示的按钮 -->
<script type="text/html" id="col-list-toolbar">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑人员基本信息</a>
<a class="layui-btn layui-btn-xs" lay-event="view">缴费详情</a>
<a class="layui-btn layui-btn-xs" lay-event="print">打印查看</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:src="@{/layuiadmin/lib/jquery-3.6.0.min.js}"></script>
<script th:src="@{/layuiadmin/layui/layui.js}" ></script>
<script th:inline="javascript">
function getContextPath() {
var pathName = document.location.pathname;
var index = pathName.substr(1).indexOf("/");
var result = pathName.substr(0,index+1);
return result;
}
//子窗口调用 的 关闭窗口方法
function closeDlg(msg){
layer.closeAll();
layer.msg(msg);
reload_data();
}
function refreshTable() {
$("#btn-reset").click();
$("#btn-search").click();
}
layui.use(['laydate', 'table', 'form'], function () {
var laydate = layui.laydate;
var table = layui.table;
var form = layui.form;
table.on('toolbar(table-list-filter)', function(obj){
if (obj.event === "add") {
layer.open({
type: 2,
title: "新增人员基本信息",
area: ['90%', '90%'],
shadeClose: true,
content: getContextPath() +'/jgjfsh/add'
});
} else if (obj.event === "delete") {
let checkStatus = table.checkStatus('table-list');
//如果没有选中数据
if (checkStatus.data.length === 0) {
layer.alert('未选中任何数据', {icon: 2, anim:6 ,title: "警告"});
return false;
}
}
});
table.render({
elem: '#table-list'
,url: getContextPath()+'/jgjfsh/listquery'
,page: true
,toolbar: "#table-list-toolbar"
, limits:[10,20,50,100,200,500,1000]
,limit: 10 //每页默认显示的数量
, cols: [[ //表头
{type: "checkbox", width: 60}
, {field: 'id', title: 'id', align: 'center'}
, {field: 'xm', title: '姓名', align: 'center'}
, {field: 'sfzh', title: '身份证号', align: 'center'}
, {field: 'gzdw', title: '工作单位', align: 'center'}
, {title: '操作', width: 500, align: 'center', toolbar: '#col-list-toolbar'}
]]
});
form.on('submit(btn-search-filter)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
table.reload('table-list', {
where: { //设定异步数据接口的额外参数，任意设
xm:data.field.xm,
sfzh:data.field.sfzh
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
//每条记录的删除编辑
table.on('tool(table-list-filter)', function (obj) {
let data = obj.data;
let layEvent = obj.event;
if (layEvent === 'del') {
layer.prompt({title:'真的删除吗',formType : 1}, function (value,index) {
if(value=='ok'){
$.ajax({
url:getContextPath()+'/jgjfsh/delete',
data:{'id':data.id,'sfzh':data.sfzh}, //传递2个参数
type:'post',
success:function(data){
if(data.status){
layer.msg(data.msg, {icon: 1});
refreshTable();
}
else{
layer.msg(data.msg, {icon: 2, anim: 6})
refreshTable();
}
}
});
layer.close(index);
}
else{
alert('密码错误')
}
});
} else if (layEvent === 'view') {
layer.open({
type: 2,
title: "人员详情",
area: ['80%', '80%'],
shadeClose: true,
content:getContextPath()+ '/jgjfsh/listdetail/'+ data.sfzh
});
}else if (layEvent === 'edit') {
layer.open({
type: 2,
title: "编辑",
area: ['80%', '80%'],
shadeClose: true,
content: getContextPath() + '/jgjfsh/edit/' + data.id
});
}else if (layEvent === 'print') {
layer.open({
type: 2,
title: "人员详情",
area: ['80%', '80%'],
shadeClose: true,
content:getContextPath()+ '/jgjfsh/print/'+ data.sfzh
});
}
});
});
</script>
</body>
</html>
2.使用Thymeleaf显示list
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>根据SFZH查看一对多实体类</title>
<link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>人员详情</legend>
</fieldset>
<div class="layui-form">
<form class="layui-form layui-form-pane" id="form-add">
<fieldset class="table-search-fieldset">
<legend>添加缴费信息</legend>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">身份证号</label>
<div class="layui-input-inline" style="width: 230px;">
<input type="text" name="sfzh" id="sfzh" lay-verify="required" placeholder="输入身份证号"
autocomplete="off" class="layui-input" th:value="${sfzh}">
</div>
<label class="layui-form-label">类型:</label>
<div class="layui-input-inline" style="width: 230px;">
<select name="lx" id="lx" lay-verify="required">
<option value=""></option>
<option value="改革前缴费">改革前缴费</option>
<option value="改革前中断">改革前中断</option>
<option value="实际缴费">实际缴费</option>
<option value="实际中断">实际中断</option>
<option value="养老转移">养老转移</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">开始日期</label>
<div class="layui-input-inline" style="width: 230px;">
<input type="text" name="rq1" id="rq1" lay-verify="required" placeholder="选择开始日期"
autocomplete="off" class="layui-input date">
</div>
<label class="layui-form-label">结束日期</label>
<div class="layui-input-inline" style="width: 230px;">
<input type="text" name="rq2" id="rq2" lay-verify="required" placeholder="选择结束日期"
autocomplete="off" class="layui-input date">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-inline" style="width: 80%;">
<input type="text" name="bz" id="bz" placeholder="请输入备注" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<input id="btn-add" type="button" value="添加数据" class="layui-btn" lay-submit="" lay-filter="add"/>
<a class="layui-btn layui-btn-normal" th:href="@{/jgjfsh/print/{sfzh}(sfzh=${sfzh})}">打印预览</a>
</div>
</div>
</fieldset>
</form>
<table class="layui-table">
<thead>
<tr>
<th>序号</th>
<th>类型</th>
<th>身份证号码</th>
<th>开始日期</th>
<th>结束日期</th>
<th>月数</th>
<th>换算</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="jfdetl:${listdetails}">
<td th:text="${jfdetlStat.index+1}">序号</td>
<td th:text="${jfdetl.lx}">类型</td>
<td th:text="${jfdetl.sfzh}">3703**</td>
<td th:text="${#dates.format(jfdetl.rq1, 'yyyy-MM')}">rq1</td>
<td th:text="${#dates.format(jfdetl.rq2, 'yyyy-MM')}">rq2</td>
<td th:text="${jfdetl.yueshu}">月数</td>
<td th:text="${T(pers.gl.util.MonthConvertUtil).getNianyue(jfdetl.yueshu)}">换算</td> <!--//调用JAVA静态方法-->
<td><a th:href="@{/jgjfsh/del(id=${jfdetl.id},sfzh=${jfdetl.sfzh})}" onClick="return confirm('确定删除?');">删除</a></td>
<!--<a th:href="@{/kkmx/kkjl(sfzh=${rymx.sfzh},xm=${rymx.xm},pch=${pch})}" target="_blank">扣款记录</a>-->
</td>
</tr>
</tbody>
</table>
</div>
<script th:src="@{/layuiadmin/lib/jquery-3.6.0.min.js}"></script>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script th:inline="javascript">
function getContextPath() {
var pathName = document.location.pathname;
var index = pathName.substr(1).indexOf("/");
var result = pathName.substr(0,index+1);
return result;
}
layui.use(['laydate', 'table', 'form', 'layer'], function () {
var laydate = layui.laydate;
var table = layui.table;
var form = layui.form;
var layer = layui.layer;
var $ = layui.jquery;
//执行一个laydate实例
laydate.render({
elem: '#rq1' //指定元素
, type: 'month'
, trigger: 'click'
});
laydate.render({
elem: '#rq2' //指定元素
, type: 'month'
, trigger: 'click'
});
//每行尾tool按钮的监听
table.on('tool(table-list-filter)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
//触发事件
switch (obj.event) {
case 'del':
layer.msg('删除');
break;
}
;
});
form.on('submit(add)', function (data) {
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
$.ajax({
url: getContextPath() + "/jgjfsh/save",
type: "post",
//data: $("#form-add").serialize(),
data: data.field,
dataType: "json",
success: function (res) {
if (res.success) {
alert(res.msg);
window.location.reload();
} else {
alert(res.msg);
}
},
error: function (xhr) {
alert("发生错误" + xhr.status);
}
});
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
</script>
</body>
</html>
3.添加数据页面add
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Add</title>
<link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}"
media="all">
<link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}"
media="all">
</head>
<body>
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
<!--layui-input-block是一个表单元素占一行,竖着，以例表的形式排列。layui-input-inline多个表单控件占一行,横着，一行可以放置多个表单元素。-->
<form id="form-add" >
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="xm" id="xm" lay-verify="required"
placeholder="请输入姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">身份证号</label>
<div class="layui-input-block">
<input type="text" name="sfzh" lay-verify="required"
placeholder="请输入身份证号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">工作单位</label>
<div class="layui-input-block">
<input type="text" name="gzdw" lay-verify="required"
placeholder="请输入工作单位" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input id="btn-add" type="button" value="添加数据" class="layui-btn" onclick="return check()" />
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script th:src="@{/layuiadmin/lib/jquery-3.6.0.min.js}"></script>
<script th:src="@{/layuiadmin/layui/layui.js}" ></script>
<script type="text/javascript">
//按回车键Enter切换文本框input
jQuery(function () {
jQuery('input:text:first').focus();//直接定位到当前页面的第一个文本框
var $inp = jQuery('input:text');//所有文本框
$inp.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
jQuery(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});
function getContextPath() {
var pathName = document.location.pathname;
var index = pathName.substr(1).indexOf("/");
var result = pathName.substr(0,index+1);
return result;
}
layui.use(['form','layer'], function(){
var form = layui.form;
});
function check() {
//根据ID获取值
var xm = document.getElementById("xm").value;
if(xm == null || xm == '') {
alert("不能为空");
return false;
}
return true;
}
$("#btn-add").click(function() {
if(check()){
$.ajax({
url: getContextPath() +"/jgjfsh/insertjbxx",
type: "post",
data: $("#form-add").serialize(),
dataType: "json",
success: function(res) {
if (res.status) {
alert(res.msg); window.close();parent.location.reload();
} else {
alert(res.msg);
}
},
error:function(xhr){
alert("发生错误"+xhr.status);
}
});
}
});
</script>
</body>
</html>
3.编辑页面edit
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Edit</title>
<link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}"
media="all">
<link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}"
media="all">
</head>
<body>
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
<!--layui-input-block是一个表单元素占一行,竖着，以例表的形式排列。layui-input-inline多个表单控件占一行,横着，一行可以放置多个表单元素。-->
<form id="form-add" th:object="${jg_jfsh_jbxx}">
<input type="hidden" id="id" name="id" th:field="*{id}">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="xm" id="xm" lay-verify="required"
placeholder="请输入姓名" autocomplete="off" class="layui-input" th:field="*{xm}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">身份证号</label>
<div class="layui-input-block">
<input type="text" name="sfzh" lay-verify="required"
placeholder="请输入身份证号" autocomplete="off" class="layui-input" th:field="*{sfzh}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">工作单位</label>
<div class="layui-input-block">
<input type="text" name="gzdw" lay-verify="required"
placeholder="请输入工作单位" autocomplete="off" class="layui-input" th:field="*{gzdw}">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input id="btn-add" type="button" value="更新数据" class="layui-btn" onclick="return check()" />
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script th:src="@{/layuiadmin/lib/jquery-3.6.0.min.js}"></script>
<script th:src="@{/layuiadmin/layui/layui.js}" ></script>
<script type="text/javascript">
//按回车键Enter切换文本框input
jQuery(function () {
jQuery('input:text:first').focus();//直接定位到当前页面的第一个文本框
var $inp = jQuery('input:text');//所有文本框
$inp.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
jQuery(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});
function getContextPath() {
var pathName = document.location.pathname;
var index = pathName.substr(1).indexOf("/");
var result = pathName.substr(0,index+1);
return result;
}
layui.use(['form','layer'], function(){
var form = layui.form;
});
function check() {
//根据ID获取值
var xm = document.getElementById("xm").value;
if(xm == null || xm == '') {
alert("不能为空");
return false;
}
return true;
}
$("#btn-add").click(function() {
if(check()){
$.ajax({
url: getContextPath() +"/jgjfsh/updatesave",
type: "post",
data: $("#form-add").serialize(),
dataType: "json",
success: function(res) {
if (res.status) {
alert(res.msg); window.close();parent.location.reload();
} else {
alert(res.msg);
}
},
error:function(xhr){
alert("发生错误"+xhr.status);
}
});
}
});
</script>
</body>
</html>
4.打印页面print
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>查看打印</title>
<script th:src="@{/layuiadmin/lib/jquery-3.6.0.min.js}"></script>
<script language="javascript" th:src="@{/js/LodopFuncs.js}"></script>
<style id="style1">
*{ font-family: "仿宋",verdana,arial,sans-serif;margin:0; padding:0;}
#jbtxf-view{
}
table {width:90%; margin:auto; font: "宋体" 11px;color: #333333;text-align:left;border-collapse: collapse;}
tr{height:80px;}
td {padding:5px;border: 1px solid #000;}
tfoot td{ border:0; padding-left:70px;}
ul{width: 100%;list-style-type: none; margin-top: 10px;}
ul li{
float: left; /*为了兼容IE,*/
/*line-height: 30px;*/
text-align: left;
margin-right:20px;
width:100%;
}
</style>
</head>
<body>
<div id="jbtxf-view">
<div style="font-family:'宋体';font-size:18pt;text-align:center;margin-top:20px;">机关事业单位职工退休（退职）缴费及转移审核表</div>
<table th:each="ry:${onebysfzh}" >
<tr ><td style="width:100px; text-align: center;">基本信息</td><td>姓名：[[${ry.xm}]]，身份证号码：[[${ry.sfzh}]]</td></tr>
<!-- <table>
<tr th:each="zz:${ry.jgJfshDetails}">
<td th:text="${zz.lx}" style="width:300px;"></td>
<td th:text="${#dates.format(zz.rq1,'yyyy-MM')}" style="width:80px;"></td>
<td th:text="${#dates.format(zz.rq2,'yyyy-MM')}" style="width:80px;"></td>
</tr>
</table>-->
<tr>
<td style="text-align: center;">改革前养老<br>缴费历史</td>
<td>
<div>改革前历史：
<ul th:each="ggqjf:${ggqjf}">
<li th:text="${#dates.format(ggqjf.rq1,'yyyy-MM')}+'至'+${#dates.format(ggqjf.rq2,'yyyy-MM')}+'；计'+${ggqjf.yueshu}+'个月（'+${T(pers.gl.util.MonthConvertUtil).getNianyue(ggqjf.yueshu)}+'）'"></li>
</ul>
<span th:if="${#lists.isEmpty(ggqjf)}">无</span>
</div>
<div>中断历史：
<ul th:each="ggqzd:${ggqzd}">
<li th:text="${#dates.format(ggqzd.rq1,'yyyy-MM')}+'至'+${#dates.format(ggqzd.rq2,'yyyy-MM')}+'；计'+${ggqzd.yueshu}+'个月（'+${T(pers.gl.util.MonthConvertUtil).getNianyue(ggqzd.yueshu)}+'）'"></li>
</ul>
<span th:if="${#lists.isEmpty(ggqzd)}">无</span>
</div>
</td>
</tr>
<tr>
<td style="text-align: center;">机关事业养老<br>缴费历史</td>
<td>
<div>实际缴费：
<ul th:each="sjjf:${sjjf}">
<li th:text="${#dates.format(sjjf.rq1,'yyyy-MM')}+'至'+${#dates.format(sjjf.rq2,'yyyy-MM')}+'；计'+${sjjf.yueshu}+'个月（'+${T(pers.gl.util.MonthConvertUtil).getNianyue(sjjf.yueshu)}+'）'"></li>
</ul>
<span th:if="${#lists.isEmpty(sjjf)}">无</span>
</div>
<div>中断历史：
<ul th:each="sjzd:${sjzd}">
<li th:text="${#dates.format(sjzd.rq1,'yyyy-MM')}+'至'+${#dates.format(sjzd.rq2,'yyyy-MM')}+'；计'+${sjzd.yueshu}+'个月（'+${T(pers.gl.util.MonthConvertUtil).getNianyue(sjzd.yueshu)}+'）'"></li>
</ul>
<span th:if="${#lists.isEmpty(sjzd)}">无</span>
</div>
</td>
</tr>
<tr>
<td style="text-align: center;">养老转移<br>历史</td>
<td>
<div>养老转移：
<ul th:each="ylzy:${ylzy}">
<li th:text="${#dates.format(ylzy.rq1,'yyyy-MM')}+'至'+${#dates.format(ylzy.rq2,'yyyy-MM')}+'；计'+${ylzy.yueshu}+'个月（'+${T(pers.gl.util.MonthConvertUtil).getNianyue(ylzy.yueshu)}+'）'"></li>
</ul>
<span th:if="${#lists.isEmpty(ylzy)}">无</span>
</div>
</td>
</tr>
<tr style="height: 3cm;">
<td style="text-align: center;">申报经办人<br>确认</td>
<td>
<div style="float: right;padding-right: 100px;">签字：
<span >[[${#dates.format(new java.util.Date().getTime(),'yyyy年MM月dd日')}]]</span>
</div>
</td>
</tr>
<tr style="height: 6cm; font-size: 14pt; line-height: 28px;">
<td style="text-align: center;">社保中心<br>业务科审核</td>
<td><div>
经审核，其养老保险总缴费年限为
<u>[[${T(pers.gl.util.MonthConvertUtil).getNianyue(countBySfzh[0].ggqjf+countBySfzh[0].sjjf+countBySfzh[0].ylzy-countBySfzh[0].ggqzd-countBySfzh[0].sjzd)}]]</u>
([[${T(pers.gl.util.MonthConvertUtil).getNian(countBySfzh[0].ggqjf+countBySfzh[0].sjjf+countBySfzh[0].ylzy-countBySfzh[0].ggqzd-countBySfzh[0].sjzd)}]])，
（其中，视同缴费年限为<u>[[${T(pers.gl.util.MonthConvertUtil).getNianyue(countBySfzh[0].ggqjf)}]]</u>
（[[${T(pers.gl.util.MonthConvertUtil).getNian(countBySfzh[0].ggqjf)}]]），
实际缴费年限为<u>[[${T(pers.gl.util.MonthConvertUtil).getNianyue(countBySfzh[0].sjjf)}]]</u>
([[${T(pers.gl.util.MonthConvertUtil).getNian(countBySfzh[0].sjjf)}]])。
<br><br>
初审： 复核： [[${#dates.format(new java.util.Date().getTime(),'yyyy年MM月dd日')}]]
</div>
</td>
</tr>
<tr>
<td style="text-align: center;">备注</td>
<td>
</td>
</tr>
</table>
</div>
<div style="margin: 0; padding: 0;">
<a href="javascript:prn_preview5();">打印预览5</a>
</div>
<script type="text/javascript">
var LODOP; //声明为全局变量
function prn_preview5() {
CreateOnePage();
LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT","Auto-Width");
LODOP.PREVIEW();
};
function CreateOnePage(){
LODOP=getLodop();
LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4");
var strBodyStyle = "<style>" + document.getElementById("style1").innerHTML + "</style>"; //样式表id
var strFormHtml = strBodyStyle + "<body>" + document.getElementById("jbtxf-view").innerHTML + "</body>";
LODOP.ADD_PRINT_HTM('3cm', '1.5cm', '19cm', '26.7cm', strFormHtml);
LODOP.SET_PREVIEW_WINDOW(0,0,0,0,0,"");
};
</script>
</body>
</html>
文章转载自云自由，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。
