income_payments_enterprise_terminal/src/components/company/SelectContacts.vue

<template>
  <!--  在点击组件时获取联系人列表-->
  <div>
    <a-row>
      <a-col :span="20">
        <a-select :value="value"
                  v-bind="$attrs"
                  v-on="$listeners"
                  show-search
                  allowClear
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  @dropdownVisibleChange="handleDropdownOpen">
          <a-select-option v-for="item in contactsList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-col>
      <a-col :span="4" class="form-btn">
        <a-button icon="plus" v-bind="$attrs" @click="addContacts"></a-button>
      </a-col>
    </a-row>
    <contact-management-module ref="contactForm"
                               is-company-disabled
                               :selected-company="selectedCompany"
                               @ok="addContactsOk">
    </contact-management-module>
  </div>
</template>

<script>
import ContactManagementModule from '@comp/company/ContactManagementModule'
import {getContactsByCompany,getContactsByCompanyNoLimit} from '@api/incomePaymentsApi'

export default {
  name: 'SelectContacts',
  components: { ContactManagementModule },
  props: {
    // 已选中的企业信息
    selectedCompany: {
      type: Object,
      required: false,
      default: () => {
        return {}
      }
    },
    // 编辑时回显的数据, 需要id，name两个字段
    initContacts: {
      type: Object,
      required: false,
      default: () => {
        return {}
      }
    },
    value: {
      type: [String, Object],
      required: false,
      default: undefined
    },
    // 取消时将isCancel设为true，用于重置是否为第一次展开下拉
    isCancel: {
      type: Boolean,
      required: false,
      default: false
    },
    // value的类型
    valueType: {
      type: String,
      required: false,
      default: 'string'
    },
    // 是否调用无权限接口
    isLimit: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      contactsList: [], // 该企业下联系人列表
      isFirstOpen: true, // 编辑状态下是否为第一次打开
      contactId: this.value
    }
  },
  created() {
    // this.initContacts = null
    this.contactsList = []
    // 编辑 第一次不回显的问题
    this.getContactsList()
  },
  watch: {
    /**
     * 选中企业发生变化时重新获取数据
     */
    selectedCompany: {
      handler() {
        this.getContactsList()
      },
      deep: true
    },
    /**
     * 编辑联系人变化
     */
    initContacts: {
      handler() {
        this.isFirstOpen = true
      },
      deep: true
    },
    isCancel(val) {
      if (val) {
        this.isFirstOpen = true
        // 取消时重新获取联系人列表，将临时联系人信息加入列表中
        this.getContactsList()
      }
    }
  },
  methods: {
    /**
     * 获取联系人数据
     */
    getContactsList() {
      let params = {}
      if (this.selectedCompany && this.selectedCompany.id) {
        params.companyId = this.selectedCompany.id
      } else {
        params.companyId = null
      }
      // 是否调用无权限接口
      if (this.isLimit) {
        // 调用无权限接口
        return new Promise(resolve => {
          getContactsByCompanyNoLimit(params).then(res => {
            this.contactsList = res.result
            if (this.initContacts && this.initContacts.id) {
              this.contactsList.push(this.initContacts)
            }
            resolve()
          })
        })
      } else {
        return new Promise(resolve => {
          getContactsByCompany(params).then(res => {
            this.contactsList = res.result || []
            if (this.initContacts && this.initContacts.id) {
              this.contactsList.push(this.initContacts)
            }
            resolve()
          })
        })
      }

    },
    /**
     * 新建联系人
     */
    addContacts() {
      if (this.selectedCompany && Object.keys(this.selectedCompany).length > 0 && this.selectedCompany.id) {
        // 传入是否调用无权限接口的参数 去判断
        this.$refs.contactForm.add(this.isLimit)
        this.$refs.contactForm.title = '新增'
        this.$refs.contactForm.disableSubmit = false
        return
      }
     // 调用无权限的提示语修改
      this.$message.warn('请先选择企业再为该企业新建联系人')
    },
    addContactsOk(id) {
      this.getContactsList().then(() => {
        if (this.valueType === 'object') {
          let objContact = this.contactsList.filter(tt => tt.id === id)
          objContact = objContact[0]
          objContact.label = objContact.name
          objContact.key = objContact.id
          this.$emit('change', objContact)
        } else {
          this.$emit('change', id)
        }
        this.$emit('ok')
      })
    },
    // 下拉框的搜索
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    /**
     * 第一次展开下拉，去掉和初始联系人一样的联系人
     */
    handleDropdownOpen() {
      if (this.isFirstOpen && this.initContacts && this.initContacts.id) {
        this.contactsList.forEach((item, index) => {
          if (item.id === this.initContacts.id) {
            this.$emit('change', undefined)
            this.contactsList.splice(index, 1)
          }
        })
        this.isFirstOpen = false
      }
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style scoped>
.form-btn {
  padding-top: 1px;
  padding-left: 8px;
  margin-bottom: -1px;
}
</style>