AJ-Report项目源码分析（3）

2021SC@SDUSC

我们继续来分析下面页面：

我们今天主要分析的是anji-tree的源码。

查询表单条件queryFormFieds

在src/views/accessAuthority/index.vue源码中可以看到查询条件queryFormFieds 的代码，如下：

         {
            inputType: "anji-tree",  
            anjiTreeOption: {
              url: "/accessAuthority/menuTree",  
              enableFilter: true,  
              isOpen: true  
            },
            label: "所属菜单",
            field: "target"
          },
          {
            inputType: "anji-select",  
            anjiSelectOption: {
              dictCode: "ENABLE_FLAG"
            },
            label: "启用状态",
            field: "enableFlag"
          },
          {
            inputType: "input",
            label: "菜单代码",
            field: "target"
          },
          {
            inputType: "input",
            label: "菜单名称",
            field: "targetName"
          },
          {
            inputType: "input",
            label: "按钮代码",
            field: "action"
          },
          {
            inputType: "input",
            label: "按钮名称",
            field: "actionName"
          }

我们可以通过label标签（用来显示模块名称），结合具体页面截图，来将页面的每个模块和代码对应起来。上面代码中第一个{}对应的模块为“所属菜单”，anji-tree类型将页面分为两份，左侧占20%，对应截图中“所属菜单”那一个模块，anji-tree是一个template模板，我们接下来分析此模板的代码。

anji-tree源码

<template>
  <div>
    <el-input class="filterInput" placeholder="搜索" 
    v-model="filterText" v-if="enableFilter" />
    <div class="title">{
   
   { labelName }}</div>
    <el-tree ref="table_tree" :data="treeData" node-key="id" 
    :default-expand-all="isOpen" 
    :expand-on-click-node="false" 
    :filter-node-method="filterNode" 
    @node-click="nodeClick" 
    @check="checkedEvent" />
  </div>
</template>

首先是一个input标签，标签内placeholder为“搜索”，与截图对应。标签名称在源码中用labelName代替，这是为了复用，其他模块也可以使用此模板，只需要传入一个labelName参数即可。在这里传入的参数为“所属菜单”。

扫描二维码关注公众号，回复： 13226760 查看本文章

在anji-tree源码中还有一个标签为el-tree，这个也是自定义的模板，我们截图中“用户权限”，“报表设计”等关键词，都是经由这个el-tree显示出来的。el-tree中:data在源码文件中对应的是如下代码中的treeData[]：

 data() {
    return {
      filterText: '',
      treeData: [],
    }
  },

可以看到anji-tree源码中所有数据都为空，这也正常，如果数据写死的话，这个template就只能用一次，我们为了复用，要想办法每次使用这个vue组件的时候都获取数据，我们看下源代码中是如何获取数据的：

mounted()是vue声明周期中初始化阶段的第四个函数，即初始化阶段会调用queryData方法获取数据（看见这个方法的名字就可以知道此方法用于获取数据）。queryData代码如下：

    queryData() {
      if (this.isBlank(this.url)) {
        return
      }
      request({
        url: this.url,
        method: 'GET',
      }).then((response) => {
        if (response.code != '200') {
          return
        }
        this.treeData = Object.prototype.toString.call(response.data)
 == '[object Array]' ? response.data : response.data.tree|| response.data.menuTree
      })
    },

isBlank函数也是自定义的函数，位于src/mixins/common.js文件中，作用是判断参数是否为空或者未undefined。如果不为空，queryData方法就会通过axios发送请求，如果请求成功，就把服务器返回的数据赋值给treeData，这样我们页面中的数据就展示出来了。Object.prototype.toString.call(obj)作用是检测obj对象的类型，这里使用三目运算符来进行赋值。object Array是后台数据库的存储的类型。

我们拿到数据以后，我们再来看下anji-tree中的方法。我们每次点击像截图中“权限管理”，“角色管理”等内容是，页面就会进行过滤，将右侧的数据过滤为匹配后的结果。这一过程是通过el-tree中的node-Click()方法实现的:

 nodeClick(node) {
      this.$emit('input', node['id'])
      this.$emit('node-click', node['id'])
    },

我们点击tree节点的时候，会将tree的id作为上级机构的代码，用来查询列表。

anji-tree源码中最后一部分是css样式，这里就不分析了。