npm package: @pluve/lego-search-vue
Description: 乐高系列之 search 组件
Author: zhaoyajie
Latest version: 1.3.0

# @pluve/lego-search-vue

乐高系列之 `search` 组件

[![npm (scoped)](https://img.shields.io/npm/v/@pluve/lego-search-vue?style=for-the-badge)](https://www.npmjs.com/package/@pluve/lego-search-vue)

基于 `ant-design-vue` 组件进行，运营平台UI@2.0的交互要求封装的查询条件组件，建议配合 [`@pluve/use-antd-table-vue`](https://www.npmjs.com/package/@pluve/use-antd-table-vue) 使用。

`@pluve/use-antd-table-vue` 已经投入了我们的生产环境中使用，经受住了来自真实业务的考验，并伴随着我们的业务需求不断完善。

## 特性
* 基于 `ant-design-vue`和运营平台UI@2.0的交互要求进行二次封装
* 支持响应式换行，大屏展示4列，小屏展示3列
* 支持输入组件自动委托enter事件
* 支持溢出部分收起展开

## 默认配置
| 属性 | 默认值 | 描述 |
| --- | --- | --- |
| searchDisable | false | 是否禁用查询按钮 |
| gutter |  20 | 表格大小 |
| v-model:open | false | 是否启用收起/展开功能 |

### 方法
| 名称 |  描述 |
| --- |  --- |
| submit | 注入 submit方法 |
| reset |  注入 reset 方法 |

### 表单校验 
1.支持继承antdV form 的所有API
2.组件实例下的form属性绑定了form组件实例 通过`searchRef.value.form`来调用form的方法

## 安装
```shell
# 使用 npm
npm i @pluve/lego-search-vue

# 使用 yarn
yarn add @pluve/lego-search-vue
```

## 使用

```vue
<template>
    <legoSearch ref="searchRef" :model="state.formData"   v-model:open="state.open" @submit="getPlanPage" @reset="resetPlanParams">
      <a-form-item label="适用门店" name="storeCode" :rules="[
        {required:true,message:'必填'}
      ]">
          <a-input allowClear v-model:value.trim="state.formData.storeCode" placeholder="请输入门店编码"></a-input>
        </a-form-item>
        <a-form-item label="方案名称">
          <a-input allowClear v-model:value.trim="state.formData.schemeName" placeholder="请输入方案名称"></a-input>
        </a-form-item>
        <a-form-item label="方案编码">
          <a-input allowClear v-model:value.trim="state.formData.id" placeholder="请输入方案编码"></a-input>
        </a-form-item>
        <a-form-item label="企划名称">
          <a-input allowClear v-model:value.trim="state.formData.planName" placeholder="请输入企划名称"></a-input>
        </a-form-item>
        <a-form-item label="企划编码">
          <a-input allowClear v-model:value.trim="state.formData.planId" placeholder="请输入企划编码"></a-input>
        </a-form-item>
        <a-form-item label="促销时间">
          <a-select v-model:value="state.formData.saleCondition" placeholder="请选择销售条件" allowClear>
            <a-select-option :value="1">单品</a-select-option>
            <a-select-option :value="2">组合</a-select-option>
            <a-select-option :value="3">整单</a-select-option>
            <a-select-option :value="4">品类</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="销售条件">
          <a-select v-model:value="state.formData.saleCondition" placeholder="请选择销售条件" allowClear>
            <a-select-option :value="1">单品</a-select-option>
            <a-select-option :value="2">组合</a-select-option>
            <a-select-option :value="3">整单</a-select-option>
            <a-select-option :value="4">品类</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="state.open" label="优惠内容" allowClear>
          <a-select allowClear v-model:value="state.formData.contentType" placeholder="请选择优惠内容">
            <a-select-option :value="1">单品</a-select-option>
            <a-select-option :value="2">组合</a-select-option>
            <a-select-option :value="3">整单</a-select-option>
            <a-select-option :value="4">品类</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="state.open" label="创建人">
          <a-input allowClear v-model:value.trim="state.formData.creator" placeholder="请输入创建人姓名或工号"></a-input>
        </a-form-item>
        <a-form-item v-if="state.open" label="审核人">
          <a-input allowClear v-model:value.trim="state.formData.reviewedBy" placeholder="请输入审核人姓名或工号"></a-input>
        </a-form-item>
    </legoSearch>
</template>

<script setup lang="ts">
import { message } from "ant-design-vue";
import { reactive,ref } from "vue";

const searchRef = ref();

const state = reactive<{
    formData:any,
    open: boolean
}>({
    formData:{},
    open: false
})

const getPlanPage = ()=>{
  searchRef.value.form.validateFields().then((values:any)=>{
    message.success("操作成功!");
    console.log(values)
  })
}

const resetPlanParams = ()=>{
    state.formData = {};
}
</script>
```

## Keywords
`lego` `lego-search` `lego-search-vue`