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数据更新到页面中。
上面就是我们点击页面中查询按钮后调用的一系列方法。