AJ-Report项目分析（4）

2024-02-27 22:50:03

2021SC@SDUSC

我们继续分析如下页面。因为很多组件都是可以复用的，我们通过此页面中包含组件的分析，以后分析其他页面时就会轻松很多。

我们在AJ-Report项目源码分析（3）中已经分析完了queryFormFieds 源码以及anji-tree组件的源码，我们本文分析之后的源码。

button源码

       buttons: {
          query: {
            api: accessAuthorityList,
            permission: "authorityManage:query"
          },
          queryByPrimarykey: {
            api: accessAuthorityDetail,
            permission: "authorityManage:query"
          },
          add: {
            api: accessAuthorityAdd,
            permission: "authorityManage:insert"
          },
          delete: {
            api: accessAuthorityDeleteBatch,
            permission: "authorityManage:delete"
          },
          edit: {
            api: accessAuthorityUpdate,
            permission: "authorityManage:update"
          },
          customButton: {
            operationWidth: "150px"
          }
        },

我们要时刻牢记上面这些都是vue组件中data()内的代码，这些东西都是我们自定义的数据。在AJ-Report项目源码分析（2）中我们已经分析了本文分析的页面是基于anji-crud 这个自定义组件的，页面源码只定义了一些数据等，核心代码在此页面源码包含的组件中。

我们不难看出上面button部分源码定义了一些按钮相关的data，api是发送给后台的url的一部分，permission用来表示这个按钮对应的操作。我们以分析上面源码中的query部分为例，首先进入anji-crud源码部分：

        <!-- 查询表单开始 -->
      <el-form ref="formSearch" :model="queryParams" 
        label-width="100px" 
        v-permission="option.buttons.query.permission">

可以看到v-permission属性的值就说页面源码中button源码部分我们自定义的值。

  <el-col :span="6" style="text-align: center">
            <el-button type="primary" @click="handleQueryForm('query')">查询</el-button>
            <el-button type="danger" @click="handleResetForm()">重置</el-button>
            <a style="margin-left: 8px" @click="handleToggleMoreSearch">
              {{ queryParams.showMoreSearch == true ? '收起' : '展开' }}
              <i :class="queryParams.showMoreSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
            </a>
  </el-col>

这部分是我们的按钮源码，查询按钮定义了@click方法，我们接下来分析handleQueryForm源码

handleQueryForm（）源码

    handleQueryForm(from) {
      if (from == 'query') {
        if (this.hasTreeFieldInQueryForm) {
          delete this.queryParams[this.queryFormTreeField.field]
        }
      }
    
      if (from == 'tree') {
        if (this.hasTreeFieldInQueryForm) {
          var treeVal = this.queryParams[this.queryFormTreeField.field]
          this.queryParams = {
            pageNumber: 1,
            pageSize: 10,
          }
          this.queryParams[this.queryFormTreeField.field] = treeVal
        }
      }
    
      if (
        this.isBlank(this.queryParams['order']) &&
        this.isNotBlank(this.option.buttons.query.order)
      ) {
        this.queryParams['sort'] = this.option.buttons.query.sort
        this.queryParams['order'] = this.option.buttons.query.order
      }
      this.queryParams.pageNumber = 1
      this.handleQueryPageList()
    },

此方法代码运行逻辑如下：

1. 如果form==query，就是通过点击查询按钮来查询，所以我们需要把树查询条件去掉。什么是树查询件？就是通过点击下面截图中的“树形结构”来进行查询：

这很好理解，毕竟我们是点击“查询”按钮来查询我们自己输入的条件。可以通过源码看到我们此次调用的是handleQueryForm（query）方法，传入的参数为query，表名会按照我们自己输入到input框中的条件来查询。

2. 如果form==tree，那就代表这次查询是一个树查询，那就把我们自己输入input框中的查询条件去掉。

3. 判断完是条件查询还是树查询之后，就开始指定查询结果的排序方式，此方式是通过data中button的自定义属性值来指定的。

4. 最后调用handleQueryPageList（）方法。

handleQueryPageList（）源码

我们再来看看handleQueryPageList（）源码：

 async handleQueryPageList() {
      var params = this.queryParams
      // 将特殊参数值urlcode处理 var params = this.urlEncodeObject(this.queryParams, 'order,sort')
      const { data, code } = await this.option.buttons.query.api(params)
      if (code != '200') return
      this.records = data.records
      this.total = data.total
    },

这个方法是点击查询按钮后最终执行的方法，可以看到方法的修饰符是async。async作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思，异步函数也就意味着该函数的执行不会阻塞后面代码的执行。

方法第一行定义了一个params数组，将queryParams数组也就是我们的查询条件赋值给它。接着开始向后台发送url，如果返回状态码为200说明查询成功，并把查询到的结果赋值给了data，接着就更新数据，将data数据更新到页面中。

上面就是我们点击页面中查询按钮后调用的一系列方法。

码农公寓

button源码

handleQueryForm（）源码

handleQueryPageList（）源码

相关文章