封裝字段翻譯組件，可以格式化字典、枚舉、字段
優(yōu)點(diǎn)： 使用簡(jiǎn)單，一次配置多次使用，緩存降低后端請(qǐng)求次數(shù)，擴(kuò)展性強(qiáng)

沒(méi)有緩存時(shí)造成單頁(yè)面多次請(qǐng)求解決方法：axios添加緩存請(qǐng)求，防止多次請(qǐng)求，單頁(yè)面多個(gè)同一組件造成多次請(qǐng)求解決方案

store 的 fieldFormat.js（這里用的store的modules）

export default {namespaced: true,state: {types: {}},mutations: {ADD_TYPE: (state, params) => {state.types[params.type] = params.value;}}
}

Dict.js

/*** 字典，用以匹配后端字典*/
export default class Dict {constructor(serve) {this.serve = serve;this.id = "dictValue";this.label = "dictLabel";this.isDict = true;}
}

Enum.js

/*** 枚舉，用以匹配后端枚舉*/
export default class Enum {constructor(serve) {this.id = "code";this.label = "name";this.isEnum = true;this.serve = serve;}
}

Field.js

/*** 字段，用以匹配后端字段*/
export default class Field {constructor(serve, id, label, method, dataField) {this.serve = serve;this.id = id;this.label = label;if (method) {this.method = method;}if (dataField) {this.dataField = dataField;}}
}

formatOptions.js

import * as vehicleTypeService from "@/api/bayonet/vehicleType";
import Enum from "./Enum";
import Dict from "./Dict";
import Field from "./Field";/*** 字段格式化組件參數(shù)** @param serve 請(qǐng)求地址或請(qǐng)求方法或枚舉類型，請(qǐng)求方法可以是api中的，必須是Function: () => Promise格式* @param id 請(qǐng)求后的數(shù)據(jù)列表字段，用于匹配那一條數(shù)據(jù)* @param label 請(qǐng)求后的數(shù)據(jù)列表字段，用于自動(dòng)格式化字段* @param method 請(qǐng)求方式，默認(rèn)get* @param dataField 請(qǐng)求后的data字段，默認(rèn)data* @param isEnum 是否枚舉，開(kāi)啟將請(qǐng)求后端枚舉* @param isDict 是否字典，開(kāi)啟將請(qǐng)求后端字典*/
export default {// 車輛類型vehicleType: new Field(vehicleTypeService.getList, "vehicleTypeId", "name"),// 審批狀態(tài)approvalStatusEnum: new Enum("com.yunku.project.entryApplication.enums.ApprovalStatus"),// 申請(qǐng)類型applicationTypeEnum: new Enum("com.yunku.project.entryApplication.enums.ApplicationType"),vehicle_enter_status: new Dict("vehicle_enter_status")
}

FieldFormat.vue

<template><div><template v-if="label && data && !hasSlot">{{ data[label] }}</template><slot></slot><slot name="format" :data="data"></slot><slot name="list" :list="list"></slot></div>
</template><script>
import request from '@/utils/request'
import {getDicts as getDicts} from '@/api/system/dict/data';
import formatOptions from "./formatOptions";export default {name: "FieldFormat",props: {value: [String, Number],type: String,params: Object},data() {return {enumUrl: 'common/utility/getEnumList',data: undefined,list: [],serve: undefined,id: undefined,label: undefined,method: 'get',dataField: 'data',isEnum: false,isDict: false}},computed: {fieldFormats() {// 獲取vuex中緩存的數(shù)據(jù)return this.$store.state.fieldFormat.types;},hasSlot() {// 判斷有沒(méi)有插槽（默認(rèn)插槽除外）return (this.$scopedSlots && (!!this.$scopedSlots.list || !!this.$scopedSlots.format))|| (this.$slots && (!!this.$slots.list || !!this.$slots.format));}},watch: {type: {handler(n) {// 類型改變時(shí)重新獲取數(shù)據(jù)if (n) {this.getData();}}},value: {handler(n) {// 值改變時(shí)重新解析if (n) {this.format();}}}},methods: {/*** 解析*/format() {// 在列表中查找對(duì)應(yīng)數(shù)據(jù)const list = this.list;if (list && list.length > 0) {this.data = list.find(datum => String(datum[this.id]) === String(this.value));}},/*** 獲取參數(shù)* @returns {string|*}*/getOption() {// 根據(jù)type獲取optionconst option = formatOptions[this.type];// 賦值屬性Object.assign(this.$data, option);return option.serve;},/*** 獲取數(shù)據(jù)*/getData() {const method = this.method;const serve = this.getOption();// 如果vuex中有當(dāng)前類型緩存，則取緩存if (this.fieldFormats[this.type]) {this.list = this.fieldFormats[this.type];this.format();return;}if (serve instanceof Function) {// 如果serve類型為Function，則直接調(diào)用取值serve().then(res => {this.relRes(res);});} else {if (this.isDict) {this.relDict();} else if (this.isEnum) {this.relEnum();} else {const query = {url: serve,method: method,}// get請(qǐng)求和post請(qǐng)求的參數(shù)不一樣query[this.method === 'get' ? 'params' : 'data'] = this.params;// 請(qǐng)求request(query).then(res => {this.relRes(res);});}}},/*** 解析枚舉*/relEnum() {request({url: this.enumUrl,method: 'get',params: {enumType: this.serve}}).then(res => {this.relRes(res);})},/*** 解析字典*/relDict() {getDicts(this.serve).then(res => {this.relRes(res);});},/*** 解析結(jié)果*/relRes(res) {let list = this.list = res[this.dataField];this.$store.commit("fieldFormat/ADD_TYPE", {type: this.type,value: list});this.format();}},created() {this.getData();}
}
</script>

main.js添加，可全局使用，不需要頁(yè)面單獨(dú)引入

import FieldFormat from "@/components/FieldFormat";
Vue.component('FieldFormat', FieldFormat)

下面是使用方法

字段格式化工具（可以格式化字典、枚舉、字段）

1. 添加參數(shù)

在 src/components/FieldFormat/formatOptions.js 中，添加格式化參數(shù)

你可以直接使用 JSON 格式來(lái)添加參數(shù)，也可以使用已定義的 class

export default {// 車輛類型vehicleType: {serve: vehicleTypeService.getList,id: "vehicleTypeId",label: "name",method: 'get',dataField: 'data'},// 審批狀態(tài)approvalStatusEnum: new Enum("com.yunku.project.entryApplication.enums.ApprovalStatus")
}

屬性

屬性	類型	說(shuō)明
serve	String 或 Function	請(qǐng)求地址或請(qǐng)求方法或枚舉類型，請(qǐng)求方法可以是api中的，必須是Function: () => Promise格式
id	String	請(qǐng)求后的數(shù)據(jù)列表字段，用于匹配那一條數(shù)據(jù)
label	String	請(qǐng)求后的數(shù)據(jù)列表字段，用于自動(dòng)格式化字段
method	String	請(qǐng)求方式，默認(rèn)get
dataField	String	請(qǐng)求后的data字段，默認(rèn)data
isEnum	Boolean	是否枚舉，開(kāi)啟將請(qǐng)求后端枚舉
isDict	Boolean	是否字典，開(kāi)啟將請(qǐng)求后端字典

class

屬性	類型	說(shuō)明
Enum	枚舉	用以匹配后端枚舉
Dict	字典	用以匹配后端字典
Field	字段	用以匹配后端字段

2. 使用

格式化

在需要格式化的地方，使用組件 field-format，value為已知數(shù)據(jù)值， type 為 formatOptions 中添加的名稱，另外還有 params 字段用于請(qǐng)求自定義傳參

<field-format :value="form.vehicleType" type="vehicleType"></field-format>

自定義插槽

可以使用插槽實(shí)現(xiàn)更多場(chǎng)景的功能，如

<field-format :value="form.vehicleType" type="vehicleType"><template #format="{data}">{{ data.name }}</template>
</field-format>

遍歷

或者獲取所有列表，用于遍歷

<field-format type="vehicleType"><template #list="{list}"><el-select v-model="form.vehicleType"><el-optionv-for="item in list":label="item.name":value="item.vehicleTypeId":key="item.vehicleTypeId"></el-option></el-select></template></field-format>
</el-form-item>

默認(rèn)插槽

用以自定義追加數(shù)據(jù)