SuitSearchV1 搜索栏

说明

1、根据elementUi组件库进行封装扩展
2、主要实现了筛选框样式统一，代码统一
3、区别于旧组件的主要部分在于样式，筛选框加label宽度都是统一的宽度，可以上下左右排布等。该组件不要自定义width

示例

<template>
  <suit-search-v1
    :list="searchList"
    :query="listQuery"
    add-privilege="P_xtcspz_xg"
    @search="searchFun"
    @reset="resetFun"
    @addRecord="addRecord"
    :split-num="2"
  >
  <template slot="bottomButton">
    <suit-button type="primary">插槽1</suit-button>
    <suit-button type="primary">插槽2</suit-button>
  </template>
  </suit-search-v1>
</template>
<script>
  export default {
    data() {
      const _this = this
      return {
        searchList: [
          {
            type: 'input',
            value: 'name',
            placeholder: '输入物资名称',
            clearable: true,
            label: '物资'
          },
          {
            type: 'select',
            placeholder: '请选择标段名称',
            label: '标段',
            value: 'tendersId',
            options: [
              {
                value: 11,
                label: '1标段'
              },
              {
                value: 12,
                label: '2标段'
              }
            ],
            clearable: true
          },
          {
            type: 'date',
            subType: 'daterange', // 对应elementui的type，默认date
            value: 'reviewStartEndDate',
            label: '计划出图时间',
            clearable: true,
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            defaultTime: ['12:00:00']
          },
          {
            type: 'timeDate',
            label: '审核开始时间',
            value: 'workingReviewStartEndDate',
            subType: 'date',
            defaultTime: '12:00:00',
            // filter: parseTime, // 引入parseTime即可使用
            // filterParams: ['{y}-{m}-{d}'], // 引入parseTime即可使用
            id: 'approveTimeId'
          },
          {
            type: 'dictSelect',
            label: '字典测试',
            code: 'privilege_type',
            value: 'dict',
            placeholder: '请选择状态'
          },
          {
            render: (query, h) => {
              return (
                <el-select
                  value={_this.listQuery.tendersIds}
                  placeholder="请选择标段"
                  onChange={(e) => _this.onTenderChange(e)}
                  multiple
                  clearable
                >
                  {_this.tenderOptions.map((item) => (
                    <el-option label={item.name} value={item.id}></el-option>
                  ))}
                </el-select>
              )
            }
          }
        ],
        listQuery: {
          name: '',
          tendersIds: 12,
          tendersId: null,
          dict: null,
          workingReviewStartEndDate: 1689572147,
          reviewStartEndDate: null
        },
        tenderOptions: [
          {
            id: 12,
            name: 'hhh'
          },
          {
            id: 123,
            name: 'eieiei'
          }
        ]
      }
    },
    methods: {
      onTenderChange(e) {},
      searchFun() {},
      resetFun() {},
      addRecord() {}
    }
  }
</script>

Expand Copy Copy

参数说明

属性

属性	描述	类型	可选值	默认值
addPrivilege	添加按钮的权限	String	--	''
list	筛选栏数据	Array[]	—	[]
query	筛选栏数据绑定的值	Object{}	—	{}
renderRightButton	筛选栏自定义按钮，很少用	Function	—	null
marginTop	筛选栏对于顶部的距离，默认值是ui标准规范，不要轻易改	Number	—	18
mb	筛选栏跟按钮上下排布的时候强制出现分割线。基本用不上这个变量	Boolean	true,false	false
splitNum	一行默认排布3个筛选框 + 查询重置。一行分为4等份	Number	—	4
rightButton	手动采取上下布局，如果没有slot="bottomButton"的时候，又需要采用上下布局使用这个	Boolean	true,false	false

list 属性

属性	描述	类型	可选值	默认值
type	筛选栏的类型	String	input/select/timeDate/date/tips/dictSelect	''
value	筛选栏绑定的属性，在query对象中实现双向绑定	String	——	——
label	筛选框的label，尽量在五个字以内	String	——	——
options	筛选栏type为'select'时候的子数据	Array[]	——	——
clearable	筛选栏是否能出现清除按钮，同elementui的属性一样	Boolean	——	false
subType	当type为date的时候，该字段表示elementUI里面date为其他类型的字段，比如：month\daterange	String	——	——
filter	该筛选框需要过滤的方法，比如时间，字典	Function	——	——
filterParams	该筛选框需要过滤的方法的传参，filter的传参，比如时间的['{y}-{m}-{d}']	——	——	——
noRest	表明该筛选框不需要被重置	Boolean	——	false
render	自定义筛选框，不用传type属性。参数为'query,h函数'	Function	——	——
其他	elementUI的属性基本都可以，驼峰传参换成aaBb的写法。['rangeSeparator'在elementui中传参是'range-separator']比如日期的{subType：'daterange', rangeSeparator: '至'}	——	——	——
comName	直接写全局注册的标签名即可，比如'el-step'，其他属性如上一行	——	—	——

slot

名称	描述
rightButton	该插槽的内容会被排布在筛选框的右侧
bottomtButton	该插槽的内容会被排布在筛选框的底部

事件

名称	描述	回调参数
search	查询按钮	query
reset	重置按钮，会在组件内先重置掉query，再走这个方法	query
addRecord	添加按钮	——
dropDown	如果筛选框是上下分布，该方法是查询重置按钮右侧的下拉箭头，true说明收起	true/false，代表收起/下拉