一 后端

1:entity

package com.woniu.community.entity;

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

@Data
@AllArgsConstructor
@NoArgsConstructor
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 typeName;


}

2:PropertyInfoMapper

package com.woniu.community.mapper;

import com.woniu.community.entity.PropertyInfo;

import java.util.List;

public interface PropertyInfoMapper {
    List<PropertyInfo> selectAll(int start,int size ,String numbers,Integer status);
    int  count(String numbers,Integer status);
    int  insertPropertyInfo(PropertyInfo propertyInfo);
    int  deletePropertyInfo(int id);
    int updatePropertyInfo(PropertyInfo propertyInfo);
    PropertyInfo getById(int id);
}

3:IPropertyInfoService

package com.woniu.community.service;

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

import java.util.List;

public interface IPropertyInfoService {
   HttpResult selectAll(int pageIndex, int pageSize , String numbers, Integer status);
    HttpResult  insertPropertyInfo(PropertyInfo propertyInfo);
    HttpResult  deletePropertyInfo(int id);
    HttpResult updatePropertyInfo(PropertyInfo propertyInfo);
    HttpResult getById(int id);

}

4:PropertyInfoServiceImpl

package com.woniu.community.service.impl;

import com.woniu.community.entity.HttpResult;
import com.woniu.community.entity.PropertyInfo;
import com.woniu.community.mapper.PropertyInfoMapper;
import com.woniu.community.service.IPropertyInfoService;
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(int pageIndex, int pageSize, String numbers, Integer status) {
        HttpResult  result=null;
        List<PropertyInfo> propertyInfos = propertyInfoMapper.selectAll((pageIndex - 1) * pageSize, pageSize, numbers, status);
        int count = propertyInfoMapper.count(numbers, status);
        if (propertyInfos!=null&&propertyInfos.size()>0){
            result=new HttpResult(propertyInfos,count,200,null);
        }else{
            result=new HttpResult(null,0,500,null);

        }
        return result;
    }


    @Override
    public HttpResult insertPropertyInfo(PropertyInfo propertyInfo) {
        HttpResult  result=null;
        int count = propertyInfoMapper.insertPropertyInfo(propertyInfo);
        if (count>0){
            result=new HttpResult(null,0,200,"新增成功");
        }else{
            result=new HttpResult(null,0,500,"新增失败");

        }

        return result;
    }

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

        }

        return result;
    }

    @Override
    public HttpResult updatePropertyInfo(PropertyInfo propertyInfo) {
        HttpResult  result=null;
        int count = propertyInfoMapper.updatePropertyInfo(propertyInfo);
        if (count>0){
            result=new HttpResult(null,0,200,"修改成功");
        }else{
            result=new HttpResult(null,0,500,"修改失败");

        }

        return result;
    }

    @Override
    public HttpResult getById(int id) {
        HttpResult  result=null;
        PropertyInfo info = propertyInfoMapper.getById(id);
        if (info!=null){
            result=new HttpResult(info,0,200,null);
        }else{
            result=new HttpResult(null,0,500,"没有更多数据");

        }
        return result;
    }
}

5:PropertyInfoController

package com.woniu.community.controller;

import com.woniu.community.entity.HttpResult;
import com.woniu.community.entity.PropertyInfo;
import com.woniu.community.service.IPropertyInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping ("/property")
@CrossOrigin(origins = "*")
public class PropertyInfoController {
    @Autowired
    private IPropertyInfoService  iPropertyInfoService;
    @RequestMapping("/list")
    HttpResult selectAll(int pageIndex, int pageSize , String numbers, Integer status){
        return iPropertyInfoService.selectAll(pageIndex,pageSize,numbers,status);
    }
    @RequestMapping("/add")
    HttpResult  insertPropertyInfo(PropertyInfo propertyInfo){
        return  iPropertyInfoService.insertPropertyInfo(propertyInfo);
    }
    @RequestMapping("/delete")
    HttpResult  deletePropertyInfo(int id){
        return iPropertyInfoService.deletePropertyInfo(id);
    }
    @RequestMapping("/update")
    HttpResult updatePropertyInfo(PropertyInfo propertyInfo){
        return  iPropertyInfoService.updatePropertyInfo(propertyInfo);
    }
    @RequestMapping("/info")
    HttpResult getById(int id){
        return iPropertyInfoService.getById(id);
    }
}

6:PropertyInfoMapper.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.PropertyInfoMapper">
    <resultMap id="infoMap" type="PropertyInfo">
        <result column="id" property="id"/>
        <result column="type_id" property="typeId"/>
        <result column="money" property="money"/>
        <result column="start_date" property="startDate"/>
        <result column="end_date" property="endDate"/>
        <result column="status" property="status"/>
        <result column="house_id" property="houseId"/>
        <result column="remarks" property="remarks"/>
        <result column="remarks" property="remarks"/>
        <result column="numbers" property="numbers"/>
        <result column="name" property="typeName"/>
        <result column="username" property="userName"/>
        <result column="name" property="typeName"/>


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

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

    <insert id="insertPropertyInfo">
    insert  into property_info(house_id,type_id,start_date,end_date,money,status)
            values (#{houseId},#{typeId},#{startDate},#{endDate},#{money},#{status})
    </insert>

    <delete id="deletePropertyInfo">
        delete  from property_info where id=#{id}
    </delete>

    <update id="updatePropertyInfo">
        update property_info set money=#{money},status=#{status} where id=#{id}
    </update>

    <select id="getById" resultMap="infoMap" >
        select  *  from property_info where id=#{id}
    </select>
</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" style="height: 80px; line-height: 20px;">
            <div class="row">
                <div class="col-md-3" style="height: 20px;margin-bottom: 15px">
                    房间号:<input type="text" v-model="numbers">
                </div>
                <div class="col-md-3" style="height: 20px;margin-bottom: 15px;">
                    缴费状态:<select style="width: 150px;" v-model="status">
                    <option value="1">已缴费</option>
                    <option value="0">未缴费</option>
                </select>
                </div>
                <div class="col-md-3" style="height: 20px;margin-bottom: 15px">
                    <button class="btn btn-primary" @click="doQuery">搜索</button>

                </div>
            </div>
            <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="p  in proInfo">
                    <td>{{p.numbers}}</td>
                    <td>{{p.userName}}</td>
                    <td>{{p.typeName}}</td>
                    <td>{{p.startDate}}</td>
                    <td>{{p.endDate}}</td>
                    <td>{{p.money}}</td>
                    <td>{{p.status==1?"已缴费":"未缴费"}}</td>

                    <td v-if="p.status==1">
                        <button class="btn btn-danger" @click="doDelete(p.id)">删除</button>
                    </td>
                    <td v-else="p.status==0">
                        <button 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"><a @click="doGO(p)">{{p}}</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            proInfo:null,
            pageIndex:1,
            pageSize:5,
            pageTotal:0,
            pageNum:0,
            numbers:'',
            status:'',
        },
        methods: {
            requestCarList(url){
                axios.get(url).then(response=>{
                    this.proInfo=response.data.data;
                    this.pageTotal=response.data.pageTotal;//总条数
                    this.pageNum=Math.ceil(this.pageTotal / this.pageSize);
                })
            },
            doQuery(){
                this.doGO(1);
            },
            doGO(p){
                this.pageIndex=p;
                var  url="http://localhost:8080/property/list?pageIndex="+p+"&pageSize="+this.pageSize+"&numbers="+this.numbers+"&status="+this.status;
                console.log(url);
                this.requestCarList(url);
            },
            doAdd(){
                window.parent.main_right.location.href = "proInfo_add_update.html";
            },
            doDelete(id){
                var url="http://localhost:8080/property/delete?id="+id;
                axios.get(url).then(response=>{
                    if (response.data.code==200){
                        var  url="http://localhost:8080/property/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize;
                        this.requestCarList(url);
                    }else{
                        alert(response.data.msg)
                    }
                })

            },
            doUpdate(id){
                window.parent.main_right.location.href = "proInfo_add_update.html?id="+id;
            },
        },
        created: function () {
            var  url="http://localhost:8080/property/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize;
            this.requestCarList(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: 240px;">
                    房间号:<select v-model="houseId">
                    <option v-for="h in houseList":value="h.id">{{h.numbers}}</option>
                </select><br>

                    费用类型:<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="date" class="form-control" v-model="startDate"/>
                    <label>结束时间:</label>
                    <input type="date" class="form-control" v-model="endDate"/>
                    <lable>金额</lable>
                    <input type="text" v-model="money"><br>
                    状态:<select v-model="status">
                    <option value="1">缴费</option>
                    <option value="0">未缴费</option>
                </select>
                </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="doNot">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            title: null,
            houseId:null,
            houseList:null,
            ownerId:null,
            ownerList:null,
            startDate:null,
            endDate:null,
            money:null,
            status:null,
            typeId:null,
            proInfoId:null,
            userName:null,

            },
        methods: {
            requestParkingList(){
                var url="http://localhost:8080/house/list?pageIndex=1&pageSize=100";
                axios.get(url).then(response=>{
                    this.houseList=response.data.data;
                })
            },
            // requestOwnerList(){
            //     var url="http://localhost:8080/owner/list?pageIndex=1&pageSize=100";
            //     axios.get(url).then(response=>{
            //         this.ownerList=response.data.data;
            //     })
            // },
            getById(){
                var url="http://localhost:8080/property/info?id="+this.proInfoId;
                console.log(url);
                axios.get(url).then(response=>{
                    this.houseId=response.data.data.houseId;
                    this.ownerId=response.data.data.ownerId;
                    this.typeId=response.data.data.typeId;
                    this.startDate=response.data.data.payDate;
                    this.endDate=response.data.data.endDate;
                    this.money=response.data.data.money;
                    this.status=response.data.data.status;
                })
            },
            doSave(){
                    if (this.proInfoId==null){
                        this.title="添加信息"
                        var  url="http://localhost:8080/property/add?houseId="+this.houseId+"&typeId="+this.typeId+"&startDate="+this.startDate+"&endDate="+this.endDate+"&money="+this.money+"&status="+this.status;
                        console.log(url)
                        axios.get(url).then(response=>{
                            if (response.data.code==200){
                                window.parent.main_right.location.href = "proInfo_list.html";

                            }else{
                                alert(response.data.msg)
                            }

                        })
                    }else{
                        this.title="缴费"
                        var   url="http://localhost:8080/property/update?money="+this.money+"&status="+this.status+"&id="+this.proInfoId;
                        console.log(url)
                        axios.get(url).then(response=>{
                            if (response.data.code==200){
                                window.parent.main_right.location.href = "proInfo_list.html";

                            }else{
                                alert(response.data.msg)
                            }

                        })
                    }
                },
            doNot(){
                history.go(-1);
            }
            },



        created: function () {
            this.requestParkingList();
            // this.requestOwnerList();
            var  url=window.location.href;
            if (url.indexOf("id")!=-1){
                this.proInfoId=url.substring(url.indexOf("=")+1);
            }
            if (this.proInfoId==null){
                this.title="添加信息"
            }else{
                this.title="缴费"
                this.getById();

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

三 运行结果