uniapp实现单选以及多选

news2025/10/31 22:54:41 
<!-- 多选 -->
<template>
	<view class="choiceSupervisionLinkman">
		<view class="searchBox">
			<uni-search-bar :radius="8" placeholder="请输入成员名称" clearButton="none" @confirm="search" @cancel="cancel"
				class="searchBar"></uni-search-bar>
			</image>
		</view>
		<view>
			<checkbox-group @change="allChoose">
				<label class="allCheckedTitle">
					<view>
						<text class="flag"></text>
						<text class='title'>people人员({{checkboxData.length}})</text>
					</view>
					<checkbox style="transform:scale(0.7)" color="rgba(64, 128, 255, 1)" value="all"
						:class="{'checked':allChecked}" :checked="allChecked?true:false" v-if="checkboxData.length>0"></checkbox>
				</label>
			</checkbox-group>
		</view>
		<view>
			<checkbox-group class="block" @change="changeCheckbox">
				<view v-for="item in checkboxData" :key="item.id">
					<view class="singleCheckedTitle">
						<view style="display: flex;">
							<text class="nameFlag">{{item.name.slice(0,1)}}</text>
							<view class="flexstyle">
								<view class="name">{{item.name}}</view>
								<view class="phone">{{item.phone}}</view>
							</view>

						</view>
						<checkbox style="transform:scale(0.7)" color="rgba(64, 128, 255, 1)" :value="String(item.id)"
							:checked="item.choose"
							:class="{'checked':checkedArr.includes(String(item.id))}"></checkbox>

					</view>
				</view>
			</checkbox-group>
		</view>
		<view class="buttonFooter">
			<view class="submit" @click="confirmFn">确认</view>
		</view>
	</view>
</template>

<script>
	import {
		getSupervisionList
	} from "../../../api/transGoods.js"
	import {
		addSupervision
	} from "../../../api/home.js"
	import {
		showModal,
		showToast,
	} from "../../../utils/common.js";
	export default {
		data() {
			return {
				isChecked: false,
				checkboxData: [],
				orgList:[],
				checkedArr: [], //复选框选中的值
				allChecked: false, //是否全选
				id: "", //合同id,:
				KeyWord:''
			}
		},
		onLoad(e) {
			console.log(e, 'e')
			let {
				id
			} = e
			this.id = id
			if (this.id) {
				this.getSupervisionListFn()
			}

		},
		methods: {
			getSupervisionListFn() {
				getSupervisionList({
					contractId: this.id
				}).then(res => {
					this.checkboxData = res
					this.orgList = res || []
					console.log(this.checkboxData,'this.checkboxData');
					//如果监理人员提交过再进来复选
					let allLength = this.checkboxData.filter(v=>(v.choose)) || []
					if(allLength.length == this.checkboxData?.length){
						this.allChecked = true;
					}else{
						this.allChecked = false;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			confirmFn() {
				const compactList = []
				this.checkedArr.map(v => {
					this.checkboxData.map(t => {
						if (v == t.id) {
							compactList.push(v)
						}
					})
				})
				addSupervision({
					contractId: this.id,
					userIds: compactList
				}).then(res => {
					if(res.code == 0){
						showToast('任命监理成功')
						uni.switchTab({
							url: '/pages/home/home?refresh=true'
						})
					}
				})
			},
			// 多选复选框改变事件
			changeCheckbox(e) {
				this.checkedArr = e.detail.value;
				// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
				if (this.checkedArr.length > 0 && this.checkedArr.length == this.checkboxData.length) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			},
			// 全选事件
			allChoose(e) {
				let chooseItem = e.detail.value;
				console.log(chooseItem,'chooseItem');
				// 全选
				if (chooseItem[0] == 'all') {
					this.checkboxData.map(v=> {
						if(!v.choose){
							v.choose = true
						}
					})
					this.allChecked = true;
					for (let item of this.checkboxData) {
						let itemVal = String(item.id);
						if (!this.checkedArr.includes(itemVal)) {
							this.checkedArr.push(itemVal);
						}
					}
				} else {
					// 取消全选
					this.checkboxData.map(v=> {
						if(v.choose){
							v.choose = false
						}
					})
					this.allChecked = false;
					this.checkedArr = [];
				}
			},
			search(e) {
			  this.KeyWord = e.value;
			  
			  if(this.KeyWord ){
				 this.checkboxData = this.orgList.filter(v=> (v.name.includes(this.KeyWord))) 
			  }else{
				 this.checkboxData = this.orgList 
			  }
			},
			cancel() {
			  this.KeyWord = "";
			  this.checkboxData = this.orgList
			},
		}
	}
</script>

<style lang="scss" scoped>
	.choiceSupervisionLinkman {
		.searchBox {
			background-color: #fff;
			padding: 0 13rpx;
		}

		.allCheckedTitle {
			width: calc(100% - 32px);
			height: 46px;
			padding: 0 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.flag {
				display: inline-block;
				margin-right: 13px;
				width: 3px;
				height: 18px;
				opacity: 1;
				background: rgba(22, 109, 241, 1);
				vertical-align: -2px;
			}

			.title {
				font-size: 16px;
				font-weight: 700;
				color: rgba(29, 33, 41, 1);
			}
		}

		.singleCheckedTitle {
			display: flex;
			width: calc(100% - 32px);
			padding: 16px 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;

			.nameFlag {
				display: inline-block;
				width: 40px;
				height: 40px;
				opacity: 1;
				background: rgba(64, 128, 255, 1);
				border: 2px solid rgba(255, 255, 255, 1);
				font-size: 16px;
				font-weight: 700;
				line-height: 40px;
				color: rgba(255, 255, 255, 1);
				border-radius: 50%;
				text-align: center;
				margin-right: 12px;
			}

			.flexstyle {
				.name {
					font-size: 16px;
					font-weight: 400;
					color: rgba(29, 33, 41, 1);
					margin-bottom: 5px;

				}

				.phone {
					font-size: 14px;
					font-weight: 400;
					color: rgba(134, 144, 156, 1);

				}
			}
		}

		.buttonFooter {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 16px 16px 0px 16px;
			position: fixed;
			bottom: 0px;
			width: 100%;
			background-color: #fff;

			.submit {
				width: calc(100% - 32px);
				height: 84rpx;
				line-height: 44px;
				opacity: 1;
				border-radius: 2px;
				background: rgba(22, 93, 255, 1);
				font-size: 16px;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 16px 0;
			}
		}
	}
</style>

在这里插入图片描述

<!-- 单选 -->
<template>
	<view class="choiceSupervisionman">
		<view class="searchBox">
			<uni-search-bar :radius="8" placeholder="请输入成员名称" clearButton="none" @confirm="search" @cancel="cancel"
				class="searchBar"></uni-search-bar>
			</image>
		</view>

		<view class="uni-list">
			<view class="headerTitle">
				<text class="flag"></text>
				<text class='title'>监理人员({{checkboxData.length}})</text>
			</view>
			<radio-group @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in checkboxData" :key="item.id">
					<view class="singleCheckedTitle">
						<view style="display: flex;">
							<text class="nameFlag">{{item.name.slice(0,1)}}</text>
							<view class="flexstyle">
								<view class="name">{{item.name}}</view>
								<view class="phone">{{item.phone}}</view>
							</view>
					
						</view>
					<view>
						<!-- index === current -->
						<radio :value="item.id" :checked="index === current" style="transform:scale(0.7)" color="rgba(64, 128, 255, 1)" />
					</view>
					
					</view>
					
				</label>
			</radio-group>
		</view>

		<view class="buttonFooter">
			<view class="submit" @click="confirmFn">确认</view>
		</view>
	</view>
</template>

<script>
	import {
		getSupervisionExistList
	} from "../../../api/transGoods.js"
	export default {
		data() {
			return {
				id: "", //合同id,
				checkboxData:[],
				orgList:[],
				KeyWord:''
			}
		},
		onLoad(e) {
			console.log(e, 'e')
			let {
				id
			} = e
			this.id = id
			if (this.id) {
				console.log(this.id)
				this.getSupervisionListFn()
			}

		},
		methods: {
			getSupervisionListFn() {
				getSupervisionExistList({
					contractId: this.id
				}).then(res => {
					console.log(res, 'resyay')
					this.checkboxData = res || []
					this.orgList = res || []
				}).catch(err => {
					console.log(err)
				})
			},
			confirmFn() {
				// uni.navigateTo({
				// 	url: `/pages/transGoods/components/addTransGoods?list=${this.checkedArr}&flag=${'choicePerson'}`
				// })
				console.log(this.checkboxData, 'this.checkboxData')
				console.log(this.current,'current');
				let compactList = []
				compactList = this.checkboxData.filter(v=>v.choose)
				console.log(JSON.stringify(compactList), 'compactList')
				if(compactList.length > 0){
					uni.navigateBack()
					uni.$emit('returnData', compactList)
				}else{
					showToast('请选择监理人员')
				}

			},
			radioChange: function(evt) {
				for (let i = 0; i < this.checkboxData.length; i++) {
					if (this.checkboxData[i].id == evt.detail.value) {
						this.current = i;
						this.checkboxData[i].choose = true
						break;
					}
				}
			},
			search(e) {
			  this.KeyWord = e.value;
			  
			  if(this.KeyWord ){
				 this.checkboxData = this.orgList.filter(v=> (v.name.includes(this.KeyWord))) 
			  }else{
				 this.checkboxData = this.orgList 
			  }
			},
			cancel() {
			  this.KeyWord = "";
			  this.checkboxData = this.orgList
			},
		}
	}
</script>

<style lang="scss" scoped>
	.choiceSupervisionman {
		.searchBox {
			background-color: #fff;
			padding: 0 13rpx;
		}
		.uni-list{
			
			.headerTitle{
				width: calc(100% - 32px);
				height: 46px;
				padding: 0 16px;
				display: flex;
				align-items: center;
				.flag {
					display: inline-block;
					margin-right: 13px;
					width: 3px;
					height: 18px;
					opacity: 1;
					background: rgba(22, 109, 241, 1);
					vertical-align: -2px;
				}
				
				.title {
					font-size: 16px;
					font-weight: 700;
					color: rgba(29, 33, 41, 1);
				}
			}

			.singleCheckedTitle {
				display: flex;
				width: calc(100% - 32px);
				padding: 16px 16px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
			
				.nameFlag {
					display: inline-block;
					width: 40px;
					height: 40px;
					opacity: 1;
					background: rgba(64, 128, 255, 1);
					border: 2px solid rgba(255, 255, 255, 1);
					font-size: 16px;
					font-weight: 700;
					line-height: 40px;
					color: rgba(255, 255, 255, 1);
					border-radius: 50%;
					text-align: center;
					margin-right: 12px;
				}
			
				.flexstyle {
					.name {
						font-size: 16px;
						font-weight: 400;
						color: rgba(29, 33, 41, 1);
						margin-bottom: 5px;
			
					}
			
					.phone {
						font-size: 14px;
						font-weight: 400;
						color: rgba(134, 144, 156, 1);
			
					}
				}
			}
		}
		.buttonFooter {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 16px 16px 0px 16px;
			position: fixed;
			bottom: 0px;
			width: 100%;
			background-color: #fff;

			.submit {
				width: calc(100% - 32px);
				height: 84rpx;
				line-height: 44px;
				opacity: 1;
				border-radius: 2px;
				background: rgba(22, 93, 255, 1);
				font-size: 16px;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 16px 0;
			}
		}
	}
</style>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/637014.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

记录一些maven依赖冲突

记录一些maven依赖冲突

目录 Mybatis-Plusswagger报错pagehelper分页失效 Mybatis-Plus <dependency><groupId>org.mybatis</groupId><artifactId>mybatis-spring</artifactId><version>2.0.6</version></dependency><dependency><groupId&…
阅读更多...
自动化的艺术

自动化的艺术

对于基础设施来说&#xff0c;很多服务都有类似的架构、数据库交互和UI&#xff0c;本文介绍了Paypal通过模板自动化基础设施微服务脚手架代码的实践&#xff0c;最大化节约了开发服务的时间并保证了服务的一致性。原文&#xff1a;The Art of Automating Automation[1] 简介 作…
阅读更多...
6.4 构建并评价回归模型

6.4 构建并评价回归模型

6.4 构建并评价回归模型 6.4.1 使用sklearn估计器构建线性回归模型6.4.2 评价回归模型小结 6.4.1 使用sklearn估计器构建线性回归模型 按照研究方法划分&#xff0c;回归分析研究的范围大致如图所示&#xff1a;   在回归模型中&#xff0c;自变量与因变量具有相关关系&…
阅读更多...
python对象与类

python对象与类

文章目录 简述类与对象什么是类&#xff1f;什么是对象&#xff1f;类与对象的关系什么是面向对象编程? 创建类与对象创建创建对象引用类的成员类的属性类的行为self的作用 简述类与对象 什么是类&#xff1f; 类就是包含属性和行为的一种说法&#xff0c;在程序上的class即…
阅读更多...
深度学习应用篇-自然语言处理-命名实体识别[9]：BiLSTM+CRF实现命名实体识别、实体、关系、属性抽取实战项目合集（含智能标注）【上篇】

深度学习应用篇-自然语言处理-命名实体识别[9]：BiLSTM+CRF实现命名实体识别、实体、关系、属性抽取实战项目合集（含智能标注）【上篇】

【深度学习入门到进阶】必看系列&#xff0c;含激活函数、优化策略、损失函数、模型调优、归一化算法、卷积模型、序列模型、预训练模型、对抗神经网络等 专栏详细介绍&#xff1a;【深度学习入门到进阶】必看系列&#xff0c;含激活函数、优化策略、损失函数、模型调优、归一化…
阅读更多...
GPT问题记录

GPT问题记录

如何遍历切片 1.for循环 package mainimport "fmt"func main(){s : []int{1,2,3,4}for i : 0; i < len(s); i{fmt.Printf("s[%d]%d\n",i,s[i])} } 运行结果 2.range 关键字 package mainimport "fmt"func main() {s : []int{1,2,3,4,5}for in…
阅读更多...
苹果公布Apple Vision Pro头显的六种交互手势

苹果公布Apple Vision Pro头显的六种交互手势

苹果 Vision Pro 头显的交互&#xff0c;并不依赖物理控制器&#xff0c;而是通过追踪眼球和手势来交互虚拟物体。苹果设计师在近日的开发者会议中&#xff0c;概述了 Vision Pro 头显可以使用的交互手势。 Tap&#xff1a; 同时点击拇指和食指会向头戴显示设备发出信号&…
阅读更多...
【.net core】图片压缩

【.net core】图片压缩

使用SkiaSharp组件实现功能&#xff0c;组件下载在nuget中安装最新版本至项目 功能实现类&#xff1a; using SkiaSharp; using System; using System.Collections.Generic; using System.IO; using System.Text;namespace YiSha.Util {public static class ImageCompression{…
阅读更多...
瑞吉外卖功能完善

瑞吉外卖功能完善

文章目录 获取源码1、后台管理——菜品起售停售前端请求数据分析编写方法 2、后台管理——菜品删除前端请求数据分析编写方法 3、后台管理——修改套餐前端请求分析方法一&#xff1a;完成点击修改时数据的回显方法二&#xff1a;修改套餐 4、后台管理——启停售套餐前端请求分…
阅读更多...
全国PMO专业人士年度盛会︱2023第十二届PMO大会将于8月在京召开

全国PMO专业人士年度盛会︱2023第十二届PMO大会将于8月在京召开

企业要基业长青就必须持续保持组织活力。企业的内外部环境不会一成不变&#xff0c;顺应变化及时调整变革避免组织出现僵化低效才能在激烈的市场竞争中存活下来。PMO从成立到逐渐发挥越来越强的作用本身即是一种组织变革的过程&#xff0c;从这个意义上来说PMO因组织变革而生&a…
阅读更多...
epson L350打印机拆解

epson L350打印机拆解

卡扣固定 搓纸轮 送纸器
阅读更多...
数据库的基本知识---入门前必读

数据库的基本知识---入门前必读

目录 一.认识数据库 二.数据库的分类 三.SQL介绍 3.1SQL是什么 3.2.SQL语言使用方式 总结 &#x1f63d;个人主页&#xff1a;tq02的博客_CSDN博客-C语言,Java,Java数据结构领域博主 &#x1f308;梦的目标&#xff1a;努力学习&#xff0c;打败数据库&#xff0c;拼搏一…
阅读更多...
echarts 按需引入解决打包体积过大问题

echarts 按需引入解决打包体积过大问题

问题&#xff1a;由于服务器网速特别慢大概100kb打包文件过大导致第一次加载静态文件时特别慢&#xff0c;优化echarts 原先引入的方式和使用&#xff08;导致体积过大&#xff09;&#xff1a; // 引入 echarts 核心模块&#xff0c;核心模块提供了 echarts 使用必须要的接口…
阅读更多...
10. Java对象内存布局和对象头

10. Java对象内存布局和对象头

10.1 面试题 ● 说下JUC&#xff0c;AQS的大致流程 ● CAS自旋锁&#xff0c;是获取不到锁就一直自旋吗&#xff1f;CAS和synchronized区别在哪里&#xff0c;为什么CAS好&#xff0c;具体优势在哪里&#xff1f; ● sychronized底层是如何实现的&#xff0c;实现同步的时候用到…
阅读更多...
idea导入java web项目带jar

idea导入java web项目带jar

可参考&#xff1a;idea导入Javaweb项目_小黑cc的博客-CSDN博客 配置tomcat 加载项目jar依赖 最后点ok&#xff0c;tomcat启动 jsp页面的项目&#xff0c;必须要加载这两个jar包
阅读更多...
windows 服务程序和桌面程序集成（二）服务程序

windows 服务程序和桌面程序集成（二）服务程序

系列文章目录链接&#xff1a; windows 服务程序和桌面程序集成&#xff08;一&#xff09;概念介绍windows 服务程序和桌面程序集成&#xff08;二&#xff09;服务程序windows 服务程序和桌面程序集成&#xff08;三&#xff09;UDP监控工具windows 服务程序和桌面程序集成&…
阅读更多...
OpenLayers.js 入门教程：打造互动地图的入门指南

OpenLayers.js 入门教程：打造互动地图的入门指南

theme: smartblue 本文简介 戴尬猴&#xff0c;我是德育处主任 本文介绍如何使用 OpenLayers.js (后面简称 ol)。ol 是一个开源 JavaScript 库&#xff0c;可用于在Web页面上创建交互式地图。 ol能帮助我们在浏览器轻松地使用地图功能&#xff0c;例如地图缩放、地图拖动、地图…
阅读更多...
双碳目标下DNDC模型建模方法及在土壤碳储量、温室气体排放、农田减排、土地变化、气候变化中的应用

双碳目标下DNDC模型建模方法及在土壤碳储量、温室气体排放、农田减排、土地变化、气候变化中的应用

由于全球变暖、大气中温室气体浓度逐年增加等问题的出现&#xff0c;“双碳”行动特别是碳中和已经在世界范围形成广泛影响。国家领导人在多次重要会议上讲到&#xff0c;要把“双碳”纳入经济社会发展和生态文明建设整体布局。同时&#xff0c;提到要把减污降碳协同增效作为促…
阅读更多...
数字电子电路绪论

数字电子电路绪论

博主介绍&#xff1a;一个爱打游戏的计算机专业学生 博主主页&#xff1a;夏驰和徐策 所属专栏&#xff1a;程序猿之数字电路 1.科技革命促生互联网时代 科技革命对互联网时代的兴起产生了巨大的推动作用。以下是一些科技革命对互联网时代的促进因素&#xff1a; 1. 计算机技…
阅读更多...
赢涛智慧工单 v2.4.3 公众号模块版

赢涛智慧工单 v2.4.3 公众号模块版

适用于&#xff1a;入驻加盟、运价查询、申请返礼、工单售后、商标注册、执照申请、汽车保养、年审代办、材料申请、流程审批、贷款申请、废品回收、投诉建议、业务登记、在线督导、购房申请、设备维修、门店报修、信息申请、材料提交、合作咨询、党群服务、入党申请、补贴申领…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023