vue3后台管理系统封装的普通搜索框组件

1.普通搜索框效果

 代码：SearchItem.vue

<template>
  <div class="searchBox" id="searchBox">
    <!-- <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
      @finish="handleSearch" :label-col="labelCol" :wrapper-col="wrapperCol"> -->
    <a-form
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      autocomplete="off"
      layout="inline"
      :model="formState"
      @finish="handleSearch"
    >
      <!-- <a-row :gutter="24"> -->
      <template v-for="(item, index) in searchitemList" :key="index">
        <!-- <a-col v-show="expand || index < 7" :md="12" :lg="item.type === 'rangeDate' ? 9 : 4"
            :xl="item.type === 'rangeDate' ? 7 : 3"> -->

        <div v-if="item.type === 'selctone'" style="margin-right: 18px">
          <span>{
   
   { item[`label${selctone}`] }}</span
          ><swap-outlined
            @click.stop="changeleselctone"
            style="color: #1e5bc8"
          />:
          <span>
            <!-- v-model:value="formState[item[`queryName${selctone}`]]" -->
            <a-select
              v-model:value="value"
              show-search
              :placeholder="item[`placeholder${selctone}`]"
              :allowClear="true"
              style="width: 143.33px; margin-left: 10px"
              :default-active-first-option="false"
              :show-arrow="false"
              :filter-option="false"
              :options="data"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              @search="handleSearchone"
              @change="handleSearchoneChange"
              @focus="hadlefocus"
              @popupScroll="lazyLoading"
            >
              <template #dropdownRender="{ menuNode: menu }">
                <v-nodes :vnodes="menu" />
                <div class="nomore" v-show="props.nomore">没有更多数据了~</div>
              </template>
              <!-- <template v-if="props.fetching" #notFoundContent>
                <a-spin size="small" />
              </template> -->
            </a-select>
          </span>
        </div>
        <a-form-item
          v-else
          :label="item.label"
          :name="item.queryName"
          :rules="item.rules"
        >
          <a-input
            v-if="item.type === 'input'"
            :allowClear="true"
            v-model:value="formState[item.queryName]"
            style="width: 143.33px"
            :placeholder="item.placeholder"
            @change="changeSearchKey"
          ></a-input>
          <a-select
            v-if="item.type == 'select'"
            v-bind="item.open"
            :allowClear="!item?.allowClear"
            v-model:value="formState[item.queryName]"
            style="width: 143.33px"
            :placeholder="item.placeholder"
            @change="changeSearchKey"
            @click="hadlefocusmodel(item.queryName)"
            :getPopupContainer="(triggerNode) => triggerNode.parentNode"
          >
            <a-select-option
              v-for="selectItem in item.selectList"
              :key="selectItem.value"
              :value="selectItem.value"
              >{
   
   { selectItem.name }}</a-select-option
            >
          </a-select>
          <a-range-picker
            v-model:value="formState[item.queryName]"
            @change="changeSearchKey"
            style="width: 100%; min-width: 331px"
            v-if="item.type == 'rangeDate'"
            :picker="item.picker"
            :show-time="item.showTime"
            :format="item.format"
            :getPopupContainer="(triggerNode) => triggerNode.parentNode"
          ></a-range-picker>
          <a-time-range-picker
            v-model:value="formState[item.queryName]"
            @change="changeSearchKey"
            style="width: 100%; min-width: 331px"
            v-if="item.type == 'timerangeDate'"
            :format="item.format"
            :getPopupContainer="(triggerNode) => triggerNode.parentNode"
          />

          <a-date-picker
            v-model:value="formState[item.queryName]"
            @change="changeSearchKey"
            style="width: 143.33px"
            v-if="item.type == 'Date'"
            :picker="item.picker"
            :show-time="item.showTime"
            :format="item.format"
            :getPopupContainer="(triggerNode) => triggerNode.parentNode"
          ></a-date-picker>
          <a-tree-select
            v-model:value="formState[item.queryName]"
            show-search
            style="width: 143.33px"
            v-if="item.type === 'treeselect'"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :field-names="{
              children: 'children',
              label: 'title',
              value: 'key',
            }"
            :placeholder="item.placeholder"
            allow-clear
            tree-default-expand-all
            :tree-data="item.treedata"
          >
          </a-tree-select>

          <vagueSelect
            v-if="item.type === 'vagule'"
            :noneedfocus="item?.noneedfocus"
            :apifun="item.apifun"
            :ref="(e) => setvagueRef(e, index)"
            @vaguehandleSearchoneChange="
              (param) => vaguehandleSearchoneChange(param, item.queryName)
            "
            :searchText="item.searchText ? item.searchText : item.queryName"
            :requestParam="item.requestParam ? item.requestParam : {}"
            :searchValue="searchValue"
            :searchKey="searchKey"
          />

          <scrollSelect
            v-if="item.type === 'Tselect'"
            @handleSelectValue="(param) => handleSelectValue(param, item.value)"
            :apifun="item.apifun"
            :requestParam="item.requestParam"
            :param="item.param"
            :data="item.selectList"
            :ref="(e) => (setTSelectRef[index] = e)"
            :disabled="item?.isdisabled"
          />
        </a-form-item>

        <!-- </a-col> -->
      </template>
      <!-- <a-col :span="5" v-if="searchitemList.length<4"> -->
      <!-- <a-col :md="12" :sm="24" :lg="searchitemList.length > 3 ? 6 : 4" class="searchtbnbox"> -->

      <a-form-item class="searchtbnbox">
        <a-button type="primary" html-type="submit" style="margin-bottom: 24px"
          >查询</a-button
        >
        <a-button
          style="margin: 0 8px"
          @click="
            () => {
              formRef.resetFields(), handleReset();
            }
          "
          >重置</a-button
        >
        <!-- <a-button style="margin: 0 8px" @click="handleReset">重置</a-button> -->
        <a
          style="font-size: 12px"
          @click="expand = !expand"
          v-if="searchitemList.length > 5"
        >
          <template v-if="expand">
            <UpOutlined />
          </template>
          <template v-else>
            <DownOutlined />
          </template>
          {
   
   { expand ? "折叠" : "展开" }}
        </a>
      </a-form-item>

      <!-- </a-row> -->
      <!-- <a-row  v-if="searchitemList.length>=4">
        <a-col :span="24" style="text-align: right">
          <a-button type="primary" html-type="submit" style="margin-bottom: 24px;">查询</a-button>
          <a-button style="margin: 0 8px" @click="() => formRef.resetFields()">清除</a-button>
          <a style="font-size: 12px" @click="expand = !expand">
            <template v-if="expand">
              <UpOutlined />
            </template>
            <template v-else>
              <DownOutlined />
            </template>
            {
   
   { expand ? "折叠" : "展开" }}
          </a>
        </a-col>

      </a-row> -->
    </a-form>
  </div>
</template>
<script setup>
import { reactive, ref, unref, nextTick, onMounted, watch } from "vue";
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
import vagueSelect from "./vagueSelect.vue";
import scrollSelect from "./scrollSelect.vue";
import jsonp from "fetch-jsonp";
import qs from "qs";
import { Form } from "ant-design-vue";
const props = defineProps({
  searchitemList: {
    type: Array,
    default: () => [],
  },
  searchValue: {
    type: String,
    default: "",
  },
  searchKey: {
    type: String,
    default: "",
  },

  searchitem: {
    type: Array,
    default: () => {
      return [
        {
          type: "", // 搜索条件类型 input，select，rangeDate,scrollSelect
          label: "", // 搜索条件名称
          val: null, // 值
          rules: [], // 校验规则
          selectList: [], // 下拉框选项
          placeholder: "", // 占位符提示
          queryName: "", // 字段名称
          allowClear: null, // 下拉框是否允许删除选项
          scrollFunc: () => {}, // 'scrollSelect'时，请求接口
          requestAllowClear: false, // 'scrollSelect'时，是否允许清除
          watchParams: true, // 'scrollSelect'时，是否请求的监听参数
          requestParams: {}, // 'scrollSelect'时，请求接口参数
          isAffect: true, // 'scrollSelect'时，选值时是否影响其他scrollSelect的选择
        },
      ];
    },
  },
  data: {
    type: Array,
    default: () => [],
  },
  apifun: {
    type: Function,
    default: () => {},
  },
  nomore: {
    type: Boolean,
    default: false,
  },
  fetching: {
    type: Boolean,
    default: false,
  },
});
const labelCol = {
  style: {
    width: "110px",
    // span: 10,
  },
};
const wrapperCol = {
  span: 16,
};
const expand = ref(false);
const formRef = ref();
let formState = reactive({});
const emits = defineEmits([
  "lazyLoading",
  "handleSearch",
  "handleChangeSearchKey",
  "handleSearchoneChange",
  "handleSearchone",
  "changeleselctone",
]);
//点击查询按钮
const handleSearch = (values) => {
  emits("handleSearch", values);
};

//查询条件元素改变
const changeSearchKey = (value) => {
  console.log(value, "22222222");
  emits("handleChangeSearchKey", value);
};

//2选1 模糊查询
const VNodes = (_, { attrs }) => {
  return attrs.vnodes;
};

const value = ref();
let selctone = ref(1);
const changeleselctone = () => {
  //点击切换图表
  if (selctone.value === 1) {
    selctone.value = 2;
  } else {
    selctone.value = 1;
  }
  value.value = undefined;
  emits("changeleselctone", selctone);
};
const hadlefocus = () => {
  emits("hadlefocus", unref(selctone));
};
const hadlefocusmodel = (hname) => {
  emits("hadlefocusmodel", hname);
};
const handleSearchone = (val) => {
  //模糊输入值
  emits("handleSearchone", unref(selctone), val);
};
const handleSearchoneChange = (val) => {
  //最终选择值
  value.value = val;
  emits("handleSearchoneChange", val);
};
const lazyLoading = (e) => {
  //滚动分页加载
  emits("lazyLoading", e);
};

//普通模糊查询
const vaguehandleSearchoneChange = (param, param2) => {
  formState[param2] = param;
};
//重置按钮，重置2选一数据,重置普通模糊的值
const boxVagueref = ref([]);
const setvagueRef = (el, i) => {
  if (el) {
    boxVagueref.value.push(el);
  }
};
const handleReset = () => {
  changeleselctone();
  boxVagueref.value.map((item) => {
    item?.initdata();
  });
};
const setFormState = (key, value) => {
  formState[key] = value;
};

const setTSelectRef = ref([]);
const handleSelectValue = async (param, param2) => {
  let str = param.key.toString();
  formState.value[param2] = str;
};
watch(
  () => props.searchitemList,
  () => {
    props.searchitemList.forEach((item) => {
      if (item.val) {
        formState[item.queryName] = item.val;
      }
    });
  },
  { deep: true, immediate: true }
);
defineExpose({
  setFormState,
});
</script>
<style lang="less" scoped>
.searchBox {
  background-color: white;
  padding: 18px;
  padding-bottom: 0;

  :deep(.ant-form-item-with-help .ant-form-item-explain) {
    min-height: 0;
  }

  :deep(.ant-form-item-explain-error) {
    line-height: 14px;
    height: 0;
  }
}

// .searchtbnbox {
//   margin-left: 18px;
// }
</style>

使用：

<SearchItem :searchitemList="SearchitemList" @handleSearch="handleSearchModal"></SearchItem>

const SearchitemList = [
    {
        type: "rangeDate",
        label: "时间",
        val: "",
        placeholder: "请选择时间",
        queryName: "DisplayName",
        showTime:true

    }
];

const handleSearchModal = (params) => {
    CreationTimeStart.value = params.DisplayName[0]
    CreationTimeEnd.value = params.DisplayName[1]
    getModalData()
}