@xiaohaih/condition-el-plus

基于 element-plus 实现的条件搜索, 校验组件(条件之间相互依赖)

• 通过 JSON 配置
• 目前支持以下几种类型, 通过字段 t 来区分
  • input (文本输入框)
  • select (下拉框)
  • datepicker (日期选择)
  • cascader (级联组件)
  • radio (单选框)
  • checkbox (多选框)

在线demo

在线demo(备份)

使用示例(条件形式)

<template>
    <HWrapper
        :datum="conditions"
        :backfill="query"
        @search="log('搜索事件', $event)"
        @reset="log('重置事件', $event)"
    ></HWrapper>
</template>

<script lang="ts">
import { HWrapper, defineCondition } from '@xiaohaih/condition-plus';

const conditions = () =>
    defineCondition({
        name: { t: 'input', placeholder: '名称搜索' },
        address: { t: 'input', placeholder: '地址搜索' },
    });

export default {
    components: {
        HWrapper,
    },
    data: () =({
        conditions: conditions(),
        query: { name: '名称存在默认值' },
        log: console.log,
    }),
};
</script>

使用示例(表单形式)

<template>
    <div>
        <HWrapper
            ref="formRef"
            :datum="formCondition"
            :rules="rules"
            :backfill="query"
            :render-btn="false"
            :realtime="true"
            @search="query = $event"
        ></HWrapper>
        <div style="min-height: 50px; line-height: 50px">{{ query }}</div>
        <ElButton @click="validate">校验</ElButton>
        <ElButton @click="validateField">逐个校验</ElButton>
        <ElButton @click="clearValidate">清空校验</ElButton>
    </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import { HWrapper, defineCondition } from '@xiaohaih/condition-plus';

const conditions = () =>
    defineCondition({
        name: { t: 'input', placeholder: '名称搜索' },
        address: { t: 'input', placeholder: '地址搜索' },
    });

export default {
    components: {
        HWrapper,
    },
    setup(props, ctx) {
        const formRef = ref<InstanceType<typeof HWrapper>>();
        const query = ref<Record<string, any>>({
            // 设置默认值
            input1: '1',
            // input2: '2',
            // select1: '1',
            // select2: '22',
            // cas1: 'aa',
            // cas2: 'cas2AA1',
            // datepikcer1: '2024-03-24',
            // datepikcer2: ['2024-03-24', '2024-03-28'],
            // check1: ['check1'],
            // check2: ['che1'],
            // radio1: 'radio1',
            // radio2: 'rad1',
        });
        const formCondition = defineCondition({
            input1: {
                t: 'input',
                label: 'input1',
                placeholder: '哈哈哈',
            },
            input2: {
                t: 'input',
                label: 'input2222',
                placeholder: '666',
                rules: [{ required: true, message: '必填项' }],
            },
            select1: {
                t: 'select',
                label: 'sel1',
                placeholder: '哈哈哈',
                options: [
                    { label: '第一', value: '1' },
                    { label: '第二', value: '2' },
                    { label: '第三', value: '3' },
                ],
            },
            select2: {
                t: 'select',
                label: 'sel2',
                placeholder: 'test',
                labelKey: 'dictLabel',
                valueKey: 'dictValue',
                options: [],
                getOptions(cb) {
                    setTimeout(() => {
                        cb([
                            { dictLabel: '第一一', dictValue: '11' },
                            { dictLabel: '第二二', dictValue: '22' },
                            { dictLabel: '第三三', dictValue: '33' },
                        ]);
                    }, 1000);
                },
                rules: [{ required: true, message: '必填项' }],
            },
            datepikcer1: {
                t: 'datepicker',
                label: 'date1',
                placeholder: 'fff',
                format: 'MM-DD',
                valueFormat: 'YYYY-MM-DD',
            },
            date11: {
                t: 'datepicker',
                type: 'daterange',
                label: 'date2',
                fields: ['date11', 'date22'],
                placeholder: '999',
                startPlaceholder: '起',
                endPlaceholder: '止',
                rules: [{ required: true, message: '必填项' }],
            },
            cas1: {
                t: 'cascader',
                label: 'cas1',
                placeholder: 'fff',
                fields: ['cas1', 'cas1_1'],
                props: { checkStrictly: true },
                options: [
                    {
                        label: 'aa',
                        value: 'aa',
                        children: [
                            { label: 'AA1', value: 'AA1' },
                            { label: 'AA2', value: 'AA2' },
                        ],
                    },
                    {
                        label: 'bb',
                        value: 'bb',
                        children: [
                            { label: 'BB1', value: 'BB1' },
                            { label: 'BB2', value: 'BB2' },
                        ],
                    },
                ],
            },
            cas2: {
                t: 'cascader',
                type: 'daterange',
                label: 'cas2',
                placeholder: '999',
                rules: [{ required: true, message: '必填项' }],
                getOptions(cb) {
                    cb([
                        {
                            label: 'cas2aa',
                            value: 'cas2aa',
                            children: [
                                { label: 'cas2AA1', value: 'cas2AA1' },
                                { label: 'cas2AA2', value: 'cas2AA2' },
                            ],
                        },
                        {
                            label: 'cas2bb',
                            value: 'cas2bb',
                            children: [
                                { label: 'cas2BB1', value: 'cas2BB1' },
                                { label: 'cas2BB2', value: 'cas2BB2' },
                            ],
                        },
                    ]);
                },
            },
            check1: {
                t: 'checkbox',
                label: 'check1',
                placeholder: 'ddd',
                type: 'button',
                options: [
                    { label: 'check1', value: 'check1' },
                    { label: 'check2', value: 'check2' },
                ],
            },
            check2: {
                t: 'checkbox',
                label: 'check2',
                placeholder: 'ddd',
                rules: [{ required: true, message: '必填项' }],
                getOptions(cb) {
                    setTimeout(() => {
                        cb([
                            { label: 'che1', value: 'che1' },
                            { label: 'che2', value: 'che2' },
                        ]);
                    }, 1000);
                },
            },
            radio1: {
                t: 'radio',
                label: 'radio1',
                placeholder: 'ddd',
                type: 'button',
                options: [
                    { label: 'radio1', value: 'radio1' },
                    { label: 'radio2', value: 'radio2' },
                ],
            },
            radio2: {
                t: 'radio',
                label: 'radio2-cancelable',
                placeholder: 'ddd',
                rules: [{ required: true, message: '必填项' }],
                cancelable: true,
                getOptions(cb) {
                    setTimeout(() => {
                        cb([
                            { label: 'rad1', value: 'rad1' },
                            { label: 'rad2', value: 'rad2' },
                        ]);
                    }, 1000);
                },
            },
        });
        const rules = {
            input1: [{ required: true, message: 'formRules' }],
            input2: [
                {
                    validator: (rule: any, val: string, cb: (arg?: any) => void) =>
                        val !== '123' ? cb('not 123 from formRules') : cb(),
                    message: 'not 123 from formRules',
                },
            ],
            select1: [{ required: true, message: 'select form FormRules' }],
            datepikcer1: [{ required: true, message: 'datepicker form FormRules' }],
            cas1: [{ required: true, message: 'cascader form FormRules' }],
            check1: [{ required: true, message: 'check form FormRules' }],
            radio1: [{ required: true, message: 'radio form FormRules' }],
        };
        const keys = Object.keys(forms);
        let idx = 0;
        function validate() {
            formRef.value?.formRef?.validate();
        }
        function validateField() {
            clearValidate();
            formRef.value?.formRef?.validateField(keys[idx % keys.length]);
            idx = (idx + 1) % keys.length;
        }
        function clearValidate() {
            formRef.value?.formRef?.clearValidate();
        }

        return {
            formRef,
            query,
            formCondition,
            rules,
            validate,
            validateField,
            clearValidate,
        };
    },
};
</script>

• TODO
  • 文件上传
  • 虚拟列表下拉框

容器Props

tips: 支持 element-plus.Form 所有 props(model 属性除外)

属性名	是否必填	类型	描述	默认值
datum	是	object	条件数据源	-
sortable	否	boolean	是否开启排序	false
realtime	否	boolean	是否实时触发搜索事件(值发生改变时)	-
backfill	否	object	回填信息(使条件内部值与该对象的值保持一致)	-
toast	否	(msg: string) => void	校验失败时产生的提示(与属性 validator 配合使用)	-
searchAtDatumChanged	否	boolean	是否在数据源发生改变后触发搜索事件	-
resetToInitialValue	否	boolean	重置时是否置为初始值	-
immediateSearch	否	boolean	初始是否触发搜索事件来返回当前的 query	-
renderBtn	否	boolean	是否渲染搜索重置按钮	true
resetTriggerSearch	否	boolean	重置时触发搜索事件	-
searchText	否	string	搜索按钮文字	搜索
resetText	否	string	重置按钮文字	重置
rules	否	object|object[]	Form.rules props	-

公共属性

tips: 支持element-ui.FormItem 所有 props

属性名	是否必填	类型	描述	默认值
label	否	string	formItem.label 属性	-
rules	否	object|object[]	formItem.rules 属性	-
postfix	否	VNode | string | Function	条件间的分隔符	-
emptyValue	否	string	值为空时提交的值	undefined
resetToInitialValue	否	string	重置时是否置为初始值	false
disabled	否	boolean | (obj: { query: object, backfill: object }) =boolean	是否禁用该条件	-
hide	否	boolean | (obj: { query: object, backfill: object }) =boolean	是否隐藏该条件	-
validator	否	(query: object) =string | Promise<string| void	校验该属性是否合格(不合格应返回字符串)	-
defaultValue	否	string | string[] | (query: object, backfill?: object) =string | string[]	默认值	-
depend	否	boolean	是否依赖其它字段	-
dependFields	否	string | string[]	依赖的字段集合	-
conditionSortIndex	否	boolean	当前条件排序下标	-

input.props

tips: 支持 element-plus.input 所有 props

属性名	是否必填	类型	描述	默认值
realtime	否	boolean	是否实时触发搜索事件(当 wrapper.realtime 为 true 时, 可将该值设为 false 并设置抖动时间)	true
waitTime	否	number	实时触发事件的防抖动时长	300
clearable	否	boolean	是否可清空	true
slotPrefix	否	VNode | (option: { query, backfill, search, insideSearch }) => VNode	input.prefix插槽(search 触发外部搜索, insideSearch 触发内部搜索)	-
slotSuffix	否	VNode | (option: { query, backfill, search, insideSearch }) => VNode	input.suffix插槽	-
slotPrepend	否	VNode | (option: { query, backfill, search, insideSearch }) => VNode	input.prepend插槽	-
slotAppend	否	VNode | (option: { query, backfill, search, insideSearch }) => VNode	input.append插槽	-

select.props

tips: 支持 element-plus.select 所有 props

属性名	是否必填	类型	描述	默认值
labelKey	否	string	选项的标签	label
valueKey	否	string	选项的值	value
options	否	any[]	数据源	-
getOptions	否	(cb: (data: any[], query: object) =void) =void	异步设置数据源	-
filterable	否	boolean	是否可筛选	true
filterMethod	否	(val: string, item: 选项值) =boolean	自定义筛选逻辑	-
clearable	否	boolean	是否可清空	true

datepicker.props

tips: 支持 element-plus.datePicker 所有 props

属性名	是否必填	类型	描述	默认值
valueFormat	否	string	日期格式	YYYY-MM-DD
fields	否	string[] | [begin: number, end: number]	日期范围选择时对应多个字段时使用	-
clearable	否	boolean	是否可清空	true

cascader.props

tips: 支持 element-plus.cascader 所有 props

注意: 当 cascader 是单选时 cascader.props.emitPath 默认为 false, 此处与官方文档表现不一致

属性名	是否必填	类型	描述	默认值
valueKey	否	string	选项的值	value
childrenKey	否	string	子级 key	children
emitPath	否	boolean	是否以数组格式返回的值	-
options	是	any[]	数据源	-
getOptions	否	(cb: (data: any[], query: object) =void) =void	异步设置数据源	-
fields	否	string[]	不同层级对应不同的字段	-
filterable	否	boolean	是否可筛选	true
filterMethod	否	(val: string, item: 选项值) =boolean	自定义筛选逻辑	-
clearable	否	boolean	是否可清空	true

radio.props

tips: 支持 element-plus.radioGroup 所有 props

属性名	是否必填	类型	描述	默认值
valueKey	否	string	选项的值	value
labelKey	否	string	选项的文本内容	label
type	否	radio | button	单选框类型	radio
cancelable	否	boolean	是否可取消	-
options	是	any[]	数据源	-
getOptions	否	(cb: (data: any[], query: object) =void) =void	异步设置数据源	-

checkbox.props

tips: 支持 element-plus.checkbox 所有 props

属性名	是否必填	类型	描述	默认值
valueKey	否	string	选项的值	value
labelKey	否	string	选项的文本内容	label
type	否	checkbox | button	单选框类型	checkbox
options	是	any[]	数据源	-
getOptions	否	(cb: (data: any[], query: object) =void) =void	异步设置数据源	-
fields	否	string[]	不同层级对应不同的字段	-

color-picker.props

tips: 支持 element-plus.color-picker 所有 props

input-number.props

tips: 支持 element-plus.input-number 所有 props

属性名	是否必填	类型	描述	默认值
realtime	否	boolean	是否实时触发搜索事件(当 wrapper.realtime 为 true 时, 可将该值设为 false 并设置抖动时间)	true
waitTime	否	number	实时触发事件的防抖动时长	300
slotIncreaseIcon	否	VNode	input-number.increase-icon插槽	-
slotDecreaseIcon	否	VNode	input-number.decrease-icon插槽	-

rate.props

tips: 支持 element-plus.rate 所有 props

slider.props

tips: 支持 element-plus.slider 所有 props

switch.props

tips: 支持 element-plus.switch 所有 props

time-picker.props

tips: 支持 element-plus.time-picker 所有 props

属性名	是否必填	类型	描述	默认值
fields	否	string[]	不同下标对应不同的字段	-
valueFormat	否	string	时间格式	HH:mm:ss

time-select.props

tips: 支持 element-plus.time-select 所有 props