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页面,页面如下:
此页面是常规的弹窗页面,不再分析。