You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
221 lines
4.9 KiB
221 lines
4.9 KiB
9 months ago
|
<template>
|
||
|
<view class="search-popup-v">
|
||
|
<u-popup v-model="show" width="100%" height="100vh" :mask="false" @close="close">
|
||
|
<view class="search-popup-b">
|
||
|
<view class="search-popup-h">
|
||
|
<view class="search-popup-h-txt">
|
||
|
<u-icon name="close" @click="show=false" class="search-popup-h-icon"></u-icon>
|
||
|
</view>
|
||
|
<u-input type="text" v-model="value" placeholder="请输入" @input="onInput" @focus='onFocus'
|
||
|
:clearable="clearable">
|
||
|
</u-input>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="search-popup-item" v-if="showList.length>0">
|
||
|
<view v-for="(item, index) in showList" :key="index" @tap="selectThisItem(item)"
|
||
|
class="u-p-l-20 u-p-r-20">
|
||
|
{{item[relationField]}}
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="search-notData" v-if="showList.length<1">
|
||
|
<view class="notData-box u-flex-col">
|
||
|
<view class="u-flex-col notData-inner">
|
||
|
<image :src="icon" mode="" class="iconImg"></image>
|
||
|
<text class="notData-inner-text">暂无数据</text>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</u-popup>
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import resources from '@/libs/resources.js'
|
||
|
import {
|
||
|
getPopSelect
|
||
|
} from '@/api/common.js'
|
||
|
export default {
|
||
|
props: {
|
||
|
interfaceId: {
|
||
|
type: String,
|
||
|
default: ''
|
||
|
},
|
||
|
clearable: {
|
||
|
type: Boolean,
|
||
|
default: true
|
||
|
},
|
||
|
relationField: {
|
||
|
type: String,
|
||
|
default: 'fullName'
|
||
|
},
|
||
|
total: {
|
||
|
type: [String, Number],
|
||
|
default: 50
|
||
|
},
|
||
|
formData: {
|
||
|
type: Object
|
||
|
},
|
||
|
templateJson: {
|
||
|
type: Array,
|
||
|
default: () => []
|
||
|
},
|
||
|
rowIndex: {
|
||
|
default: null
|
||
|
},
|
||
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
istQuery: {
|
||
|
keyword: '',
|
||
|
pageSize: 1000
|
||
|
},
|
||
|
icon: resources.message.nodata,
|
||
|
show: false,
|
||
|
value: '',
|
||
|
showList: []
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
init(val) {
|
||
|
this.value = val
|
||
|
this.show = true
|
||
|
this.getDataInterfaceList()
|
||
|
},
|
||
|
getDataInterfaceList() {
|
||
|
this.showList = []
|
||
|
const paramList = this.getParamList()
|
||
|
|
||
|
let query = {
|
||
|
interfaceId: this.interfaceId,
|
||
|
relationField: this.relationField,
|
||
|
pageSize: 10000,
|
||
|
paramList
|
||
|
}
|
||
|
getPopSelect(this.interfaceId, query).then(res => {
|
||
|
let list = JSON.parse(JSON.stringify(res.data.list)) || []
|
||
|
if (list.length) list = this.unique(list, this.relationField)
|
||
|
this.showList = list.splice(0, this.total)
|
||
|
})
|
||
|
},
|
||
|
unique(arr, attrName) {
|
||
|
const res = new Map();
|
||
|
// 根据对象的某个属性值去重
|
||
|
return arr.filter(o => !res.has(o[attrName]) && res.set(o[attrName], 1));
|
||
|
},
|
||
|
getParamList() {
|
||
|
let templateJson = this.templateJson
|
||
|
for (let i = 0; i < templateJson.length; i++) {
|
||
|
if (templateJson[i].relationField && this.formData) {
|
||
|
if (templateJson[i].relationField.includes('-')) {
|
||
|
let tableVModel = templateJson[i].relationField.split('-')[0]
|
||
|
let childVModel = templateJson[i].relationField.split('-')[1]
|
||
|
templateJson[i].defaultValue = this.formData[tableVModel] && this.formData[tableVModel][this
|
||
|
.rowIndex
|
||
|
] && this.formData[tableVModel][this.rowIndex][childVModel] || ''
|
||
|
} else {
|
||
|
templateJson[i].defaultValue = this.formData[templateJson[i].relationField] || ''
|
||
|
}
|
||
|
}
|
||
|
if (templateJson[i].relationField == '@keyword') templateJson[i].defaultValue = this.value
|
||
|
}
|
||
|
return templateJson
|
||
|
},
|
||
|
onFocus(e) {
|
||
|
this.getDataInterfaceList()
|
||
|
},
|
||
|
onInput(e) {
|
||
|
this.value = e
|
||
|
this.$emit('confirm', this.value);
|
||
|
e && clearTimeout(e);
|
||
|
e = setTimeout(() => {
|
||
|
this.list = [];
|
||
|
this.getDataInterfaceList()
|
||
|
}, 300);
|
||
|
},
|
||
|
close() {
|
||
|
if (!this.value) {
|
||
|
this.$emit('confirm', '');
|
||
|
}
|
||
|
},
|
||
|
selectThisItem(item) {
|
||
|
this.value = item[this.relationField];
|
||
|
this.$emit('confirm', this.value, item);
|
||
|
this.show = false
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss">
|
||
|
.search-popup-v {
|
||
|
.search-popup-b {
|
||
|
height: 158rpx;
|
||
|
|
||
|
.search-popup-h {
|
||
|
padding: 0 20rpx;
|
||
|
border-bottom: 1rpx solid #cbcbcb;
|
||
|
position: fixed;
|
||
|
width: 100%;
|
||
|
background-color: #fff;
|
||
|
z-index: 9;
|
||
|
text-align: center;
|
||
|
|
||
|
.search-popup-h-txt {
|
||
|
height: 86rpx;
|
||
|
width: 100%;
|
||
|
padding: 15rpx 0;
|
||
|
text-align: center;
|
||
|
line-height: 54rpx;
|
||
|
box-sizing: border-box;
|
||
|
font-size: 32rpx;
|
||
|
font-weight: 700;
|
||
|
letter-spacing: 2rpx;
|
||
|
|
||
|
.search-popup-h-icon {
|
||
|
float: right;
|
||
|
margin-top: 12rpx;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
.search-popup-item {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
z-index: 9997;
|
||
|
}
|
||
|
|
||
|
.search-notData {
|
||
|
width: 100%;
|
||
|
height: calc(100% - 160rpx);
|
||
|
background-color: #fff;
|
||
|
|
||
|
.notData-box {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
|
||
|
.notData-inner {
|
||
|
width: 280rpx;
|
||
|
height: 340rpx;
|
||
|
align-items: center;
|
||
|
|
||
|
.iconImg {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
.notData-inner-text {
|
||
|
padding: 30rpx 0;
|
||
|
color: #909399;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
}
|
||
|
</style>
|