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

<template>
  <div class="input-group">
    <input
      aria-describedby="addon"
      type="text"
      class="form-control input-search"
      :class="validInput"
      :value="searchText"
      placeholder="请选择内容"
      @input="textChange($event)"
      @keyup.up="selectUp"
      @keyup.down="selectDown"
      @keyup.enter="selectEnter"
      @keyup.esc="autoCompleteVisible = false"
    />
    <span
      class="input-group-addon"
      @click="showSearchDialog"
    >
      <span class="glyphicon glyphicon-search" />
    </span>
    <Modal
      v-model:show="modal"
      :full="true"
      @ok="searchDialogOk"
      @cancel="searchDialogCancel"
    >
      <template #header>
        <div>{{ titleName }}</div>
      </template>
      <!-- <template #default> -->
      <!-- <InfoWindow
          v-if="showSubInfoWindow"
          ref="info"
          :infoWindowNo="infoWindowNo"
          :where-clause-source="whereClauseSource"
          :field-value="fieldValue"
          :is-search-widget="true"
          @data-selected="dataSelected"
        /> -->
      <!-- </template> -->
    </Modal>
    <SearchAutoCompleteWidget
      ref="autoComplete"
      v-model:show="autoCompleteVisible"
      :info-window-no="infoWindowNo"
      :where-clause-source="whereClauseSource"
      class="auto-complete"
      @select-data="dataSelected"
    />

    <Loading v-if="loading" />
  </div>
</template>
<script>

var Modal = require('../../modal/src/Modal.vue').default;
var SearchAutoCompleteWidget = require('./SearchAutoCompleteWidget.vue').default;
var Loading = require('../../loading/src/Loading.vue').default;

export default {
  // infoWindowNo: 查询窗口Id
  // fieldValue: 显示的值
  // fieldValue:{
  //		displayValue: ['Jack'],
  //		fieldType: 'Key',
  //		id: 1
  // }
  // titleName: 弹出窗口的标题
  // displayName: 文本框中显示的字段
  name: 'InfoSearchWidget',

  components: {
    Modal, SearchAutoCompleteWidget, Loading,
  },
  props: {
    /**
     * 编号
     */
    'infoWindowNo':{
      type: String,
      default: null,
    }, 
    /**
     * 显示的值
     */
    'fieldValue': {
      type: Object,
      default: null,
    },
    /**
     * 弹出窗口的标题
     */
    'titleName':
    {
      type: String,
      default: null,
    }, 
    'displayName':
    {
      type: String,
      default: null,
    }, 
    'whereClauseSource':
    {
      type: Object,
      default: null,
    }, 
  },

  emits: ['valueChanged', 'dataSelected'],

  data: function () {
    return {
      isVisible: [],
      searchText: '',
      leftPosition: 0,
      showSubInfoWindow: false,	// 显示子查询窗口
      loading: false,
      modal: false,
      autoCompleteVisible: false,
    };
  },

  computed: {
    titleNames: function () {
      let labelNames = '';
      if (this.field != null || this.field.name != null || this.field.name.length > 0) {
        labelNames = this.field.name.split(',');
      }
      this.reCalVisible();
      return labelNames;
    },


    /**
         * 是否是有效的数据
         */
    validInput: function () {
      var isValid = true;
      if (this.searchText != undefined && this.searchText.length > 0) {
        if (this.fieldValue != undefined && (this.fieldValue.id == undefined || this.fieldValue.id <= 0)) {
          isValid = false;
        } else if (this.fieldValue != undefined && (this.fieldValue.displayValue != undefined && this.fieldValue.displayValue[0] != this.searchText)) {
          isValid = false;
        }
      }

      return {
        'invalid-input': isValid == false,
      };
    },
  },

  watch: {
    redraw: function () {
      console.log('searchWidgetRedraw');
      this.reCalVisible();
    },

    fieldValue: {
      handler(currentValue, oldValue) {
        console.log('currentValue:' + JSON.stringify(currentValue));
        this.searchText = this.initSearchText(currentValue);
        console.log('searchText:' + this.searchText);
      },
      deep: true,
    },

  },

  mounted: function () {
    this.searchText = this.initSearchText(this.fieldValue);
  },

  methods: {
    selectDown: function () {
      this.$refs.autoComplete.selectDown();
    },

    selectUp: function () {
      this.$refs.autoComplete.selectUp();
    },

    selectEnter: function () {
      var _self = this;

      var data = _self.$refs.autoComplete.getSelectData();
      if (data != undefined) {
        _self.dataSelected(data);
        _self.autoCompleteVisible = false;
      } else {
        if (_self.searchText == undefined || _self.searchText.length == 0) {
          if (_self.autoCompleteVisible == true) {
            _self.autoCompleteVisible = false;
          } else {
            _self.$refs.autoComplete.initSearch('');
          }
        }
      }
    },

    // 显示搜索对话框
    showSearchDialog: function () {
      var _self = this;
      this.modal=true;

      _self.autoCompleteVisible = false;
    },

    /**
         * 搜索框【确定】按钮点击事件
         */
    searchDialogOk: function () {
      var _self = this;
      var selectedModelDatas = _self.$refs.info.getSelectedModelDatas();
      if (selectedModelDatas != undefined || selectedModelDatas.length > 0) {
        // 选中了数据，更新数据
        _self.dataSelected(selectedModelDatas[0]);
      }
      this.showSubInfoWindow = false;
    },

    searchDialogCancel: function () {

      this.showSubInfoWindow = false;
    },

    // 输入的文本发生改变
    textChange: function (e) {
      var text = e.target.value;
      console.log('textChange： ' + text);
      if (text == undefined || text.length == 0) {
        var newFieldValue = {
          id: null,
          displayValue: [],
          fieldType: 'Key',
        };
        this.$emit('valueChanged', newFieldValue);
      }
      this.$refs.autoComplete.initSearch(text);
    },

    // 数据已经选择
    dataSelected: function (modelData) {
      var _self = this;
      this.modal=false;

      _self.autoCompleteVisible = false;

      if (modelData == undefined) {
        return;
      }

      console.log('已经选择了数据:' + modelData.id);

      var newFieldValue = {
        id: modelData.id,
        displayValue: [modelData.data[_self.displayName].displayValue[0]],
        fieldType: 'Key',
      };

      if (newFieldValue.displayValue.length > 0) {
        _self.searchText = newFieldValue.displayValue[0];
      }
      this.$emit('valueChanged', newFieldValue);
      this.$emit('dataSelected', modelData);
    },

    initSearchText: function (tempFieldValue) {
      if (tempFieldValue == undefined || tempFieldValue.displayValue == undefined || tempFieldValue.displayValue.length == 0) {
        return '';
      } else {
        return tempFieldValue.displayValue[0];
      }
    },
  },
};
</script>

<style scoped>
.auto-complete {
    left: 0px;
    top: 34px;
}

.input-search {
    width: 160px !important;
}

.input-group {
    width: 200px !important;
}

.invalid-input {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
</style>