一对多案列分享

最新推荐文章于 2024-01-05 17:40:51 发布
最新推荐文章于 2024-01-05 17:40:51 发布
阅读量162 收藏
点赞数
文章标签： spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45536593/article/details/106090530
版权 
<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-form :model="searchFormCli" inline>
					<el-form-item label="客户名:">
						<el-input v-model="searchFormCli.name" placeholder="请输入客户名"></el-input>
					</el-form-item>
					<el-form-item label="发卡银行:">
						<el-input v-model="searchFormCli.bname" placeholder="请输入发卡银行"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="success" @click="handSearchCli">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-button type="primary" @click="openDialogCli">添加</el-button>
		<el-button type="danger" @click="deletesForm">批量删除</el-button>

		<el-table :data="tableData" @selection-change="handleSelectionChange">
			<el-table-column type="selection">
			</el-table-column>
			<el-table-column prop="cid" label="序号">
			</el-table-column>

			<el-table-column prop="name" label="客户名">
			</el-table-column>

			<el-table-column label="性别">
				<template slot-scope="scope">
					<span v-if="scope.row.sex==1">男</span>
					<span v-else>女</span>
				</template>
			</el-table-column>

			<el-table-column prop="birthday" label="出生日期">
			</el-table-column>

			<el-table-column prop="bname" label="发卡银行">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="info" size="mini">查看</el-button>
					<el-button type="warning" size="mini" @click="openUpdateDialogCli(scope.row)">修改</el-button>

				</template>
			</el-table-column>
		</el-table>
		<el-row>
			<el-col :span="24">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
				 :page-size="size" :page-sizes="sizes" layout="total, prev, pager, next" :total="total">
				</el-pagination>
			</el-col>
		</el-row>

		<!-- 添加的打开框 -->
		<el-dialog title="添加用户" :visible.sync="DialogCli">
			<el-form :model="saveFormCli">
				<el-form-item label="客户名:">
					<el-input v-model="saveFormCli.name" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="性别:">
					<el-radio v-model="saveFormCli.sex" label="1" border>男</el-radio>
					<el-radio v-model="saveFormCli.sex" label="0" border>女</el-radio>
				</el-form-item>

				<el-form-item label="出生日期:">
					<el-date-picker v-model="saveFormCli.birthday"></el-date-picker>
				</el-form-item>

				<el-form-item label="发卡银行">

					<el-checkbox-group v-model="checkedBank" @change="handleCheckedCitiesChange">
						<el-checkbox v-for="bank in banks" :label="bank.bid">{{bank.name}}</el-checkbox>
					</el-checkbox-group>

				</el-form-item>

			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="DialogCli = false">取 消</el-button>
				<el-button type="primary" @click="saveformCliBank">保存</el-button>
			</span>
		</el-dialog>
		<!-- 修改的打开框 -->
		<el-dialog title="修改用户" :visible.sync="UpdateDialogCli">
			<el-form :model="updateFormCli">

				<el-form-item label="客户名:">
					<el-input v-model="updateFormCli.name" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="性别:">
					<el-radio v-model="updateFormCli.sex" label="1" border>男</el-radio>
					<el-radio v-model="updateFormCli.sex" label="0" border>女</el-radio>
				</el-form-item>

				<el-form-item label="出生日期:">
					<el-date-picker v-model="updateFormCli.birthday"></el-date-picker>
				</el-form-item>

				<el-form-item label="发卡银行">

					<el-checkbox-group v-model="checkedBank" @change="handleCheckedCitiesChange">
						<el-checkbox v-for="bank in banks" :label="bank.bid">{{bank.name}}</el-checkbox>
					</el-checkbox-group>

				</el-form-item>

			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="UpdateDialogCli = false">取 消</el-button>
				<el-button type="primary" @click="updateformCliBank">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				cid: [],
				deleteCli: [],
				UpdateDialogCli: false,
				checkedBank: [],
				banks: [],
				DialogCli: false,
				size: 3,
				sizes: [3, 5, 8],
				total: 0,
				current: 1,
				tableData: [],
				searchFormCli: {
					name: '',
					bname: ''
				},
				saveFormCli: {
					name: '',
					sex: '',
					birthday: ''
				},
				updateFormCli: {
					bid: '',
					cid: 0,
					name: '',
					sex: '',
					birthday: ''
				}
			}
		},
		created() {
			this.initData();
		},
		methods: {
			initData() {
				this.axios.get('http://localhost:81/client/list', {
					params: {
						name: this.searchFormCli.name,
						bname: this.searchFormCli.bname,
						current: this.current,
						size: this.size,

					}
				}).then((response) => {
					this.tableData = response.data.data.records;
					this.total = response.data.data.total;
				})
			},
			handleSelectionChange(val) {
				this.deleteCli = val;

			},
			handSearchCli() {
				this.current = 1;
				this.initData();
			},
			handleSizeChange(val) {
				this.size = val;
				this.initData();
			},
			handleCurrentChange(val) {
				this.current = val;
				this.initData();
			},
			openDialogCli() {
				this.checkedBank = [];
				this.axios.get('http://localhost:81/bank/list').then((response) => {
					this.banks = response.data.data;
				});
				this.DialogCli = true;
			},
			handleCheckedCitiesChange(val) {
				this.checkedBank = val;

			},
			saveformCliBank() {
				this.saveFormCli.bid = this.checkedBank.map((bid) => bid).join(",");
				//console.log(this.saveFormCli+"1111111")
				this.axios.post('http://localhost:81/client/insert', this.saveFormCli).then((response) => {
					if (response.data.data) {
						this.$message({
							message: '用户添加成功',
							type: 'success'
						});
						this.DialogCli = false;
						this.initData();
					} else {
						this.$message.error("用户添加失败了");
					}
				});
			},
			openUpdateDialogCli(row) {
				this.checkedBank = [];
				console.log(row.bid + "1111");
				if (row.bid != null && row.bid != '') {
					//拆分
					let bids = row.bid.split(",");
					for (let i = 0; i < bids.length; i++) {
						let bid = bids[i];
						if (!isNaN(bid)) {
							this.checkedBank.push(parseInt(bid));
						}
					}
				}
				this.axios.get('http://localhost:81/bank/list').then((response) => {
					this.banks = response.data.data;
				});
				Object.assign(this.updateFormCli, row);
				if (row.sex == 1) {
					this.updateFormCli.sex = '1';
				} else {
					this.updateFormCli.sex = '0';
				}


				this.UpdateDialogCli = true;
			},
			updateformCliBank() {
				this.updateFormCli.bid = this.checkedBank.map((bid) => bid).join(",");
				//console.log(this.saveFormCli+"1111111")
				this.axios.post('http://localhost:81/client/update', this.updateFormCli).then((response) => {
					if (response.data.data) {
						this.$message({
							message: '用户修改成功',
							type: 'success'
						});
						this.UpdateDialogCli = false;
						this.initData();
					} else {
						this.$message.error("用户修改失败了");
					}
				});
			},
			/* 	deletesForm() {
								if (this.deleteCli.length > 0) {
									this.$confirm('你确定要删除选中的数据吗?', '提示', {
										confirmButtonText: '确定',
										cancelButtonText: '取消',
										type: 'warning',
										center: true
									}).then(() => {
				
										//删除用户ids
										let ids = this.deleteCli.map((row) => row.cid).join(",");
				
										this.axios.get('http://localhost:81/client/deletes', {
											params: {
												ids: ids
											}
										}).then((response) => {
											if(response.data.data){
												this.$message({
													type: 'success',
													message: '删除成功!'
												});
												
												//重新初始化数据值
												this.initData();
											}else{
												this.$message({
													type: 'info',
													message: '删除失败'
												});
											}
										});
				
									}).catch(() => {
										this.$message({
											type: 'info',
											message: '已取消删除'
										});
				
									});
								} else {
									this.$message.error('请选择你要删除的数据');
								}
							} */
			deletesForm() {

				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let ids = this.deleteCli.map((row) => row.cid).join(",");

					console.log(ids + "1111")
					this.axios.get('http://localhost:81/client/deletes', {
						params: {
							ids: ids
						}
					}).then((res) => {
						if (res.data.data) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});

							//重新初始化数据值
							this.initData();

						} else {
							this.$message({
								type: 'info',
								message: '删除失败'
							});
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消删除'
					});
				});
			}
		}
	}
</script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

致遠、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Hibernate 一对一，一对多，多对多例子
12-29
Hibernate一对一，一对多，多对多例子，讲的非常清楚
Mybatis - 多对一 | 一对多 案例
qq_43613793的博客
03-08 256
新建Maven项目many2oneANDone2maney 配置pom.xml配置文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.
mybatis中多对多一对多实例，maven+springMvc+mybatis
laiwanwanyihao的博客
06-08 1401
附源码，免费下载 前言 好久没用过mybatis了，现在复习一下，顺带着整理一下东西， 本人maven用的不好，架构参照来源http://www.cnblogs.com/GarfieldEr007/p/5746263.html， 本片文章例子为简单的小例子，参考的文章也是介绍mybatis，不过我没看，我就下了maven架构就开始搞自个的例子了，因为原博主的文章写得太长了，懒得看了
hibernate一对多关系配置案例
sheng_xinjun的博客
02-19 359
下面是我写的一个班级-学生的一对多案例 学生类 package tm.change.domain; public class Student { //主键 private String id; //学生姓名 private String name; //外键值 private Banji banji; public String getId() { return id;
Vue后台管理系统列表组件Table一对多数据展示
weixin_44986785的博客
10-31 985
需要注意的是，这里的判断条件如果没有额外需求，直接写死即可，比如需要哪几列对应的行进行合并，直接判断columnIndex是否等于对应的列即可，但如果涉及到某些额外需求，比如上面还有一个checkbox,checkbox可以手动点击，然后决定列表字段的显示与隐藏，这样的话，如果直接写死，checkbox点击之后就会导致列表裂开，达不到想要的效果。
电子商务案列分享.pptx
09-21
"电子商务案列分享" 电子商务案例分享的知识点主要围绕中国化妆品零售渠道展开。该行业的零售渠道可以分为商场、超市、专营店、专业店、美容院、网购、直销、药店和医疗渠道等多种形式。其中，网购和专业连锁店是...
贷款电销成功案列分享..ppt
11-14
- 在案例1中，虽然采取了一种不太寻常的策略，即制造虚假的银行红包费用，但这种做法实际上破坏了信任，最终可能导致负面后果。诚实和透明是建立长期客户关系的基础，即使短期内可能会带来额外收益，但从长远来看，...
参考资料-营销总监总经理经营活动中的目标如何量化的6个维度30个方法及案列分享.zip
02-18
这份"参考资料-营销总监总经理经营活动中的目标如何量化的6个维度30个方法及案列分享.zip"包含了一个Excel表格，旨在为营销总监和总经理提供指导，帮助他们在经营活动中明确并量化目标。以下是对这些内容的详细解读...
拼多多早期分享砍价案例分析.docx
08-21
这其中包括了触发机制的设定、分享文案的引导、小程序卡片的优化、砍价流程的简化以及用户行为的引导等多方面考虑。这些策略不仅提升了用户参与度，还促进了用户的自发分享，为拼多多的快速成长做出了巨大贡献。对于...
GEE教程资源和案列分析
06-13
4.3 时间序列分析：支持对同一地区的多时相数据进行分析，发现时间上的模式和趋势。 4.4 动态地图生成：可以创建交互式地图，展示分析结果。 4.5 分析脚本和API：用户可以通过JavaScript API自定义复杂的数据处理...
el-table中一列显示两个数据
weixin_44882744的博客
01-05 988
【代码】el-table中一列显示两个数据。
el-table表格 合并相同数据的列展示数据
maoxiaohei_的博客
07-21 772
element合并列上的相同数据，展示。
vue用element的表格接收一个“一对多”参数问题
qq_39985787的博客
07-12 482
前两天有个朋友问我在给element表格循环赋值的时候提示该字段未定义先看下源码看到这里大概都想到的是去循环tptFcontact，这样想是对的，但是只是单纯的v-for循环tptFcontact取name2浏览器会提示tptFcontact是未定义的值。
041：vue中 el-table每个单元格包含多个数据项处理
大剑师兰特的GIS世界
11-11 1472
vue项目中，我们需要在el-table中显示数组数据，有的时候，需要在一个单元格中显示多条数据，如何实现呢？看看下面源代码，一看便知。
elementUI -前端一对多，多个固定类型情况下的新增实现，数组类型表单校验
lwang_IT的博客
05-24 1444
最后效果图 问题描述： 一个分类下有多个规则： { "id": 1, //分组id "groupName": "分组一", //分组名称 "rules": [{ "type": 1, //规则类型 "name": "规则一", //规则名称 "groupId": 1 //关联得分组id }, { "type": 2, "name": "规则二", "groupId": 1 }] } 规则得类型是固定的 rules的规则有3种ty
vue + Element Ui 中生成动态合并表格及后端数据说明及常见问题
weixin_53411280的博客
02-10 3369
vue + Element Ui 中生成动态合并表格及后端数据说明及常见问题
el-table 树形表格 自定义展开图标_你会使用layui的表格树并加上分页吗
weixin_39934063的博客
11-21 1091
最近公司项目上接到了一个这样的需求，即需要将一个一对多的数组对象使用表格的形式进行展示，并且能够对表格的记录进行操作。听罢，我当即就想到了这是一棵只有两级的树，并且在表格中点击父节点时需要展示子节点。平常在工作中经常使用的layui表格在这里就无法使用了，因为它没有表格树的功能，只能展示一对一联查得到的数据。对于这样的表格来说，如果单纯使用原生的html与js来实现的话，工作量较大，由于...
element table 一列展示多条数据
weixin_43551242的博客
03-16 2952
#table 一列展示多条数据。
el-table花式操作，含合并求和、双表齐动 等等
weixin_43440893的博客
06-29 1256
el-table，提供的行合并，我是没找到单元格可以合并求和的，就用了操作document来 合并单元格，大家可以参考参考。上面这张表，第1 2 两行，数据是一样的，3 4 两行是一样的，只是2 4 是每个月所有人数据合并求和了下。使用方法，我上面是24 两行，从第二列开始，每四个合并求个，所以代码是。
C++多进程多线程案列
最新发布
03-18
C++是一种支持多进程和多线程的编程语言，可以用于开发并发程序。下面是一个简单的C++多进程多线程案例的介绍： 案例：生产者-消费者问题 在这个案例中，我们将使用多进程和多线程来模拟生产者-消费者问题。生产者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值