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

<template>
  <div class="content">
    <div class="box">
      <span
        v-for="(item, index) in selectedDatas"
        :key="item + '-' + index"
        class="selected-tag"
      >
        {{ item.value }}
        <button
          type="button"
          class="close"
          aria-label="Remove option"
          @click="deleteSelected(item)"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </span>
      <span
        class="glyphicon glyphicon-search search-icon"
        @click="showSearchDialog"
      />
    </div>
    <Modal
      ref="modal"
      :full="true"
      @ok="searchDialogOk"
      @cancel="searchDialogCancel"
    >
      <template #header>
        <div>{{ infoWindowDto.name }}</div>
      </template>
      <template #default>
        <!-- <InfoFilter
          ref="info"
          :field-value="fieldValue"
          :where-clause-source="whereClauseSource"
          :is-search-widget="true"
          @data-selected="dataSelected"
          @delete-selected="deleteSelected"
        /> -->
      </template>
    </Modal>
    <Loading ref="loading" />
  </div>
</template>
<script>
var Modal = require('../../modal/src/Modal.vue').default;
// var InfoFilter = require('./InfoWindow.vue').default;
var Loading = require('../../loading/src/Loading.vue').default;

export default {

  components: {
    Modal, 
    // InfoFilter, 
    Loading,
  },
  props: {
    'infoWindowNo':{
      type: String,
      default: null,
    }, 
    'fieldValue': {
      type: Object,
      default: null,
    },
    'whereClauseSource': {
      type: Object,
      default: null,
    }, 
    'displayName': {
      type: String,
      default: null,
    }, 
  },

  emits: ['valueChanged'],

  data: function () {
    return {
      labelNames: [],
      infoWindowDto: {},
      infoWindowData: {},
      isShowAuto: false,
      searchText: '',
      selectIndex: -1,
      selectedDatas: [],
    };
  },

  computed: {

  },

  watch: {
    fieldValue: function (to) {
      this.reComputeSearchText(to);
    },

  },

  mounted: function () {
    this.reComputeSearchText(this.fieldValue);
  },

  methods: {
    // 显示搜索对话框
    showSearchDialog: function () {
      var _self = this;
      _self.$refs.modal.showModal();
      _self.$nextTick(function () {
        _self.$refs.modal.showModal();
        if (_self.$refs.info.infoWindowNo != _self.infoWindowNo) {
          _self.$refs.info.loadByInfoWindowNo(_self.infoWindowNo);
        } else {
          _self.$refs.info.refresh();
        }
      });
    },

    searchDialogOk: function () {

    },

    searchDialogCancel: function () {

    },

    // 数据已经选择
    dataSelected: function (data) {
      var _self = this;

      if (data == undefined) {
        return;
      }

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

      var newIds = [];
      if (_self.fieldValue.ids != undefined) {
        for (var i = 0; i < _self.fieldValue.ids.length; i++) {
          newIds.push(_self.fieldValue.ids[i]);
        }
      }

      if (newIds.indexOf(data.id) < 0) {
        newIds.push(data.id);
      }

      var displayValue = _self.fieldValue.displayValue;
      if (_self.displayName != undefined && _self.displayName != '') {
        var arr = _self.displayName.split(',');
        var text = '';
        arr.forEach(function (item) {
          console.log('选择的text:' + data.data[item].displayValue[0]);
          text += data.data[item].displayValue[0];
        });
        displayValue.push(text);
      }

      var newFieldValue = {
        displayValue: displayValue,
        fieldType: 'MultiSearchBoxEditor',
        ids: newIds,
      };
      _self.$emit('valueChanged', newFieldValue);
    },

    // 值改变
    valueChanged: function (fieldValue) {
      this.$emit('valueChanged', fieldValue);
      this.reComputeSearchText(fieldValue);
    },

    /**
         * 重新计算显示值
         * @package [fieldValue]
         * @return {[type]}
         */
    reComputeSearchText: function (fieldValue) {
      var arr = [];
      var ids = fieldValue.ids;
      var displayValue = fieldValue.displayValue;
      if (ids != undefined && displayValue != undefined && ids.length == displayValue.length) {
        for (var i = 0; i < ids.length; i++) {
          var obj = {
            id: ids[i],
            value: displayValue[i],
          };
          arr.push(obj);
        }
      }
      return this.selectedDatas = arr;
    },

    // 删除选中数据
    deleteSelected: function (item) {
      var id = item.id;
      var _self = this;
      var newIds = [];
      var displayValues = [];
      if (_self.fieldValue.ids != undefined) {
        for (let i = 0; i < _self.fieldValue.ids.length; i++) {
          newIds.push(_self.fieldValue.ids[i]);
        }
      }

      if (_self.fieldValue.displayValue != undefined) {
        for (let i = 0; i < _self.fieldValue.displayValue.length; i++) {
          displayValues.push(_self.fieldValue.displayValue[i]);
        }
      }

      var index = newIds.indexOf(id);
      if (index > -1) {
        newIds.splice(index, 1);
        _self.fieldValue.ids.splice(index, 1);
        if (displayValues.length > index) {
          displayValues.splice(index, 1);
          _self.fieldValue.displayValue.splice(index, 1);
        }
      }

      var newFieldValue = {
        displayValue: displayValues,
        fieldType: 'MultiSearchBoxEditor',
        ids: newIds,
      };

      this.$emit('valueChanged', newFieldValue);
      this.reComputeSearchText(newFieldValue);
    },
  },
};
</script>

<style scoped>
.required-mark {
    color: red;
    margin-right: 10px;
}

.box {
    width: 200px;
    min-height: 34px;
    border: 1px solid rgba(60, 60, 60, 0.26);
    border-radius: 4px;
    white-space: normal;
    transition: border-radius 0.25s;
    background-color: #ffffff;
    position: relative;
}

.search-icon {
    position: absolute;
    top: 9px;
    right: 7px;
}

.selected-tag {
    color: #333;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 26px;
    margin: 4px 1px 0px 3px;
    padding: 3px 0.25em;
    line-height: 34px;
}

.close {
    float: none;
    margin-right: 0;
    font-size: 20px;
    appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.2;
}

.div-readonly {
    background-color: #eee !important;
}

.content {
    display: inline-block !important;
    width: 200px;
}
</style>