在系統模組中的業務列表展示裡面，一般我們都會在列表中放置一些查詢條件，如果是表字段不多，大多數情況下，放置的條件有十個八個就可以了，如果是欄位很多，而這些條件資訊也很關鍵的時候，就可能放置很多條件，但是介面空間比較有限，而常規的查詢一般就那麼幾個常用條件，如果每次都佔用很多版面，好像不是很合理和友好。本篇隨筆探討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
      })
    },

以上就是兩種不同高階查詢條件的介面設計，一般來說，我傾向於使用後者來實現，這樣介面效果也比較完整統一。

&n