Yb-components
  • 组件
  • 数据录入
liaoyingmin
2024-04-22

YbConditionSelect 条件选择器

# 基本使用

  • 过滤条件默认选中第一个选项
  • 可指定配置过滤条件下拉选项，根据指定的顺序进行选项渲染，默认显示组件内部所有可配置的过滤条件下拉选项
<template>
    <yb-codemirror-json
        :value="valueString"
        style="height:100px;margin-bottom:10px;"
    />
    <yb-condition-select
        :conditions="conditions"
        :formalDataExtra="formalDataExtra"
        v-model="value"
        clearable
    >
    </yb-condition-select>
</template>
<script>
    export default {
        computed: {
            valueString() {
                return JSON.stringify(this.value);
            },
        },
        data() {
            const options = [
                { value: '1', label: '1' },
                { value: '2', label: '2' },
                { value: '3', label: '3' },
                { value: '4', label: '4' },
                { value: '5', label: '5' },
                { value: '6', label: '6' },
            ];
            return {
                inputValue: '',
                value: undefined,
                // 指定条件选项
                conditions: ['[a,b]', '=', '≥', '[a,b)'],
                formalDataExtra: {
                    values: {
                        options,
                        props: {
                            multiple: true,
                        },
                    },
                    A: { options },
                    B: { options },
                },
            };
        },
        methods: {},
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
显示 复制

# 特殊 input 组件用法

  • 当 values 的组件类型设置为 input 时，输入的内容根据英文逗号切割，可表示多个
  • 当 A、B 组件类型设置为 input 时，不根据英文逗号切割
<template>
    <yb-codemirror-json
        :value="valueString"
        style="height:100px;margin-bottom:10px;"
    />
    <yb-condition-select :formalDataExtra="formalDataExtra" v-model="value" />
</template>
<script>
    export default {
        computed: {
            valueString() {
                return JSON.stringify(this.value);
            },
        },
        data() {
            const options = [
                { value: '1', label: '1' },
                { value: '2', label: '2' },
                { value: '3', label: '3' },
                { value: '4', label: '4' },
                { value: '5', label: '5' },
                { value: '6', label: '6' },
            ];
            return {
                value: {
                    filterType: '≥',
                    filterTypeLabel: '大于等于',
                    values: ['1', '4'],
                },
                // 指定条件选项
                formalDataExtra: {
                    values: { type: 'input' },
                    A: { type: 'input' },
                    B: { type: 'input' },
                },
            };
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
显示 复制

# 表单中使用

// 值合法校验
import { conditionValidator } from 'yb-components/packages/es/components/yb-condition-select/modules/utils';
// oneParamsConditions 单个数据值的符号，twoParamsConditions 范围值的符号
import {
    oneParamsConditions,
    twoParamsConditions,
} from 'yb-components/packages/es/components/yb-condition-select/modules/utils';
1
2
3
4
5
6
7
<template>
    <div>
        <yb-form
            ref="form"
            :formItems="formItems"
            :model="formModel"
            label-width="100px"
            @submit.native.prevent="onSubmit"
        >
            <template v-slot:name="formItem">
                <el-input
                    v-model="formModel[formItem.prop]"
                    clearable
                ></el-input>
            </template>
            <template v-slot:hospitalDays="formItem">
                <yb-condition-select
                    v-model="formModel[formItem.prop]"
                    :formalDataExtra="formalDataExtra"
                    clearable
                />
            </template>
            <template v-slot:buttons="formItem">
                <el-button type="primary" native-type="submit">
                    提交
                </el-button>
                <el-button>取消</el-button>
            </template>
        </yb-form>
    </div>
</template>
<script>
    export default {
        data() {
            const formItems = [
                {
                    label: '姓名',
                    prop: 'name',
                    rules: [
                        {
                            required: true,
                            message: '请填写姓名',
                            trigger: 'change',
                        },
                    ],
                },
                {
                    label: '住院天数',
                    prop: 'hospitalDays',
                    defaultValue: {
                        filterType: '(a,b)',
                        filterTypeLabel: '大于A小于B',
                        values: ['2'],
                    },
                    rules: [
                        {
                            required: true,
                            message: '请选择住院天数',
                            trigger: 'change',
                        },
                        // 可通过 import { conditionValidator, oneParamsConditions, twoParamsConditions } from 'yb-components/packages/es/components/yb-condition-select/modules/utils';
                        // 数据合法校验
                        {
                            // 数据合法校验
                            validator: (rule, value, callback) => {
                                const oneParamsConditions = [
                                    '<',
                                    '≤',
                                    '>',
                                    '≥',
                                    '=',
                                    '≠',
                                    'like',
                                ];
                                const twoParamsConditions = [
                                    '(a,b)',
                                    '(a,b]',
                                    '[a,b)',
                                    '[a,b]',
                                ];
                                if (
                                    value?.filterType &&
                                    !Array.isArray(value.values)
                                ) {
                                    return callback('数据不合法，请重新选择');
                                } else if (
                                    oneParamsConditions.includes(
                                        value?.filterType
                                    ) &&
                                    Array.isArray(value.values) &&
                                    value.values.length < 1
                                ) {
                                    return callback('数据不合法，请重新选择');
                                } else if (
                                    twoParamsConditions.includes(
                                        value?.filterType
                                    ) &&
                                    Array.isArray(value.values) &&
                                    value.values.length < 2
                                ) {
                                    return callback('数据不合法，请重新选择');
                                }
                                callback();
                            },
                            trigger: 'change',
                        },
                        {
                            validator: (rule, value, callback) => {
                                if (!value) callback();
                                if (
                                    [
                                        '(a,b)',
                                        '(a,b]',
                                        '[a,b)',
                                        '[a,b]',
                                    ].includes(value.filterType) &&
                                    Array.isArray(value.values) &&
                                    value.values[0] > value.values[1]
                                ) {
                                    return callback(
                                        '数据不合法，A 必须小于 B，请重新选择'
                                    );
                                }
                                callback();
                            },
                            trigger: 'change',
                        },
                    ],
                },
                {
                    label: '',
                    prop: 'buttons',
                },
            ];
            const formModel = formItems.reduce((tol, item) => {
                return {
                    ...tol,
                    [item.prop]:
                        typeof item.defaultValue !== 'undefined'
                            ? item.defaultValue
                            : null,
                };
            }, {});
            return {
                labelWidth: 100,
                formItems,
                formModel,
                formalDataExtra: {
                    values: {
                        type: 'inputNumber',
                        props: {
                            controlsPosition: 'right',
                        },
                    },
                    A: {
                        type: 'inputNumber',
                        props: {
                            controlsPosition: 'right',
                        },
                    },
                    B: {
                        type: 'inputNumber',
                        props: {
                            controlsPosition: 'right',
                        },
                    },
                },
            };
        },
        methods: {
            onSubmit() {
                this.$refs['form']
                    .getForm()
                    .validate()
                    .then(() => {
                        console.log('验证成功', this.formModel);
                    })
                    .catch((err, errFields) => {
                        console.log('验证失败', err, errFields);
                    });
            },
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
显示 复制

# 高级用法

  • 根据配置 formalDataExtra，根据 yb-formily 配置表单项内容，其中 controlled、validate 不会被覆盖
    • values: 配置单个值表单项配置
    • A: 配置范围值的 A 表单项配置
    • B: 配置范围值的 B 表单项配置

代码中 formalData 默认配置

const oneParamsConditions = ['<', '≤', '≥', '>', '=', '≠', 'like'];
const twoParamsConditions = ['(a,b)', '(a,b]', '[a,b)', '[a,b]'];
const formalData = [
    {
        title: '',
        type: 'select',
        field: 'filterType',
        value: conditionsSymbolList[0],
        options: conditionsSymbolList,
        props: {
            optionInValue: true,
        },
        validate: [
            {
                required: true,
                message: '必填',
                trigger: 'change',
            },
        ],
    },
    {
        title: '',
        type: 'select',
        field: 'values',
        options: [],
        controlled: {
            rendered: function ({ formModel }) {
                return oneParamsConditions.includes(formModel.filterType.value);
            },
        },
        validate: [
            {
                required: true,
                message: '必填',
                trigger: 'change',
            },
            {
                validator: (rule, value, callback) => {
                    if (Array.isArray(value) && !value.length)
                        return callback('必填');
                    callback();
                },
                trigger: 'change',
            },
        ],
        props: {
            clearable: true,
        },
    },
    {
        title: 'A',
        type: 'select',
        field: 'A',
        options: [],
        controlled: {
            // 被控制是否渲染，当前控件是否渲染，取决于如何 return true/false
            rendered: function ({ formModel }) {
                return twoParamsConditions.includes(formModel.filterType.value);
            },
        },
        validate: [
            {
                required: true,
                message: '必填',
                trigger: 'change',
            },
            {
                validator: (rule, value, callback) => {
                    if (Array.isArray(value))
                        return callback('此类条件只能选一个值');
                    if (this.filterFormModel.A === this.filterFormModel.B) {
                        return callback('范围值不应该相同');
                    }
                    callback();
                },
                trigger: 'change',
            },
        ],
        props: {
            clearable: true,
        },
    },
    {
        title: 'B',
        type: 'select',
        field: 'B',
        options: [],
        controlled: {
            // 被控制是否渲染，当前控件是否渲染，取决于如何 return true/false
            rendered: function ({ formModel }) {
                return twoParamsConditions.includes(formModel.filterType.value);
            },
        },
        validate: [
            {
                required: true,
                message: '必填',
                trigger: 'change',
            },
            {
                validator: (rule, value, callback) => {
                    if (Array.isArray(value))
                        return callback('此类条件只能选一个值');
                    if (this.filterFormModel.A === this.filterFormModel.B) {
                        return callback('范围值不应该相同');
                    }
                    callback();
                },
                trigger: 'change',
            },
        ],
        props: {
            clearable: true,
        },
    },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
过滤值组件切换为 datePicker
过滤值组件切换为 paginationSelect 
<template>
    <el-divider content-position="left">过滤值组件切换为 datePicker</el-divider>
    <yb-codemirror-json
        :value="value1String"
        style="height:100px;margin-bottom:10px;"
    />
    <yb-condition-select :formalDataExtra="formalDataExtra1" v-model="value1" />

    <el-divider content-position="left">
        过滤值组件切换为 paginationSelect
    </el-divider>
    <yb-codemirror-json
        :value="value2String"
        style="height:100px;margin-bottom:10px;"
    />
    <yb-condition-select :formalDataExtra="formalDataExtra2" v-model="value2" />
</template>
<script>
    export default {
        computed: {
            value1String() {
                return JSON.stringify(this.value1);
            },
            value2String() {
                return JSON.stringify(this.value2);
            },
        },
        data() {
            return {
                value1: {},
                formalDataExtra1: {
                    values: {
                        type: 'datePicker',
                        props: { 'value-format': 'yyyy-MM-dd' },
                    },
                    A: {
                        type: 'datePicker',
                        props: { 'value-format': 'yyyy-MM-dd' },
                    },
                    B: {
                        type: 'datePicker',
                        props: { 'value-format': 'yyyy-MM-dd' },
                    },
                },
                value2: {},
                formalDataExtra2: {
                    values: { type: 'input' },
                    A: {
                        type: 'paginationSelect',
                        props: {
                            filterable: true,
                            remote: true,
                            multiple: false,
                            clearable: true,
                            onRemote: this.remoteFn,
                            'allow-create': true,
                            'default-first-option': true,
                            searchWhenOpen: true,
                            asyncPagination: false,
                            pageSize: 100,
                        },
                    },
                    B: {
                        type: 'paginationSelect',
                        props: {
                            filterable: true,
                            remote: true,
                            multiple: false,
                            clearable: true,
                            onRemote: this.remoteFn,
                            'allow-create': true,
                            'default-first-option': true,
                            searchWhenOpen: true,
                            asyncPagination: false,
                            pageSize: 100,
                        },
                    },
                },
            };
        },
        methods: {
            formatValueText(value) {
                return this.dayjs(value).format('YYYY-MM-DD');
            },
            remoteFn(query) {
                const options = [
                    { value: '1', label: '1' },
                    { value: '2', label: '2' },
                    { value: '3', label: '3' },
                    { value: '4', label: '4' },
                    { value: '5', label: '5' },
                    { value: '6', label: '6' },
                ];
                return new Promise((resolve) => {
                    let optionsList = options.filter((item) => {
                        return (
                            !query.queryWord ||
                            item.label
                                .toLowerCase()
                                .indexOf(query.queryWord.toLowerCase()) > -1
                        );
                    });
                    setTimeout(() => {
                        return resolve({
                            total: optionsList.length,
                            options: optionsList.slice(
                                (query.currentPage - 1) * query.pageSize,
                                query.currentPage * query.pageSize
                            ),
                        });
                    }, 2000);
                });
            },
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
显示 复制

# YbConditionSelect Attributes

参数 说明 类型 可选值 默认值
value/v-model 绑定值 object - --
placeholder 占位内容 string - 请选择
name 原生属性 string - --
clearable 是否显示清除按钮 boolean - false
disabled 是否禁用 boolean - false
size 输入框尺寸 string large/small/mini --
formatValueText 将选中值显示在输入框的内容格式化 function - --
conditions 指定条件选项，默认显示组件内部全部条件选项 array 详见conditions ['<', '≤', '>','≥', '=', '≠', 'like', '(a,b)', '(a,b]', '[a,b)', '[a,b]']
formalDataExtra 根据 yb-formily 配置表单项内容，其中 controlled、validate 不会被覆盖 object 详见高级使用 {}
- 其他属性同 el-dialog (opens new window) ，其中剔除 visible 属性
title Dialog 的标题 ，也可通过具名 slot:title 传入 string - 过滤条件
width Dialog 的宽度 string - 移动端：90%，其余：'400px'
top Dialog CSS 中的 margin-top 值 string - '30vh'
appendToBody Dialog 自身是否插入至 body 元素上 boolean - true

# YbConditionSelect conditions 可选值

可选值 说明
= 等于
≠ 不等于
< 小于
≤ 小于等于
> 大于
≥ 大于等于
like 模糊
(a,b) 大于 A 小于 B
(a,b] 大于 A 小于等于 B
[a,b) 大于等于 A 小于 B
[a,b] 大于等于 A 小于等于 B

# YbConditionSelect Slots

name 说明
title Dialog 的标题

# YbConditionSelect Events

事件名称 说明 回调参数
change 选定值改变时触发 目前的选中值 value
visible-change 弹窗出现/隐藏时触发 出现则为 true，隐藏则为 false
clear 可清空的单选模式下用户点击清空按钮时触发
blur 当 input 失去焦点时触发 (event: Event)
focus 当 input 获得焦点时触发 (event: Event)

# YbConditionSelect Methods

事件名称 说明 参数
blur 使 input 获取焦点
focus 使 input 失去焦点，并隐藏下拉框
上次更新: 2024/04/29, 15:15:24
YbRangeQuarterPicker 季度范围选择器
YbCheckboxGroup 多选框组

← YbCheckboxGroup 多选框组→

Theme by Vdoing | Copyright © 2021-2025 YB-GZ | MIT License