X-web/src/views/modules/common/user-component.vue

<!-- 用户组件（单选） -->
<template>
  <div>
    <el-select v-model="value" ref="select" placeholder="请选择" clearable filterable remote :remote-method="remoteMethod"
      @change="onChange" @focus="cancelReadOnly" @hook:mounted="cancelReadOnly" @visible-change="cancelReadOnly">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
      <el-option v-if="options.length > 0" label="加载更多" style="font-style: italic; color: #8a979e" value="undefined"
        @click.native="handleClick()"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'user-component',
  props: {
    userId: {
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'userId',
    event: 'userSelected'
  },
  watch: {
    // userId (value) {
    //   console.log('userId变化:' + value)
    //   this.value = value
    //   // 检查缺失item
    //   this.checkItem(value)
    // }
    userId: {
      immediate: true,
      handler(newUserId) {
        this.value = newUserId
        this.checkItem(newUserId)
      }
    }
  },
  data() {
    return {
      value: '',
      current: 1,
      size: 100,
      name: '',
      options: [],
      loading: false,
      noMore: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.getList()
    },
    remoteMethod(query) {
      this.options = []
      this.current = 1
      this.name = query
      this.getList()
    },
    getList() {
      this.$http({
        url: this.$http.adornUrl(`/user-service/user/list`),
        method: 'get',
        params: this.$http.adornParams({
          'current': this.current,
          'size': this.size,
          'name': this.name
        })
      }).then(({ data }) => {
        if (data && data.code === '200') {
          if (this.current > data.data.pages) {
            return
          }
          this.noMore = data.data.records.length >= 10
          data.data.records.forEach(item => {
            let i = this.options.findIndex(a => a.value === item.userId)
            if (i < 0) {
              this.options.push({
                label: item.name + ' (' + item.orgName + ')',
                value: item.userId,
                name: item.name,
                phone: item.mobile
              })
            }
          })
        } else {
          this.options = []
        }
      })
    },
    handleClick() {
      this.loadMore()
    },
    loadMore() {
      this.current++
      this.value = null
      this.getList()
    },
    onChange(item) {
      if (item === 'undefined') {
        this.value = null
      }
      this.$emit('userSelected', item)
      this.$emit('userSelectedItem', { userId: item, userName: this.options.find(t => t.value === item).name })
    },
    checkItem(code) {
      if (!code || !this.options) return
      let i = this.options.findIndex(item => item.value === code)
      if (i > -1) return
      // info
      this.$http({
        url: this.$http.adornUrl(`/user-service/user/info/${code}`),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === '200' && data.data) {
          // 再次检查，防止异步重复添加
          if (!this.options.some(opt => opt.value === data.data.userId)) {
            this.options.push({
              label: data.data.name + ' (' + data.data.orgName + ')',
              value: data.data.userId
            })
          }
        }
      })
    },
    cancelReadOnly(onOff) {
      this.$nextTick(() => {
        if (!onOff) {
          const input = this.$refs.select.$el.querySelector('.el-input__inner')
          const timer = setTimeout(() => {
            input.removeAttribute('readonly')
            clearTimeout(timer)
          }, 200)
        }
      })
    }
  }
}
</script>

<style scoped></style>