Uniapp中简单弹出层的使用

news2024/11/18 18:31:42

图示

在这里插入图片描述

思路

当派工单这个输入框获取到焦点后,弹出弹出层选择数据。

1、定义这个输入框

<view class="cu-form-group">
			<view class="title"><text class="text-red">*</text>派工单号: </view>
			<input type="text" v-model="DispatchTicketNumber" @focus="xuanzepgd" class="is-required"
				placeholder=" 请选择派工单号" />
			<uni-popup ref="popup">
                <div>
                 <ul>
                  <li v-for="(item,index) of DispatchTicketNumberList" :key="index"  @click="selectItem(item)">{{item.DocNo }}</li>
                 </ul>
                </div>
			 </uni-popup>
		</view>

2、当获取到焦点时,调用接口获取数据,这里参数我自己写死了

//派工单输入框获取焦点
			xuanzepgd() {
				console.log('输入框获取到了焦点')
				this.$refs['popup'].open(),
				//调用接口获取派工单号
			    uni.request({
			    	url: dtnApi,
			    	method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
			    	data: {
					      	context: {
					      		CultureName: "zh-CN",
					      		EntCode: "001",
					      		OrgCode: "MK",
					      		UserCode: "admin"
					      	},
						    inDTO: [
						    {
						      Work: '焊接',
						      Name: 'BP_11/2X6000MM_B80G23B01_HG',
						      Bm: '焊管一车间',
						      Mo: ''
						    }
						  ]
					    },			    	
					success: (res) => {
					          console.log("结果集");
					          console.log(res); //res是返回结果集
					          const DispatchTicketNumberList = res.data.d.map(item => ({
					            ...item,
					            selected: false, // 在这里添加一个 selected 属性,初始值为 false
					          }));
					          this.DispatchTicketNumberList = DispatchTicketNumberList;
					        },
					fail: (res) => {
						uni.showToast({
							title: res.errMsg,
							icon: 'none',
							duration: 2000,
						})
					},
			    })
			},

3、弹出框选择赋值给输入框

/弹出框赋值派工单号
			 selectItem(item) {
			      // 更新选中状态
			      this.DispatchTicketNumberList = this.DispatchTicketNumberList.map(i => {
			        i.selected = i.DocNo === item;
			        return i;
			      });
			      // 将所选值赋值给文本框
			      this.DispatchTicketNumber = item.DocNo;
				  console.log("所选值")
				  console.log(this.DispatchTicketNumber)
			      // 关闭弹窗
			      this.$refs['popup'].close();
			    },

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

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

相关文章

Mysql查询语句优化方法

查询优化 小表驱动大表 优化原则&#xff1a;对于MySQL数据库而言&#xff0c;永远都是小表驱动大表。 /** * 举个例子&#xff1a;可以使用嵌套的for循环来理解小表驱动大表。 * 以下两个循环结果都是一样的&#xff0c;但是对于MySQL来说不一样&#xff0c; * 第一种可以理解…

第1章-Java语言概述

Java基础知识图解 1. Java语言概述 1.1 Java简史 是SUN(Stanford University Network&#xff0c;斯坦福大学网络公司 ) 1995年推出的一门高级编程语言。是一种面向Internet的编程语言。 Java一开始富有吸引力是因为Java程序可以在Web浏览器中运行。 这些Java程序被称为Java小…

DepthAI API详解

目录 DepthAI的整体架构Device 对象通过标识连接到指定设备定义输入/输出队列Device对象的常用方法addLogCallback()方法close()方法getInputQueue()方法getOutputQueue()方法 PipelinePipeline常用的方法create()方法createColorCamera()方法createMonoCamera()方法createNeur…

泛微以低代码助力央企合规、案件管理数字化

近年来&#xff0c;国家出台一系列文件&#xff0c;不断强化央企国企合同、法务、合规、风控一体化管理&#xff0c;深化法治企业建设。 2022年&#xff0c;国资委印发《中央企业合规管理办法》&#xff0c;要求中央企业加强合规管理&#xff0c;切实防控风险&#xff0c;并指…

新手小白学JAVA_IDEA修改主题 设置背景图片

很多小白在刚刚使用IDEA的时候还不是很熟练 本文主要给大家提供一些使用的小技巧&#xff0c;希望能帮助到你 1.修改IDEA默认主题 IDEA的默认主题是黑色的&#xff0c;其实也可以选择其他的主题 我们一起来试一试吧~ 2.修改IDEA背景图片 IDEA的背景图片也是可以自定义的 我们…

arcgis波段提取--多波段合成

1、打开软件&#xff0c;导入彩色栅格影像&#xff0c;如下&#xff1a; 上图有RGB三个波段&#xff0c;在左侧图层下可以看到波段情况。 2、在菜单栏中选择"窗口"--"影像分析"&#xff0c;如下&#xff1a; 点击影像分析功能&#xff0c;打开如下界面&am…

移除flyway,手动进行数据库的迁移

国产数据库如达梦、金仓数据库&#xff0c;开源数据迁移工具貌似支持的很少&#xff0c;手写工具类进行数据库脚本的迁移&#xff0c;主要有2个类如下&#xff1a; /*** 模拟flyway进行sql迁移*/ Component Slf4j public class SqlInitialize implements InitializingBean, Ord…

Java【String字符串不可变】

字符串不可变&练习 字符串不可变1. 字符串设置为不可变的原因2. 如何修改字符串内容3 StringBuilder类的具体使用4. 面试题 字符串不可变 1. 字符串设置为不可变的原因 方便实现字符串常量池&#xff0c;若String对象可变&#xff0c;常量池中的内容就会随时变化&#xf…

Linux SVN提交日志校验

#!/bin/bash export LANG"en_US.UTF-8" #确保中文日志显示正常&#xff0c;便于统计日志 REPOS"$1" TXN"$2" #限制日志长度 LENGTH20 #exit 0SVNLOOK"/usr/bin/svnlook" BLACKLIST".* *.o *.chw *.pck ~\$*"function error_…

五、菜单管理

云尚办公系统&#xff1a;菜单管理 B站直达【为尚硅谷点赞】: https://www.bilibili.com/video/BV1Ya411S7aT 本博文以课程相关为主发布&#xff0c;并且融入了自己的一些看法以及对学习过程中遇见的问题给出相关的解决方法。一起学习一起进步&#xff01;&#xff01;&#x…

【Linux系统编程】Linux基本指令详解(二)

文章目录 前言1. cp 指令&#xff08;重要&#xff09;2. mv 指令&#xff08;重要&#xff09;3. cat 指令echo 命令输出重定向追加重定向wc 命令输入重定向 4. more 指令5. less指令&#xff08;重要&#xff09;6. head指令7. tail指令8. 命令行管道&#xff08;了解&#x…

《AVL树》

文章目录 一、AVL树的基本概念二、AVL树的结点定义三、AVL树的插入四、AVL树的旋转1. 右单旋2. 左单旋3. 右左双旋4. 左右双旋 五、AVL树的验证六、AVL树的性能七、源代码 一、AVL树的基本概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将…

Mysql+ETLCloud CDC+Doris实时数仓同步实战

业务需求及其痛点 很多大型企业需要对各种销售及营销数据进行实时同步分析&#xff0c;例如销售订单信息&#xff0c;库存信息&#xff0c;会员信息&#xff0c;设备状态信息等等&#xff0c;这些统计分析信息可以实时同步到Doris中进行分析和统计&#xff0c;Doris作为分析型…

《深入浅出SSD:固态存储核心技术、原理与实战》----学习记录(一)

前言 传统数据存储介质有磁带、光盘等&#xff0c;但更多的是硬盘(HDD)。随着数据呈爆炸式增长&#xff0c;对数据存储介质在速度上、容量上有更高的要求。时势造英雄&#xff0c;固态硬盘(Solid State Disk&#xff0c;SSD)横空出世。SSD使用电子芯片存储数据&#xff0c;没有…

数学建模算法(基于matlab和python)之 改进的欧拉方法与四阶L-K方法(4/10)

实验目的及要求&#xff1a; 1、熟悉各种初值问题的算法&#xff0c;编出算法程序&#xff1b; 2、明确各种算法的精度寓所选步长有密切关系&#xff1b; 3、熟悉在Matlab平台上直接求解常微分方程初值问题。 实验内容&#xff1a; 1、编写改进的欧拉公式通用子程序&#xff0…

禽流感病毒防治VR模拟实训教学效率高-深圳华锐视点

对于临床兽医学实训而言&#xff0c;学生在实验教学中依托传统的教学方式已经无法满足学生的学习效率&#xff0c;理论知识和实验教学无法完美结合。 随着互联网数字化的飞速发展&#xff0c;数字化虚拟仿真教学兴起&#xff0c;有效的提升了传统教学的质量&#xff0c;学生在实…

Blender骨骼绑定

演示视频参考连接:Blender骨骼绑定教程3&#xff1a;清除绑定 & Deform & 权重修改_哔哩哔哩_bilibili 对给定人体Mesh建立骨骼的操作步骤&#xff1a; 在Blender中打开人体Mesh模型&#xff0c;并确保该模型处于object模式。或者使用快捷键“Shift A”并选择“骨骼…

【FFmpeg实战】视频容器

原文地址&#xff1a;https://alphahinex.github.io/2020/03/12/video-container/ 视频容器 我们常见的视频格式有 avi 或 mp4 等&#xff0c;这些所谓的视频格式&#xff0c;实际上指的只是视频容器的格式。就像 zip 格式的压缩包里面可以放置任意类型的文件一样&#xff0c;…

【初识 Docker | 中级篇】 Docker 中部署 Spring Boot 微服务详解

文章目录 前言一、生成 Docker 镜像1.编写Dockerfile2.构建镜像 二、启动容器1.运行服务2.测试 三、jar包映射部署1.更新Dockerfile文件2.构建镜像3.创建&启动容器 总结 前言 本文将为您详细介绍如何在Docker容器中部署Spring Boot服务。 首先&#xff0c;您需要为您的Sp…

Argo CD 实践教程 07

在本章中&#xff0c;我们将探讨如何设置用户访问Argo CD的权限&#xff0c;以及从终端或CI/CD管道连接CLI的选项&#xff0c;以及如何执行基于角色的访问控制。我们将查看单点登录&#xff08;SSO&#xff09;选项&#xff0c;通常这是一个需要付费的功能&#xff0c;但由于Ar…