因为选项值过多,需要动态查询,现有组件无法实现,将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>