pc-component-v5/packages/info/src/SearchAutoCompleteWidget.vue

<template>
  <div
    v-show="isShowAuto"
    class="div-autoComplete"
    :style="{ left: realLeftComputed }"
  >
    <div class="table-responsive">
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <td
              v-for="item in infoWindowDto.infoGridFields"
              align="center"
              width="100px"
              height="40px"
            >
              {{ item.name }}
            </td>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item1, index) in infoWindowData.dataList"
            height="40px"
            :class="{'select-tr': index == selectIndex}"
            @click="selectNode(item1)"
          >
            <td
              v-for="item2 in infoWindowDto.infoGridFields"
              align="center"
            >
              {{ (item1.data[item2.fieldName] == undefined) ? "" : item1.data[item2.fieldName].displayValue[0] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="clearfix" />
  </div>
</template>
<script>
var Common = require('../../common/Common.js')
var Modal = require('../../modal/src/Modal.vue').default

export default {

  components: {
    Modal,
  },
  props: ['infoWindowNo', 'fieldId', 'leftPosition', 'whereClause', 'parentModelData', 'modelData'],

  data: function () {
    return {
      infoWindowDto: {},
      infoWindowData: {},
      isShowAuto: false,
      selectIndex: -1,
      realLeft: {},
      isSearchWidget: true,
    }
  },

  computed: {
    realLeftComputed: function () {
      return (((this.realLeft > 0) ? this.realLeft : 0) + 'px')
    },
  },

  watch: {
    infoWindowData: function (val) {
      var _self = this
      if (val.dataList != undefined && val.dataList.length > 0) {
        _self.isShowAuto = true
      } else {
        _self.isShowAuto = false
      }
    },

    /**
         * 距离左侧的距离
         * @param  {[type]} currentValue [description]
         * @param  {[type]} oldValue     [description]
         * @return {[type]}              [description]
         */
    leftPosition: function (currentValue, oldValue) {
      var _self = this
      console.log('initialLeft changed: ' + currentValue)
      _self.realLeft = currentValue
      console.log('realLeft2:' + _self.realLeft)
    },
  },

  mounted: function () {

  },

  methods: {
    /**
         * 向下
         * @return {void} 
         */
    selectDown: function () {
      var _self = this
      var length = _self.infoWindowData.dataList.length
      if (_self.selectIndex < (length - 1)) {
        _self.selectIndex++
      }
    },

    /**
         * 向上
         * @return {void} 
         */
    selectUp: function () {
      var _self = this
      var length = _self.infoWindowData.dataList.length
      if (_self.selectIndex > 0) {
        _self.selectIndex--
      }
    },

    /**
         * 获取当前数据 供外部调用
         * @return {Object} ModelData
         */
    getSelectData: function () {
      var _self = this

      if (_self.selectIndex < 0) {
        return undefined
      }

      var data = _self.infoWindowData.dataList[_self.selectIndex]
      return data
    },

    /**
         * 获取第一行数据
         */
    getFirstData: function () {
      var _self = this
      if (_self.infoWindowData != null && _self.infoWindowData.dataList != null && _self.infoWindowData.dataList.length > 0) {
        return _self.infoWindowData.dataList[0]
      }
      return null
    },

    /**
         * 隐藏
         * @return {[type]} [description]
         */
    hide: function () {
      var _self = this
      _self.isShowAuto = false
    },


    /**
         * 是否可见
         * @return {Boolean} [description]
         */
    isVisible: function () {
      return this.isShowAuto
    },

    /**
         * 查询InfoWindowDto
         * @return {void} 
         */
    getInfoWindowDto: function (resolve, reject) {
      var _self = this
      $.ajax({
        url: Common.getApiURL('InfoWindowResource/uniqueByNo'),
        type: 'GET',
        dataType: 'json',
        data: { 'infoWindowNo': _self.infoWindowNo },
        beforeSend: function (request) {
          Common.addTokenToRequest(request)
        },
        success: function (data) {
          _self.infoWindowDto = data
          resolve()
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown)
          reject()
        },
      })
    },

    /**
         * 生成查询条件
         * @param  {String} text 查询条件
         * @return {Array}      
         */
    getSimpleQueryCondition: function (text) {
      var _self = this
      var values = []
      if (_self.infoWindowDto.infoFilterFields != undefined) {
        _self.infoWindowDto.infoFilterFields.forEach(function (item) {
          if (item.displayType == 'TextEditor') {
            var value = {
              fieldName: item.fieldName,
              value1: text,
            }
            values.push(value)
          }
        })
      }
      return values
    },

    /**
         * 根据条件初始化查询
         * @param  {String} text 查询条件
         * @return {void}      
         */
    initSearch: function (text) {
      var _self = this
      if (text != undefined) {
        if (_self.infoWindowDto == undefined || _self.infoWindowDto.infoGridFields == undefined) {
          new Promise(_self.getInfoWindowDto).then(function (value) {
            // success
            _self.getInfoWindowData(text)
          }, function (error) {
            // error
          })
        } else {
          _self.getInfoWindowData(text)
        }
      } else {
        _self.isShowAuto = false
      }
    },

    /**
         * 选择节点
         * @return {void} 
         */
    selectNode: function (data) {
      this.$emit('selectData', data)
    },
    /**
         * 查询infoWindowData
         * @return {void} 
         */
    getInfoWindowData: function (text) {
      var _self = this
      var infoFilterFieldValues = _self.getSimpleQueryCondition(text)

      var infoQueryParam = {
        infoWindowNo: _self.infoWindowNo,
        start: 0,
        length: 10,
        sortClause: '',
        infoFilterFieldValues: infoFilterFieldValues,
        whereClause: _self.whereClause,
        modelData: _self.modelData,
        parentModelData: _self.parentModelData,
        isSearchWidget: _self.isSearchWidget,
      }

      $.ajax({
        url: Common.getApiURL('InfoWindowResource/queryInfoWindowDataSimple'),
        type: 'post',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request)
        },
        contentType: 'application/json',
        data: JSON.stringify(infoQueryParam),
        success: function (data) {
          _self.infoWindowData = data
          _self.selectIndex = -1
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown)
        },
      })
    },
  },
}
</script>

<style scoped>
.div-autoComplete {
    position: absolute;
    z-index: 999;
    background-color: #fff;
    border: 1px #e5e5e5 solid;
    padding: 15px 15px 0px 15px;
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    /*width: 300px;*/
    /*height: 300px;*/
    /*max-height: 400px;*/
    max-width: 800px;
    min-width: 400px;
    /*overflow: auto;*/
    top: 32px;
}

.no-padding-left {
    padding-left: 0px !important;
}

.select-tr {
    background-color: #eee;
}
</style>