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

<!-- 简单查询过滤 -->
<template>
  <div>
    <div>
      <input autocomplete="off"
        v-model="simpleConditionValue"
        type="text"
        class="form-control input-simple"
        :placeholder="$t('lang.QueryConditionSimple.enterSearchCriteria')"
        @keyup.enter="simpleSearch"
      />
    </div>
    <div v-if="showButton" style="margin-top: 5px">
      <div>
        <button
          id="filter"
          type="button"
          class="btn btn-default m-btn"
          @click="simpleSearch()"
        >
          {{ $t('lang.QueryConditionSimple.filter') }}
        </button>

        <button
          id="filter"
          type="button"
          class="btn btn-default m-btn"
          @click="refreshSearch()"
        >
          {{ $t('lang.QueryConditionSimple.refresh') }}
        </button>

        <template v-if="!isSearchWidget">
          <button
            type="button"
            class="btn btn-default m-btn"
            @click="executeExport()"
          >
            {{ $t('lang.QueryConditionSimple.export') }}
          </button>

          <template v-for="infoButton in infoButtons" :key="infoButton.name">
            <button
              v-tooltip.right="Language.getHelpTrl($i18n.locale, infoButton)"
              class="btn btn-default btn-process m-btn"
              @click="executeProcess(infoButton)"
            >
              {{ Language.getNameTrl($i18n.locale, infoButton) }}
            </button>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<script>

var Language = require('../../common/Language.js').default;

export default {

  components: {
  },

  props: {
    'infoButtons': {
      type: Array,
      default: null,
    }, 
    'isSearchWidget':{
      type: Boolean,
      default: false,
    },
    'showButton':{
      type: Boolean,
      default: false,
    },
  },

  emits: ['simpleSearch', 'refreshSearch', 'executeExport', 'executeProcess'],

  data: function () {
    this.Language = Language;
    return {
      simpleConditionValue: '',
      selectedText: [],
    };
  },
  methods: {


    /**
         * 触发简单查询
         * @return {void} 
         */
    simpleSearch: function () {
      this.$emit('simpleSearch');
    },

    /**
         * 刷新搜索
         */
    refreshSearch: function () {
      this.$emit('refreshSearch');
    },

    /**
         * 执行导出
         * @return {void} 
         */
    executeExport: function () {
      this.$emit('executeExport');
    },

    /**
         * 执行流程
         *
         */
    executeProcess: function (infoButton) {
      this.$emit('executeProcess', infoButton);
    },

    /**
         * 获取查询条件供外部调用
         * @return {Object} 查询条件
         */
    getQueryCondition: function () {
      var _self = this;
      return _self.simpleConditionValue;
      
    },
  },
};
</script>


<style scoped>
.m-row {
    margin-bottom: 5px;
    text-align: left;
}

.input-simple {
    width: 100% !important;
}

.m-btn {
    float: left;
    margin-right: 5px;
}
</style>