doway-coms 1.1.91 → 1.1.92

package/packages/BaseSearch/src/index.vue

@@ -0,0 +1,937 @@
+<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,
+  RangePicker,
+  Tag,
+  DatePicker,
+  Tag,
+  DatePicker,
+  InputGroup,
+  Input,
+  InputNumber,
+} 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,
+    RangePicker,
+    Tag,
+    DatePicker,
+    InputGroup,
+    Input,
+    InputNumber,
+  },
+  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>
+