search-sz v1.0.2

Search插件

当我们要收集的搜索条件有很多的时候，可以使用这个插件,通过数据控制展示我们所需要的表单项

作者：Mrproto（李岩）

一、安装

npm i search-sz -S

或者

yarn add search-sz -S

二、vue 项目入口文件调用

在 Vue 项目的入口文件main.js写入一下代码：

import Search from "search-sz";
Vue.use(Search);

三、组件中使用

找到需要收集表单项的位置，写为：

<Search
     :column-list="columnList"
     :more-search-list="moreSearchList"
     :query-params="listQuery"
     @handleSearch="searchbut"
     @reset="resetQuery"
     @handleSelectChange="handleSelectChange"
/>

四、参数注释

1、在父组件标签里的参数，有以下几种：

• :column-list="columnList" // 父组件传给子组件的数组，用来遍历展示搜索框

• :more-search-list="moreSearchList" //如果有更多搜索选项需要传入第二个数组，用来遍历展示搜索框

• :query-params="listQuery" // 父组件提交给服务器携带的参数

• @handleSearch="searchbut" // 点击子组件的搜索按钮，触发父组件的搜索回调

• @reset="resetQuery" //点击重置按钮，触发父组件的重置回调

• @handleSelectChange="handleSelectChange" // 需要联动效果时检测的联动点，此处是输入框的 change 事件被触发即触发相应联动效果

  2、在父组件的javascript里的参数，有以下几种

  //例子
  //data里的数据配置案例
  columnList: [
          {
            spanNumber: 8,
            columtype: "vselect",
            disabled: false,
            size: "small",
            labName: "采样点名称:",
            placeholder: "请选择采样点名称",
            // prop属性是表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
            prop: "", //没有表单验证时可以为空
            key: "samplePointIds",
            labelwidth: "150px",
            style: "",
            //下边这个对象先定义为空等后台返回数据再赋值，搜索组件即可遍历出来
            statusOptions: [],
            //下边这个两个属性是后台请求回来的数据的key，为了操作搜索组件要配置该项
            dictValue: "samplingId",
            dictLabel: "samplePointName",
          },
  ]

data 里的具体数据配置有以下几种：

spanNumber: 8, //这是每个 item 的布局占三分之一（8/24）

columtype: "vselect", 当前控件类型

• input //输入框控件
• select //选择器控件(选项是固定的)
• selectRequired //当下拉列表为必填项
• vselect //选择器控件(选项是后台传过来的)
• cascader //联级组件
• timepicker //时间选择器控件
• timeselect //选择日期范围控件
• dateRange //选择日期范围控件

disabled: false, //是否禁用（置灰 ）

show：true,//是否展示整个列

size: "small", // 设置输入框大小

labName: "采样点名称:",// 设置输入框前面 label 的名称

placeholder: "请选择采样点名称", //输入提示内容

prop: "", //没有表单验证时可以为空

key: "samplePointIds",//收集到的数据储存的地方，发请求的时候要带上

labelwidth: "150px",// 设置输入框前面 label 的宽度

style: "", //行内式控制输入框的样式

statusOptions: [], //当该输入控件为 vselect 时，该数组为服务器返回的数据，当输入控件为其它有下拉属性的输入框时，该数组是在提前定义好的

• 1、服务器请求返回的情况：

  this.columnList[0].statusOptions  = res.data;  //服务器返回的数据要赋值给statusOptions: []

• 2、自己写好的情况：

  statusOptions: [  //不需要后台返回数据，只需直接写在数组里
              { dictValue: "0", dictLabel: "启用" },
              { dictValue: "1", dictLabel: "禁用" },
              { dictValue: "2", dictLabel: "隐藏" },
            ],

下边这个两个属性是后台请求回来的数据的 key，为了操作搜索组件要配置该项

dictValue: "samplingId",//当statusOptions: []是服务器返回的数据时，要在父组件控制子组件的相对应的id属性
dictLabel: "samplePointName",//当statusOptions: []是服务器返回的数据时，要在父组件控制子组件的相对应的展示属性

//以下是后台返回数据的情况下输入框控件的配置
<el-select
v-if="item.columtype === 'vselect'"
v-model="queryParams[item.key]"
multiple
clearable
collapse-tags
filterable
:placeholder="item.placeholder"
:disabled="item.disabled"
:size="item.size"
:style="item.style"
@change="onSelectChange(item)" >
<el-option
       v-for="tmp in item.statusOptions"
       :key="tmp[item.dictValue]"
       :label="tmp[item.dictLabel]"
       :value="tmp[item.dictValue]"
       />
</el-select>

联动效果时的配置

第一步：在<Search/>绑定自定义事件 @handleSelectChange="handleSelectChange"

第二步：在 handleSelectChange 事件回调里传入参数并进行判断代码如下

 //methods里写的
 handleSelectChange(labName) {
      if (labName == "是否扫码留观:") {    //当labName是我们要求的联动点时就执行相关命令
        this.$set(
          this.moreSearchList[1],
          "disabled",
          !this.moreSearchList[1].disabled
        );    //把另一个输入框的disabled属性进行取反
      }
    },

更多搜索项的配置

:more-search-list="moreSearchList" //该数组配置规则和columnList一致