parking/src/components/table/comSearch/index.vue

<template>
  <transition name="el-fade-in">
    <div class="table-com-search">
      <el-form @keyup.enter="onComSearch" label-position="top" :model="baTable.comSearch.form">
        <el-row>
          <template v-for="(item, idx) in baTable.table.column" :key="idx">
            <template v-if="item.operator !== false">
              <el-col v-if="item.render == 'datetime' && (item.operator == 'RANGE' || item.operator == 'NOT RANGE')"
                      :span="8">
                <div class="com-search-col mt-20 flex justify-flex-start">
                  <div class="com-search-col-label ">{{ item.label }}:</div>
                  <div class="com-search-col-input-range">
                    <el-date-picker
                      class="datetime-picker"
                      v-model="baTable.comSearch.form[item.prop!]"
                      :default-value="baTable.comSearch.form[item.prop! + '-default'] ? baTable.comSearch.form[item.prop! + '-default']:[new Date(), new Date()]"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="YYYY-MM-DD HH:mm:ss"
                    />
                  </div>
                </div>
              </el-col>
              <el-col
                v-else-if="item.render == 'dateType' && (item.operator == 'RANGE' || item.operator == 'NOT RANGE')"
                :span="8">
                <div class="com-search-col mt-20 flex justify-flex-start">
                  <div class="com-search-col-label ">{{ item.label }}:</div>
                  <div class="com-search-col-input-range">
                    <el-date-picker
                      class="datetime-picker"
                      v-model="baTable.comSearch.form[item.prop!]"
                      :default-value="baTable.comSearch.form[item.prop! + '-default'] ? baTable.comSearch.form[item.prop! + '-default']:[new Date(), new Date()]"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="YYYY-MM-DD"
                    />
                  </div>
                </div>
              </el-col>
              <el-col v-else :span="8">
                <div class="com-search-col mt-20 flex justify-flex-start">
                  <div class="com-search-col-label">{{ item.label }}:</div>
                  <div v-if="item.operator == 'RANGE' || item.operator == 'NOT RANGE'"
                       class="com-search-col-input-range">
                    <el-input
                      :placeholder="item.operatorPlaceholder"
                      type="string"
                      v-model="baTable.comSearch.form[item.prop! + '-start']"
                    ></el-input>
                    <div class="range-separator">{{ $t("to") }}</div>
                    <el-input
                      :placeholder="item.operatorPlaceholder"
                      type="string"
                      v-model="baTable.comSearch.form[item.prop! + '-end']"
                    ></el-input>
                  </div>
                  <div v-else-if="item.operator == 'NULL' || item.operator == 'NOT NULL'" class="com-search-col-input">
                    <el-checkbox v-model="baTable.comSearch.form[item.prop!]" :label="item.operator"
                                 size="large"></el-checkbox>
                  </div>
                  <div v-else-if="item.operator" class="com-search-col-input">
                    <el-date-picker
                      class="datetime-picker"
                      v-if="item.render == 'datetime'"
                      v-model="baTable.comSearch.form[item.prop!]"
                      type="datetime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      :placeholder="item.operatorPlaceholder"
                      :default-value="baTable.comSearch.form[item.prop! + '-default'] ? baTable.comSearch.form[item.prop! + '-default']:new Date()"
                    ></el-date-picker>
                    <el-select
                      :placeholder="item.operatorPlaceholder"
                      v-else-if="item.render == 'tag'"
                      v-model="baTable.comSearch.form[item.prop!]"
                      :clearable="true"
                      class="w100"
                    >
                      <el-option v-for="(opt, okey) in item.replaceValue" :key="item.prop! + okey" :label="opt"
                                 :value="okey" />
                    </el-select>
                    <el-input
                      :placeholder="item.operatorPlaceholder"
                      v-else
                      type="string"
                      v-model="baTable.comSearch.form[item.prop!]"
                    ></el-input>
                  </div>
                </div>
              </el-col>
            </template>
          </template>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="com-search-col pl-20 mt-20 mr-20 flex justify-flex-end">
              <div class="box">
                <el-button v-blur @click="onComSearch" type="primary">搜索</el-button>
                <el-button @click="onResetForm()">重置</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { inject } from "vue";
import useCurrentInstance from "/@/utils/useCurrentInstance";
import type baTableClass from "/@/utils/baTable";

const { proxy } = useCurrentInstance();

const baTable = inject("baTable") as baTableClass;

const onComSearch = () => {

  let comSearchData: comSearchData[] = [];
  for (const key in baTable.comSearch.form) {

    if (!baTable.comSearch.fieldData.has(key)) {
      continue;
    }
    let val = "";

    let fieldDataTemp = baTable.comSearch.fieldData.get(key);

    if ((fieldDataTemp.render == "datetime" || fieldDataTemp.render == "dateType") && (fieldDataTemp.operator == "RANGE" || fieldDataTemp.operator == "NOT RANGE")) {

      // 时间范围组件返回的是时间数组
      if (baTable.comSearch.form[key] && baTable.comSearch.form[key].length >= 2) {
        // 数组转字符串，以实现通过url参数传递预设搜索值
        val = baTable.comSearch.form[key][0] + "," + baTable.comSearch.form[key][1];
      }
    } else if (fieldDataTemp.operator == "RANGE" || fieldDataTemp.operator == "NOT RANGE") {
      // 普通的范围筛选，baTable在初始化时已准备好start和end字段
      if (!baTable.comSearch.form[key + "-start"] && !baTable.comSearch.form[key + "-end"]) {
        continue;
      }
      val = baTable.comSearch.form[key + "-start"] + "," + baTable.comSearch.form[key + "-end"];
    } else if (baTable.comSearch.form[key]) {
      val = baTable.comSearch.form[key];
    }

    if (val) {
      comSearchData.push({
        field: key,
        val: val,
        operator: fieldDataTemp.operator,
        render: fieldDataTemp.render
      });
    }
  }

  proxy.eventBus.emit("onTableComSearch", comSearchData);
};

const onResetForm = () => {
  // 封装好的onResetForm在此处不能使用
  for (const key in baTable.comSearch.form) {
    baTable.comSearch.form[key] = "";
  }
};
</script>

<style scoped lang="scss">
.table-com-search {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;
  border: 1px solid #f6f6f6;
  border-bottom: none;
  padding: 13px 15px;
  font-size: 14px;

  .com-search-col {
    display: flex;
    align-items: center;
    padding-top: 8px;
    color: var(--color-regular);
    font-size: 13px;
  }

  .com-search-col-label {
    width: 20%;
    padding: 0 15px;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
  }

  .com-search-col-input {
    padding: 0 15px;
    width: 80%;
  }

  .com-search-col-input-range {
    display: flex;
    align-items: center;
    padding: 0 15px;
    width: 80%;

    .range-separator {
      padding: 0 5px;
    }
  }
}

:deep(.datetime-picker) {
  width: 100%;
}

.w16 {
  width: 16.5% !important;
}

.w83 {
  width: 83.5% !important;
}
</style>