AJ-Report项目分析（11）

2021SC@SDUSC

本文分析“系统设置”中的“数据字典”页面，源码位于src/views/dict/index.vue，页面如下：

总体源码如下：

<template>
  <anji-crud ref="listPage" :option="crudOption">
    <template v-slot:buttonLeftOnTable>
      <el-button type="primary" icon="el-icon-edit" @click="dictRefresh" v-permission="'dictManage:fresh'">刷新字典项
      </el-button>
    </template>

    <template slot="rowButton" slot-scope="props">
      <el-button type="text" @click="editItem(props)" v-permission="'dictItemManage:query'">编辑字典项</el-button>
      <el-button type="text" @click="itemRefresh(props)" v-permission="'dictManage:fresh'">刷新字典项</el-button>
    </template>
  </anji-crud>
</template>

可以看到还是使用的anji-crud组件。

刷新字典项

刷新当前面字典

这部分是通过点击“刷新字典项”来完成的，源码如下：

async dictRefresh() {
      var checkRecords = this.$refs.listPage.checkRecords
      var dictCodes = []
      if (checkRecords.length > 0) {
        dictCodes = checkRecords.map((item) => item.dictCode)
      }
      const {code} = await freshDict(dictCodes)
      if (code != '200') return
      this.$message.success('刷新成功')
    },

async表名这个方法是异步方法。checkRecords是listPage的属性，listPage是anji-crud的ref属性的值，即checkRecords是anji-crud中的一个属性，代表着“表格中当前选中的记录”。我们将其赋值给方法内的变量checkRecords，并判断如果此变量的length>0，就将checkRecords的map方法的返回值赋值给dictCodes变量。

那么这个map方法有什么用呢？map() 方法返回一个新数组，不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值，并按照原始数组元素顺序依次处理元素。语法如下：

array.map(function(currentValue,index,arr), thisValue)

map()的作用就是“映射”，也就是原数组被“映射”成对应新数组。在源码中map方法作用就是将checkRecords中的每个元素的dictCode提取出来赋值给dictCodes。这样就实现了“只刷新选中的记录”的功能。

刷新函数是freshDict(dictCodes) 。通过如下源码：

import {dictDetail, getDictList, dictAdd, dictEdit, dictsDelect, freshDict} from '@/api/dict'

可以推断出刷新方法源码是在api/dict下，源码如下：

export function freshDict(data) {
  return request({
    url: '/gaeaDict/freshDict',
    method: 'POST',
    data,
  })
}

可以看出是发送了一个post请求，将dictCodes对应的选项都刷新。

刷新单个字典项

 async itemRefresh(val) {
      const selectedList = val.msg
      let dictCodes = []
      if (selectedList.length > 0) {
        dictCodes = selectedList.map((item) => item.dictCode)
      }
      const {code} = await freshDict(dictCodes)
      if (code != '200') return
      this.$message.success('刷新成功')
    },

可以看到这个方法源码和刷新整个页面的源码高度类似，不同之处在于本方法只刷新selectedList，值是我们选中的这个记录的msg。并调用相同的接口freshDict，实现仅仅刷新一个记录。

编辑字典项

源码如下：

 editItem(val) {
      this.$router.push({
        path: '/system/dictItem',
        query: {
          dictCode: val.msg.dictCode,
          project: this.$store.state.user.project,
        },
      })
    },

方法参数为当前选中的记录。此方法调用了this.$router.push方法，想要导航到不同的URL，可以使用router.push()方法，并且这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL。

之后我们跳转到了/system/dictItem页面，页面如下：

此页面是常规的弹窗页面，不再分析。