0.5.6 • Published 10 months ago

@xiaohaih/condition-el v0.5.6

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

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

  • 通过 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-ui';

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-ui';

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
    • 文件上传
    • 虚拟列表下拉框

tips: 支持 element-ui.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

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

input.props

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

属性名是否必填类型描述默认值
realtimeboolean是否实时触发搜索事件(当 wrapper.realtimetrue 时, 可将该值设为 false 并设置抖动时间)true
waitTimenumber实时触发事件的防抖动时长300
clearableboolean是否可清空true
slotPrefixVNode | (option: { query, backfill, search, insideSearch }) => VNodeinput.prefix插槽(search 触发外部搜索, insideSearch 触发内部搜索)-
slotSuffixVNode | (option: { query, backfill, search, insideSearch }) => VNodeinput.suffix插槽-
slotPrependVNode | (option: { query, backfill, search, insideSearch }) => VNodeinput.prepend插槽-
slotAppendVNode | (option: { query, backfill, search, insideSearch }) => VNodeinput.append插槽-

select.props

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

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

datepicker.props

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

属性名是否必填类型描述默认值
valueFormatstring日期格式yyyy-MM-dd
fieldsstring[] | begin: number, end: number日期范围选择时对应多个字段时使用-
clearableboolean是否可清空true

cascader.props

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

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

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

radio.props

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

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

checkbox.props

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

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

color-picker.props

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

input-number.props

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

属性名是否必填类型描述默认值
realtimeboolean是否实时触发搜索事件(当 wrapper.realtimetrue 时, 可将该值设为 false 并设置抖动时间)true
waitTimenumber实时触发事件的防抖动时长300

rate.props

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

slider.props

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

switch.props

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

time-picker.props

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

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

10 months ago

0.4.0

1 year ago

0.3.2

1 year ago

0.3.1

1 year ago

0.3.0

1 year ago

0.2.3

1 year ago

0.2.1

1 year ago

0.2.2

1 year ago

0.2.0

2 years ago

0.1.10

2 years ago

0.1.12

2 years ago

0.1.13

2 years ago

0.1.14

2 years ago

0.1.15

2 years ago

0.1.20

2 years ago

0.1.16

2 years ago

0.1.8

2 years ago

0.1.17

2 years ago

0.1.7

2 years ago

0.1.18

2 years ago

0.1.19

2 years ago

0.1.9

2 years ago

0.1.0

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago