jx-orico-search-group

说明

基于elementplus 封装的搜索组，适合用Orico后台列表,持续迭代~~

演示

http://template.f2b211.com/

功能

输入框
选择框
模糊匹配框
级联
区间日期
日期
复选框
点击搜索
回车搜索
重置

安装插件

npm install jx-orico-search-group
或：yarn add jx-orico-search-group

引入并注册插件

import Vue from 'vue'
import JxOricoSearchGroup from 'jx-orico-search-group'
import 'jx-orico-search-group/lib/jx-orico-search-group.css'
app.use(JxOricoSearchGroup)

基本用法示例

<JxOricoSearchGroup
    v-model:diySerach="data.diySerach"
    v-model:noticeClear="data.noticedata"
    v-model:options="data.options"
    @noticeSerach="noticeSerach"
    @changeGetAllValue="changeGetAllValue"
    @noticeClearSerach="noticeClearSerach"
/>
变量
data = reactive({
    diySerach: [],
    noticedata: 1,
    options: [],
    searchComVal: {},
})
生成搜索组
data.diySerach = [
    [
        { label: '输入框1', value: '', placeholder: '请输入任务名称', type: 'ipt', field: 'spu' },
        { label: '输入框2', value: '', placeholder: '请输入任务负责人', type: 'ipt', field: 'sku' },
        { label: '级联框1', value: '', placeholder: '请输入项目名称', type: 'cas', field: 'opd_team_id',list: []},
        { label: '模糊匹配1', value: '', placeholder: '请输入任务状态', type: 'sel_mh', field: 'category_id',queryUrl:''},
        { label: '选择框1', value: '', placeholder: '全部', type: 'sel', field: 'name',list:[{id:1,name:'测试1'}] },
    ],
    [
        { label: '任务完成日期', value: '', placeholder: '请输入默认供应商', type: 'date', field: 'supplier'},
        { label: '预计任务完成日期', value: '', placeholder: '请输入默认供应组织', type: 'date_range', field: 'FUseOrgId'},
        { label: '空',  type: 'spec' },
        { label: '空',  type: 'spec' },
        {
            type: 'searchReset',
            url: 'v1/product',
            otherComponent: { type: 'checkbox', name: '复选框1', value: '0', field: 'status' },
            otherValue: { language_id: data.language_id, page: data.page, size: data.size }
        }
    ]
]

Props

| 属性 | 说明 | 类型 | 默认值 | | :---------- | :--------- | :----- | :----- | | diySerach | 定义搜索组 | Array | [] | | noticeClear | 通知清空 | Number | [] | | options | 级联数据 | Array | [] |

Events

| 事件名 | 说明 | 返回值 | | :---------------- | :--------------------------- | :------------------- | | noticeSerach | 返回搜索请求参数 | searchQuery 请求参数 | | changeGetAllValue | 值发生改变返回参数，配合分页 | searchQuery 请求参数 | | noticeClearSerach | 返回重置请求参数 | searchQuery 请求参数 |