智慧社区管理系统11(物业收费管理列表和功能实现)

快来打我* 2023-10-11 20:05 31阅读 0赞

**目录**

后端代码

实体类

Mapper层

Mapper sql文件

Service层

接口

实现类

Controller层

前端部分

列表显示

增加和修改

--------------------

##  ##

## 后端代码 ##

### 实体类 ###

package com.woniu.community.entity;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    @Data
    @NoArgsConstructor
    @AllArgsConstructor
    public class PropertyInfo {
        private int id;
        private int typeId;
        private double money;//金额
        private String startDate;//开始时间
        private String endDate;//结束时间
        private Integer status;//状态
        private int houseId;
        private String remarks;//备注
        private String numbers;//门牌号
        private String userName;//房东
        private String name;//费用类型
    
    
    }

> 这里数据库表中没有的数据是因为我们列表查询需要的外键,我们要在实体类中还有在mapper.xml文件中也映射出来,

### Mapper层 ###

package com.woniu.community.mapper;
    
    
    
    import com.woniu.community.entity.CarCharge;
    import com.woniu.community.entity.PropertyInfo;
    
    import java.util.List;
    
    public interface PropertyInfoMapper {
        List<PropertyInfo> selectAll(String numbers, String status, int start, int size );
        int count(String numbers,String status);
        int insertPropertyInfo(PropertyInfo propertyInfo);
    
        int deletePropertyInfo(int id);
    
        int updatePropertyInfo(PropertyInfo propertyInfo);
    
        PropertyInfo selectById(int id);
    }

### Mapper sql文件 ###

<?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.PropertyInfoMapper">
        <resultMap id="propertyInfoResult" type="PropertyInfo">
            <result column="id" property="id"></result>
            <result column="type_id" property="typeId"></result>
            <result column="money" property="money"></result>
            <result column="start_date" property="startDate"></result>
            <result column="end_date" property="endDate"></result>
            <result column="status" property="status"></result>
            <result column="house_id" property="houseId"></result>
            <result column="remarks" property="remarks"></result>
            <result column="numbers" property="numbers"></result>
            <result column="username" property="userName"></result>
            <result column="name" property="name"></result>
        </resultMap>
        <select id="selectAll" resultMap="propertyInfoResult">
            select property_info.*,house.numbers,owner.username,property_type.name from property_info
            left join house on property_info.house_id=house.id
            left join owner on property_info.house_id=owner.house_id
            left join property_type on property_info.type_id=property_type.id
            <where>
                <if test="numbers!=null and numbers !='null' and numbers!=''">
                and house.numbers like '%${numbers}%'
                </if>
                <if test="status!=null and status!='' and status!='null'">
                    and property_info.status = #{status}
                </if>
            </where>
            limit #{start},#{size}
        </select>
        <select id="count"  resultType="int">
            select count(property_info.id) from property_info
            left join house on property_info.house_id=house.id
            left join owner on property_info.house_id=owner.house_id
            left join property_type on property_info.type_id=property_type.id
            <where>
                <if test="numbers!=null and numbers !='null' and numbers!=''">
                and house.numbers like '%${numbers}%'
                </if>
                <if test="status!=null and status!='' and status!='null'">
                    and property_info.status = #{status}
                </if>
            </where>
        </select>
        <insert id="insertPropertyInfo">
            insert into property_info (type_id,money,start_date,end_date,status,house_id) values (#{typeId},#{money},#{startDate},#{endDate},#{status},#{houseId})
        </insert>
        <delete id="deletePropertyInfo">
            delete from property_info where id=#{id}
        </delete>
        <update id="updatePropertyInfo">
            update property_info set type_id=#{typeId},money=#{money},start_date=#{startDate},end_date=#{endDate},status=#{status},house_id=#{houseId}
            where id=#{id}
        </update>
        <select id="selectById" resultMap="propertyInfoResult">
            select * from  property_info where id=#{id}
        </select>
    </mapper>

> 列表的显示我们还是和其他一样,用的是一个外表链接查询,

### Service层 ###

####  接口 ####

package com.woniu.community.service;
    
    import com.woniu.community.entity.PropertyInfo;
    import com.woniu.community.utils.HttpResult;
    
    public interface IPropertyInfoService {
        HttpResult selectAll(String numbers, Integer status, int pageIndex, int pageSize);
    
        HttpResult insertPropertyInfo(PropertyInfo propertyInfo);
    
        HttpResult deletePropertyInfo(int id);
    
        HttpResult updatePropertyInfo(PropertyInfo propertyInfo);
    
        HttpResult selectById(int id);
    }

#### 实现类 ####

package com.woniu.community.service.Impl;
    
    import com.woniu.community.entity.PropertyInfo;
    import com.woniu.community.mapper.PropertyInfoMapper;
    import com.woniu.community.service.IPropertyInfoService;
    import com.woniu.community.utils.HttpResult;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service
    public class PropertyInfoServiceImpl implements IPropertyInfoService {
        @Autowired(required =false)
        private PropertyInfoMapper propertyInfoMapper;
        @Override
        public HttpResult selectAll(String numbers, Integer status, int pageIndex, int pageSize) {
            List<PropertyInfo> propertyInfos = propertyInfoMapper.selectAll(numbers, status + "", (pageIndex - 1) * pageSize, pageSize);
            int count = propertyInfoMapper.count(numbers, status + "");
            HttpResult result = null;
            if (propertyInfos != null && propertyInfos.size() > 0) {
                result = new HttpResult(propertyInfos, count, 200, null);
            } else {
                result = new HttpResult(null, 0, 500, "没有更多数据");
            }
            return result;
        }
    
        @Override
        public HttpResult insertPropertyInfo(PropertyInfo propertyInfo) {
            int count = propertyInfoMapper.insertPropertyInfo(propertyInfo);
            HttpResult result = null;
            if (count > 0 ) {
                result = new HttpResult(null, 0, 200, "新增成功");
            } else {
                result = new HttpResult(null, 0, 500, "新增失败");
            }
            return result;
        }
    
        @Override
        public HttpResult deletePropertyInfo(int id) {
            int count = propertyInfoMapper.deletePropertyInfo(id);
            HttpResult result = null;
            if (count > 0 ) {
                result = new HttpResult(null, 0, 200, "删除成功");
            } else {
                result = new HttpResult(null, 0, 500, "删除失败");
            }
            return result;
        }
    
        @Override
        public HttpResult updatePropertyInfo(PropertyInfo propertyInfo) {
            int count = propertyInfoMapper.updatePropertyInfo(propertyInfo);
            HttpResult result = null;
            if (count > 0 ) {
                result = new HttpResult(null, 0, 200, "修改成功");
            } else {
                result = new HttpResult(null, 0, 500, "修改失败");
            }
            return result;
        }
    
        @Override
        public HttpResult selectById(int id) {
            PropertyInfo propertyInfo = propertyInfoMapper.selectById(id);
            HttpResult result = null;
            if (propertyInfo != null ) {
                result = new HttpResult(propertyInfo, 0, 200, null);
            } else {
                result = new HttpResult(null, 0, 500, "没有更多数据");
            }
            return result;
        }
    }

### Controller层 ###

package com.woniu.community.controller;
    
    import com.woniu.community.entity.PropertyInfo;
    import com.woniu.community.service.IPropertyInfoService;
    import com.woniu.community.utils.HttpResult;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    
    @RestController
    @CrossOrigin(origins = "*")
    @RequestMapping("/propertyinfo")
    public class PropertyInfoController {
        @Autowired
        private IPropertyInfoService propertyInfoService;
    
        @RequestMapping("/list")
        public HttpResult selectAll(String numbers, Integer status, int pageIndex, int pageSize) {
            return propertyInfoService.selectAll(numbers, status, pageIndex, pageSize);
        }
    
        @PostMapping("/add")
        HttpResult insertPropertyInfo(@RequestBody PropertyInfo propertyInfo) {
            return propertyInfoService.insertPropertyInfo(propertyInfo);
        }
    
        @RequestMapping("/delete")
        HttpResult deletePropertyInfo(int id) {
            return propertyInfoService.deletePropertyInfo(id);
        }
    
        @PostMapping("/update")
        HttpResult updatePropertyInfo(@RequestBody PropertyInfo propertyInfo) {
            return propertyInfoService.updatePropertyInfo(propertyInfo);
        }
    
        @RequestMapping("/info")
        HttpResult selectById(int id) {
            return propertyInfoService.selectById(id);
        }
    }

## 前端部分 ##

### 列表显示 ###

<!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-1" style="height: 50px; line-height: 50px;">
                <label>房间号:</label>
            </div>
            <div class="col-md-2" style="height: 50px; line-height: 50px;">
                <input type="text" class="form-control"v-model="numbers" >
            </div>
            <div class="col-md-2" style="height: 50px; line-height: 50px;">
                <label>缴费状态:</label>
            </div>
            <div class="col-md-3" style="height: 50px; line-height: 50px;">
                <select class="form-control" v-model="status">
                    <option></option>
                    <option value="0">未缴费</option>
                    <option value="1">已缴费</option>
    
                </select>
            </div>
            <div class="col-md-1 " style="height: 50px; line-height: 50px;">
                <button class="btn btn-default" @click="doQuery" >搜索</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="height: 50px; line-height: 50px;">
                <button class="btn btn-default" @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="p in propertyInfoList">
                        <td>{
       {p.numbers}}</td>
                        <td>{
       {p.userName}}</td>
                        <td>{
       {p.name}}</td>
                        <td>{
       {p.startDate}}</td>
                        <td>{
       {p.endDate}}</td>
                        <td>{
       {p.money}}</td>
                        <td>{
       {p.status|statusFilter}}</td>
                        <td>
                            <button v-if="p.status==0" class="btn btn-info"@click="doUpdate(p.id)" >缴费</button>
                            <button  class="btn btn-danger" @click="doDelete(p  .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" @click="doGo(p)"><a>{
       {p}}</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                propertyInfoList:null,
                status:'',
                numbers:'',//门牌号
                pageIndex: 1,//当前页数
                pageSize: 10,//每页显示的条数
                pageTotle: 0,//总条数
                pageNum: 0,//页数(分页器)
            },
            filters:{//自定义过滤器
                statusFilter:function(value){//格式化性别字符串
                    switch (value) {//0为关闭,1为开启,
                        case 0:
                            return '未缴费';
                        case 1:
                            return '已缴费';
                        default:
                            return'故障';
                    }
                }
            },
            methods: {
                requestPropertyInfoList(url){
                    axios.get(url).then(response=>{
                        console.log(response.data);
                        this.propertyInfoList = response.data.data;
                        this.pageTotle = response.data.pageTotle;
                        this.pageNum = Math.ceil(this.pageTotle / this.pageSize);
                    });
                },
                doGo(p){
                    this.pageIndex = p;
                    var url = " http://localhost:8080/propertyinfo/list?pageIndex=" + p + "&pageSize=" + this.pageSize;
                    this.requestPropertyInfoList(url);
                },
    
                doQuery(){
                    var url = " http://localhost:8080/propertyinfo/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize+"&numbers="+this.numbers+"&status="+this.status;
                    this.requestPropertyInfoList(url);
                },
                doDelete(id){
                    //通过axios发送请求
                    axios.get("http://localhost:8080/propertyinfo/delete?id=" + id).then(response => {
                        if (response.data.code == 200) {
                            var url = " http://localhost:8080/propertyinfo/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize;
                            this.requestPropertyInfoList(url);
                        } else {
                            alert(response.data.msg);
                        }
                    });
                },
                doAdd(){
                    window.parent.main_right.location.href = "property_info_add_update.html";
                },
                doUpdate(id){
                    window.parent.main_right.location.href="property_info_add_update.html?id="+id;
                },
            },
            created: function () {
    
                var url="http://localhost:8080/propertyinfo/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize;
                this.requestPropertyInfoList(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: 80px;">
                        <label>房间号</label>
                        <select v-model="houseId">
                            <option v-for="h in houseList" :value="h.id">{
       {h.numbers}}</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>房东</label>
                        <select v-model="houseId">
                            <option v-for="o in ownerList" :value="o.id">{
       {o.userName}}</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>费用类型</label>
                        <select v-model="typeId">
                            <option value="1">物业费</option>
                            <option value="2">水费</option>
                            <option value="3">电费</option>
                            <option value="4">车位费</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>开始时间</label>
                        <input type="date" class="form-control" v-model="startDate">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>结束时间</label>
                        <input type="date" class="form-control" v-model="endDate">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>金额</label>
                        <input type="text" class="form-control" v-model="money">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <label style="margin-right:15px;">缴费状态</label>
                        <label class="radio-inline">
                            <input type="radio" name="status" v-model="status" value="0"/>未缴费
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="status" v-model="status" value="1"/>已缴费
                        </label>
                    </div>
                </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: "dddd",
                propertyInfoId:null,
                houseId: null,//车牌号绑定//房东绑定
                typeId:null,//费用类型
                startDate: null,//开始时间
                endDate: null,//结束时间
                money: null,//金额
                status: null,//缴费状态
                houseList: null,//房间号号下选框
                ownerList: null,//户主下选列表
    
            },
            methods: {
                //保存
                doSave() {
                    if (this.propertyInfoId == null) {//添加
                        //通过axios发送请求
                        axios.post("http://localhost:8080/propertyinfo/add", {
                            houseId: this.houseId,
                            startDate: this.startDate,
                            endDate: this.endDate,
                            money: this.money,
                            status: this.status,
                            typeId:this.typeId,
                        }).then(response => {
                            if (response.data.code == 200) {//成功
                                window.parent.main_right.location.href = "property_info_list.html";
                            } else {//失败
                                alert(response.data.msg);
                            }
                        })
                    } else {//修改
                        //通过axios发送请求
                        axios.post("http://localhost:8080/propertyinfo/update", {
                            id: this.propertyInfoId,
                            houseId: this.houseId,
                            startDate: this.startDate,
                            endDate: this.endDate,
                            money: this.money,
                            status: this.status,
                            typeId:this.typeId,
                        }).then(response => {
                            if (response.data.code == 200) {//成功
                                window.parent.main_right.location.href = "property_info_list.html";
                            } else {//失败
                                alert(response.data.msg);
                            }
                        })
                    }
                },
                //取消按钮
                doCancel() {
                    //返回上一个页面
                    history.go(-1);
                },
                //请求车牌列表
                requestHouseList() {
                    //通过axios发送请求
                    axios.get("http://localhost:8080/parking/list?pageIndex=1&pageSize=10000").then(response => {
                        console.log(response.data);
                        this.houseList = response.data.data;
                    });
                },
                //请求房东列表
                requestOwnerList() {
                    //通过axios发送请求
                    axios.get("http://localhost:8080/owner/list?pageIndex=1&pageSize=10000").then(response => {
                        console.log(response.data);
                        this.ownerList = response.data.data;
                    });
                },
                //请求车位缴费列表信息
                requesetPropertyinfo() {
                    axios.get("http://localhost:8080/propertyinfo/info?id=" + this.propertyInfoId).then(response => {
                        console.log(response.data);
                        this.houseId = response.data.data.houseId;
                        this.startDate = response.data.data.startDate;
                        this.endDate = response.data.data.endDate;
                        this.money = response.data.data.money;
                        this.status = response.data.data.status;
                        this.typeId = response.data.data.typeId;
                    });
                }
            },
            created: function () {
                this.requestHouseList();
                this.requestOwnerList();
                var url = window.location.href;
                if (url.indexOf("id") != -1) {
                    this.propertyInfoId = url.substring(url.indexOf("=") + 1);
                }
                console.log("页面跳转传递的id:" + this.propertyInfoId);
                if (this.propertyInfoId == null) {//说明添加
                    this.title = '添加缴费信息';
                } else {//说明修改
                    this.title = '修改缴费信息';
                    this.requesetPropertyinfo();
                }
            }
        });
    </script>
    </body>
    </html>

> 这个前端页面也需要注意数据的绑定

### 效果图 ###

![38d794c8fbd54ec392f22ca784213c13.png][]

![80c385b2a54c4a87873025b12109f8b5.png][]

![ec4277beddbc442ea4475a4a0114dea6.png][]

[38d794c8fbd54ec392f22ca784213c13.png]: https://img-blog.csdnimg.cn/38d794c8fbd54ec392f22ca784213c13.png
[80c385b2a54c4a87873025b12109f8b5.png]: https://img-blog.csdnimg.cn/80c385b2a54c4a87873025b12109f8b5.png
[ec4277beddbc442ea4475a4a0114dea6.png]: https://img-blog.csdnimg.cn/ec4277beddbc442ea4475a4a0114dea6.png