uniapp 扩展picker-view实现条件查询

server/2024/12/2 21:59:04/

因为选项值过多,需要动态查询,现有组件无法实现,将picker-view扩展了一下,支持条件查询,接口调用。
实现效果
在这里插入图片描述
注意:直接使用,样式可能不准,根据自己的实际情况进行样式调整

参数说明
params: 数据接口参数,必填
{url:  接口地址,method: 请求方式,默认'get',data: 接口参数,search: 额外的参数
},
options: 显示数据集 
{value: 实际值字段,name: 显示值字段
},
placeholder: 查询条件提示文字 默认“请输入查询条件”
maxSize: 显示选项数量最大值,默认 100事件说明
@handlerChange: 确认时间,返回完整选项行数据
@close:关闭组件
  • 完整代码 SearchPickerView.vue
<template><view><view class="header"><view class="header-input"><view class="header-icon"><uni-icons type="search" color="rgb(192, 196, 204)" size="18" /></view><input class="" type="text" :focus="true" v-model="searchValue" :placeholder="placeholder" /></view><text class="header-btn-text" @click="search">搜索</text></view><view class="content"><view class="popup-btn"><text class="popup-btn-text cancel-btn" @click="cancel">取消</text><text class="popup-btn-text confirm-btn" @click="confirm">确认</text></view><picker-view v-if="visible" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view"><picker-view-column><view class="item" v-for="(item,index) in pickerData" :key="index">{{item.name}}</view></picker-view-column></picker-view></view></view>
</template><script>javascript">import HSoftConf from '@/libs/config.js'import util from '@/libs/util.js'export default {props: {params:{type: Object,required: true,default: () => ({url: '',method: 'get',data:{},search: 'code'})},options: {type: Object,default: ()=>({value: 'value',name: 'name'})},placeholder: {type: String,default: '请输入查询条件'},maxSize: {type: Number,default: 100}},name:"SearchPickerView",data() {return {searchValue:'',pickerData:[],visible: true,indicatorStyle: `height: 50px;`,resValue: '',resultData: []};},methods: {search(){this.pickerData = []this.resultData = []console.log(this.searchValue,"searchValue")if(this.searchValue){if('post' == this.params.method){this.params.data[this.params.search] = this.searchValueutil.post(this.params.url,this.params.data).then(res => {console.log(res);if ("200" == res.data.code) {let row = res.data.data;this.setPickerData(row)} else {uni.showToast({title: '查询失败,'+res.data.msg,icon: 'none'});}}).catch(err => {console.log(err,err.errMsg)uni.showToast({title: '查询异常,'+err.errMsg,icon: 'none'});})}else{util.get(this.params.url+this.searchValue).then(res => {console.log(res);if(200 == res.data.code){let row = res.data.data;this.setPickerData(row)}else{uni.showToast({title: '查询失败,'+res.data.msg,icon: 'none'});}}).catch(err => {uni.showToast({title: '查询异常,'+err.errMsg,icon: 'none'});})}}else{uni.showToast({title: '查询条件为空',icon: 'none'});}},bindChange(e){console.log(e)this.resValue = e.detail.value},cancel(){this.$emit("close");},confirm(){console.log(this.resValue)if(this.resValue > 0){this.$emit("handlerChange",this.resultData[this.resValue-1]);}else{this.$emit("handlerChange");}this.$emit("close");},setPickerData(row){if(row && row.length>0){if(row.length > this.maxSize){uni.showToast({title: '查询结果数量'+row.length+',只显示前'+this.maxSize+'条',icon: 'none'});}this.pickerData.push({value:'',name:'请选择'})this.resultData = rowfor(let item in row){if(item >= 100){break;}let data = row[item]this.pickerData.push({value:data[this.options.value],name:data[this.options.name]})console.log(this.pickerData)}}else{uni.showToast({title: '查询数据为空',icon: 'none'});}}}}
</script><style scoped>.header{display: flex;padding: 10px;align-items: center;flex-direction: row;}.header-btn-text{padding-left: 10px;line-height: 36px;font-size: 14px;color: #333;cursor: pointer;}input{font-size: 14px;}.picker-view {width: 750rpx;height: 600rpx;margin-top: 20rpx;}.item {line-height: 100rpx;text-align: center;display: block;}.header-icon{padding: 0 8px;}.header-input{flex: 1;line-height: 36px;height: 36px;border-radius: 5px;background-color: rgb(248, 248, 248);display: flex;flex-direction: row;align-items: center;justify-content: left;}.popup-btn{display: flex;align-items: center;justify-content: space-between;flex-direction: row;padding: 10px;}.content{display: flex;flex-direction: column;border-top: 1px solid #e5e5e5;;}.confirm-btn{color: #007aff;}.cancel-btn{color: #888;}
</style>
  • 组件使用
<template>
<uni-popup ref="popupSearch" background-color="#fff"><view class="popup-content"><SearchPickerView @close="closeSearchPopup" @handlerChange="handerChangeMateriel" :params="searchMaterielParams" :options="materielOptions" :maxSize="10"></SearchPickerView></view>
</uni-popup>
</template>
<script>javascript">
// 引入组件
import SearchPickerView from '../../../components/SearchPickerView.vue
export default {components: {SearchPickerView},data() {return {searchMaterielParams: {url: "接口地址",method: 'post',search: 'name'},materielOptions: {value: 'id',name: 'name'}}},method:{openSearchPopup(){this.$refs.popupSearch.open('bottom');},closeSearchPopup(){console.log("closeSearchPopup")this.$refs.popupSearch.close()},handerChangeMateriel(value){console.log(value,"handerChangeMateriel")}}
</script>

http://www.ppmy.cn/server/146848.html

相关文章

ELK超详细操作文档

ELK简介 ELK平台是一套完整的日志集中处理解决方案&#xff0c;将 ElasticSearch、Logstash 和 Kiabana 三个开源工具配合使用&#xff0c; 完成更强大的用户对日志的查询、排序、统计需求。 ElasticSearch ElasticSearch&#xff1a;是基于Lucene&#xff08;一个全文检索引…

Oracle 11gR2 Data Guard 搭建 (一主一从)

一、环境规划 项目主库 Primary备库 Standby操作系统CentOS Linux 7.9.2009CentOS Linux 7.9.2009数据库版本11.2.0.411.2.0.4IP地址192.168.10.101192.168.10.102db_nameorclorclinstance_nameorclorcldb_unique_nameorcl_priorcl_sbytnsnameorcl_priorcl_sbyservice_names(服…

neo4j如何存储关于liquidity structure的层次和关联结构

在 Neo4j 中存储关于流动性结构&#xff08;liquidity structure&#xff09;的层次和关联结构非常适合&#xff0c;因为 Neo4j 是一个基于图的数据库&#xff0c;能够自然地建模和存储复杂的关系和层次结构。下面是如何在 Neo4j 中设计和实现这样的数据模型的详细步骤和示例。…

[CTF/网络安全] 攻防世界 upload1 解题详析

[CTF/网络安全] 攻防世界 upload1 解题详析 考察文件上传&#xff0c;具体原理及姿势不再赘述。 姿势 在txt中写入一句话木马<?php eval($_POST[qiu]);?> 回显如下&#xff1a; 查看源代码&#xff1a; Array.prototype.contains function (obj) { var i this.…

【从零开始的LeetCode-算法】263. 丑数

丑数 就是只包含质因数 2、3 和 5 的 正 整数。 给你一个整数 n &#xff0c;请你判断 n 是否为 丑数 。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;n 6 输出&#xff1a;true 解释&#xff1a;6 2 3 示…

Javascript 图片懒加载

摘要 最近公司和第三方材料供应商对接开发了物资集采平台&#xff0c;其中有个功能需求需要展示数百张材料信息图片&#xff0c;有时页面会出现卡顿的情况&#xff0c;并使用了图片懒加载的方式进行了优化。下面把方法分享给大家一起学习。 未做优化实例 以下代码仅作为示例…

【西瓜书】决策树

决策树 决策树&#xff08;decision tree&#xff09;是一种常见的机器学习方法&#xff0c;也叫“判定树”。 根据上下文&#xff0c;决策树有时候是指学习方法&#xff0c;有时候是指学得的树。 决策树是根据树形结构来进行决策的&#xff0c;这与人类在面临决策问题时的处…

matlab2024a安装

1.开始安装 2.点击安装 3.选择安装密钥 4.接受条款 5.安装密钥 21471-07182-41807-00726-32378-34241-61866-60308-44209-03650-51035-48216-24734-36781-57695-35731-64525-44540-57877-31100-06573-50736-60034-42697-39512-63953 6 7.选择许可证文件 8.找许可证文件 9.选…