一款基于vue3+ts+vite的平铺式搜索组件，解决多搜索条件占位过宽的问题，目前支持文本框、下拉选择、日期范围选择、文本域, 支持默认显示搜索条件和更多条件。

1.新增rightSlot右侧插槽

...还没想好🤣

npm install searchv3view

import searchView from "searchv3view"
import "searchv3view/style.css"

const app = createApp(App)
app.use(searchView)

   <search-view
      ref="searchViewRef"
      :conditionArray="conditionArray"
      @ready="onReady"
      :fetchFunction="fetchFunction"
      @response="onResponse"
   >
    <template #rightSlot>
      <el-button>导出</el-button>
    </template>
   </search-view>

平铺式搜索组件，支持默认查询条件和更多查询条件，支持input文本框、select下拉框、daterange/datetimerange时间范围、inputs文本域。后续会加上date/datetime类型。

{
   autoFetch: true //默认true 是否搜索条件变化后自动执行搜索
   conditionArray: [
      {
         conditionItem
      }
   ] // 搜索条件List conditionItem格式参考下方
   seatrchConfig: {   //是否显示左侧关键字搜索框
      show: false, //是否展示
      key: "xxx", //是否需要传给后台额外的key
      placeholder: "xxx" //placeholder
   },
   fetchFunction: Fcuntion //查询方法,
   vagueKey: "", //模糊搜索条件list key 默认vagueFields
}

{
   label: "", //搜索条件名称
   key: "", //搜索条件传给后台的key
   parentKey: "", //级联选择时父节点的key
   default: true, //是否默认展示
   searchItem: {
      isRequire: false, //是否必填
      isMultiple: false, //是否支持多选
      type: "", //类型 类型参考下方2.1(*必填)
      defaultOptions: [], //type 为select时默认选项
      fetchFunction: function  //type为select时异步请求的方法  返回数据格式如2.2.2
      remoteDefaultValue: function // type为select时异步请求的方法  参考2.2.3
      value: "" ,//默认值 
      timeType: '' //type为时间格式时有效，默认时间格式为时间戳,如果需要yyyy-MM-dd格式 传string
      keyMap: [start, end] // type为时间范围时有效 不传默认用key:[]  传的时候 会把key[]分别解析给start和end
      valueType: "string | array" //type为inputs文本域时有效，默认为array 传给后台的格式数组或string
      separator: "" // type为inputs文本域时有效, 当valueType为string时，字符串的分割符
    },
},

[
   {
      value: "文本框",
      key: "inputBox",
      default: true,
      searchItem: {
         type: "input",
         value: "",
         vagueConfig: {
            show: false, //是否显示模糊搜索配置
            default: true, //默认值
            disabled: true //是否禁用切换模糊配置
         }
      }
   },
   {
      value: "选择框",
      key: "sex",
      default: true,
      searchItem: {
         type: "select",
         isMultiple: false, //是否多选
         defaultOptions: [
            {
               id: "",
               text: "全部"
            },
            {
               id: "1",
               text: "男"
            },
            {
               id: "2",
               text: "女"
            }
         ],
         value: ""
      }
   },
   {
      value: "工厂",
      key: "divisonNo",
      default: true,
      searchItem: {
      type: "select",
      isMultiple: false,
      remote: false,
      autoLoad: false,
      fetchFunction: (query, keyword) => {
         console.log("参数====", query, keyword)
         return new Promise((resolve,reject) => {
            setTimeout(() => {
            resolve({
               data: {
                  body: [
                  {
                     text: "临港",
                     id: 1
                  },
                  {
                     text: "南京",
                     id: 2
                  },
                  {
                     text: "郑州",
                     id: 3
                  },
                  {
                     text: "河南",
                     id: 5
                  }
                  ]
               }
            })
            }, 1000)
         })
      },
      value: 2,
      remoteDefaultValue: (res) => {
         return {
            defaultOptions: res.data.body
         }
      }
      }
   },
   {
      value: "车间",
      key: "workshopNo",
      parentKey: "divisonNo",
      default: false,

      searchItem: {
      type: "select",
      independent: true,
      isRequire: false,
      isMultiple: false,
      isFilterable: false,
      fetchFunction: (data, query) => {
         console.log("data====", data)
         let list = [
            {
            text: "上海车间",
            id: 1
            },
            {
            text: "南京车间",
            id: 2
            },
            {
            text: "广州车间",
            id: 3
            },
            {
            text: "厦门车间",
            id: 4
            },
            {
            text: "香港车间",
            id: 5
            }
         ]
         return new Promise((resolve,reject) => {
            setTimeout(() => {
            let arr = list.filter(u => u.id == data.divisonNo)
            resolve({
               data: {
                  body: arr
               }
            })
            }, 1000)
         })
      }
      }
   },
   {
      value: "新增时间",
      key: "addTime",
      default: true,

      timeType: 'string',
      searchItem: {
      isRequire: false,
      type: "date",
      valueFormat: {
         dateFormat: 'yyyy-MM-dd'
      },
      format: {
         dateFormat: 'yyyy-MM-dd'
      }
      }
   },
   {
      value: "具体时间",
      key: "createTime",
      default: true,

      
      searchItem: {
      isRequire: false,
      type: "datetime"
      }
   },
   {
      value: "创建时间",
      key: "createTime",
      default: true,

      timeType: 'string',
      dateRange: 180,
      searchItem: {
      isRequire: false,
      type: "datetimerange",
      keyMap: ['startTime', 'endTime']
      }
   },
   {
      value: "更新时间",
      key: "updateTime",
      default: true,

      
      searchItem: {
      isRequire: false,
      type: "datetimerange",
      keyMap: ['startUpdateTime', 'endUpdateTime']
      }
   },
   {
      value: "文本域",
      key: "remark",
      default: true,

      
      searchItem: {
      type: "inputs",
      valueType: 'string',
      separator: "----",
      placeholder: "哈哈哈"
      }
   },
   {
      value: "自定义",
      key: "diyKey",
      default: true,

      searchItem: {
      type: "slot",
      slotName: "customSlot",
      value: ""
      }
   }
]

MIT

Smile1k809995843@qq.com
wx: 15996330955