按部就班VUE+Element 前端應用開發(29）--- 高級查詢條件的界面設計

在系統模塊中的業務列表展現裏面，通常咱們都會在列表中放置一些查詢條件，若是是表字段很少，大多數狀況下，放置的條件有十個八個就能夠了，若是是字段不少，而這些條件信息也很關鍵的時候，就可能放置不少條件，可是界面空間比較有限，而常規的查詢通常就那麼幾個經常使用條件，若是每次都佔用不少版面，好像不是很合理和友好。本篇隨筆探討Vue+Element前端界面中處理高級查詢模塊的界面設計，提供了兩種處理的思路供參考借鑑。

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

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

單擊【高級查詢】彈出一個新對話框窗口，裏面能夠查看到全部的查詢條件

 咱們來一段動畫效果，操做界面的動態效果以下所示。

 

這裏我爲了下降單頁面的代碼量，把高級查詢模塊的代碼抽取到一個獨立的文件中，而後在主體頁面中引入使用。

    <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
      }

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

不過，因爲高級查詢和普通的查詢界面代碼有不少重複的地方，所以這樣作感受也相對比較囉嗦。 

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

 

二、摺疊式的高級查詢條件的界面設計

這個思路來自於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
      })
    },

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