•  功能简介：

1. 初始化时，只有“类型”有数据，“分类”、“子类”均无数据
2. 点击“类型”，触发方法，获取“分类”数据，“子类”仍无数据
3. 点击“分类”，触发方法，获取“子类”数据
4. “类型”、“分类”、“子类”是顺序的单向关系，前一个影响后一个
5. 点击【重置】，返回初始化状态

• 实现步骤：

1、dom结构、data数据，注意在“类型”项设置触发方法funChange : this.typeChange 用来获取 “分类” 数据

<template>
    <div>
        <div ref="workOrderManager" class="page-content"  v-show="!blnShowDetail">
            ...
            <hi-page-search
                :searchItems="searchItems"
                @doSearch="doSearch"
                @doReset="doReset">
            </hi-page-search>
            ...
        </div>
    </div>
</template>


 data() {
            return {
                ...
                dataSearchList: {}, //查询列表参数
                searchItems: [  //顶部精确搜索对象
                    {
                        id: 'reportinterval',
                        ...
                    },
                    {
                        id: 'source',
                        ...
                    },
                    {
                        id: 'type',
                        type: 3,
                        label: "工单类型",
                        value: [{value: "", text: "请选择"}],
                        defaultValue: "",
                        funChange : this.typeChange//触发方法获取分类数据
                    },
                    {
                        id: 'sort',
                        type: 3,
                        label: "工单分类",
                        value: [],
                    },
                    {
                        id: 'subsort',
                        type: 3,
                        label: "工单子类",
                        value: [],
                    },
                    {
                        id: 'emergenlevel',
                        ...
                    },
                    {
                        id: 'status',
                        ...
                    },
                ],
             
                typelist:[],//工单类型
                sortlist:[],//工单分类
                subsortlist:[],//工单子类
    }
}

2、获取 "类型" 下拉列表数据

created() {
            this.getSelectList();//获取下拉列表
},

methods:{
            getSelectList(){
                ...
                this.getTypeSortSubsortList(); // 工单类型
            },
            ...
            /** 2、获取工单类型 */
            getTypeSortSubsortList() {
                this.$axios({
                    url: '/workorder/getlinkselection',
                    method: 'post',
                }).then(response => {
                    this.typelist = this.$common.getCobombox(response.typeList, '1');
                    this.searchItems[2].value = this.typelist;
                });
            },
}

 3、 点击"类型"，触发typeChange 方法，获取 “分类” 数据：如果选择了数据项，则新增触发 “分类” 获取  “子类”  的方法 this.sortChange。

 // 3、触发工单类型,有数据则联动显示，否则不显示数据
            typeChange(type) {
                if(type && type != "") {
                    this.$axios({
                        url: '/workorder/getlinkselection',
                        method: 'post',
                        data: {type: type, notloading: '1'},
                    }).then(response => {
                        this.sortlist = this.$common.getCobombox(response.sortList, '1');
                        let sort={
                            id: 'sort',
                            type: 3,
                            label: "工单分类",
                            value: this.sortlist,
                            funChange : this.sortChange//获取子类数据
                        };
                        this.$set(this.searchItems,3,sort)
                    });
                } else {
                    let sort={
                        id: 'sort',
                        type: 3,
                        label: "工单分类",
                        value: [],
                    };
                    this.$set(this.searchItems,3,sort);
                }
            },

4、 点击"分类"，触发sortChange方法，获取 “子类” 数据

// 4、触发工单分类,有数据则联动显示，否则不显示数据
            sortChange(sort){
                if(sort && sort != "") {
                    this.$axios({
                        url: '/workorder/getlinkselection',
                        method: 'post',
                        data: {sort: sort, notloading: '1'},
                    }).then(response => {
                        this.subsortlist = this.$common.getCobombox(response.subsortList, '1'); 
                        let subsort={
                            id: 'subsort',
                            type: 3,
                            label: "工单子类",
                            value: this.subsortlist,
                        };
                        this.$set(this.searchItems,4,subsort)
                    });
                } else {
                    let subsort={
                        id: 'subsort',
                        type: 3,
                        label: "工单子类",
                        value: [],
                    };
                    this.$set(this.searchItems,4,subsort);
                }
            },

5、点击【重置】，返回初始化状态，需要把“分类”、“子类”都置空

// 3、重置
            doReset() {
                ...
                // 重置联动列表数据
                let sort={
                    id: 'sort',
                    type: 3,
                    label: "工单分类",
                    value: [],
                };
                this.$set(this.searchItems,3,sort);
                let subsort={
                    id: 'subsort',
                    type: 3,
                    label: "工单子类",
                    value: [],
                };
                this.$set(this.searchItems,4,subsort);
                ...
            },