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

<template>
  <el-select
    v-model="value"
    ref="select"
    placeholder="请选择"
    clearable
    filterable
    remote
    :remote-method="remoteMethod"
    @change = "onChange"
    @focus="cancelReadOnly"
    @hook:mounted="cancelReadOnly"
    @visible-change="cancelReadOnly"
    style="width: 200px">
    <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>
</template>

<script>
  export default {
    name: 'material-component',
    props: {
      materialId: {
        type: String,
        default: ''
      },
      materialType: {
        type: String,
        default: ''
      },
      bizType: {
        type: String,
        default: ''
      },
      material: {
        type: Object,
        default: () => {}
      }
    },
    model: {
      prop: 'material',
      event: 'materialSelected'
    },
    data () {
      return {
        value: '',
        current: 1,
        size: 10,
        name: '',
        options: [],
        loading: false,
        noMore: false
      }
    },
    watch: {
      materialId (value) {
        this.value = value
      },
      materialType (value) {
        this.options = []
        this.getList()
      }
    },
    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(`/biz-service/stock-mg-ctl/list`),
          method: 'get',
          params: this.$http.adornParams({
            'current': this.current,
            'size': this.size,
            'materialName': this.name,
            'materialTypeId': this.materialType
          })
        }).then(({data}) => {
          if (data && data.code === '200') {
            if (this.current > data.data.pages) {
              return
            }
            if (this.bizType === 'in') {
              data.data.records.forEach(item => {
                this.options.push({...item,
                  label: item.materialName + ' - ' + item.specifications,
                  value: item.materialId,
                  specification: item.specifications,
                  cntLimit: Number(item.cnt) - Number(item.lockCnt),
                  cnt: 0,
                  sourceCategory: '2'
                })
              })
            } else if (this.bizType === 'check') {
              data.data.records.forEach(item => {
                this.options.push({...item,
                  label: item.materialName + ' - ' + item.mapNumber + ' - ' + item.specifications + ' - ' + item.cnt,
                  value: item.materialId,
                  specification: item.specifications,
                  cntLimit: Number(item.cnt) - Number(item.lockCnt)
                })
              })
            } else {
              data.data.records.forEach(item => {
                this.options.push({...item,
                  label: item.materialName + ' - ' + item.specifications,
                  value: item.materialId,
                  specification: item.specifications,
                  cntLimit: Number(item.cnt) - Number(item.lockCnt)
                })
              })
            }
          } else {
            this.options = []
          }
        })
      },
      handleClick () {
        this.loadMore()
      },
      loadMore () {
        this.current ++
        this.getList()
      },
      onChange (item) {
        if (item === 'undefined') {
          this.value = null
        }
        let selectedItem = this.options.find(item1 => item1.value === item)
        if (selectedItem) {
          selectedItem.buttonType = '0'
        }
        // console.log(JSON.stringify(selectedItem))
        this.$emit('materialSelected', selectedItem)
      },
      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>