X-web/src/views/modules/common/doc-components.vue

<template>
    <div>
      <el-select
        v-model="value"
        ref="select"
        placeholder="请选择"
        clearable
        filterable
        remote
        multiple
        :disabled="disabled"
        :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="noMore" label="加载更多" disabled style="font-style: italic; color: #8a979e" value="undefined" @click.native="handleClick()"></el-option>
      </el-select>
    </div>
</template>

<script>
  export default {
    name: 'doc-components',
    props: {
      docIds: {
        type: Array,
        default: () => []
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        value: [],
        current: 1,
        size: 10,
        name: '',
        options: [],
        loading: false,
        noMore: false
      }
    },
    watch: {
      docIds (value) {
        this.value = value
      }
    },
    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(`/file-service/document-ctl/list`),
          method: 'get',
          params: this.$http.adornParams({
            'current': this.current,
            'size': this.size,
            'fileName': 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 => {
              this.options.push({
                label: item.fileName,
                value: item.docId,
                fileType: item.fileType,
                url: item.url
              })
            })
          } else {
            this.options = []
          }
        })
      },
      handleClick () {
        this.loadMore()
      },
      loadMore () {
        this.current ++
        this.getList()
      },
      onChange (item) {
        this.$emit('change', item)
      },
      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>
.el-select{
  width: 100%;
}
</style>