vue 列表、查询、添加、编辑

具体细节：
列表：分页、序号列
查询：下拉菜单（后台回显数据）
添加、编辑：Dialog对话框、表单、下拉菜单、表单数据验证

页面：

vue：

<template>
    <section class="monitoringpoint">
        <section style="margin: 20px 0 0 20px;">
            <div style="padding-left: 20px;">
                <el-button type="primary" @click="addData">添加</el-button>

                <el-form :inline="true" :model="query" style="margin-top: 20px;" size="small">
                    <el-form-item label="站点名称" style="margin-left: 10px;">
                        <el-input v-model="query.siteName" placeholder="请输入站点名称"></el-input>
                    </el-form-item>

                    <el-form-item label="所属水体">
                        <el-select v-model="query.waterName" placeholder="请选择" style="width: 200px;">
                            <el-option
                                    v-for="item in dataOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="info" @click="search" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div>
                <el-table :data="dataList" stripe fit v-loading="tableLoading">
                    <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
                    <el-table-column prop="siteName" label="站点名称" align="center" ></el-table-column>
                    <el-table-column prop="serial" label="站点编号" align="center"></el-table-column>
                    <el-table-column prop="waterName" label="所属水体" align="center"></el-table-column>
                    <el-table-column prop="belongBasin" label="所属流域" align="center"></el-table-column>
                    <el-table-column prop="belongLocation" label="所在地区" align="center"></el-table-column>
                    <el-table-column prop="siteStatus" label="站点状态" align="center"></el-table-column>
                    <el-table-column prop="headName" label="负责人" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="iphone" label="联系方式" align="center"></el-table-column>

                    <!-- 操作区 -->
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="editData(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 页码区 -->
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.curPage"
                            :page-sizes="[10, 15, 20, 30]"
                            :page-size="page.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total">
                    </el-pagination>
                </div>
            </div>
        </section>

        <!-- 编辑区 -->
        <el-dialog :title="dialogTitle" :visible.sync="editDialog" width="40%">
            <el-card class="box-card" >
                <el-form :model="dialogData" :rules="rules" ref="dialogForm" label-width="100px" :inline="true">
                    <el-form-item  label="站点名称" prop="siteName">
                        <el-col :span="24">
                            <el-input v-model="dialogData.siteName" placeholder="请输入站点名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="站点编号" prop="serial" >
                        <el-col :span="24">
                            <el-input v-model="dialogData.serial" placeholder="请输入站点编号"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="所属水体">
                        <el-select v-model="dialogData.waterName" placeholder="请选择" style="width: 200px;">
                            <el-option
                                    v-for="item in dataOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属流域" prop="belongBasin" >
                        <el-col :span="24">
                            <el-input v-model="dialogData.belongBasin" placeholder="请输入所属流域"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item  label="所在地区" prop="belongLocation">
                        <el-col :span="24">
                            <el-input v-model="dialogData.belongLocation" placeholder="请输入所在地区"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="站点状态" prop="siteStatus" >
                        <el-col :span="24">
                            <el-input v-model="dialogData.siteStatus" placeholder="请输入站点状态"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item  label="负责人" prop="headName">
                        <el-col :span="24">
                            <el-input v-model="dialogData.headName" placeholder="请输入负责人"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="iphone" >
                        <el-col :span="24">
                            <el-input v-model="dialogData.iphone" placeholder="请输入负责人联系方式"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </el-card>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveData">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
    import {getSiteList, waterNameInfo, addSiteInfo} from '../../api/api.js'

    export default {
        name: "monitoringpoint",
        data() {
            return {
                query: {//用于查询
                    waterName: '',//必须要定义下拉菜单，否则下拉菜单会不能进行选择
                },
                dataOptions: [],//下拉菜单
                tableLoading: false,//加载中
                dataList: [],//列表数据
                page:{ //页码区
                    curPage: 0,
                    size: 10,
                    total: 0,
                },
                
                //对话框
                dialogTitle: '添加站点',
                editDialog: false,
                dialogData: {},
                rules:{
                    siteName: [{required: true, trigger: 'blur', message: '站点名称不能为空'}],
                    serial: [{required: true, trigger: 'blur', message: '站点编号不能为空'}],
                },
            }
        },

        methods:{
            //初始化下拉菜单
            waterNameInfo(){
                let _self = this;
                _self.dataOptions.push({value: '', label: '请选择'});
                waterNameInfo({}).then(response => {
                    response.data.forEach(item => {
                        let arr = {
                            value: item.waterName,
                            label: item.waterName
                        };
                        _self.dataOptions.push(arr);
                    });

                    _self.query.waterName = _self.dataOptions[0].value;
                    _self.loadList();//调用其他方法，需要写在异步请求中
                });
            },

            //改变当前页
            handleCurrentChange: function (currentPage) {
                let _self = this;
                _self.page.current = currentPage;
                _self.loadList()
            },

            //改变页面size
            handleSizeChange: function (size) {
                let _self = this;
                _self.page.size = size;
                _self.loadList()
            },

            //查询
            search() {
                //初始化页码，避免当数据为0时页码出现错误
                this.page={ //页码区
                    curPage: 0,
                    size: 10,
                    total: 0
                };
                this.loadList();
            },

            //加载列表
            loadList: function () {
                let _self = this;
                _self.tableLoading = true;
                _self.dataList = [];
                getSiteList({
                    curPage: _self.page.curPage,
                    size: _self.page.size,
                    siteName: _self.query.siteName,
                    waterName: _self.query.waterName
                }).then(function (rsp) {
                    _self.tableLoading = false;
                    if (rsp.success) {
                        _self.dataList = rsp.data.records;
                        _self.page.total = rsp.data.total
                    } else {
                        // _self.$message.error(rsp.message);
                    }
                })
            },

            //添加
            addData: function () {
                let _self = this;
                _self.editDialog = true;
                //初始化,因为如果是修改后新增，会残留字段
                _self.dialogData = {};
                _self.selectedOptions = [];
                _self.dialogTitle = '添加站点';
            },

            //保存
            saveData: function () {
                let _self = this;
                _self.editDialog = false;
                this.$refs.dialogForm.validate(valid => {
                    //通过验证,则调用后台方法
                    if (valid) {
                        addSiteInfo(_self.dialogData).then(function (response){
                            if (response.success) {
                                _self.$message({
                                    message: _self.dialogTitle + "成功",
                                    type: "success"
                                });
                            } else {
                                _self.$message.error(_self.dialogTitle + "失败");
                            }
                            _self.loadList();
                        })
                    } else {
                        return false
                    }
                });
            },

            //编辑
            editData: function (row) {
                let _self = this;
                _self.editDialog = true;
                _self.dialogTitle = '编辑站点';
                //深复制，避免列表对象和弹窗对象的数据同步改动。
                var obj = {};
                obj = JSON.parse(JSON.stringify(row));
                _self.dialogData = obj;
            },
        },

        mounted() {
            this.waterNameInfo();
        }
    }
</script>

<style lang="less">
    .monitoringpoint{
        .el-pagination{
            margin-top: 15px;
            margin-bottom: 25px;
            text-align: center;
        }
    }
</style>

api.js：

/** 站点信息列表查询 **/
export const getSiteList = params => { return axios.post(`${basePath}site-info/getSiteList`, params).then(res => res.data); };
/** 添加/编辑站点信息 **/
export const addSiteInfo = params => { return axios.post(`${basePath}site-info/addSiteInfo`, params).then(res => res.data); };
/*** 黑臭水体信息*/
export const waterNameInfo = params => { return axios.post(`${basePath}water-regulation/waterNameInfo`, params).then(res => res.data); };

Java：

controller:

/**
 * 站点信息列表
 * @param siteInfo
 * @return
 */
@PostMapping("/getSiteList")
public Object getSiteList(@RequestBody Map paramMap){
	ResponseVo responseVo = new ResponseVo();
	Integer current = (Integer) paramMap.get("curPage");
	Integer size = (Integer) paramMap.get("size");
	QueryWrapper queryWrapper=  new QueryWrapper();
	Page page = new Page<Message>();
	page.setCurrent(current);
	page.setSize(size);
	if(null != paramMap.get("search") && paramMap.get("search")!=""){
	    queryWrapper.like("headName",paramMap.get("search"));
	}
	if(null != paramMap.get("siteName") && paramMap.get("siteName")!=""){
	    queryWrapper.like("siteName",paramMap.get("siteName"));
	}
	if(null != paramMap.get("waterName") && paramMap.get("waterName")!=""){
	    queryWrapper.like("waterName",paramMap.get("waterName"));
	}
	siteInfoService.page(page,queryWrapper);
	if (null != page && page.getRecords().size() > 0) {
	    responseVo.setSuccess(page);
	} else {
	    responseVo.setError(GlobalErrorCode.SYS_NO_DATA.getCode());
	}
	return responseVo;
}

/**
 * 添加/编辑站点信息
 * @param siteInfo
 * @return
 */
@RequestMapping(value = "/addSiteInfo", method = RequestMethod.POST)
public Object edit(@RequestBody SiteInfo siteInfo) {
    ResponseVo<Object> responseVo = new ResponseVo<>();
    try {
        //站点信息id是否为空
        if(CommonUtil.isNotNullOrNotEmpty(siteInfo.getWaterId())){
            siteInfoService.updateById(siteInfo);
            responseVo.setSuccess("编辑成功");
        }else {
            siteInfoService.save(siteInfo);
            responseVo.setSuccess("添加成功");
        }
    } catch (Exception e) {
        log.error("后台错误:", e);
        responseVo.setError(GlobalErrorCode.SYS_RUN_ERROR.getCode());
    }
    return responseVo;
}

/*
* 黑臭水体信息
*/
@RequestMapping(value = "/waterNameInfo")
public ResponseVo<Object> siteNameInfo(){
   ResponseVo<Object> responseVo = new ResponseVo<>();
   QueryWrapper<WaterRegulation> qw = new QueryWrapper<>();
   qw.select("waterName");
   qw.groupBy("waterName");
   responseVo.setData(waterRegulationService.list(qw));
   return responseVo;
}