字典，枚举值，翻译，状态码
在日常开发中，我们会遇到很多枚举的值，这么枚举出来的值，我们可以统一处理，称为字典值的使用及翻译。
比如说：需要提交表单，表单中有性别和国家选项，这就需要下拉选择框来实现。数据少一点的还可以直接手写，但是像国家城市这种比较多的，手写就不太友好了。这个时候需要后端通过某个接口返回这个枚举值。我们使用这个返回的列表。
翻译就是枚举值对应的汉字与状态码，对照使用。
比如说：在表单里面选择了，性别男，这个时候表单中传递给后端的并不是男，这个汉字，而是对应的状态码（code）。后端保存也是状态码，同样的，在页面中需要显示了这个信息，显示的是男的对应状态码，而不是男这个汉字，这时候就需要翻译这个状态码。
使用字典值首先需要封装
在api中定义接口
import { post } from '@/request/http.js'
//字典值
const newDictApi = data => post('/api/dictApi',{}, data)
export { newDictApi }
在until中定义js函数 postDict.js
import { newDictApi } from '@/API/api_newDict'
// 查询字典
function getNewDict(e){
var dictList = JSON.parse(sessionStorage.getItem(e))
if(dictList){
return dictList
}else{
return new Promise((resolve)=>{
newDictApi({ type: e }).then(data=>{
if (data.code === 200) {
sessionStorage.setItem(e,JSON.stringify(data.data));
resolve(data.data)
}
})
})
}
}
// 字典翻译
const translateDict = (list, e)=> {
var value = ''
list.map(i => {
if (i.code == e) {
value = i.value
}
})
return value
}
export { getNewDict,translateDict }
在main.js中将翻译定义成全局函数
import { translateDict } from './utils/postDict'
Vue.prototype.$translateDict = translateDict
new Vue({
router,
store,
})
在某个页面中使用
<template>
<div>
<el-select
style="width: 100%"
v-model="personalForm.gender"
clearable
placeholder="请选择性别"
>
<el-option
v-for="item in genderList"
:key="item.value"
:label="item.value"
:value="item.code"
></el-option>
</el-select>
<el-select
style="width: 100%"
v-model="personalForm.addressCountry"
placeholder="请选择国家"
clearable
>
<el-option
v-for="item in countryList"
:key="item.code"
:label="item.value"
:value="item.code"
></el-option>
</el-select>
<div>
使用翻译时候需要把后端返回的状态码code拿到，然后和对应的枚举值做匹配，翻译函数会将对应的值输出出来
{{$translateDict(genderList,scope.row.gender)}}
</div>
</div>
</template>
<script>
import { getNewDict } from '@/utils/postDict' export default { data() { return { countryList: [], genderList: [], } }, created() { this.init() }, mounted() {}, methods: { async init() { this.genderList = await getNewDict('gender')
this.countryList = await getNewDict('country') }, }, } </script>
