-
功能简介:
- 初始化时,只有“类型”有数据,“分类”、“子类”均无数据
- 点击“类型”,触发方法,获取“分类”数据,“子类”仍无数据
- 点击“分类”,触发方法,获取“子类”数据
- “类型”、“分类”、“子类”是顺序的单向关系,前一个影响后一个
- 点击【重置】,返回初始化状态
-
实现步骤:
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);
...
},