增加日期范围选择器

Tevin

2021-04-01 d7cf84bd603bcab89d44e9942348f017665cb756

 plugins/filter/CFilter.vue

@@ -10,10 +10,11 @@
            v-if="bar"
        >
            <CFilterSelect
                v-if="!bar.type || bar.type==='select'"
                v-if="bar.type==='select'"
                type="bar"
                :label="bar.label"
                :options="bar.options"
                :options="selectOptions[bar.name]"
                :value="filterRes[bar.name]"
                :onChange="evt=>handleChange(bar.name, evt)"
            />
        </view>
@@ -39,10 +40,18 @@
                    :key="index"
                >
                    <CFilterSelect
                        v-if="!item.type || item.type==='select'"
                        v-if="item.type==='select'"
                        type="item"
                        :label="item.label"
                        :options="item.options"
                        :options="selectOptions[item.name]"
                        :value="filterRes[item.name]"
                        :onChange="evt=>handleChange(item.name, evt)"
                    />
                    <CFilterDateRange
                        v-if="item.type==='dateRange'"
                        type="item"
                        :label="item.label"
                        :value="filterRes[item.name]"
                        :onChange="evt=>handleChange(item.name, evt)"
                    />
                </view>
@@ -58,6 +67,7 @@
import Taro from '@tarojs/taro';
import { AtDrawer } from 'taro-ui-vue';
import CFilterSelect from './CFilterSelect';
import CFilterDateRange from './CFilterDateRange';
import './cFilter.scss';

export default {
@@ -65,29 +75,28 @@
    components: {
        AtDrawer,
        CFilterSelect,
        CFilterDateRange,
    },
    props: {
        // 筛选横条
        // 筛选横条项目
        bar: Object,
        // 展开层筛选项目列表
        // 筛选展开层项目列表
        items: Array,
        // 各个项目的选项列表
        selectOptions: Object,
        // 筛选变化时的回调
        onChange: Function,
    },
    data() {
        return {
            filters: {},
            filterRes: {},
            drawerShow: false,
        };
    },
    methods: {
        handleChange(name, value) {
            if (typeof value === 'undefined') {
                delete this.filters[name];
            } else {
                this.filters[name] = value;
            }
            this.onChange(this.filters);
            this.$set(this.filterRes, name, value);
            this.onChange(this.filterRes);
        },
    },
};