一 后端
1:entity
package com. woniu. community. entity ;
import lombok. AllArgsConstructor ;
import lombok. Data ;
import lombok. NoArgsConstructor ;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Repair {
private int id;
private String comId;
private String comDate;
private int ownerId;
private Integer status;
private int clr;
private String remarks;
private String userName;
private String name;
}
2:Repairmapper
package com. woniu. community. mapper ;
import com. woniu. community. entity. Owner ;
import com. woniu. community. entity. Repair ;
import java. util. List ;
public interface RepairMapper {
List < Repair > selectAll ( String name, Integer status, int start, int size) ;
int count ( String name, Integer status) ;
int insertRepair ( Repair repair) ;
int deleteRepair ( int id) ;
int updateRepair ( Repair repair) ;
Repair selectById ( int id) ;
}
3:IRepairService
package com. woniu. community. service ;
import com. woniu. community. entity. HttpResult ;
import com. woniu. community. entity. Repair ;
public interface IRepairService {
HttpResult selectAll ( String name, Integer status, int pageIndex, int pageSize) ;
HttpResult insertRepair ( Repair repair) ;
HttpResult deleteRepair ( int id) ;
HttpResult updateRepair ( Repair repair) ;
HttpResult selectById ( int id) ;
}
4:RepairServiceImpl
package com. woniu. community. service. impl ;
import com. woniu. community. entity. HttpResult ;
import com. woniu. community. entity. Repair ;
import com. woniu. community. mapper. RepairMapper ;
import com. woniu. community. service. IRepairService ;
import org. springframework. beans. factory. annotation. Autowired ;
import org. springframework. stereotype. Service ;
import javax. swing. * ;
import java. util. List ;
@Service
public class RepairServiceImpl implements IRepairService {
@Autowired ( required = false )
private RepairMapper repairMapper;
@Override
public HttpResult selectAll ( String name, Integer status, int pageIndex, int pageSize) {
HttpResult result= null ;
List < Repair > repairs = repairMapper. selectAll ( name, status, ( pageIndex - 1 ) * pageSize, pageSize) ;
int count = repairMapper. count ( name, status) ;
if ( repairs!= null && repairs. size ( ) > 0 ) {
result= new HttpResult ( repairs, count, 200 , null ) ;
} else {
result= new HttpResult ( null , 0 , 200 , "没有更多数据" ) ;
}
return result;
}
@Override
public HttpResult insertRepair ( Repair repair) {
HttpResult result= null ;
int count = repairMapper. insertRepair ( repair) ;
if ( count> 0 ) {
result= new HttpResult ( null , 0 , 200 , "添加成功" ) ;
} else {
result= new HttpResult ( null , 0 , 500 , "添加失败" ) ;
}
return result;
}
@Override
public HttpResult deleteRepair ( int id) {
HttpResult result= null ;
int count = repairMapper. deleteRepair ( id) ;
if ( count> 0 ) {
result= new HttpResult ( null , 0 , 200 , "删除成功" ) ;
} else {
result= new HttpResult ( null , 0 , 500 , "删除失败" ) ;
}
return result;
}
@Override
public HttpResult updateRepair ( Repair repair) {
HttpResult result= null ;
int count = repairMapper. updateRepair ( repair) ;
if ( count> 0 ) {
result= new HttpResult ( null , 0 , 200 , "修改成功" ) ;
} else {
result= new HttpResult ( null , 0 , 500 , "修改失败" ) ;
}
return result;
}
@Override
public HttpResult selectById ( int id) {
HttpResult result= null ;
Repair repair = repairMapper. selectById ( id) ;
if ( repair!= null ) {
result= new HttpResult ( repair, 0 , 200 , null ) ;
} else {
result= new HttpResult ( null , 0 , 500 , "没有更多数据" ) ;
}
return result;
}
}
5:RepairController
package com. woniu. community. controller ;
import com. woniu. community. entity. HttpResult ;
import com. woniu. community. entity. Repair ;
import com. woniu. community. service. IRepairService ;
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 ( "/repair" )
@CrossOrigin ( origins = "*" )
public class RepairController {
@Autowired
private IRepairService iRepairService;
@RequestMapping ( "list" )
HttpResult selectAll ( String name, Integer status, int pageIndex, int pageSize) {
return iRepairService. selectAll ( name, status, pageIndex, pageSize) ;
}
@RequestMapping ( "add" )
HttpResult insertRepair ( Repair repair) {
return iRepairService. insertRepair ( repair) ;
}
@RequestMapping ( "delete" )
HttpResult deleteRepair ( int id) {
return iRepairService. deleteRepair ( id) ;
}
@RequestMapping ( "update" )
HttpResult updateRepair ( Repair repair) {
return iRepairService. updateRepair ( repair) ;
}
@RequestMapping ( "info" )
HttpResult selectById ( int id) {
return iRepairService. selectById ( id) ;
}
}
6:RepairMapper.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.RepairMapper" >
< resultMap id= "repairMap" type= "Repair" >
< result column= "id" property= "id" / >
< result column= "com_id" property= "comId" / >
< result column= "com_date" property= "comDate" / >
< result column= "owner_id" property= "ownerId" / >
< result column= "status" property= "status" / >
< result column= "clr" property= "clr" / >
< result column= "remarks" property= "remarks" / >
< result column= "username" property= "userName" / >
< result column= "name" property= "name" / >
< / resultMap>
< select id= "selectAll" resultMap= "repairMap" >
select
re. name, r. *, o. username
from
repair r left join
owner o on
r. owner_id= o. id
left join
repairtype re on
r. com_id= re. id
< where>
< if test= "name!=null and name!='' and name!='null'" >
and re. name like '% ${ name} % '
< / if >
< if test= "status!=null" >
and status= #{ status}
< / if >
< / where>
limit #{ start} , #{ size}
< / select>
< select id= "count" resultType= "int" >
select
count ( r. id)
from
repair r left join
owner o on
r. owner_id= o. id
left join
repairtype re on
r. com_id= re. id
< where>
< if test= "name!=null and name!='' and name!='null'" >
and re. name like '% ${ name} % '
< / if >
< if test= "status!=null" >
and status= #{ status}
< / if >
< / where>
< / select>
< insert id= "insertRepair" >
insert into repair ( com_id, remarks, owner_id, com_date, status, clr)
values ( #{ comId} , #{ remarks} , #{ ownerId} , #{ comDate} , #{ status} , #{ clr} )
< / insert>
< delete id= "deleteRepair" >
delete from repair where id= #{ id}
< / delete>
< update id= "updateRepair" >
update repair set status= #{ status} where id= #{ id}
< / update>
< select id= "selectById" resultMap= "repairMap" >
select * from repair 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 : 50px; " >
< div class = " row" >
< div class = " col-md-3" style = " height : 20px; margin-bottom : 15px; " >
维修类型:< select style = " width : 150px; " v-model = " name" >
< option > 公共部位维修</ option>
< option > 共用设施设备 </ option>
< option > 自用部位维修</ option>
< option > 门窗维修</ option>
< option > 电路维修</ option>
< option > 电梯</ option>
</ select>
</ 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>
</ tr>
</ thead>
< tbody>
< tr v-for = " c in repairs" >
< td> {{c.name}}</ td>
< td> {{c.remarks}}</ td>
< td> {{c.userName}}</ td>
< td> {{c.comDate}}</ td>
< td> {{c.status==1?"已处理":"未处理"}}</ td>
< td> {{c.clr}}</ td>
< td v-if = " c.status==1" >
< button class = " btn btn-danger" @click = " doDelete(c.id)" > 删除</ button>
</ td>
< td v-else = " c.status==0" >
< button class = " btn btn-info" @click = " doUpdate(c.id)" > 报修处理</ button>
< button class = " btn btn-danger" @click = " doDelete(c.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 : {
repairs : null ,
pageIndex : 1 ,
pageSize : 6 ,
pageTotal : 0 ,
pageNum : 0 ,
name : '' ,
status : '' ,
} ,
methods : {
requestRepairList ( url ) {
axios. get ( url) . then ( response => {
this . repairs= 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/repair/list?pageIndex=" + p+ "&pageSize=" + this . pageSize+ "&name=" + this . name+ "&status=" + this . status;
console. log ( url) ;
this . requestRepairList ( url) ;
} ,
doAdd ( ) {
window. parent. main_right. location. href = "repair_add_update.html" ;
} ,
doUpdate ( id ) {
window. parent. main_right. location. href = "repair_add_update.html?id=" + id;
} ,
doDelete ( id ) {
var url= "http://localhost:8080/repair/delete?id=" + id;
axios. get ( url) . then ( response => {
if ( response. data. code== 200 ) {
var url= "http://localhost:8080/repair/list?pageIndex=" + this . pageIndex+ "&pageSize=" + this . pageSize;
this . requestRepairList ( url) ;
} else {
alert ( response. data. msg)
}
} )
} ,
} ,
created : function ( ) {
var url= "http://localhost:8080/repair/list?pageIndex=" + this . pageIndex+ "&pageSize=" + this . pageSize;
this . requestRepairList ( 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 style = " width : 150px; " v-model = " comId" >
< option value = " 1" > 公共部位维修</ option>
< option value = " 2" > 共用设施设备 </ option>
< option value = " 4" > 自用部位维修</ option>
< option value = " 5" > 门窗维修</ option>
< option value = " 7" > 电路维修</ option>
< option value = " 3" > 电梯</ option>
</ select> < br>
< label> 保修内容</ label>
< input type = " text" v-model = " remarks" > < br>
保修人:< select v-model = " ownerId" >
< option v-for = " o in ownerList" :value = " o.id" > {{o.userName}}</ option>
</ select> < br>
< label> 保修时间:</ label>
< input type = " date" v-model = " comDate" /> < br>
处理状态:< select v-model = " status" >
< option value = " 1" > 已处理</ option>
< option value = " 0" > 未处理</ option>
</ select> < br>
< label> 处理人</ label>
< input type = " text" v-model = " clr" >
</ 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 ,
comId : null ,
remarks : null ,
ownerId : null ,
ownerList : null ,
comDate : null ,
status : '' ,
clr : null ,
repairId : null ,
} ,
methods : {
requestOwnerList ( ) {
var url= "http://localhost:8080/owner/list?pageIndex=1&pageSize=100" ;
axios. get ( url) . then ( response => {
this . ownerList= response. data. data;
} )
} ,
doSave ( ) {
if ( this . repairId== null ) {
this . title= "添加" ;
console. log ( url)
var url= "http://localhost:8080/repair/add?comId=" + this . comId+ "&remarks=" + this . remarks+ "&ownerId=" + this . ownerId+ "&comDate=" + this . comDate+ "&status=" + this . status+ "&clr=" + this . clr;
axios. get ( url) . then ( response => {
if ( response. data. code== 200 ) {
window. parent. main_right. location. href = "repair_list.html" ;
} else {
alert ( response. data. msg)
}
} )
} else {
this . title= "报修处理" ;
var url= "http://localhost:8080/repair/update?status=" + this . status+ "&id=" + this . repairId;
axios. get ( url) . then ( response => {
if ( response. data. code== 200 ) {
window. parent. main_right. location. href = "repair_list.html" ;
} else {
alert ( response. data. msg)
}
} )
}
} ,
doNot ( ) {
history. go ( - 1 ) ;
} ,
} ,
created : function ( ) {
this . requestOwnerList ( ) ;
var url= window. location. href;
if ( url. indexOf ( "id" ) != - 1 ) {
this . repairId= url. substring ( url. indexOf ( "=" ) + 1 )
console. log ( this . repairId)
}
if ( this . repairId== null ) {
this . title= "添加" ;
} else {
this . title= "报修处理" ;
var url= "http://localhost:8080/repair/info?id=" + this . repairId;
axios. get ( url) . then ( response => {
this . comId= response. data. data. comId;
this . remarks= response. data. data. remarks;
this . ownerId= response. data. data. ownerId;
this . comDate= response. data. data. comDate;
this . status= response. data. data. status;
this . clr= response. data. data. clr;
} )
}
}
} ) ;
</ script>
</ body>
</ html>
三 页面效果