一 后端

1:entity

package com.woniu.community.entity;

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

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Complaint {
    private int  id;
    private int comId;
    private String comDate;
    private int ownerId;
    private Integer status;
    private String clr;
    private String remarks;
    private String  userName;
    private String name;
    private  String endDate;

}

2:ComplaintMapper

package com.woniu.community.mapper;

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

import java.util.List;

public interface ComplaintMapper {
    List<Complaint> selectAll(int start, int size , String name, Integer status);
    int  count(String name,Integer status);
    int  insertComplaint(Complaint complaint);
    int  deleteComplaint(int id);
    int updateComplaint(Complaint complaint);



}

3:IComplaintService

package com.woniu.community.service;

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



public interface IComplaintService {
   HttpResult selectAll(int pageIndex, int pageSize , String name, Integer status);
    HttpResult  insertComplaint(Complaint complaint);
    HttpResult  deleteComplaint(int id);
    HttpResult updateComplaint(Complaint complaint);
}

4:ComplaintServiceImpl

package com.woniu.community.service.impl;

import com.woniu.community.entity.CarCharge;
import com.woniu.community.entity.Complaint;
import com.woniu.community.entity.HttpResult;
import com.woniu.community.mapper.ComplaintMapper;
import com.woniu.community.service.ICarChargeService;
import com.woniu.community.service.IComplaintService;
import org.apache.tomcat.util.http.parser.HttpParser;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ComplaintServiceImpl implements IComplaintService {
    @Autowired(required = false)
    private ComplaintMapper complaintMapper;

    @Override
    public HttpResult selectAll(int pageIndex, int pageSize, String name, Integer status) {
        HttpResult result=null;
        List<Complaint> complaints = complaintMapper.selectAll((pageIndex - 1) * pageSize, pageSize, name, status);
        int count = complaintMapper.count(name, status);
        if (complaints!=null&&complaints.size()>0){
            result =new HttpResult(complaints,count,200,null);
        }else{
            result =new HttpResult(null,0,500,"没有更多数据");

        }

        return result;
    }

    @Override
    public HttpResult insertComplaint(Complaint complaint) {
        HttpResult result=null;
        int count = complaintMapper.insertComplaint(complaint);
        if (count>0){
            result=new HttpResult(null,0,200,"添加成功");
        }else{
            result=new HttpResult(null,0,500,"添加失败");

        }
        return result;
    }

    @Override
    public HttpResult deleteComplaint(int id) {
        int count = complaintMapper.deleteComplaint(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 updateComplaint(Complaint complaint) {
        HttpResult  result=null;
        int count = complaintMapper.updateComplaint(complaint);
        if (count>0){
            result=new HttpResult(null,0,200,"修改成功");
        }else{
            result=new HttpResult(null,0,500,"修改失败");

        }
        return result;
    }
}

5:ComplaintController

package com.woniu.community.controller;

import com.woniu.community.entity.Complaint;
import com.woniu.community.entity.HttpResult;
import com.woniu.community.service.IComplaintService;
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("/complaint")
@CrossOrigin(origins = "*")
public class ComplaintController {
    @Autowired
    private IComplaintService iComplaintService;

    @RequestMapping("/list")
    HttpResult selectAll(int pageIndex, int pageSize , String name, Integer status){
        return  iComplaintService.selectAll(pageIndex,pageSize,name,status);
    }
    @RequestMapping("/add")
    HttpResult  insertComplaint(Complaint complaint){
        return iComplaintService.insertComplaint(complaint);
    }
    @RequestMapping("/delete")
    HttpResult  deleteComplaint(int id){
        return  iComplaintService.deleteComplaint(id);
    }
    @RequestMapping("/update")
    HttpResult updateComplaint(Complaint complaint){
        return iComplaintService.updateComplaint(complaint);
    }
}

6:ComplaintMapper.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.ComplaintMapper">
    <resultMap id="comMap" type="Complaint">
        <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"/>
        <result column="end_date" property="endDate"/>
    </resultMap>
    <select id="selectAll" resultMap="comMap">
        select
               co.name,o.username,c.*
        from
             complaint c left  join  owner o  on
            c.owner_id=o.id
                left  join  complaint_type co  on
            c.com_id=co.id
        <where>
            <if test="name!=null and  name!='' and name!='null'">
               and co.name=#{name}
            </if>
            <if test="status!=null">
                and  c.status=#{status}
            </if>
        </where>
        limit #{start},#{size}
    </select>
    <select id="count" resultType="int">
        select
        count(c.id)
        from
        complaint c left  join  owner o  on
        c.owner_id=o.id
        left  join  complaint_type co  on
        c.com_id=co.id
        <where>
            <if test="name!=null and  name!='' and name!='null'">
                and co.name=#{name}
            </if>
            <if test="status!=null">
                and  c.status=#{status}
            </if>
        </where>
    </select>

    <insert id="insertComplaint">
        insert  into complaint(com_id,remarks,owner_id,com_date,status,clr,end_date)
                values (#{comId},#{remarks},#{ownerId},#{comDate},#{status},#{clr},#{endDate})
    </insert>

    <delete id="deleteComplaint">
        delete  from  complaint where id=#{id}
    </delete>

    <update id="updateComplaint">
        update  complaint set status=#{status} where id=#{id}
    </update>

</mapper>

2 前端代码

<!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>
                </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>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for=" c in complaint">
                        <td>{{c.comId}}</td>
                        <td>{{c.name}}</td>
                        <td>{{c.userName}}</td>
                        <td>{{c.comDate}}</td>
                        <td>{{c.status==1?"已处理":"未处理"}}</td>
                        <td>{{c.clr}}</td>
                        <td>{{c.endDate}}</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-primary" @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: {
            complaint:null,
            pageIndex:1,
            pageSize:4,
            pageTotal:0,
            pageNum:0,
            name:'',
            status:'',
        },
        methods: {
            requestComplaintList(url){
                axios.get(url).then(response=>{
                    this.complaint=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/complaint/list?pageIndex="+p+"&pageSize="+this.pageSize+"&name="+this.name+"&status="+this.status;
                this.  requestComplaintList(url);
            },
            doAdd(){
                window.parent.main_right.location.href = "complaint_add_update.html";

            },
            doUpdate(id){
                var  url="http://localhost:8080/complaint/update?status=1&id="+id;
                axios.get(url).then(response=>{
                    if (response.data.code==200){
                        var  url="http://localhost:8080/complaint/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize;
                        this.  requestComplaintList(url);
                    }else{
                        alert(response.date.msg);
                    }
                })
            },
            doDelete(id){
            var  url="http://localhost:8080/complaint/delete?id="+id;
                axios.get(url).then(response=>{
                    if (response.data.code==200){
                        var  url="http://localhost:8080/complaint/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize;
                        this.  requestComplaintList(url);
                    }else{
                        alert(response.data.msg)
                    }
                })
            },
        },
        created: function () {
            var  url="http://localhost:8080/complaint/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize;
            this.  requestComplaintList(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: 260px;">
                    投诉类型:<select style="width: 150px;" v-model="comId">
                    <option value="1">垃圾乱放</option>
                    <option value="2">绿植太差</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" class="form-control" 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">
                    <br>
                    <label>处理时间:</label>
                    <input type="date" class="form-control" v-model="endDate"/><br>
                </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,
            remarks:null,

            ownerId:null,
            ownerList:null,
            comDate:null,
            status:null,
            clr:null,
            comId:null,
            endDate: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(){
            this.title="添加投诉信息"
                var  url="http://localhost:8080/complaint/add?comId="+this.comId+"&remarks="+this.remarks+"&ownerId="+this.ownerId+"&comDate="+this.comDate+"&status="+this.status+"&clr="+this.clr+"&endDate="+this.endDate;
                console.log(url)
                axios.get(url).then(response=>{
                    if (response.data.code==200){
                        window.parent.main_right.location.href = "complaint_list.html";

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

                })
            },
            doNot(){
               history.go(-1);
            },
        },
        created: function () {
            this. requestOwnerList();
            this.title="添加投诉信息";

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

3页面效果