E_WeChat/components/Yl_Filtrate/index.js

import {
    getHeight
} from "../../utils/GetRheRemainingHeight";
Component({
    options: {
        multipleSlots: true
    },
    properties: {
        list: {
            type: {
                type: Array
            },
            value: [{
                label: "筛选1",
                index: null,
                showName: "name", //显示字段
                valueKey: "name", //返回Key
                selectKey: "id", //传参 代表选着字段 不传参返回整个选择对象
                value: "", //选中值
                default: "", //默认索引
                list: [{
                    name: "a1",
                    id: 0
                }, {
                    name: "a2",
                    id: 1
                }]
            }]
        },
        show: {
            type: Boolean
        },
        handle: {
            type: Function
        }, //按钮回调函数
        dateRange: {
            type: Boolean
        }, //是否开启日期范围筛选
        dateRange1: {
            type: Boolean
        }, //是否开启日期范围筛选
        dateRange2: {
            type: Boolean
        }, //是否开启日期范围筛选
        dateRange3: {
            type: Boolean
        }, //是否开启日期范围筛选
        dateRangeName: {
            type: String,
            value: "日期范围"
        },
        dateRangeName1: {
            type: String,
            value: "日期范围"
        },
        dateRangeName2: {
            type: String,
            value: "日期范围"
        },
        dateRangeName3: {
            type: String,
            value: "日期范围"
        },
        zIndex: {
            type: String,
            value: 99999,
        },
        interrupt: {
            type: Function
        },
        isReset: {
            type: Boolean,
            value: true
        },
        minus: {
            type: [Number, String],
            value: 80
        }
    },
    data: {
        startdate: "", //开始时间
        enddate: "", //结束时间
        periodstart: "",
        periodend: "",
    },
    observers: {
        "show"(newVal) {
            if (newVal) getHeight('.head', this).then(res => this.setData({
                listHeight: res - this.data.minus
            }));
        }
    },
    lifetimes: {
        attached: function () {
            getApp().globalData.Language.getLanguagePackage(this)
        }
    },
    methods: {
        /* 选择 */
        onSelect(e) {
            const {
                item, //被选项
                index, //列表下标
                i //被选项下标
            } = e.currentTarget.dataset;
            if (this.data.list[index].index == i) {
                this.setData({
                    [`list[${index}].value`]: "",
                    [`list[${index}].index`]: null
                });
            } else {
                this.setData({
                    [`list[${index}].value`]: this.data.list[index].selectKey ? item[this.data.list[index].selectKey] : item,
                    [`list[${index}].index`]: i
                });
            };
            if (this.data.list[index].interrupt) this.triggerEvent("interrupt", {
                item,
                index,
                name: this.data.list[index].selectKey,
                list: this.data.list
            })
        },
        onSelectCheckbox(e) {
            const {
                item, //被选项
                index, //列表下标
                i //被选项下标
            } = e.currentTarget.dataset,
                list = this.data.list;
            if (list[index].index == "" || list[index].index == null) {
                list[index].index = [];
                list[index].value = [];
            }
            let arrIndex = list[index].index.indexOf(i)
            if (arrIndex == -1) {
                list[index].index.push(i)
                list[index].value.push(list[index].selectKey ? item[list[index].selectKey] : item)
            } else {
                list[index].index.splice(arrIndex, 1)
                list[index].value.splice(arrIndex, 1)
            };
            this.setData({
                list
            })
            if (this.data.list[index].interrupt) this.triggerEvent("interrupt", {
                item,
                index,
                name: this.data.list[index].selectKey,
                list
            })
        },
        /* 点击按钮 */
        onClick(e) {
            const {
                name
            } = e.target.dataset;
            if (name == 'reset') {
                this.setData({
                    list: this.data.list.map(v => {
                        let value = "",
                            index = null;
                        try {
                            if ((v.default+'').length) {
                                index = v.default;
                                value = v.selectKey ? v.list[v.default][v.selectKey] : v.list[v.default]
                            }
                        } catch (error) {

                        }
                        v.value = value;
                        v.index = index;
                        return v;
                    })
                })
                this.setData({
                    startdate: '',
                    enddate: ''
                })
                let MultilevelClass = this.selectComponent("#MultilevelClass");
                if (MultilevelClass) MultilevelClass.clearChild()
            };
            let obj = {};
            try {
                this.data.list.forEach(v => {
                    if (v.type == 'multilevelClass') {
                        obj[v.valueKey] = getApp().globalData.temporaryId;
                        delete(getApp().globalData.temporaryId);
                    } else if (v.type == 'checkbox') {
                        obj[v.valueKey] = v.value || [];
                    } else {
                        obj[v.valueKey] = v.value;
                    }
                });
            } catch (error) {

            }
            if (this.data.dateRange) {
                obj.startdate = this.data.startdate;
                obj.enddate = this.data.enddate;
            };
            if (this.data.dateRange1) {
                obj.periodstart = this.data.periodstart;
                obj.periodend = this.data.periodend;
            };
            obj.name = name;
            this.triggerEvent("handle", obj);
            this.onClose();
        },
        /* 筛选日期范围 */
        changeDate(e) {
            const name = e.currentTarget.dataset.name,
                value = e.detail.value;
            this.setData({
                [name]: value
            })
        },
        onClose() {
            this.setData({
                show: false
            })
        }
    }
})