|
@@ -1,25 +1,30 @@
|
|
|
<template>
|
|
|
- <a-select
|
|
|
- show-search
|
|
|
- label-in-value
|
|
|
- :size="size"
|
|
|
- :value="dealerName"
|
|
|
- placeholder="请输入客户名称搜索"
|
|
|
- style="width: 100%"
|
|
|
- :filter-option="false"
|
|
|
- :not-found-content="fetching ? undefined : null"
|
|
|
- :dropdownMatchSelectWidth="false"
|
|
|
- @blur="blurSelect"
|
|
|
- @search="fetchUser"
|
|
|
- @change="handleChange"
|
|
|
- allowClear
|
|
|
- >
|
|
|
- <a-spin v-if="fetching" slot="notFoundContent" size="small" />
|
|
|
- <a-select-option v-for="item in data" :key="item.customerSn" :value="item.customerSn" :disabled="isValidateEnabled ? item.enabledFlag=='0' : false">
|
|
|
- {{ item.customerName }}
|
|
|
- <span v-if="isValidateEnabled && item.enabledFlag=='0'">(已禁用)</span>
|
|
|
- </a-select-option>
|
|
|
- </a-select>
|
|
|
+ <div style="position: relative;z-index: 1000;">
|
|
|
+ <a-input ref="inputs" v-if="showInput" v-model="queryWord" allowClear/>
|
|
|
+ <a-select
|
|
|
+ v-else
|
|
|
+ show-search
|
|
|
+ :show-arrow="false"
|
|
|
+ label-in-value
|
|
|
+ :size="size"
|
|
|
+ :value="dealerName"
|
|
|
+ placeholder="请输入客户名称搜索"
|
|
|
+ style="width: 100%"
|
|
|
+ :filter-option="false"
|
|
|
+ :not-found-content="fetching ? undefined : null"
|
|
|
+ :dropdownMatchSelectWidth="false"
|
|
|
+ @blur="blurSelect"
|
|
|
+ @search="fetchUser"
|
|
|
+ @change="handleChange"
|
|
|
+ allowClear
|
|
|
+ >
|
|
|
+ <a-spin v-if="fetching" slot="notFoundContent" size="small" />
|
|
|
+ <a-select-option v-for="item in data" :key="item.customerSn" :value="item.customerSn" :disabled="isValidateEnabled ? item.enabledFlag=='0' : false">
|
|
|
+ {{ item.customerName }}
|
|
|
+ <span v-if="isValidateEnabled && item.enabledFlag=='0'">(已禁用)</span>
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import debounce from 'lodash/debounce'
|
|
@@ -49,13 +54,24 @@ export default {
|
|
|
return {
|
|
|
data: [],
|
|
|
dealerName: undefined,
|
|
|
- fetching: false
|
|
|
+ fetching: false,
|
|
|
+ queryWord: '',
|
|
|
+ showInput: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ queryWord (newValue, oldValue) {
|
|
|
+ this.inputChange()
|
|
|
+ if (newValue.length == 0) {
|
|
|
+ this.showInput = false
|
|
|
+ this.setData(undefined)
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- fetchUser (dealerName) {
|
|
|
- console.log('fetching user', dealerName)
|
|
|
- if (dealerName == '') return
|
|
|
+ fetchUser (value) {
|
|
|
+ console.log('fetching user', value)
|
|
|
+ if (value == '') return
|
|
|
this.lastFetchId += 1
|
|
|
const fetchId = this.lastFetchId
|
|
|
this.data = []
|
|
@@ -64,7 +80,8 @@ export default {
|
|
|
if (this.itemSn) {
|
|
|
params.customerSn = this.itemSn
|
|
|
} else {
|
|
|
- params.queryWord = dealerName
|
|
|
+ params.queryWord = value
|
|
|
+ this.queryWord = value
|
|
|
}
|
|
|
if (this.isEnabled) {
|
|
|
params.enabledFlag = 1
|
|
@@ -75,8 +92,20 @@ export default {
|
|
|
}
|
|
|
this.data = res.data && res.data.list ? res.data.list : []
|
|
|
this.fetching = false
|
|
|
+ // 显示输入框
|
|
|
+ this.showInput = this.data.length == 0
|
|
|
+ this.inputChange()
|
|
|
})
|
|
|
},
|
|
|
+ inputChange () {
|
|
|
+ if (this.showInput) {
|
|
|
+ this.$emit('changeInput', this.queryWord)
|
|
|
+ this.$emit('change', { key: undefined })
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.inputs && this.$refs.inputs.focus()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
handleChange (value) {
|
|
|
if (value && value.key) {
|
|
|
const ind = this.data.findIndex(item => item.customerSn == value.key)
|
|
@@ -84,10 +113,10 @@ export default {
|
|
|
}
|
|
|
Object.assign(this, {
|
|
|
dealerName: value,
|
|
|
- data: [],
|
|
|
fetching: false
|
|
|
})
|
|
|
this.$emit('change', value || { key: undefined })
|
|
|
+ this.$emit('changeInput', undefined)
|
|
|
},
|
|
|
resetForm () {
|
|
|
this.dealerName = undefined
|