循序渐进VUE+Element 前端应用开发(29）--- 高级查询条件的界面设计

    <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() { // 列表数据获取
      // 如果高级查询对象非空，则采用高级查询条件
       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
      }

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

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