vue 列表、查询、添加、编辑
具体细节:列表:分页、序号列查询:下拉菜单(后台回显数据)添加、编辑:Dialog对话框、表单、下拉菜单、表单数据验证页面:vue:<template><section class="monitoringpoint"><section style="margin: 20px 0 0 20px;">...
·
具体细节:
列表:分页、序号列
查询:下拉菜单(后台回显数据)
添加、编辑: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;
}
更多推荐
已为社区贡献1条内容
所有评论(0)