mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-11 01:36:43 +08:00
工作单位设置为必填
This commit is contained in:
159
src/components/common/SearchField.vue
Normal file
159
src/components/common/SearchField.vue
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<div class="search_box" ref="search_box">
|
||||||
|
<van-field :label="label" required>
|
||||||
|
<template #input>
|
||||||
|
<input
|
||||||
|
style="width: 100%; border: none;"
|
||||||
|
type="text"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:value="searchContent"
|
||||||
|
@click="onInputFocus"
|
||||||
|
@blur="onInputBlur"
|
||||||
|
@input="onInput"
|
||||||
|
/>
|
||||||
|
<transition name="slide-in">
|
||||||
|
<div ref="picker" class="content_info" v-show="showCustomer">
|
||||||
|
<div class="border_item" v-for="(item, index) in computedCustomerList" :value="item.label" :key="index" @click="chooseCustomer(item)">
|
||||||
|
{{ item.label }}
|
||||||
|
</div>
|
||||||
|
<div class="border_item" v-show="computedCustomerList == 0">
|
||||||
|
无结果
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
</van-field>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Field } from 'vant'
|
||||||
|
import { getTreasureMenus } from '@/api/ebiz/goodStart'
|
||||||
|
export default {
|
||||||
|
name: 'SearchField',
|
||||||
|
props: {
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: '标题'
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: '请输入内容'
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
[Field.name]: Field
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showCustomer: false,
|
||||||
|
customerList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
computedCustomerList() {
|
||||||
|
let searchStr = this.value.trim()
|
||||||
|
return this.customerList.filter(item => {
|
||||||
|
return item.label.includes(searchStr)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
searchContent() {
|
||||||
|
return this.value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async created() {
|
||||||
|
const param = { operateType: 'insure_company' }
|
||||||
|
const result = await getTreasureMenus(param)
|
||||||
|
if (result.result === '0') {
|
||||||
|
this.customerList = result.content
|
||||||
|
} else {
|
||||||
|
this.$toast(result.resultMessage)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onInput(event) {
|
||||||
|
this.$emit('input', event.target.value)
|
||||||
|
},
|
||||||
|
onInputBlur() {
|
||||||
|
this.showCustomer = false
|
||||||
|
this.$emit('input', this.value)
|
||||||
|
},
|
||||||
|
onInputFocus() {
|
||||||
|
this.showCustomer = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$refs.picker.scrollIntoView()
|
||||||
|
}, 300)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.picker.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'smooth'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
chooseCustomer(item) {
|
||||||
|
this.$emit('input', item.label)
|
||||||
|
this.showCustomer = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.border_item {
|
||||||
|
box-sizing: content-box;
|
||||||
|
padding: 5px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #666;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content_info::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_box {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.content_info {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
background: white;
|
||||||
|
border-radius: 0 0 6px 6px;
|
||||||
|
top: 34px;
|
||||||
|
max-height: 150px;
|
||||||
|
overflow: scroll;
|
||||||
|
box-shadow: 0 1px 1px 1px #eee;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .van-cell {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .van-cell__value {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-in-enter,
|
||||||
|
.slide-in-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-in-leave,
|
||||||
|
.slide-in-enter-to {
|
||||||
|
opacity: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-in-enter-active,
|
||||||
|
.slide-in-leave-active {
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -260,7 +260,7 @@
|
|||||||
right-icon="arrow"
|
right-icon="arrow"
|
||||||
@click="toSelect('7')"
|
@click="toSelect('7')"
|
||||||
/> -->
|
/> -->
|
||||||
<van-field
|
<!-- <van-field
|
||||||
v-if="specilFlag != '1'"
|
v-if="specilFlag != '1'"
|
||||||
v-model="userInfo.workcompany"
|
v-model="userInfo.workcompany"
|
||||||
label="工作单位"
|
label="工作单位"
|
||||||
@@ -280,7 +280,8 @@
|
|||||||
placeholder="请选择"
|
placeholder="请选择"
|
||||||
v-validate="'required'"
|
v-validate="'required'"
|
||||||
@click="toSelect('9')"
|
@click="toSelect('9')"
|
||||||
/>
|
/> -->
|
||||||
|
<SearchField v-model="userInfo.workcompany" label="工作单位" placeholder="无工作单位,请输入无" v-validate="'required'" name="工作单位" />
|
||||||
<!-- <van-field
|
<!-- <van-field
|
||||||
v-model="areaName"
|
v-model="areaName"
|
||||||
readonly
|
readonly
|
||||||
|
|||||||
@@ -297,7 +297,7 @@
|
|||||||
right-icon="arrow"
|
right-icon="arrow"
|
||||||
@click="toSelect('8')"
|
@click="toSelect('8')"
|
||||||
/> -->
|
/> -->
|
||||||
<van-field
|
<!-- <van-field
|
||||||
v-model="userInfo.workcompany"
|
v-model="userInfo.workcompany"
|
||||||
label="工作单位"
|
label="工作单位"
|
||||||
name="工作单位"
|
name="工作单位"
|
||||||
@@ -305,7 +305,8 @@
|
|||||||
maxlength="50"
|
maxlength="50"
|
||||||
clearable
|
clearable
|
||||||
:readonly="isAppnt"
|
:readonly="isAppnt"
|
||||||
/>
|
/> -->
|
||||||
|
<SearchField v-model="userInfo.workcompany" label="工作单位" placeholder="无工作单位,请输入无" v-validate="'required'" name="工作单位" />
|
||||||
<!-- <van-field
|
<!-- <van-field
|
||||||
v-model="areaName"
|
v-model="areaName"
|
||||||
readonly
|
readonly
|
||||||
|
|||||||
Reference in New Issue
Block a user