循序漸進VUE+Element 前端應用開發(29）--- 高級查詢條件的界面設計

本文轉載自查看原文 2020-11-25 20:17 4540 循序漸進VUE+Element

在系統模塊中的業務列表展示里面，一般我們都會在列表中放置一些查詢條件，如果是表字段不多，大多數情況下，放置的條件有十個八個就可以了，如果是字段很多，而這些條件信息也很關鍵的時候，就可能放置很多條件，但是界面空間比較有限，而常規的查詢一般就那么幾個常用條件，如果每次都占用很多版面，好像不是很合理和友好。本篇隨筆探討Vue+Element前端界面中處理高級查詢模塊的界面設計，提供了兩種處理的思路供參考借鑒。

1、彈出框的高級查詢條件的界面設計

如常規的列表界面如下所示。

單擊【高級查詢】彈出一個新對話框窗口，里面可以查看到所有的查詢條件

我們來一段動畫效果，操作界面的動態效果如下所示。

這里我為了降低單頁面的代碼量，把高級查詢模塊的代碼抽取到一個獨立的文件中，然后在主體頁面中引入使用。

    <testproduct-advance
      ref="advancesearch"
      @search="advanceSearch"
    />

我們在彈出高級查詢對話框中，執行查詢的時候，會獲得條件對象，然后通過事件的方式給調用頁面

    async handleSearch() { // 表單提交
      this.isVisible = false;
      this.$emit('search', this.searchForm)
    },

在主頁面里面，會對高級查詢的幾個事件進行處理，如打開窗口，確定高級查詢后觸發查詢。

  methods: {
    advanceSearch(searchObj) { // 高級查詢
      // console.log(searchObj)
      this.advanceSearchForm = searchObj;
      this.msgSuccess('已選擇高級查詢條件進行查詢了')
      this.isAdvanceSeach = false // 關閉高級查詢窗口
      this.getlist()
    },
    onResetAdvance(searchObj) { // 重置高級查詢條件
      // console.log(searchObj)
      this.advanceSearchForm = searchObj;
    },
    showAdvanceForm() { // 顯示自定義的高級查詢對話框
      this.$refs.advancesearch.show()
    },

在getlist函數里面，需要對高級查詢對象進行轉換處理

    getlist() { // 列表數據獲取
      // 如果高級查詢對象非空，則采用高級查詢條件
       var form = this.isEmpty(this.advanceSearchForm) ? this.searchForm : this.advanceSearchForm; var param = { // 構造常規的分頁查詢條件
        // 分頁條件
        SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
        MaxResultCount: this.pageinfo.pagesize,

        // 查詢過濾條件
        ProductNo: form.productNo,
        BarCode: form.barCode,
        MaterialCode: form.materialCode,
        ProductType: form.productType,
        ProductName: form.productName,
        Status: form.status
      }

      .............

不過，由於高級查詢和普通的查詢界面代碼有很多重復的地方，因此這樣做感覺也相對比較啰嗦。

下面的思路就折疊的方案進行討論。

2、折疊式的高級查詢條件的界面設計

這個思路來自於AntDesign的查詢條件展示，默認它是基於常規條件的展示，如果展開則展示更多的條件。

單擊【展開】則展開更多的條件，以供查詢。

借鑒了這個方式，我們也可以使用這樣的折疊方式來隱藏更多的查詢條件，從而也使得不常用的條件默認隱藏起來，提高界面的友好性。

這樣折疊的條件和不折疊的條件在一個表單里面，只是通過一個狀態的切換隱藏部分條件而已，雖然界面代碼多增加一些，不過處理卻變得簡單一些，不需要單獨編寫一個高級查詢的條件組件頁面。

界面代碼大致布局如下所示。

這樣我們通過一個條件按鈕來切換它的狀態即可實現常用條件、高級查詢條件的切換顯示了。

<el-button :icon="expandMore ?'el-icon-arrow-up':'el-icon-arrow-down'" type="text" @click="expandMore =!expandMore">{{ expandMore ? '收起':'展開' }}</el-button>

這樣查詢處理，並不需要變化什么特殊的操作了，和常規操作一樣，只不過多一些條件而已。

    getlist() { // 列表數據獲取
      var param = { // 構造常規的分頁查詢條件
        // 分頁條件
        SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
        MaxResultCount: this.pageinfo.pagesize,

        // 查詢過濾條件
        Name: this.searchForm.name,
        Sex: this.searchForm.sex,
        .............

        State: this.searchForm.state
      };
      // 使用日期范圍選擇控件，在查詢對象增加開始日期CreationTimeStart、結束日期CreationTimeEnd
      this.addDateRange(param, this.searchForm.creationTime)

      // 獲取列表，綁定到模型上，並修改分頁數量
      this.listLoading = true
      testUser.GetAll(param).then(data => {
        this.list = data.result.items
        this.pageinfo.total = data.result.totalCount
        this.listLoading = false
      })
    },