123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- <template>
- <a-select
- show-search
- label-in-value
- :id="id"
- :size="size"
- :value="dealerName"
- mode="combobox"
- placeholder="请输入客户名称搜索"
- style="width: 100%"
- :filter-option="false"
- :not-found-content="fetching ? undefined : null"
- :dropdownMatchSelectWidth="false"
- :defaultActiveFirstOption="false"
- @search="fetchUser"
- @change="handleChange"
- allowClear
- >
- <a-spin v-if="fetching" slot="notFoundContent" size="small" />
- <a-select-option v-for="item in data" :id="id+'-'+item.customerSn" :key="item.customerSn" :value="item.customerName" :disabled="(isValidateEnabled ? item.enabledFlag=='0' : false) || (dealerDisabled?item.dealerFlag==1:false)">
- {{ item.customerName }}
- <span v-if="isValidateEnabled && item.enabledFlag=='0'">(已禁用)</span>
- </a-select-option>
- </a-select>
- </template>
- <script>
- import debounce from 'lodash/debounce'
- import { custList, queryCanCustomer } from '@/api/customer'
- export default {
- props: {
- isValidateEnabled: {
- type: Boolean,
- default: false
- },
- id: {
- type: String,
- default: ''
- },
- size: {
- type: String,
- default: 'default'
- },
- itemSn: {
- type: String || Number,
- default: undefined
- },
- notSn: {
- type: String || Number,
- default: ''
- },
- isEnabled: { // 是否只查启用状态
- type: Boolean,
- default: false
- },
- mainFlag: {
- type: Boolean,
- default: true
- },
- satelliteFlag: {
- type: Boolean,
- default: false
- },
- dealerDisabled: {
- type: Boolean,
- default: false
- },
- dealerFlag: { // 0不含下级,1 只是下级,all是全部
- type: [String, Number],
- default: 'all'
- },
- pageType: {// 页面类型
- type: String,
- default: '0' // 0客户名称 1被合并的客户名称
- }
- },
- data () {
- this.lastFetchId = 0
- this.fetchUser = debounce(this.fetchUser, 800)
- return {
- data: [],
- dealerName: undefined,
- fetching: false
- }
- },
- methods: {
- fetchUser (dealerName) {
- if (dealerName == '') return
- this.lastFetchId += 1
- const fetchId = this.lastFetchId
- this.data = []
- this.fetching = true
- const params = { pageNo: 1, pageSize: 20, mainFlag: this.mainFlag ? 1 : 0, dealerFlag: this.dealerFlag == 'all' ? undefined : this.dealerFlag }
- if (this.satelliteFlag) {
- params.satelliteFlag = 1
- }
- if (this.itemSn) {
- params.customerSn = this.itemSn
- } else {
- params.queryWord = dealerName.trim()
- }
- if (this.isEnabled) {
- params.enabledFlag = 1
- }
- custList(params).then(res => {
- if (fetchId !== this.lastFetchId) {
- return
- }
- this.data = res.data && res.data.list ? res.data.list : []
- this.data = this.data.filter(item => item.customerSn != this.notSn)
- this.fetching = false
- })
- },
- handleChange (value) {
- if (value && value.key) {
- value.key = value.key.trim()
- const ind = this.data.findIndex(item => item.customerName == value.key)
- value.row = ind != -1 ? this.data[ind] : undefined
- }
- Object.assign(this, {
- dealerName: value,
- data: [],
- fetching: false
- })
- this.$emit('input', value && value.key || undefined)
- this.$emit('change', value && value.key || undefined, value && value.row || undefined)
- },
- resetForm () {
- this.dealerName = undefined
- this.setData(undefined)
- },
- setData (value) {
- Object.assign(this, {
- dealerName: value,
- data: [],
- fetching: false
- })
- }
- },
- mounted () {
- if (this.itemSn) {
- this.fetchUser(this.itemSn)
- this.setData({ key: this.itemSn })
- }
- }
- }
- </script>
|