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;
}
  • 10
    点赞
  • 58
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用Ant Design Vue的Table组件来实现列表编辑功能。以下是一个示例代码,可以帮助您入门: ```vue <template> <div> <a-button type="primary" @click="addRow">添加行</a-button> <a-table :columns="columns" :data-source="dataSource" :row-key="record => record.id" :editable="editable"> <template slot="name" slot-scope="{ text, record, index }"> <a-input v-model="text" @change="handleChange(record, 'name')" /> </template> <template slot="age" slot-scope="{ text, record, index }"> <a-input-number v-model="text" @change="handleChange(record, 'age')" /> </template> <template slot="address" slot-scope="{ text, record, index }"> <a-input v-model="text" @change="handleChange(record, 'address')" /> </template> <template slot="operation" slot-scope="{ text, record, index }"> <a v-if="editable[index]"> <a @click="save(index)">保存</a> <a-divider type="vertical" /> <a @click="cancel(index)">取消</a> </a> <a v-else> <a @click="edit(index)">编辑</a> <a-divider type="vertical" /> <a @click="deleteRow(index)">删除</a> </a> </template> </a-table> </div> </template> <script> export default { data() { return { columns: [ { title: "姓名", dataIndex: "name", key: "name", editable: true, }, { title: "年龄", dataIndex: "age", key: "age", editable: true, }, { title: "地址", dataIndex: "address", key: "address", editable: true, }, { title: "操作", key: "operation", }, ], dataSource: [ { id: 1, name: "张三", age: 18, address: "北京市", }, { id: 2, name: "李四", age: 20, address: "上海市", }, ], editable: [], }; }, methods: { addRow() { const newData = { id: this.dataSource.length + 1, name: "", age: 0, address: "", }; this.dataSource.push(newData); this.editable.push(true); }, edit(index) { this.editable.splice(index, 1, true); }, deleteRow(index) { this.dataSource.splice(index, 1); this.editable.splice(index, 1); }, save(index) { this.editable.splice(index, 1, false); }, cancel(index) { if (this.dataSource[index].id === undefined) { this.dataSource.splice(index, 1); } this.editable.splice(index, 1, false); }, handleChange(record, key) { record[key] = event.target.value; }, }, }; </script> ``` 在这个示例,我们使用了Ant Design Vue的Table组件来展示一个包含姓名、年龄和地址的列表。每一行数据都可以被编辑,当点击“编辑”按钮时,该行数据变为可编辑状态,在“姓名”、“年龄”和“地址”列出现输入框,用户可以修改数据。当点击“保存”按钮时,该行数据变为不可编辑状态,修改后的数据被保存。如果用户不想保存修改,可以点击“取消”按钮,该行数据恢复到修改前的状态。 这里我们使用了一个editable数组来记录每一行数据的编辑状态。当用户点击“编辑”按钮时,我们将该行的editable设为true,当用户点击“保存”或“取消”按钮时,我们将该行的editable设为false。如果用户点击“删除”按钮,我们将该行数据从dataSource数组删除,并且将该行的editable从editable数组删除。如果用户点击“添加行”按钮,我们创建一个新的空数据,并将其添加到dataSource数组末尾,同时将其editable设为true。 在“姓名”、“年龄”和“地址”列,我们使用了具名插槽来定义每一行数据的编辑组件。这里我们使用了Ant Design Vue的Input、InputNumber和Divider组件。 总之,Ant Design Vue的Table组件提供了很多强大的功能,可以帮助我们快速构建各种表格。如果您想了解更多关于Ant Design Vue的Table组件的信息,可以参考官方文档:https://www.antdv.com/components/table-cn/

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值