@pluve/lego-search-vue

乐高系列之 search 组件

基于 ant-design-vue 组件进行，运营平台UI@2.0的交互要求封装的查询条件组件，建议配合 @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的方法

安装

# 使用 npm
npm i @pluve/lego-search-vue

# 使用 yarn
yarn add @pluve/lego-search-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