<template>
|
<div :class="isProduct?'':'input-container'">
|
<el-autocomplete
|
ref="elautocomplete"
|
v-model="state"
|
:class="isProduct?'search-container':''"
|
:fetch-suggestions="querySearchAsync"
|
:placeholder="isProduct?'输入产品名称':'请输入内容'"
|
:trigger-on-focus="false"
|
@blur='blurInput'
|
@select="handleSelect"
|
></el-autocomplete>
|
</div>
|
</template>
|
<script type="text/javascript">
|
import { GetCustomerPageList } from '@/api/customermanagement/customerManage'
|
import { GetSalesChanceList } from '@/api/customermanagement/business'
|
import { GetContacterList } from '@/api/customermanagement/contacts'
|
import { GetAgreementList, GetManagementAgreementList } from '@/api/customermanagement/contract'
|
import { GetQuotationSheetList, GetManagementQuotationSheetList } from '@/api/customermanagement/offer'
|
import { GetOtherCustomerPageList, GetOtherSalesChanceList, GetOtherAgreementList } from '@/api/businessIntelligence/index'
|
export default {
|
name: 'XhInputSelect', // 新建 multiple select
|
components: {},
|
data () {
|
return {
|
options: [],
|
value: [],
|
inputVal: '',
|
list: [],
|
states: [],
|
allInfos: [],
|
state: '',
|
isSelect: false,
|
timeout: null
|
}
|
},
|
props: {
|
arrayList: { // 下拉列表的数据
|
type: Array
|
},
|
/** 没有值就是全部类型 有值就是当个类型 */
|
crmType: {
|
type: String,
|
default: ''
|
},
|
isProduct: {
|
type: Boolean,
|
default: true
|
}
|
},
|
watch: {
|
state: {
|
handler (val) {
|
console.log(val)
|
this.$emit('getName', {'name': val})
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
mounted () {
|
console.log(this.isProduct)
|
},
|
methods: {
|
querySearchAsync (queryString, cb) {
|
this.getList(queryString)
|
clearTimeout(this.timeout)
|
this.timeout = setTimeout(() => {
|
cb(this.allInfos)
|
}, 3000 * Math.random())
|
},
|
handleSelect (item) {
|
this.isSelect = true
|
this.$emit('getName', {'name': item.value})
|
},
|
blurInput () {
|
if (!this.isSelect) {
|
console.log('blurrrrrrr')
|
this.$emit('getName', {'name': this.state})
|
}
|
},
|
resetInput () {
|
this.state = ''
|
},
|
getList (query) {
|
if (query !== '') {
|
let params = []
|
if (this.crmType === 'contract' || this.crmType === 'offers') {
|
params = {
|
'PageIndex': 1,
|
'PageSize': 20,
|
'SelectOwnedType': 0,
|
'AuditStatus': 0,
|
'SealStatus': 0,
|
'Name': query,
|
'CreateStartTime': '',
|
'CreateEndTime': ''
|
}
|
} else if (this.crmType === 'sealContract' || this.crmType === 'sealOffers') {
|
params = {
|
'PageIndex': 1,
|
'PageSize': 20,
|
'DepartmentUserType': 0,
|
'SelectOwnedType': 0,
|
'AuditStatus': 0,
|
'SealStatus': 0,
|
'Name': query,
|
'CreateStartTime': '',
|
'CreateEndTime': ''
|
}
|
} else {
|
params = {
|
'PageIndex': 1,
|
'PageSize': 20,
|
'SelectOwnedType': 0,
|
'Name': query,
|
'CreateStartTime': '',
|
'CreateEndTime': '',
|
'StartFollowTime': '',
|
'EndFolowTime': ''
|
}
|
}
|
const request = {
|
customer: GetCustomerPageList,
|
business: GetSalesChanceList,
|
contacts: GetContacterList,
|
contract: GetAgreementList,
|
offers: GetQuotationSheetList,
|
sealContract: GetManagementAgreementList,
|
sealOffers: GetManagementQuotationSheetList,
|
businessCustomer: GetOtherCustomerPageList,
|
businessContract: GetOtherAgreementList,
|
businessChances: GetOtherSalesChanceList
|
}[this.crmType]
|
setTimeout(() => {
|
if (!this.isProduct) {
|
request(params)
|
.then(res => {
|
console.log(res)
|
if (res.data.ErrorCode === 200) {
|
this.options = res.data.Result.List || []
|
this.allInfos = this.options.map((terminal) => {
|
if (this.crmType === 'customer' || this.crmType === 'businessCustomer') {
|
return {
|
value: terminal.CustomerName,
|
name: terminal.CustomerName
|
}
|
} else if (this.crmType === 'business' || this.crmType === 'businessChances') {
|
return {
|
value: terminal.ChanceName,
|
name: terminal.ChanceName
|
}
|
} else if (this.crmType === 'contacts') {
|
return {
|
value: terminal.ChanceName,
|
name: terminal.ChanceName
|
}
|
} else if (this.crmType === 'offers' || this.crmType === 'sealOffers') {
|
return {
|
value: terminal.QuotationName,
|
name: terminal.QuotationName
|
}
|
} else if (this.crmType === 'contract' || this.crmType === 'sealContract' || this.crmType === 'businessContract') {
|
return {
|
value: terminal.AgreeName,
|
name: terminal.AgreeName
|
}
|
}
|
})
|
console.log(this.allInfos)
|
} else {
|
this.options = []
|
this.allInfos = []
|
this.$message.error(res.data.Message)
|
}
|
})
|
}
|
}, 300)
|
} else {
|
this.options = []
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.input-container {
|
width: 224px;
|
height: 32px;
|
border-radius: 4px;
|
margin-right: 40px
|
}
|
.search-container{
|
width: 224px;
|
height: 32px;
|
}
|
.search-container.el-autocomplete /deep/ .el-input__inner{
|
height: 32px;
|
}
|
</style>
|
