edu-mini/components/cascader/cascader.js

import Api from "../../model/api";
import {getDataSet, getEventParam} from "../../utils/utils";
import {studentTypes} from "../../model/enum";


Component({
    properties: {
        perType: String,
        parentIds: String,
    },
    observers: {
        parentIds: async function (parentIds) {
            if (!parentIds) {
                this.setData({
                    area: ''
                })
            }
            await this.getTabData({id: ""}, -1);
        },
    },
    data: {
        show: false,
        active: 0,
        loading: false,
        tabs: [],
        dict: {
            0: "省级",
            1: "市级",
            2: "区县级",
            3: "街道(镇)级",
            4: "社区(村)级",
        },
        area: ''
    },
    methods: {
        async restoreData(index) {
            if (!this.data.parentIds) {
                return;
            }
            let areaIdArray = this.data.parentIds.split(",");
            if (areaIdArray && areaIdArray.length > index) {
                let id = areaIdArray[index];
                const cell = this.findCell(id, index);
                let event = {currentTarget: {dataset: {}}};
                event.currentTarget.dataset.cell = cell;
                event.currentTarget.dataset.index = index;
                await this.onClick(event, true);
            }
            this.setData({
                area: this.data.tabs.map(item => item.title).filter(item=>item).join("/")
            })
        },
        findCell(id, index, key = 'id') {
            if (this.data.tabs) {
                return this.data.tabs[index].data.find(item => item[key] == id)
            }
        },
        onChange(e) {

        },
        async handleClick(event) {
            const {cell, index} = getDataSet(event);
            this.data.tabs[index].title = cell.name;
            this.data.tabs[index].code = cell.code;
            this.setData({
                tabs: this.data.tabs,
            });
            //加载新一级别的数据  级联组件 正常加载这个即可
            // await this.getTabData(cell, index);

            //以下属于该app变种规则扩展
            if (this.data.perType == studentTypes.COMMUNITY_WORKER) {
                if (this.data.tabs[0].title == "吉林省") {
                    if (index == 3) { // 村一级单独请求
                        this.setData({
                            loading: true
                        })
                        this.setData({
                            tabs: this.data.tabs.slice(0, index + 1),
                        }, () => {
                            this.selectComponent("#tabs")?.resize()
                        })
                        let res = await Api.getUnitList({
                            parentId: cell.id
                        })
                        this.setData({
                            loading: false
                        })
                        res.data = res.data.map(item => {
                            return {
                                name: item.unitname,
                                code: item.unitcode,
                                id: item.unitcode,
                            }
                        })
                        this.changeTab(res.data, index);
                        return;
                    }
                } else {
                    if (index == 1) {
                        return;
                    }
                }
            }
            await this.getTabData(cell, index);

        },
        async onClick(event, isCode) {
            if (!isCode && this.data.parentIds) {
                //让 父id变化不走观察者
                this.data.parentIds = "";
            }
            await this.handleClick(event);
        },

        click() {
            let code = '';
            console.log("传出去的code1", code)
            if (this.data.perType == studentTypes.COMMUNITY_WORKER) {
                if (this.data.tabs[0].title == "吉林省") {
                    if (this.data.tabs.length >= 5) {
                        code = this.data.tabs[4].code;
                    }
                } else { //非吉林省社区工作者 只需要选择省市
                    if (this.data.tabs.length >= 2) {
                        code = this.data.tabs[1].code;
                    }
                }
            } else {
                code = this.data.tabs[this.data.tabs.length - 1].code || this.data.tabs[this.data.tabs.length - 2].code;
            }
            this.setData({
                show: false,
                area: this.data.tabs.map(item => item.title).filter(item=>item).join("/")
            })
            console.log("传出去的code", code)
            this.triggerEvent("change", {
                'formData.code': code
            });
        },

        showArea() {
            this.setData({
                show: true
            })
        },
        close() {
            this.setData({show: false})
        },

        changeTab(data, index) {
            let oldTabs = this.data.tabs.slice(0, index + 1);
            let indexObj = {};
            if (data && data.length > 0) {
                oldTabs = [
                    ...oldTabs,
                    {data: data.reverse()}
                ];
                indexObj = {active: index + 1}
                this.setData({
                    tabs: oldTabs,
                    ...indexObj
                }, () => {
                    this.selectComponent("#tabs")?.resize()
                    this.restoreData(indexObj.active);
                })
            } else {
                this.setData({
                    tabs: oldTabs,
                    ...indexObj
                }, () => {
                    this.selectComponent("#tabs")?.resize()
                })
            }
        },
        async getTabData(cell, index) {
            //抽取出来可扩展
            //获取多级数据的实现方法，这里是网络请求，根据业务也可以本地获取全部数据，分级在这个方法提供
            this.setData({
                loading: true
            })
            this.setData({
                tabs: this.data.tabs.slice(0, index + 1),
            }, () => {
                this.selectComponent("#tabs")?.resize()
            })
            const res = await Api.getRegionList({parentId: cell.id})
            this.setData({
                loading: false
            })
            this.changeTab(res.data, index);
        },

    },
    async attached() {
        await this.getTabData({id: ""}, -1);
    },
});