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.checkRecordsvar dictCodes = []if (checkRecords.length > 0) {dictCodes = checkRecords.map((item) => item.dictCode)}const {code} = await freshDict(dictCodes)if (code != '200') returnthis.$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.msglet dictCodes = []if (selectedList.length > 0) {dictCodes = selectedList.map((item) => item.dictCode)}const {code} = await freshDict(dictCodes)if (code != '200') returnthis.$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页面，页面如下：

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