初始提交
This commit is contained in:
203
components/Jnpf/AutoComplete/SearchForm.vue
Normal file
203
components/Jnpf/AutoComplete/SearchForm.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="search-popup-v">
|
||||
<u-popup v-model="showPopup" width="100%" height="100vh" mode="right" :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="showPopup=false" class="search-popup-h-icon" />
|
||||
</view>
|
||||
<u-input type="text" v-model="value" placeholder="请输入" @input="onInput" :clearable="clearable" />
|
||||
</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>
|
||||
<JnpfEmpty v-if="showList.length<1"></JnpfEmpty>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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
|
||||
},
|
||||
showPopup: false,
|
||||
value: '',
|
||||
showList: [],
|
||||
timer: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(val) {
|
||||
this.showPopup = true
|
||||
this.value = val
|
||||
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 && templateJson[i].sourceType == 1) {
|
||||
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
|
||||
},
|
||||
onInput(e) {
|
||||
this.value = e
|
||||
this.$emit('confirm', this.value);
|
||||
this.timer && clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => {
|
||||
this.list = [];
|
||||
this.getDataInterfaceList()
|
||||
}, 300);
|
||||
},
|
||||
close() {
|
||||
this.showPopup = false
|
||||
},
|
||||
selectThisItem(item) {
|
||||
this.value = item[this.relationField];
|
||||
this.$emit('confirm', this.value);
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
139
components/Jnpf/AutoComplete/index.vue
Normal file
139
components/Jnpf/AutoComplete/index.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<view class="jnpf-auto-complete">
|
||||
<selectBox v-model="innerValue" :disabled='disabled' :placeholder="placeholder" @openSelect="showSearch"
|
||||
>
|
||||
</selectBox>
|
||||
<SearchForm ref="searchForm" :interfaceId="interfaceId" :relationField="relationField"
|
||||
:templateJson="templateJson" @confirm="confirm" :total="total || 50" :formData="formData"
|
||||
:clearable="clearable" :rowIndex="rowIndex" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import SearchForm from './SearchForm';
|
||||
import selectBox from '@/components/selectBox'
|
||||
export default {
|
||||
name: 'jnpf-auto-complete',
|
||||
components: {
|
||||
SearchForm,
|
||||
selectBox
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
default: ''
|
||||
},
|
||||
formData: {
|
||||
type: Object
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入'
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
templateJson: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
interfaceId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
relationField: {
|
||||
type: String,
|
||||
default: 'fullName'
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
rowIndex: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
innerValue: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue: {
|
||||
handler(val) {
|
||||
this.innerValue = val || ''
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showSearch() {
|
||||
if (this.disabled) return
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchForm.init(this.innerValue)
|
||||
})
|
||||
},
|
||||
confirm(e) {
|
||||
this.innerValue = e
|
||||
this.$emit('update:modelValue', e);
|
||||
this.$emit('change', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.jnpf-auto-complete {
|
||||
width: 100%;
|
||||
|
||||
.str-auto-complete-container {
|
||||
width: 549rpx;
|
||||
height: 360px;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0rpx 0rpx 12rpx #dfe3e9;
|
||||
position: absolute;
|
||||
z-index: 9997;
|
||||
background: #fff;
|
||||
top: 94rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow-y: scroll;
|
||||
|
||||
.str-auto-complete-mask {
|
||||
width: 100%;
|
||||
height: calc(100% - 90rpx);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.str-auto-complete-item {
|
||||
position: relative;
|
||||
padding: 10rpx;
|
||||
z-index: 9999
|
||||
}
|
||||
}
|
||||
|
||||
.auto-complete-b {
|
||||
width: 549rpx;
|
||||
height: 360px;
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
border: 1px solid red;
|
||||
top: 94rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user