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

<!-- 复杂查询过滤 -->
<template>
  <div>
    <div>
      <div class="form-inline">
        <div
          v-for="(item,index) in filterFields"
          v-show="item.isShow"
          :key="index"
          class="form-group m-form-group"
        >
          <label
            v-tooltip.right="Language.getHelpTrl($i18n.locale, item)"
            :for="item.id"
            class="m-form-group-label"
          >
            {{ Language.getNameTrl($i18n.locale, item) }}
          </label>
          <div
            v-if="item.index == 1"
            class="form-inline-div"
            @keyup.enter="complexSearch()"
          >
            <input
              v-if="item.displayType =='TextEditor'"
              :id="item.id"
              v-model="item.value.value1"
              autocomplete="off"
              type="text"
              :placeholder="$t('lang.QueryConditionComplex.pleaseInputTheContent')"
              class="form-control form-control-complex form-input"
            />
            <input
              v-if="item.displayType =='NumberEditor'"
              :id="item.id"
              v-model="item.value.value1"
              autocomplete="off"
              type="number"
              class="form-control form-control-complex form-input"
              :placeholder="$t('lang.QueryConditionComplex.pleaseEnterANumber')"
              onmousewheel="return false;"
              @mousewheel="mouseWheelEvent"
            />

            <select
              v-if="item.displayType =='CheckBoxEditor'"
              v-model="item.value.value1"
              class="form-control form-control-complex form-input form-select"
            >
              <option value="">{{ $t('lang.QueryConditionComplex.all') }}</option>
              <option value="true">{{ $t('lang.QueryConditionComplex.true') }}</option>
              <option value="false">{{ $t('lang.QueryConditionComplex.false') }}</option>
            </select>

            <DateTime
              v-if="item.displayType =='DateTimeBoxEditor'"
              v-model="item.value.value1"
              class="m-form-input"
              @update:model-value="dateValueChange($event, item, 'value1')"
            />

            <!--  年份选择器-->
            <YearPicker
              v-if="item.displayType =='YearEditor'"
              v-model="item.value.value1"
              class="m-form-input"
              @selected="textChanged(item, 'value1', $event)"
            />

            <!--  年月选择器  -->
            <VueMonthlyPicker
              v-if="item.displayType =='YearMonthEditor'"
              id="month-picker"
              v-model="item.value.value1"
              date-format="YYYY-MM"
              class="form-inline-div m-form-input"
              @selected="refresh"
            />

            <!-- 日期选择器  -->
            <DateWidget
              v-if="item.displayType =='DateBoxEditor'"
              v-model="item.value.value1"
              class="m-form-input"
              @on-value-change="dateValueChange($event, item, 'value1')"
            />

            <EnumSelectWidgetInfo
              v-if="item.displayType =='ListBoxEnumEditor'"
              :field="item"
              :field-value="item.fieldValue"
              @value-changed="tabValueChanged($event, item, 'value1')"
            />

            <SearchWidget
              v-if="item.displayType =='SearchBoxEditor'"
              :where-clause-source="{'infoFilterField': {'infoWindowNo': infoWindowNo, 'fieldName' : item.fieldName}}"
              :info-window-no="item.infoWindowNo"
              :title-name="item.name"
              :field-value="item.fieldValue"
              :display-name="item.listFieldNames"
              class="m-form-input"
              @value-changed="tabValueChanged($event, item)"
            />

            <!-- 多选搜索框 number类型-->
            <MultiSearchWidget
              v-if="item.displayType =='MultiSearchBoxEditor'"
              :where-clause-source="{'infoFilterField': {'infoWindowNo': infoWindowNo, 'fieldName' : item.fieldName}}"
              :info-window-no="item.infoWindowNo"
              :title-name="item.name"
              :field-value="item.fieldValue"
              :display-name="item.listFieldNames"
              class="m-form-input"
              @value-changed="multiSearchValueChange($event, item)"
            />
          </div>
          <div
            v-if="item.index == 2"
            class="form-inline-div"
          >
            <input
              v-if="item.displayType =='TextEditor'"
              :id="item.id"
              v-model="item.value.value2"
              autocomplete="off"
              type="text"
              :placeholder="$t('lang.QueryConditionComplex.pleaseInputTheContent')"
              class="form-control form-control-complex form-input"
              @keyup.enter="complexSearch()"
            />
            <input
              v-if="item.displayType =='NumberEditor'"
              :id="item.id"
              v-model="item.value.value2"
              autocomplete="off"
              type="number"
              class="form-control form-control-complex form-input"
              :placeholder="$t('lang.QueryConditionComplex.pleaseEnterANumber')"
              @keyup.enter="complexSearch()"
            />

            <select
              v-if="item.displayType =='CheckBoxEditor'"
              v-model="item.value.value2"
              class="form-control form-control-complex form-input form-select"
            >
              <option value="">{{ $t('lang.QueryConditionComplex.all') }}</option>
              <option value="true">{{ $t('lang.QueryConditionComplex.true') }}</option>
              <option value="false">{{ $t('lang.QueryConditionComplex.false') }}</option>
            </select>

            <!-- <input autocomplete="off" v-if="item.displayType =='CheckBoxEditor'" 
                type="checkbox" class="form-control form-control-complex form-input" 
                :id="item.id" v-model="item.value.value2" 
                @keyup.enter="complexSearch()"> -->
            <!-- <input autocomplete="off" v-if="item.displayType =='DateTimeBoxEditor'" 
                type="date" 
                placeholder="yyyy-MM-dd" 
                class="form-control form-control-complex form-input" 
                :id="item.id" 
                v-model="item.value.value2" 
                @keyup.enter="complexSearch()"> -->
            <DateTime
              v-if="item.displayType =='DateTimeBoxEditor'"
              v-model="item.value.value2"
              class="m-form-input"
              @update:model-value="dateValueChange($event, item, 'value2')"
            />

            <!--  年份选择器-->
            <YearPicker
              v-if="item.displayType =='YearEditor'"
              v-model="item.value.value2"
              class="m-form-input"
              @selected="textChanged(item, 'value2', $event)"
            />

            <!--  年月选择器  -->
            <vue-monthly-picker
              v-if="item.displayType =='YearMonthEditor'"
              id="month-picker"
              v-model="item.value.value2"
              date-format="YYYY-MM"
              class="form-inline-div m-form-input"
              @selected="refresh"
            />

            <!-- 日期选择器  -->
            <DateWidget
              v-if="item.displayType =='DateBoxEditor'"
              v-model="item.value.value2"
              class="m-form-input"
              @on-value-change="dateValueChange($event, item, 'value2')"
            />

            <EnumSelectWidgetInfo
              v-if="item.displayType =='ListBoxEnumEditor'"
              :field="item"
              :field-value="item.fieldValue"
              class="m-form-input"
              @value-changed="tabValueChanged($event, item)"
            />

            <!--单选number类型-->
            
            <SearchWidget
              v-if="item.displayType =='SearchBoxEditor'"
              :where-clause-source="{'infoFilterField': {'infoWindowNo': infoWindowNo, 'fieldName' : item.fieldName}}"
              :info-window-no="item.infoWindowNo"
              :title-name="item.name"
              :field-value="item.fieldValue"
              :display-name="item.listFieldNames"
              class="m-form-input"
              @value-changed="tabValueChanged($event, item)"
            />
          </div>
        </div>
      </div>
    </div>

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

          <template v-if="!isSearchWidget">
            <button
              type="button"
              class="btn btn-default m-btn"
              @click="executeExport()"
            >
              {{ $t('lang.QueryConditionComplex.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>
  </div>
</template>


<script>
import { defineAsyncComponent } from 'vue';

import EnumSelectWidgetInfo from './EnumSelectWidgetInfo.vue';
import DateTime from '../../datetime/src/DateTime.vue';
import YearPicker from '../../year-picker/src/YearPicker.vue';
import DateWidget from '../../date/src/Date.vue';
import VueMonthlyPicker from '../../vue-monthly-picker/src/VueMonthlyPicker.vue';
import Language from '../../common/Language.js';

export default {

  components: {
    EnumSelectWidgetInfo,
    DateTime,
    SearchWidget : defineAsyncComponent(() =>
      import('./SearchWidget.vue'),
    ),
    MultiSearchWidget : defineAsyncComponent(() =>
      import('./MultiSearchWidget.vue'),
    ),
    DateWidget,
    VueMonthlyPicker,
    YearPicker,
  },

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

  emits: ['complexSearch', 'executeExport', 'executeProcess'],

  data: function () {
    this.Language = Language;
    return {
      simpleConditionValue: '',
      selectedText: [],
    };
  },
  methods: {
    /**
                 * 日期时间选择框值改变事件
                 */
    dateValueChange: function (value, item, fieldName) {
      item.value[fieldName] = value;
    },
    /**
         * 年月选择器时间改变
         */
    refresh: function () {

    },
    /**
         * 年份选择器的值改变
         * @param {Object} item
         * @param {Object} key
         * @param {Object} val
         */
    textChanged: function (item, key, val) {
      var value = val + ' ';
      item.value[key] = value.replace(/(^\s*)|(\s*$)/g, '');
    },


    /**
           * 搜索框值发生改变
           * @param  {Object} newFieldValue 改变后的值
           * @param  {Object} item          当前field
           * @return {void}               
           */
    tabValueChanged: function (newFieldValue, item) {
      item.fieldValue = newFieldValue;

      if (item.index == 1) {
        if (item.displayType == 'ListBoxEnumEditor') {
          item.value.value1 = newFieldValue.displayValue[0];
        } else {
          item.value.value1 = newFieldValue.id;
        }
      } else if (item.index == 2) {
        item.value.value2 = newFieldValue.id;
      }

      item.value.infoFilterFieldId = item.id;
    },

    // 多选搜索框值发生改变事件
    multiSearchValueChange: function (newFieldValue, item) {
      var _self = this;
      item.fieldValue = newFieldValue;
      var ids = newFieldValue.ids;
      var texts = newFieldValue.displayValue;
      if (item.index == 1) {
        item.value.value1 = ids.join(',');
      } else if (item.index == 2) {
        item.value.value2 = ids.join(',');
      }
      item.value.infoFilterFieldId = item.id;
    },

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

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

    /**
         * 获取查询条件供外部调用
         * @return {Object} 查询条件
         */
    getQueryCondition: function () {
      var _self = this;
      var values = [];
      _self.filterFields.forEach(function (item) {
        if (item.index == 1) {
          item.value.fieldName = item.fieldName;
          values.push(item.value);
        }
      });
      return values;
    },

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

    /**
         * 禁止滚轮滚动影响数字
         */
    mouseWheelEvent: function (event) {
      if (event || Window.event) {
        event.preventDefault();
      }
    },
  },
};
</script>


<style scoped>
.form-input {
    border-radius: 4px !important;
}
.form-inline-div {
    display: inline-block;
}
.m-select {
    display: inline-block !important;
}
.m-form-group {
    margin-left: 5px !important;
    margin-right: 5px !important;
    margin-bottom: 5px !important;
}

.m-form-group-label{
		white-space: nowrap;
    text-overflow: ellipsis;
} 

@media (max-width: 768px) {
    .m-form-group-label {
        text-align: left;
        padding-right: 10px;
    }
}

@media (min-width: 768px) {
    .m-form-group-label {
        width: 100px;
        text-align: center;
        padding-right: 10px;
    }

    .input-switches {
        width: 100%;
    }
}
.btn-process {
    margin-right: 5px;
}

.m-row {
    margin-bottom: 5px;
    text-align: left;
}

.form-control-complex {
    float: none !important;
    width: auto !important;
}

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

.input-switches {
    width: 200px;
}
.form-select {
    width: 200px !important;
}
.m-form-input {
    border-radius: 4px !important;
    width: 200px !important;
}
.form-control-complex {
    width: 200px !important;
}
.m-btn {
    float: left;
    margin-right: 5px;
}
</style>