# 智慧社区管理系统-基础信息管理-06抄表管理

最新推荐文章于 2024-06-14 15:02:13 发布

雷大胖胖

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量223

点赞数

文章标签： java 前端算法

本文链接：https://blog.csdn.net/m0_74795259/article/details/128157967

版权

一后端

1:entity

package com.woniu.community.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Records {
    private int  id;
    private int typeId;
    private Double num;
    private Double num2;
    private int  houseId;
    private String upTime;
    private String onTime;
    private String checkTime;
    private String meter;
    private String remarks;
    private String userName;
    private String numbers;
    private String typeName;


}

2:RecordsMapper

package com.woniu.community.mapper;

import com.woniu.community.entity.PropertyInfo;
import com.woniu.community.entity.Records;

import java.util.List;

public interface RecordsMapper {
    List<Records> selectAll(int start, int size , String numbers, String typeName);
    int  count(String numbers,String typeName);
    int  insertRecords(Records records);
    int  deleteRecords(int id);


}

3:IRecordsService

package com.woniu.community.service;

import com.woniu.community.entity.HttpResult;
import com.woniu.community.entity.Records;

import java.util.List;

public interface IRecordsService {
   HttpResult selectAll(int pageIndex, int pageSize , String numbers, String typeName);
    HttpResult  insertRecords(Records records);
    HttpResult  deleteRecords(int id);

}

4:RecordsServiceImpl

package com.woniu.community.service.impl;

import com.woniu.community.entity.HttpResult;
import com.woniu.community.entity.Records;
import com.woniu.community.mapper.RecordsMapper;
import com.woniu.community.service.IRecordsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class RecordsServiceImpl implements IRecordsService {
    @Autowired(required = false)
    private RecordsMapper recordsMapper;
    @Override
    public HttpResult selectAll(int pageIndex, int pageSize, String numbers, String typeName) {
        HttpResult result=null;
        List<Records> records = recordsMapper.selectAll((pageIndex - 1) * pageSize, pageSize, numbers, typeName);
        int count = recordsMapper.count(numbers, typeName);
        if (records!=null&&records.size()>0){
            result  =new HttpResult(records,count,200,null);
        }else{
            result  =new HttpResult(null,0,500,"没有更多数据");

        }
        return result;
    }

    @Override
    public HttpResult insertRecords(Records records) {
        HttpResult result=null;
        int count = recordsMapper.insertRecords(records);
        if (count>0){
            result=new HttpResult(null,0,200,"添加成功");
        }else{
            result=new HttpResult(null,0,500,"添加失败");

        }
        return result;
    }

    @Override
    public HttpResult deleteRecords(int id) {
        HttpResult result=null;
        int count = recordsMapper.deleteRecords(id);
        if (count>0){
            result=new HttpResult(null,0,200,"删除成功");
        }else{
            result=new HttpResult(null,0,500,"删除失败");

        }
        return result;
    }
}

5:RecordsController

package com.woniu.community.controller;

import com.woniu.community.entity.HttpResult;
import com.woniu.community.entity.Records;
import com.woniu.community.service.IRecordsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/records")
@CrossOrigin(origins = "*")
public class RecordsController {
    @Autowired
    private IRecordsService iRecordsService;
    @RequestMapping("/list")
    HttpResult selectAll(int pageIndex, int pageSize , String numbers, String typeName){
        return  iRecordsService.selectAll(pageIndex,pageSize,numbers,typeName);
    }
    @PostMapping("add")
    HttpResult  insertRecords(@RequestBody  Records records){
        return iRecordsService.insertRecords(records);
    }
    @RequestMapping("/delete")
    HttpResult  deleteRecords(int id){
        return iRecordsService.deleteRecords(id);

    }
}

6:RecordsMapper.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="com.woniu.community.mapper.RecordsMapper">
    <resultMap id="recMap" type="Records">
        <result column="id" property="id"/>
        <result column="type_id" property="typeId"/>
        <result column="num" property="num"/>
        <result column="num2" property="num2"/>
        <result column="house_id" property="houseId"/>
        <result column="up_time" property="upTime"/>
        <result column="on_time" property="onTime"/>
        <result column="check_time" property="checkTime"/>
        <result column="meter" property="meter"/>
        <result column="remarks" property="remarks"/>
        <result column="username" property="userName"/>
        <result column="numbers" property="numbers"/>
        <result column="name" property="typeName"/>


    </resultMap>
    <select id="selectAll" resultMap="recMap">
        select h.numbers,o.username,r.*,p.name
        from  house h left join  owner o on
            o.house_id=h.id
                      left join records r on
            r.house_id=h.id
                      left join property_type p on
            r.type_id=p.id
        <where>
            <if test="numbers!=null and numbers!='null'">
                and  numbers=#{numbers}
            </if>
            <if test="typeName!=null and typeName!='null'">
                and  name=#{typeName}
            </if>
        </where>
        limit #{start},#{size}

    </select>

    <select id="count" resultType="int">
        select count(r.id)
        from  house h left join  owner o on
            o.house_id=h.id
                      left join records r on
            r.house_id=h.id
                      left join property_type p on
            r.type_id=p.id
        <where>
            <if test="numbers!=null and numbers!='null'">
                and  numbers=#{numbers}
            </if>
            <if test="typeName!=null and typeName!='null'">
                and  name=#{typeName}
            </if>
        </where>
    </select>

    <insert id="insertRecords">
        insert  into records(house_id,type_id,num,num2,check_time,meter)
        values (#{houseId},#{typeId},#{num},#{num2},#{checkTime},#{meter})
    </insert>

    <delete id="deleteRecords">
        delete from records where  id=#{id}
    </delete>


</mapper>

二前端代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="row">
        <div class="col-md-12">

            门牌号:
            <input type="text"  v-model="numbers"/>

            费用类型:
            <input type="text"  v-model="typeName"/>
            <button class="btn btn-info" @click="doQuery">搜索</button>
        </div>
        <div class="col-md-12" style="height: 50px; line-height: 50px;">
            <button class="btn btn-info" @click="doAdd">新增</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
            <caption>抄表管理</caption>
                <thead>
                    <tr>
                        <th>门牌号</th>
                        <th>户主</th>
                        <th>费用类型</th>
                        <th>上次度数</th>
                        <th>本次度数</th>
                        <th>登记时间</th>
                        <th>抄表员</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="o in records">
                        <td>{{o.numbers}}</td>
                        <td>{{o.userName}}</td>
                        <td>{{o.typeName}}</td>
                        <td>{{o.num}}</td>
                        <td>{{o.num2}}</td>
                        <td>{{o.checkTime}}</td>
                        <td>{{o.meter}}</td>
                        <td>
                            <button class="btn btn-danger" @click="doDelete(o.id)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <ul class="pagination" v-for="p in pageNum">
                <li v-if="p==pageIndex" class="active"><a @click="doGO(p)">{{p}}</a></li>
                <li v-else="p==pageIndex"><a @click="doGO(p)">{{p}}</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            records:null,
            pageIndex:1,//当前页码
            pageSize:5,//每显示的条数
            pageTotal:0,//总条数
            pageNum:0,//分页
           numbers:null,
             typeName:null,
        },
        methods: {
            requestLIst(url){
                axios.get(url).then(response=>{
                    console.log(response.data)
                    this.records=response.data.data;//用户列表
                    this.pageTotal=response.data.pageTotal;//总条数
                    this.pageNum=Math.ceil(this.pageTotal / this.pageSize);//计算页数
                })
            },
            doDelete(id){
                var  url="http://localhost:8080/records/delete?id="+id;
                axios.get(url).then(response=>{
                    console.log(response.data)
                    if (response.data.code==200){
                        var url="http://localhost:8080/records/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize;
                        this.requestLIst(url);
                    }else{
                        alert(response.data.msg)
                    }
                })
            },
            doGO(p){
                this.pageIndex=p;
                var url="http://localhost:8080/records/list?pageIndex="+p+"&pageSize="+this.pageSize+"&numbers="+this.numbers+"&typeName="+this.typeName;
                this.requestLIst(url);
            },
            doQuery(){
                this.doGO(1);
            },
            doAdd(){
                window.parent.main_right.location.href = "records_add_update.html";

            },

        },
        created: function () {
            var url="http://localhost:8080/records/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize;
            this.requestLIst(url);
            }
    });
</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
    <script src="assets/date_picker.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="row">
                <div class="col-md-12" style="text-align: center; font-weight: bold; font-size: 18px; height: 80px; line-height: 80px;">
                    {{title}}
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 200px;">
                  <label>门牌号:</label>
                    <select v-model="houseId">
                        <option v-for="h in houseList":value="h.id">{{h.numbers}}</option>
                    </select><br>

                    <label>费用类型:</label>
                    <select v-model="typeId">
                        <option value="2">水费</option>
                        <option value="3">电费</option>
                        <option value="1">物业费</option>
                        <option value="4">停车费</option>
                    </select><br>

                    <label>上次度数:</label>
                    <input type="text" v-model="num"><br>
                    <label>本次度数:</label>
                    <input type="text" v-model="num2"><br>
                    <label>登记时间:</label>
                    <input type="date" class="form-control" v-model="checkTime"/>
                    <label>抄表员:</label>
                    <input type="text" v-model="meter"><br>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <button class="btn btn-primary"@click="doSave">保存</button>
                    <button class="btn btn-default" @click="doCancel">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            title: "新增信息",

            houseList:null,
            houseId:null,
            typeId:null,
            num:null,
            num2:null,
            checkTime:null,
            meter:null,
        },
        methods: {
            requestHouse(){
                var  url="http://localhost:8080/house/list?pageIndex=1&pageSize=100";
                axios.get(url).then(response=>{
                    this.houseList=response.data.data;
                })
            },
            // requestOwner(){
            //     var  url="http://localhost:8080/owner/list?pageIndex=1&pageSize=100";
            //     axios.get(url).then(response=>{
            //         this.ownerList=response.data.data;
            //     })
            // },
            doSave(){
            axios.post("http://localhost:8080/records/add",{
                houseId:this.houseId,
                typeId:this.typeId,
                num:this.num,
                num2:this.num2,
                checkTime:this.checkTime,
                meter:this.meter,

            }).then(response=>{
                if (response.data.code==200){
                    window.parent.main_right.location.href="records_list.html";

                }else{
                    alert(response.data.msg)
                }
            })
            },
            doCancel(){
                history.go(-1);
            },
        },
        created: function () {
            this. requestHouse();
            // this. requestOwner();

        }
    });
</script>
</body>
</html>

三页面效果

在这里插入图片描述

雷大胖胖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
# 智慧社区管理系统-基础信息管理-06抄表管理

2:RecordsMapper3:IRecordsService4:RecordsServiceImpl5:RecordsController6:RecordsMapper.xml二前端代码三页面效果
复制链接

扫一扫