jhwxapp/miniprogram/components/@mkl/multi-select/index.js

import { VantComponent } from "../common/component";
import { pickerProps } from "../picker/shared";
const COLUMNSPLACEHOLDERCODE = "000000";
VantComponent({
    classes: ["active-class", "toolbar-class", "column-class"],
    props: Object.assign(Object.assign({}, pickerProps), {
        value: {
            type: Array,
            observer(value) {
                this.value = value;
                this.getSelect();
                this.setValues();
            },
        },
        columns: {
            type: Array,
            value: [],
            observer(value) {
                this.getSelect();
                this.setValues();
            },
        },
    }),

    data: {
        displayColumns: [],
        typeToColumnsPlaceholder: {},
    },
    mounted() {
        // setTimeout(() => {
        //     this.setValues();
        // }, 0);
    },
    methods: {
        getPicker() {
            if (this.picker == null) {
                this.picker = this.selectComponent(".van-multi-select__picker");
            }
            return this.picker;
        },
        onCancel(event) {
            this.emit("cancel", event.detail);
        },
        onConfirm(event) {
            const detail = event.detail;
            const values = this.parseOutputValues(detail.value);
            this.emit("confirm", {text:values.map((x) => x.text),value: values.map((x) => x.key), index:detail.index });
        },
        emit(type, detail) {
            detail.values = detail.value;
            delete detail.value;
            this.$emit(type, detail);
        },
        // parse output columns data
        parseOutputValues(values) {
            return values.map((value, index) => {
                return {
                    key: value.key,
                    text: value.text,
                };
            });
        },
        onChange(event) {
            const { index, picker, value } = event.detail;
            this.select = { value, index };
            this.setValues();
            const values = this.parseOutputValues(value);
            this.$emit("change", {
                picker,
                values: values,
                value: values.map((x) => x.key),
                text: values.map((x) => x.text),
                index,
            });
        },
        //初始化赋值核心方法
        getSelect(columns = this.data.columns, index = 0, displayColumns = []) {
            if (this.value && this.value.length > 0) {
                const key = this.value[index];

                if (columns && columns.length > 0) {
                    let selectColumn = columns.find((x) => key == x.key);
                    if (selectColumn) {
                        displayColumns.push(selectColumn);
                        if (selectColumn.childs && selectColumn.childs.length > 0) {
                            this.getSelect(selectColumn.childs, index + 1, displayColumns);
                        }
                    }
                }
                this.select = {
                    index: this.value.length - 1,
                    value: displayColumns,
                };
        
            }
        },
        getColumns(columns = this.data.columns, index = 0, displayColumns = [], select) {
            if (columns && columns.length > 0) {
                let defaultIndex = 0;
                if (select) {
                    if (index <= select.index) {
                        const val = select.value[index];
                        if(val&&val.key){
                            columns.forEach((x, i) => {
                                if (x.key == val.key) {
                                    defaultIndex = i;
                                }
                            });
                        }
                    }
                }
                displayColumns.push({
                    values: columns,
                    defaultIndex: defaultIndex,
                });
                let firstColumn = columns[defaultIndex];
                if (firstColumn.childs && firstColumn.childs.length > 0) {
                    index++;
                    this.getColumns(firstColumn.childs, index, displayColumns, select);
                }
            }
            return displayColumns;
        },
        setValues() {
            // const picker = this.getPicker();
            // if (!picker) {
            //     return;
            // }

            let { select } = this;
            const stack = this.getColumns(undefined, undefined, undefined, select);
            this.setData({
                displayColumns: stack,
            });
        },
        getValues() {
            const picker = this.getPicker();
            return picker ? picker.getValues().filter((value) => !!value) : [];
        },
        reset(value) {
            this.value = value || [];
            return this.setValues();
        },
    },
});