目录
后端代码
实体类
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>这个前端页面也需要注意数据的绑定
效果图
542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
