功能点：查看详情后返回，回显搜索条件

发表于 | 分类于 | | 阅读次数:
字数统计: 490 字 | 阅读时长 ≈ 2 分钟

首页含有条件搜索和分页，点击某一项跳转页面查看详情后，返回首页，回显搜索条件和分页。

获取首页数据时，保存搜索条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
methods: {
  saveSearchData() {
    let searchObj = {
      provinceId: this.searchData.provinceId,
      cityId: this.searchData.cityId,
      districtId: this.searchData.districtId,
      schoolName: this.searchData.schoolName,
      page: this.page.index,
      pageSize: this.page.size
    };
    window.sessionStorage.setItem('schoolSearch', JSON.stringify(searchObj));
  },
  // 获取数据
  loadData() {
    this.saveSearchData();
  }
}

离开首页时，若去向不是详情页，清除sessionStorage

1
2
3
4
5
6
beforeRouteLeave(to, from, next) {
  if (to.name !== 'schoolDetail') {
    sessionStorage.removeItem('schoolSearch');
  }
  next();
}

离开详情页时，若去向不是首页，清除sessionStorage

1
2
3
4
5
6
beforeRouteLeave(to, from, next) {
  if (to.name !== 'schoolManage') {
    sessionStorage.removeItem('schoolSearch');
  }
  next();
}

搜索条件和分页回显

没有省市区联动时：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
mounted() {
  let searchObj = window.sessionStorage.getItem('schoolSearch');
  if (searchObj) {
    let searchData = JSON.parse(searchObj);
    // 延时的更新，保证 数据 与 UI(渲染一致)
    setTimeout(() => {
      this.searchData.schoolName = searchData.schoolName;
      this.page.index = searchData.page;
      this.page.size = searchData.pageSize;
      this.loadData(this.page.index);
    }, 500);
  } else {
    this.loadData();
  }
}

有省市区联动时：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
mounted() {
  let searchObj = window.sessionStorage.getItem('schoolSearch');
  if (searchObj) {
    let searchData = JSON.parse(searchObj);
    // 延时的更新，保证 数据 与 UI(渲染一致)
    setTimeout(() => {
      if (searchData.provinceId && !searchData.cityId) {
        this.searchData.provinceId = searchData.provinceId;
        this.isDisableCityFlag = false;
        this.isDisableAreaFlag = true;
        let queryData = {
          provinceId: searchData.provinceId
        };
        this.$api['region/listCity'](queryData).then(data => {
          this.citySelectData = data;
          this.searchData.schoolName = searchData.schoolName;
          this.page.index = searchData.page;
          this.page.size = searchData.pageSize;
          this.loadData(this.page.index);
        });
      }
      if (searchData.provinceId && searchData.cityId) {
        this.searchData.provinceId = searchData.provinceId;
        this.isDisableCityFlag = false;
        this.isDisableAreaFlag = false;
        let queryData = {
          provinceId: searchData.provinceId
        };
        this.$api['region/listCity'](queryData).then(data => {
          this.citySelectData = data;
          this.searchData.cityId = searchData.cityId;
          let queryData2 = {
            provinceId: searchData.provinceId,
            cityId: searchData.cityId
          };
          this.$api['region/listDistrict'](queryData2).then(data2 => {
            this.areaSelectData = data2;
            this.searchData.districtId = searchData.districtId;
            this.searchData.schoolName = searchData.schoolName;
            this.page.index = searchData.page;
            this.page.size = searchData.pageSize;
            this.loadData(this.page.index);
          });
        });
      }
      if (!searchData.provinceId) {
        this.searchData.schoolName = searchData.schoolName;
        this.page.index = searchData.page;
        this.page.size = searchData.pageSize;
        this.loadData(this.page.index);
      }
    }, 500);
  } else {
    this.loadData();
  }
  this.loadMarketRegion();
  // this.findProvince();
  this.loadProvinceSelectData();
},
1
2
3
4
loadData(pageIndex = 1) {
  if (pageIndex) this.page.index = pageIndex;
  ...
}