doway-coms 2.2.18 → 2.2.21

package/packages/BaseSearch/src/index.vue

@@ -1,936 +1,936 @@
-<template>
-  <div>
-    <div class="search-view-items">
-      <div
-        class="search-view-item"
-        v-for="(loopColValue, loopColKey) in internalCols"
-        :key="loopColKey"
-      >
-        <div style="position: absolute" class="label-text">
-          {{ loopColValue.title }}
-        </div>
-        <!-- 下拉多选 -->
-        <div v-if="loopColValue.controlType === controlType.dropmulti">
-          <Select
-            mode="multiple"
-            :size="controlSize"
-            placeholder="请选择"
-            @change="dropChange"
-            v-model="loopColValue.values"
-            style="
-              width: 100%;
-              padding-left: 80px;
-              min-height: 24px;
-              border-radius: 4px;
-              border-color: rgb(217, 217, 217);
-            "
-          >
-            <SelectOption
-              v-for="loopSource in loopColValue.dataSource"
-              :key="loopSource.value"
-            >
-              {{ loopSource.caption }}
-            </SelectOption>
-          </Select>
-        </div>
-        <!-- 远程下拉多选 -->
-        <div v-if="loopColValue.controlType === controlType.remotedropmulti">
-          <Select
-            mode="multiple"
-            :filter-option="false"
-            :size="controlSize"
-            placeholder="请选择"
-            v-model="loopColValue.values"
-            @search="remoteDropSearch"
-            :not-found-content="fetching ? undefined : null"
-            @dropdownVisibleChange="remoteDropdownVisibleChange"
-            style="
-              width: 100%;
-              padding-left: 80px;
-              min-height: 24px;
-              border-radius: 4px;
-              border-color: rgb(217, 217, 217);
-            "
-          >
-          </Select>
-        </div>
-        <!-- 日期范围选择 -->
-        <div v-else-if="loopColValue.controlType === controlType.daterange">
-          <div style="padding-left: 80px">
-            <div class="input-box">
-              <span
-                v-for="(loopValue, loopValueIndex) in loopColValue.values"
-                :key="loopValue.key"
-                ><RangePicker
-                  valueFormat="YYYY-MM-DD"
-                  v-model="loopValue.value"
-                  ><Tag
-                    closable
-                    class="Tags"
-                    @close="
-                      closeTagPreventDefault(
-                        loopColValue,
-                        loopValueIndex,
-                        $event
-                      )
-                    "
-                  >
-                    {{ loopValue.value[0] }}到{{ loopValue.value[1] }}
-                  </Tag></RangePicker
-                ></span
-              >
-              <!-- 循环结束的位置 -->
-              <RangePicker
-                valueFormat="YYYY-MM-DD"
-                v-model="dateRangeValue"
-                @change="
-                  (date, dateString) =>
-                    dateRangeChange(loopColValue, date, dateString)
-                "
-                ><Icon
-                  type="plus"
-                  style="color: #1890ff; cursor: pointer"
-                ></Icon
-              ></RangePicker>
-            </div>
-          </div>
-        </div>
-        <!-- 日期选择 -->
-        <div v-else-if="loopColValue.controlType === controlType.date">
-          <div style="padding-left: 80px">
-            <div class="input-box">
-              <span
-                v-for="(loopValue, loopValueIndex) in loopColValue.values"
-                :key="loopValue.key"
-                ><DatePicker
-                  valueFormat="YYYY-MM-DD"
-                  v-model="loopValue.value"
-                  ><Tag
-                    closable
-                    class="Tags"
-                    @close="
-                      closeTagPreventDefault(
-                        loopColValue,
-                        loopValueIndex,
-                        $event
-                      )
-                    "
-                    >{{ loopValue.value }}</Tag
-                  ></DatePicker
-                ></span
-              >
-              <!-- 内容循环结束 -->
-              <DatePicker
-                valueFormat="YYYY-MM-DD"
-                v-model="dateValue"
-                @change="
-                  (date, dateString) =>
-                    datePickerChange(loopColValue, date, dateString)
-                "
-              >
-                <Icon
-                  type="plus"
-                  style="color: #1890ff; cursor: pointer"
-                ></Icon>
-              </DatePicker>
-            </div>
-          </div>
-        </div>
-        <!-- 字符串文本框输入 -->
-        <div v-else-if="loopColValue.controlType === controlType.text">
-          <div style="padding-left: 80px">
-            <div class="input-box">
-              <span
-                v-for="(loopValue, loopValueIndex) in loopColValue.values"
-                :key="loopValue.key"
-                style="max-width: 96%; margin-top: 2px; display: inline-block"
-              >
-                <Popconfirm
-                  placement="bottom"
-                  @confirm="textEditEnter(loopValue)"
-                  v-model="loopValue.visible"
-                  @visibleChange="
-                    (visible) =>
-                      editPopupVisibleChange(
-                        loopColKey,
-                        loopValue,
-                        loopValueIndex,
-                        visible
-                      )
-                  "
-                >
-                  <Tag
-                    class="text-wrap-Tag"
-                    closable
-                    @close="
-                      closeTagPreventDefault(
-                        loopColValue,
-                        loopValueIndex,
-                        $event
-                      )
-                    "
-                    >{{ loopValue.value }}</Tag
-                  >
-                  <template slot="icon">
-                    <Input
-                      @pressEnter="textEditEnter(loopValue)"
-                      :ref="loopColKey + '_edit_' + loopValueIndex"
-                      v-model="textValue"
-                    ></Input>
-                  </template>
-                </Popconfirm>
-              </span>
-              <!-- 输入框内容循环结尾 -->
-              <Popconfirm
-                placement="bottom"
-                v-model="loopColValue.popupAddVisible"
-                @visibleChange="
-                  (visible) => addPopupVisibleChange(loopColKey, visible)
-                "
-                @confirm="addTextExp(loopColValue)"
-              >
-                <template slot="icon">
-                  <Input
-                    :ref="loopColKey + '_add'"
-                    v-model="textValue"
-                    @pressEnter="textAddEnter(loopColValue)"
-                    style="height: 26px !important"
-                  ></Input>
-                </template>
-                <Icon
-                  type="plus"
-                  style="color: #1890ff; cursor: pointer"
-                ></Icon>
-              </Popconfirm>
-            </div>
-          </div>
-        </div>
-        <!-- 数字范围 -->
-        <div v-else-if="loopColValue.controlType === controlType.numberrange">
-          <div style="padding-left: 80px">
-            <div class="input-box">
-              <span
-                v-for="(loopValue, loopValueIndex) in loopColValue.values"
-                :key="loopValue.key"
-              >
-                <Popconfirm
-                  placement="bottom"
-                  @confirm="numberRangeEditMaxEnter(loopValue)"
-                  @visibleChange="
-                    (visible) =>
-                      editNumberRangeVisibleChange(
-                        loopColKey,
-                        loopValue,
-                        loopValueIndex,
-                        visible
-                      )
-                  "
-                  v-model="loopValue.visible"
-                >
-                  <Tag
-                    class="Tags"
-                    closable
-                    @close="
-                      closeTagPreventDefault(
-                        loopColValue,
-                        loopValueIndex,
-                        $event
-                      )
-                    "
-                    >{{ loopValue.value.min }}到{{ loopValue.value.max }}</Tag
-                  >
-                  <template slot="icon">
-                    <InputGroup style="width: 260px" compact>
-                      <InputNumber
-                        :precision="0"
-                        :ref="loopColKey + '_edit_' + loopValueIndex"
-                        @pressEnter="
-                          numberRangeEditMinEnter(loopColKey, loopValueIndex)
-                        "
-                        class="InputNumber"
-                        v-model="numberRangeValue.min"
-                        placeholder="最小"
-                      /><br />
-                      <Input
-                        class="InputNumber-mid"
-                        placeholder="~"
-                        disabled
-                      />
-                      <InputNumber
-                        :precision="0"
-                        class="InputNumber"
-                        :ref="loopColKey + '_edit_' + loopValueIndex + '_max'"
-                        @pressEnter="numberRangeEditMaxEnter(loopValue)"
-                        v-model="numberRangeValue.max"
-                        placeholder="最大"
-                      />
-                    </InputGroup>
-                  </template>
-                </Popconfirm>
-              </span>
-              <!-- 标签循环结束 -->
-              <Popconfirm
-                placement="bottom"
-                v-model="loopColValue.popupAddVisible"
-                @visibleChange="
-                  (visible) => addPopupVisibleChange(loopColKey, visible)
-                "
-                @confirm="addNumberRangeExp(loopColValue)"
-              >
-                <template slot="icon">
-                  <InputGroup>
-                    <InputNumber
-                      :ref="loopColKey + '_add'"
-                      :precision="0"
-                      class="InputNumber"
-                      v-model="numberRangeValue.min"
-                      placeholder="最小"
-                    />
-                    <Input
-                      class="InputNumber-mid"
-                      placeholder="~"
-                      disabled
-                    />
-                    <InputNumber
-                      :ref="loopColKey + '_add_max'"
-                      class="InputNumber"
-                      :precision="0"
-                      v-model="numberRangeValue.max"
-                      placeholder="最大"
-                    />
-                  </InputGroup>
-                </template>
-                <Icon
-                  type="plus"
-                  style="color: #1890ff; cursor: pointer"
-                ></Icon>
-              </Popconfirm>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="search-view-item">
-        <Button type="primary" size="small" @click="btnSearchClick">
-          搜索
-        </Button>
-        <Button size="small" @click="btnClearClick" style="margin-left: 5px">
-          清空
-        </Button>
-        <slot name="otherButtons"></slot>
-      </div>
-      <div class="search-view-item-ghost"></div>
-      <div class="search-view-item-ghost"></div>
-      <div class="search-view-item-ghost"></div>
-      <div class="search-view-item-ghost"></div>
-      <div class="search-view-item-ghost"></div>
-      <div class="search-view-item-ghost"></div>
-      <div class="search-view-item-ghost"></div>
-      <div class="search-view-item-ghost"></div>
-    </div>
-    <div></div>
-  </div>
-</template>
-  
-<script>
-import {
-  Button,
-  Icon,
-  Select,
-  SelectOption,
-  Tag,
-  DatePicker,
-  InputGroup,
-  Input,
-  InputNumber,
-  Popconfirm,
-} from 'ant-design-vue'
-import { controlType } from "../../utils/enum";
-import moment from "moment";
-import { mapGetters } from "vuex";
-export default {
-  name: "BaseSearch",
-  components: {
-    Button,
-    Icon,
-    Select,
-    SelectOption: Select.Option,
-    Tag,
-    DatePicker,
-    RangePicker: DatePicker.RangePicker,
-    Input,
-    InputGroup: Input.Group,
-    InputNumber,
-    Popconfirm,
-  },
-  computed: {
-    ...mapGetters(["controlSize"]),
-    visibleBtns() {
-      return this.internalBtns.filter((filterItem) => {
-        return filterItem.isShow === true;
-      });
-    },
-  },
-  data() {
-    return {
-      tempVisible: false,
-      moment,
-      controlType: controlType,
-      searchRow: {},
-      dropFields: [],
-      testVisible: true,
-      numberRangeValue: { min: 0, max: 0 },
-      textValue: "",
-      dateRangeValue: [],
-      dateValue: null,
-      expCols: [],
-      waitingSelectLeave: false, //是否等待选择框离开
-      internalCols: {}, //搜索字段信息
-    };
-  },
-  props: {
-    searchCols: {
-      //搜索框列集合
-      type: Array,
-      default: () => {
-        return [];
-      },
-      deep: true,
-    },
-    btns: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-  },
-  watch: {},
-  created() {
-    let tempCols = {};
-    for (let colProp in this.searchCols) {
-      let tempSearchCol = this.searchCols[colProp];
-      if (tempSearchCol.visible === false) {
-        continue;
-      }
-      let tempValues = [];
-      if (
-        tempSearchCol.defaultValues &&
-        tempSearchCol.defaultValues.length > 0
-      ) {
-        for (let j = 0; j < tempSearchCol.defaultValues.length; j++) {
-          if (tempSearchCol.controlType === controlType.dropmulti) {
-            tempValues.push(tempSearchCol.defaultValues[j]);
-          } else {
-            tempValues.push({
-              key: colProp + "_" + j,
-              title: this.getValueTitle(
-                tempSearchCol.defaultValues[j],
-                tempSearchCol.controlType
-              ),
-              valueIndex: j,
-              value: tempSearchCol.defaultValues[j],
-            });
-          }
-        }
-      }
-      //赋值属性，防止页面不渲染，没有绑定到页面
-      this.$set(tempSearchCol, "popupAddVisible", false);
-      this.$set(tempSearchCol, "values", tempValues);
-      this.$set(this.internalCols, tempSearchCol.field, tempSearchCol);
-    }
-  },
-  mounted() {},
-  methods: {
-    dropChange() {
-      this.$emit("searchBtnClick", null);
-    },
-    editNumberRangeVisibleChange(editKey, originValue, valueIndex, visible) {
-      if (visible === true) {
-        let vm = this;
-        this.numberRangeValue.min = originValue.value.min;
-        this.numberRangeValue.max = originValue.value.max;
-        setTimeout(() => {
-          vm.$refs[editKey + "_edit_" + valueIndex][0].focus();
-          vm.$refs[editKey + "_edit_" + valueIndex][0].$el
-            .getElementsByTagName("input")[0]
-            .select();
-        }, 10);
-      }
-    },
-    editPopupVisibleChange(editKey, originValue, valueIndex, visible) {
-      if (visible === true) {
-        let vm = this;
-        this.textValue = originValue.value;
-        setTimeout(() => {
-          console.debug(vm.$refs[editKey + "_edit_" + valueIndex][0]);
-          vm.$refs[editKey + "_edit_" + valueIndex][0].$el.focus();
-          vm.$refs[editKey + "_edit_" + valueIndex][0].$el.select();
-        }, 10);
-      }
-    },
-    addPopupVisibleChange(addKey, visible) {
-      if (visible === true) {
-        this.textValue = "";
-        let vm = this;
-        setTimeout(() => {
-          vm.$refs[addKey + "_add"][0].$el.focus();
-        }, 50);
-      }
-    },
-    textAddEnter(colValue) {
-      if (this.textValue) {
-        colValue.popupAddVisible = false;
-        this.addExpValue(colValue, this.textValue);
-        this.textValue = "";
-      }
-      this.$emit("searchBtnClick", null);
-    },
-    textEditEnter(valueInfo) {
-      if (this.textValue) {
-        valueInfo.visible = false;
-        valueInfo.value = this.textValue;
-        this.textValue = "";
-      }
-      this.$emit("searchBtnClick", null);
-    },
-    numberRangeEditMinEnter(loopColKey, loopValueIndex) {
-      let maxKey = loopColKey + "_edit_" + loopValueIndex + "_max";
-      this.$refs[maxKey][0].focus();
-      this.$refs[maxKey][0].$el.getElementsByTagName("input")[0].select();
-    },
-    numberRangeEditMaxEnter(valueInfo) {
-      valueInfo.visible = false;
-      valueInfo.value.min = this.numberRangeValue.min;
-      valueInfo.value.max = this.numberRangeValue.max;
-      this.numberRangeValue.min = 0;
-      this.numberRangeValue.max = 0;
-    },
-    showMoreFilter() {
-      for (let loopKey in this.internalCols) {
-        this.internalCols[loopKey].visible = true;
-      }
-    },
-    testClick() {
-      this.$refs.testConfirm[0].setVisible(false);
-    },
-    closeTagPreventDefault(colValue, valueIndex, event) {
-      colValue.values.splice(valueIndex, 1);
-      event.preventDefault();
-      this.$emit("searchBtnClick", null);
-    },
-    /**
-     * 日期改变事件
-     */
-    datePickerChange(colValue, date, dateString) {
-      this.addExpValue(colValue, dateString);
-      this.dateValue = null;
-      this.$emit("searchBtnClick", null);
-    },
-    /**
-     * 日期范围改变事件
-     */
-    dateRangeChange(colValue, date, dateString) {
-      this.addExpValue(colValue, dateString);
-      this.dateRangeValue = null;
-      this.$emit("searchBtnClick", null);
-    },
-    /**
-     * 添加文本框条件
-     */
-    addTextExp(colValue) {
-      if (this.textValue) {
-        this.addExpValue(colValue, this.textValue);
-        this.textValue = "";
-      }
-      this.$emit("searchBtnClick", null);
-    },
-    /**
-     * 添加数字范围条件
-     */
-    addNumberRangeExp(colValue) {
-      this.addExpValue(colValue, {
-        min: this.numberRangeValue.min,
-        max: this.numberRangeValue.max,
-      });
-      this.numberRangeValue.min = 0;
-      this.numberRangeValue.max = 0;
-    },
-    addExpValue(colValue, dateString) {
-      let valueLength = colValue.values.length;
-      let lastValueIndex = -1;
-      if (valueLength > 0) {
-        lastValueIndex = colValue.values[valueLength - 1].valueIndex;
-      }
-      let newValueIndex = lastValueIndex + 1;
-      let newValueKey = colValue.field + "_" + newValueIndex;
-      let newAddValue = {
-        key: newValueKey,
-        value: dateString,
-        valueIndex: newValueIndex,
-        visible: false,
-      };
-      colValue.values.push(newAddValue);
-    },
-    /**
-     * 输入框点击事件
-     */
-    inputDivClick(colValue) {
-      this.$refs["pulldown_" + colValue.field][0].togglePanel();
-      let vm = this;
-      let lastInputValue = colValue.values[colValue.values.length - 1];
-      setTimeout(() => {
-        vm.$refs[lastInputValue.key][0].focus();
-      }, 10);
-    },
-    remoteDropSearch(value) {
-      console.debug(value);
-    },
-    remoteDropdownVisibleChange(open) {
-      console.debug(open);
-    },
-    /**
-     * 下拉面板隐藏事件
-     */
-    pulldownHiden(colValue) {
-      let currentValues = colValue.values;
-      for (let i = 0; i < currentValues.length; i++) {
-        currentValues[i].title = this.getValueTitle(
-          currentValues[i].value,
-          colValue.controlType
-        );
-      }
-    },
-    /**
-     * 列添加条件
-     */
-    addColExp(colValue) {
-      let valueLength = colValue.values.length;
-      let lastValueIndex = colValue.values[valueLength - 1].valueIndex;
-      let newValueIndex = lastValueIndex + 1;
-      let newValueKey = colValue.field + "_" + newValueIndex;
-      let newAddValue = {
-        key: newValueKey,
-        value: this.getDefaultValue(colValue.controlType),
-        title: "",
-        valueIndex: newValueIndex,
-      };
-      colValue.values.push(newAddValue);
-      let vm = this;
-      setTimeout(() => {
-        vm.$refs[newAddValue.key][0].focus();
-      }, 10);
-    },
-    getDefaultValue(inControlType) {
-      if (
-        inControlType === controlType.daterange ||
-        inControlType === controlType.dropmulti
-      ) {
-        return [];
-      } else if (inControlType === controlType.numberrange) {
-        return { min: null, max: null };
-      } else {
-        return "";
-      }
-    },
-    clearExp(colValue, colValueIndex) {
-      if (colValue.values.length <= 1) {
-        return;
-      }
-      colValue.values.splice(colValueIndex, 1);
-    },
-    getValueTitle(colValue, inControlType) {
-      let tempTitle = "";
-      if (inControlType === controlType.daterange) {
-        tempTitle = colValue[0] + "到" + colValue[1];
-      } else if (inControlType === controlType.numberrange) {
-        tempTitle = colValue.min + "到" + colValue.max;
-      } else {
-        tempTitle = colValue;
-      }
-      return tempTitle;
-    },
-    /**
-     * 临时调用兼容C#，以后会剔除
-     */
-    getTempExp() {
-      let tempAndExps = [];
-      for (let loopProp in this.internalCols) {
-        let tempControlType = this.internalCols[loopProp].controlType;
-        let tempExp = "";
-        if (tempControlType === controlType.text) {
-          // 文本框
-          for (let i = 0; i < this.internalCols[loopProp].values.length; i++) {
-            if (i == 0) {
-              tempExp = tempExp + " ( ";
-            }
-            tempExp =
-              tempExp +
-              loopProp +
-              '.contains("' +
-              this.internalCols[loopProp].values[i].value +
-              '")';
-            if (i < this.internalCols[loopProp].values.length - 1) {
-              tempExp = tempExp + " or ";
-            } else {
-              tempExp = tempExp + " ) ";
-            }
-          }
-        } else if (tempControlType === controlType.date) {
-          //日期
-          console.debug(this.internalCols[loopProp]);
-          for (let i = 0; i < this.internalCols[loopProp].values.length; i++) {
-            if (i == 0) {
-              tempExp = tempExp + " ( ";
-            }
-            tempExp =
-              tempExp +
-              loopProp +
-              ' = "' +
-              this.internalCols[loopProp].values[i].value +
-              '"';
-            if (i < this.internalCols[loopProp].values.length - 1) {
-              tempExp = tempExp + " or ";
-            } else {
-              tempExp = tempExp + " ) ";
-            }
-          }
-        } else if (tempControlType === controlType.daterange) {
-          //日期范围
-          console.debug(this.internalCols[loopProp]);
-          for (let i = 0; i < this.internalCols[loopProp].values.length; i++) {
-            if (i == 0) {
-              tempExp = tempExp + " ( ";
-            }
-            tempExp =
-              tempExp +
-              "(" +
-              loopProp +
-              ' >= "' +
-              this.internalCols[loopProp].values[i].value[0] +
-              '" and ' +
-              loopProp +
-              '<="' +
-              this.internalCols[loopProp].values[i].value[1] +
-              '")';
-
-            if (i < this.internalCols[loopProp].values.length - 1) {
-              tempExp = tempExp + " or ";
-            } else {
-              tempExp = tempExp + " ) ";
-            }
-          }
-        } else if (tempControlType === controlType.dropmulti) {
-          //下拉多选
-          for (let i = 0; i < this.internalCols[loopProp].values.length; i++) {
-            if (i == 0) {
-              tempExp = tempExp + " ( ";
-            }
-            tempExp =
-              tempExp +
-              loopProp +
-              ' = "' +
-              this.internalCols[loopProp].values[i] +
-              '"';
-            if (i < this.internalCols[loopProp].values.length - 1) {
-              tempExp = tempExp + " or ";
-            } else {
-              tempExp = tempExp + " ) ";
-            }
-          }
-        }
-
-        if (tempExp) {
-          tempAndExps.push(tempExp);
-        }
-      }
-      let tempStr = "";
-      for (let i = 0; i < tempAndExps.length; i++) {
-        tempStr = tempStr + " ( " + tempAndExps[i] + " ) ";
-        if (i < tempAndExps.length - 1) {
-          tempStr = tempStr + " and ";
-        }
-      }
-      return tempStr;
-    },
-    getExpTags() {
-      //构造查询条件
-      let returnExp = {
-        operator: "and",
-        expressions: [],
-      };
-      for (let loopProp in this.internalCols) {
-        let tempExpTag = {
-          expressions: [],
-          operator: "or",
-        };
-        let tempControlType = this.internalCols[loopProp].controlType;
-        let tempIsAddTime = this.internalCols[loopProp].isAddTime;
-        for (let i = 0; i < this.internalCols[loopProp].values.length; i++) {
-          let tempValue = this.internalCols[loopProp].values[i];
-          if (tempControlType === controlType.text) {
-            // 文本框
-            tempExpTag.expressions.push({
-              field: loopProp,
-              operator: "CO",
-              value: tempValue.value,
-            });
-          } else if (tempControlType === controlType.date) {
-            //日期
-            if (tempExpTag.value) {
-              tempExpTag.value.push(tempValue.value);
-            } else {
-              tempExpTag.value = [tempValue.value];
-              tempExpTag.operator = "IN";
-              tempExpTag.field = loopProp;
-            }
-          } else if (tempControlType === controlType.numberrange) {
-            // 数字范围
-            tempExpTag.expressions.push({
-              field: loopProp,
-              operator: "RA",
-              value: [tempValue.value.min, tempValue.value.max],
-            });
-          } else if (tempControlType === controlType.daterange) {
-            //日期范围
-            if (tempIsAddTime === true) {
-              tempExpTag.expressions.push({
-                field: loopProp,
-                operator: "RA",
-                value: [
-                  tempValue.value[0] + " 00:00:00",
-                  tempValue.value[1] + " 23:59:59",
-                ],
-              });
-            } else {
-              tempExpTag.expressions.push({
-                field: loopProp,
-                operator: "RA",
-                value: tempValue.value,
-              });
-            }
-          } else if (tempControlType === controlType.dropmulti) {
-            //下拉多选
-            tempExpTag.expressions.push({
-              field: loopProp,
-              operator: "IN",
-              value: this.internalCols[loopProp].values,
-            });
-            break;
-          }
-        }
-        // console.debug(tempExpTag)
-        if (tempExpTag.expressions.length > 0 || tempExpTag.field) {
-          returnExp.expressions.push(tempExpTag);
-        }
-      }
-
-      return returnExp;
-    },
-    /**
-     * 搜索
-     */
-    btnSearchClick() {
-      this.$emit("searchBtnClick", null);
-    },
-    /**
-     * 清空条件
-     */
-    btnClearClick() {
-      for (let loopProp in this.internalCols) {
-        this.internalCols[loopProp].values = [];
-      }
-      this.$emit("searchBtnClick", null);
-    },
-  },
-};
-</script>
-  <style lang="scss" scoped>
-.search-view-items {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  padding: 8px 8px 8px 8px;
-  overflow-y: auto;
-  position: relative;
-  .search-view-item-ghost {
-    visibility: hidden;
-    height: 0;
-    min-height: 0px !important;
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: auto;
-    border: 1px solid #9ad4dc;
-    min-width: 150px;
-    width: 300px;
-    margin-right: 8px;
-    margin-left: 8px;
-    border-radius: 6px;
-  }
-  .search-view-item {
-    width: 300px;
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: auto;
-    margin-top: 0px;
-    margin-right: 8px;
-    margin-bottom: 0px;
-    margin-left: 8px;
-    padding: 6px 8px 6px 8px;
-    min-width: 150px;
-    border-radius: 6px;
-    .search-view-icon {
-      float: left;
-      width: 64px;
-      height: 64px;
-    }
-  }
-}
-.ant-popover-message-title {
-  padding-left: 0 !important;
-}
-.ant-input-group {
-  display: flex;
-}
-.InputNumber {
-  border-radius: 3px;
-  width: 40%;
-}
-// 两个数字input框中间的文本
-.InputNumber-mid {
-  width: 30px;
-  pointer-events: none;
-  background-color: #fff;
-  border: 0;
-  margin: 0 3px;
-}
-// 最外层的input样式
-.input-box {
-  width: 100%;
-  border: 1px solid;
-  min-height: 24px;
-  border-radius: 4px;
-  border-color: rgb(217, 217, 217);
-  padding-left: 5px;
-  line-height: 24px !important;
-}
-// ant tags
-.Tags {
-  min-height: 14px;
-  line-height: 14px;
-  margin-top: 3px;
-}
-// 文本自动换行的ant input组件
-.text-wrap-Tag {
-  min-height: 14px;
-  line-height: 16px;
-  max-width: 100%;
-  letter-spacing: 1px;
-  padding: 2px;
-  text-overflow: ellipsis !important;
-  white-space: normal !important;
-}
-.label-text {
-  line-height: 26px;
-  font-weight: bold;
-}
-</style>
+<template>
+  <div>
+    <div class="search-view-items">
+      <div
+        class="search-view-item"
+        v-for="(loopColValue, loopColKey) in internalCols"
+        :key="loopColKey"
+      >
+        <div style="position: absolute" class="label-text">
+          {{ loopColValue.title }}
+        </div>
+        <!-- 下拉多选 -->
+        <div v-if="loopColValue.controlType === controlType.dropmulti">
+          <Select
+            mode="multiple"
+            :size="controlSize"
+            placeholder="请选择"
+            @change="dropChange"
+            v-model="loopColValue.values"
+            style="
+              width: 100%;
+              padding-left: 80px;
+              min-height: 24px;
+              border-radius: 4px;
+              border-color: rgb(217, 217, 217);
+            "
+          >
+            <SelectOption
+              v-for="loopSource in loopColValue.dataSource"
+              :key="loopSource.value"
+            >
+              {{ loopSource.caption }}
+            </SelectOption>
+          </Select>
+        </div>
+        <!-- 远程下拉多选 -->
+        <div v-if="loopColValue.controlType === controlType.remotedropmulti">
+          <Select
+            mode="multiple"
+            :filter-option="false"
+            :size="controlSize"
+            placeholder="请选择"
+            v-model="loopColValue.values"
+            @search="remoteDropSearch"
+            :not-found-content="fetching ? undefined : null"
+            @dropdownVisibleChange="remoteDropdownVisibleChange"
+            style="
+              width: 100%;
+              padding-left: 80px;
+              min-height: 24px;
+              border-radius: 4px;
+              border-color: rgb(217, 217, 217);
+            "
+          >
+          </Select>
+        </div>
+        <!-- 日期范围选择 -->
+        <div v-else-if="loopColValue.controlType === controlType.daterange">
+          <div style="padding-left: 80px">
+            <div class="input-box">
+              <span
+                v-for="(loopValue, loopValueIndex) in loopColValue.values"
+                :key="loopValue.key"
+                ><RangePicker
+                  valueFormat="YYYY-MM-DD"
+                  v-model="loopValue.value"
+                  ><Tag
+                    closable
+                    class="Tags"
+                    @close="
+                      closeTagPreventDefault(
+                        loopColValue,
+                        loopValueIndex,
+                        $event
+                      )
+                    "
+                  >
+                    {{ loopValue.value[0] }}到{{ loopValue.value[1] }}
+                  </Tag></RangePicker
+                ></span
+              >
+              <!-- 循环结束的位置 -->
+              <RangePicker
+                valueFormat="YYYY-MM-DD"
+                v-model="dateRangeValue"
+                @change="
+                  (date, dateString) =>
+                    dateRangeChange(loopColValue, date, dateString)
+                "
+                ><Icon
+                  type="plus"
+                  style="color: #1890ff; cursor: pointer"
+                ></Icon
+              ></RangePicker>
+            </div>
+          </div>
+        </div>
+        <!-- 日期选择 -->
+        <div v-else-if="loopColValue.controlType === controlType.date">
+          <div style="padding-left: 80px">
+            <div class="input-box">
+              <span
+                v-for="(loopValue, loopValueIndex) in loopColValue.values"
+                :key="loopValue.key"
+                ><DatePicker
+                  valueFormat="YYYY-MM-DD"
+                  v-model="loopValue.value"
+                  ><Tag
+                    closable
+                    class="Tags"
+                    @close="
+                      closeTagPreventDefault(
+                        loopColValue,
+                        loopValueIndex,
+                        $event
+                      )
+                    "
+                    >{{ loopValue.value }}</Tag
+                  ></DatePicker
+                ></span
+              >
+              <!-- 内容循环结束 -->
+              <DatePicker
+                valueFormat="YYYY-MM-DD"
+                v-model="dateValue"
+                @change="
+                  (date, dateString) =>
+                    datePickerChange(loopColValue, date, dateString)
+                "
+              >
+                <Icon
+                  type="plus"
+                  style="color: #1890ff; cursor: pointer"
+                ></Icon>
+              </DatePicker>
+            </div>
+          </div>
+        </div>
+        <!-- 字符串文本框输入 -->
+        <div v-else-if="loopColValue.controlType === controlType.text">
+          <div style="padding-left: 80px">
+            <div class="input-box">
+              <span
+                v-for="(loopValue, loopValueIndex) in loopColValue.values"
+                :key="loopValue.key"
+                style="max-width: 96%; margin-top: 2px; display: inline-block"
+              >
+                <Popconfirm
+                  placement="bottom"
+                  @confirm="textEditEnter(loopValue)"
+                  v-model="loopValue.visible"
+                  @visibleChange="
+                    (visible) =>
+                      editPopupVisibleChange(
+                        loopColKey,
+                        loopValue,
+                        loopValueIndex,
+                        visible
+                      )
+                  "
+                >
+                  <Tag
+                    class="text-wrap-Tag"
+                    closable
+                    @close="
+                      closeTagPreventDefault(
+                        loopColValue,
+                        loopValueIndex,
+                        $event
+                      )
+                    "
+                    >{{ loopValue.value }}</Tag
+                  >
+                  <template slot="icon">
+                    <Input
+                      @pressEnter="textEditEnter(loopValue)"
+                      :ref="loopColKey + '_edit_' + loopValueIndex"
+                      v-model="textValue"
+                    ></Input>
+                  </template>
+                </Popconfirm>
+              </span>
+              <!-- 输入框内容循环结尾 -->
+              <Popconfirm
+                placement="bottom"
+                v-model="loopColValue.popupAddVisible"
+                @visibleChange="
+                  (visible) => addPopupVisibleChange(loopColKey, visible)
+                "
+                @confirm="addTextExp(loopColValue)"
+              >
+                <template slot="icon">
+                  <Input
+                    :ref="loopColKey + '_add'"
+                    v-model="textValue"
+                    @pressEnter="textAddEnter(loopColValue)"
+                    style="height: 26px !important"
+                  ></Input>
+                </template>
+                <Icon
+                  type="plus"
+                  style="color: #1890ff; cursor: pointer"
+                ></Icon>
+              </Popconfirm>
+            </div>
+          </div>
+        </div>
+        <!-- 数字范围 -->
+        <div v-else-if="loopColValue.controlType === controlType.numberrange">
+          <div style="padding-left: 80px">
+            <div class="input-box">
+              <span
+                v-for="(loopValue, loopValueIndex) in loopColValue.values"
+                :key="loopValue.key"
+              >
+                <Popconfirm
+                  placement="bottom"
+                  @confirm="numberRangeEditMaxEnter(loopValue)"
+                  @visibleChange="
+                    (visible) =>
+                      editNumberRangeVisibleChange(
+                        loopColKey,
+                        loopValue,
+                        loopValueIndex,
+                        visible
+                      )
+                  "
+                  v-model="loopValue.visible"
+                >
+                  <Tag
+                    class="Tags"
+                    closable
+                    @close="
+                      closeTagPreventDefault(
+                        loopColValue,
+                        loopValueIndex,
+                        $event
+                      )
+                    "
+                    >{{ loopValue.value.min }}到{{ loopValue.value.max }}</Tag
+                  >
+                  <template slot="icon">
+                    <InputGroup style="width: 260px" compact>
+                      <InputNumber
+                        :precision="0"
+                        :ref="loopColKey + '_edit_' + loopValueIndex"
+                        @pressEnter="
+                          numberRangeEditMinEnter(loopColKey, loopValueIndex)
+                        "
+                        class="InputNumber"
+                        v-model="numberRangeValue.min"
+                        placeholder="最小"
+                      /><br />
+                      <Input
+                        class="InputNumber-mid"
+                        placeholder="~"
+                        disabled
+                      />
+                      <InputNumber
+                        :precision="0"
+                        class="InputNumber"
+                        :ref="loopColKey + '_edit_' + loopValueIndex + '_max'"
+                        @pressEnter="numberRangeEditMaxEnter(loopValue)"
+                        v-model="numberRangeValue.max"
+                        placeholder="最大"
+                      />
+                    </InputGroup>
+                  </template>
+                </Popconfirm>
+              </span>
+              <!-- 标签循环结束 -->
+              <Popconfirm
+                placement="bottom"
+                v-model="loopColValue.popupAddVisible"
+                @visibleChange="
+                  (visible) => addPopupVisibleChange(loopColKey, visible)
+                "
+                @confirm="addNumberRangeExp(loopColValue)"
+              >
+                <template slot="icon">
+                  <InputGroup>
+                    <InputNumber
+                      :ref="loopColKey + '_add'"
+                      :precision="0"
+                      class="InputNumber"
+                      v-model="numberRangeValue.min"
+                      placeholder="最小"
+                    />
+                    <Input
+                      class="InputNumber-mid"
+                      placeholder="~"
+                      disabled
+                    />
+                    <InputNumber
+                      :ref="loopColKey + '_add_max'"
+                      class="InputNumber"
+                      :precision="0"
+                      v-model="numberRangeValue.max"
+                      placeholder="最大"
+                    />
+                  </InputGroup>
+                </template>
+                <Icon
+                  type="plus"
+                  style="color: #1890ff; cursor: pointer"
+                ></Icon>
+              </Popconfirm>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="search-view-item">
+        <Button type="primary" size="small" @click="btnSearchClick">
+          搜索
+        </Button>
+        <Button size="small" @click="btnClearClick" style="margin-left: 5px">
+          清空
+        </Button>
+        <slot name="otherButtons"></slot>
+      </div>
+      <div class="search-view-item-ghost"></div>
+      <div class="search-view-item-ghost"></div>
+      <div class="search-view-item-ghost"></div>
+      <div class="search-view-item-ghost"></div>
+      <div class="search-view-item-ghost"></div>
+      <div class="search-view-item-ghost"></div>
+      <div class="search-view-item-ghost"></div>
+      <div class="search-view-item-ghost"></div>
+    </div>
+    <div></div>
+  </div>
+</template>
+  
+<script>
+import {
+  Button,
+  Icon,
+  Select,
+  SelectOption,
+  Tag,
+  DatePicker,
+  InputGroup,
+  Input,
+  InputNumber,
+  Popconfirm,
+} from 'ant-design-vue'
+import { controlType } from "../../utils/enum";
+import moment from "moment";
+import { mapGetters } from "vuex";
+export default {
+  name: "BaseSearch",
+  components: {
+    Button,
+    Icon,
+    Select,
+    SelectOption: Select.Option,
+    Tag,
+    DatePicker,
+    RangePicker: DatePicker.RangePicker,
+    Input,
+    InputGroup: Input.Group,
+    InputNumber,
+    Popconfirm,
+  },
+  computed: {
+    ...mapGetters(["controlSize"]),
+    visibleBtns() {
+      return this.internalBtns.filter((filterItem) => {
+        return filterItem.isShow === true;
+      });
+    },
+  },
+  data() {
+    return {
+      tempVisible: false,
+      moment,
+      controlType: controlType,
+      searchRow: {},
+      dropFields: [],
+      testVisible: true,
+      numberRangeValue: { min: 0, max: 0 },
+      textValue: "",
+      dateRangeValue: [],
+      dateValue: null,
+      expCols: [],
+      waitingSelectLeave: false, //是否等待选择框离开
+      internalCols: {}, //搜索字段信息
+    };
+  },
+  props: {
+    searchCols: {
+      //搜索框列集合
+      type: Array,
+      default: () => {
+        return [];
+      },
+      deep: true,
+    },
+    btns: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  watch: {},
+  created() {
+    let tempCols = {};
+    for (let colProp in this.searchCols) {
+      let tempSearchCol = this.searchCols[colProp];
+      if (tempSearchCol.visible === false) {
+        continue;
+      }
+      let tempValues = [];
+      if (
+        tempSearchCol.defaultValues &&
+        tempSearchCol.defaultValues.length > 0
+      ) {
+        for (let j = 0; j < tempSearchCol.defaultValues.length; j++) {
+          if (tempSearchCol.controlType === controlType.dropmulti) {
+            tempValues.push(tempSearchCol.defaultValues[j]);
+          } else {
+            tempValues.push({
+              key: colProp + "_" + j,
+              title: this.getValueTitle(
+                tempSearchCol.defaultValues[j],
+                tempSearchCol.controlType
+              ),
+              valueIndex: j,
+              value: tempSearchCol.defaultValues[j],
+            });
+          }
+        }
+      }
+      //赋值属性，防止页面不渲染，没有绑定到页面
+      this.$set(tempSearchCol, "popupAddVisible", false);
+      this.$set(tempSearchCol, "values", tempValues);
+      this.$set(this.internalCols, tempSearchCol.field, tempSearchCol);
+    }
+  },
+  mounted() {},
+  methods: {
+    dropChange() {
+      this.$emit("searchBtnClick", null);
+    },
+    editNumberRangeVisibleChange(editKey, originValue, valueIndex, visible) {
+      if (visible === true) {
+        let vm = this;
+        this.numberRangeValue.min = originValue.value.min;
+        this.numberRangeValue.max = originValue.value.max;
+        setTimeout(() => {
+          vm.$refs[editKey + "_edit_" + valueIndex][0].focus();
+          vm.$refs[editKey + "_edit_" + valueIndex][0].$el
+            .getElementsByTagName("input")[0]
+            .select();
+        }, 10);
+      }
+    },
+    editPopupVisibleChange(editKey, originValue, valueIndex, visible) {
+      if (visible === true) {
+        let vm = this;
+        this.textValue = originValue.value;
+        setTimeout(() => {
+          console.debug(vm.$refs[editKey + "_edit_" + valueIndex][0]);
+          vm.$refs[editKey + "_edit_" + valueIndex][0].$el.focus();
+          vm.$refs[editKey + "_edit_" + valueIndex][0].$el.select();
+        }, 10);
+      }
+    },
+    addPopupVisibleChange(addKey, visible) {
+      if (visible === true) {
+        this.textValue = "";
+        let vm = this;
+        setTimeout(() => {
+          vm.$refs[addKey + "_add"][0].$el.focus();
+        }, 50);
+      }
+    },
+    textAddEnter(colValue) {
+      if (this.textValue) {
+        colValue.popupAddVisible = false;
+        this.addExpValue(colValue, this.textValue);
+        this.textValue = "";
+      }
+      this.$emit("searchBtnClick", null);
+    },
+    textEditEnter(valueInfo) {
+      if (this.textValue) {
+        valueInfo.visible = false;
+        valueInfo.value = this.textValue;
+        this.textValue = "";
+      }
+      this.$emit("searchBtnClick", null);
+    },
+    numberRangeEditMinEnter(loopColKey, loopValueIndex) {
+      let maxKey = loopColKey + "_edit_" + loopValueIndex + "_max";
+      this.$refs[maxKey][0].focus();
+      this.$refs[maxKey][0].$el.getElementsByTagName("input")[0].select();
+    },
+    numberRangeEditMaxEnter(valueInfo) {
+      valueInfo.visible = false;
+      valueInfo.value.min = this.numberRangeValue.min;
+      valueInfo.value.max = this.numberRangeValue.max;
+      this.numberRangeValue.min = 0;
+      this.numberRangeValue.max = 0;
+    },
+    showMoreFilter() {
+      for (let loopKey in this.internalCols) {
+        this.internalCols[loopKey].visible = true;
+      }
+    },
+    testClick() {
+      this.$refs.testConfirm[0].setVisible(false);
+    },
+    closeTagPreventDefault(colValue, valueIndex, event) {
+      colValue.values.splice(valueIndex, 1);
+      event.preventDefault();
+      this.$emit("searchBtnClick", null);
+    },
+    /**
+     * 日期改变事件
+     */
+    datePickerChange(colValue, date, dateString) {
+      this.addExpValue(colValue, dateString);
+      this.dateValue = null;
+      this.$emit("searchBtnClick", null);
+    },
+    /**
+     * 日期范围改变事件
+     */
+    dateRangeChange(colValue, date, dateString) {
+      this.addExpValue(colValue, dateString);
+      this.dateRangeValue = null;
+      this.$emit("searchBtnClick", null);
+    },
+    /**
+     * 添加文本框条件
+     */
+    addTextExp(colValue) {
+      if (this.textValue) {
+        this.addExpValue(colValue, this.textValue);
+        this.textValue = "";
+      }
+      this.$emit("searchBtnClick", null);
+    },
+    /**
+     * 添加数字范围条件
+     */
+    addNumberRangeExp(colValue) {
+      this.addExpValue(colValue, {
+        min: this.numberRangeValue.min,
+        max: this.numberRangeValue.max,
+      });
+      this.numberRangeValue.min = 0;
+      this.numberRangeValue.max = 0;
+    },
+    addExpValue(colValue, dateString) {
+      let valueLength = colValue.values.length;
+      let lastValueIndex = -1;
+      if (valueLength > 0) {
+        lastValueIndex = colValue.values[valueLength - 1].valueIndex;
+      }
+      let newValueIndex = lastValueIndex + 1;
+      let newValueKey = colValue.field + "_" + newValueIndex;
+      let newAddValue = {
+        key: newValueKey,
+        value: dateString,
+        valueIndex: newValueIndex,
+        visible: false,
+      };
+      colValue.values.push(newAddValue);
+    },
+    /**
+     * 输入框点击事件
+     */
+    inputDivClick(colValue) {
+      this.$refs["pulldown_" + colValue.field][0].togglePanel();
+      let vm = this;
+      let lastInputValue = colValue.values[colValue.values.length - 1];
+      setTimeout(() => {
+        vm.$refs[lastInputValue.key][0].focus();
+      }, 10);
+    },
+    remoteDropSearch(value) {
+      console.debug(value);
+    },
+    remoteDropdownVisibleChange(open) {
+      console.debug(open);
+    },
+    /**
+     * 下拉面板隐藏事件
+     */
+    pulldownHiden(colValue) {
+      let currentValues = colValue.values;
+      for (let i = 0; i < currentValues.length; i++) {
+        currentValues[i].title = this.getValueTitle(
+          currentValues[i].value,
+          colValue.controlType
+        );
+      }
+    },
+    /**
+     * 列添加条件
+     */
+    addColExp(colValue) {
+      let valueLength = colValue.values.length;
+      let lastValueIndex = colValue.values[valueLength - 1].valueIndex;
+      let newValueIndex = lastValueIndex + 1;
+      let newValueKey = colValue.field + "_" + newValueIndex;
+      let newAddValue = {
+        key: newValueKey,
+        value: this.getDefaultValue(colValue.controlType),
+        title: "",
+        valueIndex: newValueIndex,
+      };
+      colValue.values.push(newAddValue);
+      let vm = this;
+      setTimeout(() => {
+        vm.$refs[newAddValue.key][0].focus();
+      }, 10);
+    },
+    getDefaultValue(inControlType) {
+      if (
+        inControlType === controlType.daterange ||
+        inControlType === controlType.dropmulti
+      ) {
+        return [];
+      } else if (inControlType === controlType.numberrange) {
+        return { min: null, max: null };
+      } else {
+        return "";
+      }
+    },
+    clearExp(colValue, colValueIndex) {
+      if (colValue.values.length <= 1) {
+        return;
+      }
+      colValue.values.splice(colValueIndex, 1);
+    },
+    getValueTitle(colValue, inControlType) {
+      let tempTitle = "";
+      if (inControlType === controlType.daterange) {
+        tempTitle = colValue[0] + "到" + colValue[1];
+      } else if (inControlType === controlType.numberrange) {
+        tempTitle = colValue.min + "到" + colValue.max;
+      } else {
+        tempTitle = colValue;
+      }
+      return tempTitle;
+    },
+    /**
+     * 临时调用兼容C#，以后会剔除
+     */
+    getTempExp() {
+      let tempAndExps = [];
+      for (let loopProp in this.internalCols) {
+        let tempControlType = this.internalCols[loopProp].controlType;
+        let tempExp = "";
+        if (tempControlType === controlType.text) {
+          // 文本框
+          for (let i = 0; i < this.internalCols[loopProp].values.length; i++) {
+            if (i == 0) {
+              tempExp = tempExp + " ( ";
+            }
+            tempExp =
+              tempExp +
+              loopProp +
+              '.contains("' +
+              this.internalCols[loopProp].values[i].value +
+              '")';
+            if (i < this.internalCols[loopProp].values.length - 1) {
+              tempExp = tempExp + " or ";
+            } else {
+              tempExp = tempExp + " ) ";
+            }
+          }
+        } else if (tempControlType === controlType.date) {
+          //日期
+          console.debug(this.internalCols[loopProp]);
+          for (let i = 0; i < this.internalCols[loopProp].values.length; i++) {
+            if (i == 0) {
+              tempExp = tempExp + " ( ";
+            }
+            tempExp =
+              tempExp +
+              loopProp +
+              ' = "' +
+              this.internalCols[loopProp].values[i].value +
+              '"';
+            if (i < this.internalCols[loopProp].values.length - 1) {
+              tempExp = tempExp + " or ";
+            } else {
+              tempExp = tempExp + " ) ";
+            }
+          }
+        } else if (tempControlType === controlType.daterange) {
+          //日期范围
+          console.debug(this.internalCols[loopProp]);
+          for (let i = 0; i < this.internalCols[loopProp].values.length; i++) {
+            if (i == 0) {
+              tempExp = tempExp + " ( ";
+            }
+            tempExp =
+              tempExp +
+              "(" +
+              loopProp +
+              ' >= "' +
+              this.internalCols[loopProp].values[i].value[0] +
+              '" and ' +
+              loopProp +
+              '<="' +
+              this.internalCols[loopProp].values[i].value[1] +
+              '")';
+
+            if (i < this.internalCols[loopProp].values.length - 1) {
+              tempExp = tempExp + " or ";
+            } else {
+              tempExp = tempExp + " ) ";
+            }
+          }
+        } else if (tempControlType === controlType.dropmulti) {
+          //下拉多选
+          for (let i = 0; i < this.internalCols[loopProp].values.length; i++) {
+            if (i == 0) {
+              tempExp = tempExp + " ( ";
+            }
+            tempExp =
+              tempExp +
+              loopProp +
+              ' = "' +
+              this.internalCols[loopProp].values[i] +
+              '"';
+            if (i < this.internalCols[loopProp].values.length - 1) {
+              tempExp = tempExp + " or ";
+            } else {
+              tempExp = tempExp + " ) ";
+            }
+          }
+        }
+
+        if (tempExp) {
+          tempAndExps.push(tempExp);
+        }
+      }
+      let tempStr = "";
+      for (let i = 0; i < tempAndExps.length; i++) {
+        tempStr = tempStr + " ( " + tempAndExps[i] + " ) ";
+        if (i < tempAndExps.length - 1) {
+          tempStr = tempStr + " and ";
+        }
+      }
+      return tempStr;
+    },
+    getExpTags() {
+      //构造查询条件
+      let returnExp = {
+        operator: "and",
+        expressions: [],
+      };
+      for (let loopProp in this.internalCols) {
+        let tempExpTag = {
+          expressions: [],
+          operator: "or",
+        };
+        let tempControlType = this.internalCols[loopProp].controlType;
+        let tempIsAddTime = this.internalCols[loopProp].isAddTime;
+        for (let i = 0; i < this.internalCols[loopProp].values.length; i++) {
+          let tempValue = this.internalCols[loopProp].values[i];
+          if (tempControlType === controlType.text) {
+            // 文本框
+            tempExpTag.expressions.push({
+              field: loopProp,
+              operator: "CO",
+              value: tempValue.value,
+            });
+          } else if (tempControlType === controlType.date) {
+            //日期
+            if (tempExpTag.value) {
+              tempExpTag.value.push(tempValue.value);
+            } else {
+              tempExpTag.value = [tempValue.value];
+              tempExpTag.operator = "IN";
+              tempExpTag.field = loopProp;
+            }
+          } else if (tempControlType === controlType.numberrange) {
+            // 数字范围
+            tempExpTag.expressions.push({
+              field: loopProp,
+              operator: "RA",
+              value: [tempValue.value.min, tempValue.value.max],
+            });
+          } else if (tempControlType === controlType.daterange) {
+            //日期范围
+            if (tempIsAddTime === true) {
+              tempExpTag.expressions.push({
+                field: loopProp,
+                operator: "RA",
+                value: [
+                  tempValue.value[0] + " 00:00:00",
+                  tempValue.value[1] + " 23:59:59",
+                ],
+              });
+            } else {
+              tempExpTag.expressions.push({
+                field: loopProp,
+                operator: "RA",
+                value: tempValue.value,
+              });
+            }
+          } else if (tempControlType === controlType.dropmulti) {
+            //下拉多选
+            tempExpTag.expressions.push({
+              field: loopProp,
+              operator: "IN",
+              value: this.internalCols[loopProp].values,
+            });
+            break;
+          }
+        }
+        // console.debug(tempExpTag)
+        if (tempExpTag.expressions.length > 0 || tempExpTag.field) {
+          returnExp.expressions.push(tempExpTag);
+        }
+      }
+
+      return returnExp;
+    },
+    /**
+     * 搜索
+     */
+    btnSearchClick() {
+      this.$emit("searchBtnClick", null);
+    },
+    /**
+     * 清空条件
+     */
+    btnClearClick() {
+      for (let loopProp in this.internalCols) {
+        this.internalCols[loopProp].values = [];
+      }
+      this.$emit("searchBtnClick", null);
+    },
+  },
+};
+</script>
+  <style lang="scss" scoped>
+.search-view-items {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  padding: 8px 8px 8px 8px;
+  overflow-y: auto;
+  position: relative;
+  .search-view-item-ghost {
+    visibility: hidden;
+    height: 0;
+    min-height: 0px !important;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    border: 1px solid #9ad4dc;
+    min-width: 150px;
+    width: 300px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 6px;
+  }
+  .search-view-item {
+    width: 300px;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    margin-top: 0px;
+    margin-right: 8px;
+    margin-bottom: 0px;
+    margin-left: 8px;
+    padding: 6px 8px 6px 8px;
+    min-width: 150px;
+    border-radius: 6px;
+    .search-view-icon {
+      float: left;
+      width: 64px;
+      height: 64px;
+    }
+  }
+}
+.ant-popover-message-title {
+  padding-left: 0 !important;
+}
+.ant-input-group {
+  display: flex;
+}
+.InputNumber {
+  border-radius: 3px;
+  width: 40%;
+}
+// 两个数字input框中间的文本
+.InputNumber-mid {
+  width: 30px;
+  pointer-events: none;
+  background-color: #fff;
+  border: 0;
+  margin: 0 3px;
+}
+// 最外层的input样式
+.input-box {
+  width: 100%;
+  border: 1px solid;
+  min-height: 24px;
+  border-radius: 4px;
+  border-color: rgb(217, 217, 217);
+  padding-left: 5px;
+  line-height: 24px !important;
+}
+// ant tags
+.Tags {
+  min-height: 14px;
+  line-height: 14px;
+  margin-top: 3px;
+}
+// 文本自动换行的ant input组件
+.text-wrap-Tag {
+  min-height: 14px;
+  line-height: 16px;
+  max-width: 100%;
+  letter-spacing: 1px;
+  padding: 2px;
+  text-overflow: ellipsis !important;
+  white-space: normal !important;
+}
+.label-text {
+  line-height: 26px;
+  font-weight: bold;
+}
+</style>