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

<template>
  <div>
    <div>
      <!-- <ul
        class="nav nav-tabs m-row"
        role="tablist"
      >
        <li
          role="presentation"
          :class="{'active': isSimple === true}"
        >
          <a @click="changeSearch(true)">{{ $t('lang.QueryCondition.simpleQuery') }}</a>
        </li>
        <li
          role="presentation"
          :class="{'active': isSimple === false}"
        >
          <a @click="changeSearch(false)">{{ $t('lang.QueryCondition.advancedQuery') }}</a>
        </li>
        <slot name="header" :is-simple="isSimple" />
      </ul> -->

      <div>
        <div>
          <QueryConditionSimple
            ref="queryConditionSimple"
            :info-buttons="infoButtons"
            :is-search-widget="isSearchWidget"
            :show-button="showButton"
            @simple-search="simpleSearch"
            @refresh-search="refreshSearch"
            @execute-process="executeProcess($event)"
            @execute-export="executeExport"
          />
        </div>

        <div
          v-show="isComplex"
        >
          <a-drawer
            v-model:visible="searchVisible"
            title="高级查询"
            width="440px"
            style="z-index: 1050;"
            placement="right"
            @close="closeSearch"
          >
            <QueryConditionComplex
              ref="queryConditionComplex"
              :info-window-no="infoWindowNo"
              :filter-fields="filterFields"
              :info-buttons="infoButtons"
              :is-search-widget="isSearchWidget"
              :show-button="showButton"
              @complex-search="complexSearch"
              @execute-process="executeProcess($event)"
              @execute-export="executeExport"
            />
          </a-drawer>
        </div>
        <slot name="body" />
      </div>
    </div>
  </div>
</template>

<script>
import InfoWindowUtil from './InfoWindowUtil.js';
import QueryConditionSimple from './QueryConditionSimple.vue';
import QueryConditionComplex from './QueryConditionComplex.vue';

export default {
  name: 'QueryCondition',

  components: {
    QueryConditionSimple, QueryConditionComplex,
  },

  props: {
    'infoWindowNo':{
      type: String,
      default: null,
    },
    'infoFilterFields': {
      type: Array,
      default: null,
    },
    'infoButtons': {
      type: Array,
      default: null,
    },
    'isSearchWidget':{
      type: Boolean,
      default: null,
    },
    'showButton':{
      type: Boolean,
      default: null,
    },
    'isComplex':{
      type: Boolean,
      default: false,
    },
  },
    

  emits: ['simpleSearch', 'complexSearch','openComplex', 'refreshSearch', 'executeProcess', 'executeExport', 'changeSearch'],

  data: function () {
    return {
      simpleConditionValue: '',
      isSimple: true,
      filterFields: [],
      selectedText: [],
      searchVisible:false,
      searchType:'simple',
    };
  },

  watch: {
    $route: function (to, from) {
      var _self = this;
      _self.simpleConditionValue = '';
      _self.filterFields = [];
    },

    infoFilterFields: {
      deep: true,
      handler: function (currentValue, oldValue) {
        var _self = this;

        _self.filterFields.splice(0, _self.filterFields.length);

        if (currentValue == undefined) {
          return;
        }

        var cloneInfoFilterFields = InfoWindowUtil.cloneInfoFilterFields(currentValue);

        for (var i = 0, len = cloneInfoFilterFields.length; i < len; i++) {
          _self.filterFields.push(cloneInfoFilterFields[i]);
        }
      },
    },
    
    isComplex(newVal){
      this.searchVisible = newVal;
    },
    
    
  },

  methods: {

    /**
         * 是否是简单查询
         * @return {Object} 查询条件
         */
    isSimpleQuery: function () {
      return this.isSimple === true;
    },
    closeSearch(){
      this.searchVisible = false;
      this.$emit('openComplex',false);
    },
    /**
         * 获取查询条件供外部调用
         * @return {Object} 查询条件
         */
    getQueryCondition: function () {
      var _self = this;
      var values = [];
      if (_self.searchType === 'simple') {
        values = this.$refs.queryConditionSimple.getQueryCondition();
      } else if (_self.searchType === 'complex') {
        values = this.$refs.queryConditionComplex.getQueryCondition();
      }
      return values;
    },

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



    /**
         * 获取简单查询条件供外部调用
         * @return {Array} 查询条件
         */
    getSimpleQueryCondition: function () {
      var _self = this;
      var values = [];
      return values;
    },


    /**
         * 回车键查询
         * @return {void} 
         */
    complexSearch: function (value) {
      this.isSimple = false;
      this.searchType = value;
      this.$emit('complexSearch','complex');
    },

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

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

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

    /**
         * 切换简单查询和高级查询
         * @param  {Boolean} val 是否是简单查询
         * @return {void}     
         */
    changeSearch: function (val) {
      var _self = this;
      if (val === false) {
        this.simpleConditionValue = '';
        _self.isSimple = false;
      }else if(val === true){
        _self.isSimple = true;
      }else{
        _self.isSimple = val;
      }
            
      _self.$emit('changeSearch', val);

      // 当前查询是简单查询，切换到高级查询的时候，清空查询条件
      if (this.isSimple === true && val === false) {
        if (_self.filterFields != undefined) {
          _self.filterFields.forEach(function (item) {
            item.value.value1 = '';
            item.value.value2 = '';
          });
        }
      }
    },
  },
};
</script>

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

.nav > li > a {
    padding: 8px 10px;
}
</style>