|
@@ -1,30 +1,26 @@
|
|
<template>
|
|
<template>
|
|
- <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>
|
|
|
|
|
|
+ <a-select
|
|
|
|
+ show-search
|
|
|
|
+ label-in-value
|
|
|
|
+ :size="size"
|
|
|
|
+ :value="dealerName"
|
|
|
|
+ mode="combobox"
|
|
|
|
+ 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.customerName" :disabled="isValidateEnabled ? item.enabledFlag=='0' : false">
|
|
|
|
+ {{ item.customerName }}
|
|
|
|
+ <span v-if="isValidateEnabled && item.enabledFlag=='0'">(已禁用)</span>
|
|
|
|
+ </a-select-option>
|
|
|
|
+ </a-select>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
import debounce from 'lodash/debounce'
|
|
import debounce from 'lodash/debounce'
|
|
@@ -54,24 +50,13 @@ export default {
|
|
return {
|
|
return {
|
|
data: [],
|
|
data: [],
|
|
dealerName: undefined,
|
|
dealerName: undefined,
|
|
- fetching: false,
|
|
|
|
- queryWord: '',
|
|
|
|
- showInput: false
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- watch: {
|
|
|
|
- queryWord (newValue, oldValue) {
|
|
|
|
- this.inputChange()
|
|
|
|
- if (newValue.length == 0) {
|
|
|
|
- this.showInput = false
|
|
|
|
- this.setData(undefined)
|
|
|
|
- }
|
|
|
|
|
|
+ fetching: false
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- fetchUser (value) {
|
|
|
|
- console.log('fetching user', value)
|
|
|
|
- if (value == '') return
|
|
|
|
|
|
+ fetchUser (dealerName) {
|
|
|
|
+ console.log('fetching user', dealerName)
|
|
|
|
+ if (dealerName == '') return
|
|
this.lastFetchId += 1
|
|
this.lastFetchId += 1
|
|
const fetchId = this.lastFetchId
|
|
const fetchId = this.lastFetchId
|
|
this.data = []
|
|
this.data = []
|
|
@@ -80,8 +65,7 @@ export default {
|
|
if (this.itemSn) {
|
|
if (this.itemSn) {
|
|
params.customerSn = this.itemSn
|
|
params.customerSn = this.itemSn
|
|
} else {
|
|
} else {
|
|
- params.queryWord = value
|
|
|
|
- this.queryWord = value
|
|
|
|
|
|
+ params.queryWord = dealerName
|
|
}
|
|
}
|
|
if (this.isEnabled) {
|
|
if (this.isEnabled) {
|
|
params.enabledFlag = 1
|
|
params.enabledFlag = 1
|
|
@@ -92,20 +76,8 @@ export default {
|
|
}
|
|
}
|
|
this.data = res.data && res.data.list ? res.data.list : []
|
|
this.data = res.data && res.data.list ? res.data.list : []
|
|
this.fetching = false
|
|
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) {
|
|
handleChange (value) {
|
|
if (value && value.key) {
|
|
if (value && value.key) {
|
|
const ind = this.data.findIndex(item => item.customerSn == value.key)
|
|
const ind = this.data.findIndex(item => item.customerSn == value.key)
|
|
@@ -113,10 +85,11 @@ export default {
|
|
}
|
|
}
|
|
Object.assign(this, {
|
|
Object.assign(this, {
|
|
dealerName: value,
|
|
dealerName: value,
|
|
|
|
+ data: [],
|
|
fetching: false
|
|
fetching: false
|
|
})
|
|
})
|
|
- this.$emit('change', value || { key: undefined })
|
|
|
|
- this.$emit('changeInput', undefined)
|
|
|
|
|
|
+ this.$emit('change', value && value.key || undefined, value && value.row || undefined)
|
|
|
|
+ this.$emit('input', value && value.key || undefined)
|
|
},
|
|
},
|
|
resetForm () {
|
|
resetForm () {
|
|
this.dealerName = undefined
|
|
this.dealerName = undefined
|