宁波企业网站搭建特点,网站小程序,wordpress的functions.php,南充市建设厅官方网站封装字段翻译组件#xff0c;可以格式化字典、枚举、字段 优点#xff1a; 使用简单#xff0c;一次配置多次使用#xff0c;缓存降低后端请求次数#xff0c;扩展性强 没有缓存时造成单页面多次请求解决方法#xff1a;axios添加缓存请求#xff0c;防止多次请求#… 封装字段翻译组件可以格式化字典、枚举、字段 优点 使用简单一次配置多次使用缓存降低后端请求次数扩展性强 没有缓存时造成单页面多次请求解决方法axios添加缓存请求防止多次请求单页面多个同一组件造成多次请求解决方案 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;/*** 字段格式化组件参数** param serve 请求地址或请求方法或枚举类型请求方法可以是api中的必须是Function: () Promise格式* param id 请求后的数据列表字段用于匹配那一条数据* param label 请求后的数据列表字段用于自动格式化字段* param method 请求方式默认get* param dataField 请求后的data字段默认data* param isEnum 是否枚举开启将请求后端枚举* param isDict 是否字典开启将请求后端字典*/
export default {// 车辆类型vehicleType: new Field(vehicleTypeService.getList, vehicleTypeId, name),// 审批状态approvalStatusEnum: new Enum(com.yunku.project.entryApplication.enums.ApprovalStatus),// 申请类型applicationTypeEnum: new Enum(com.yunku.project.entryApplication.enums.ApplicationType),vehicle_enter_status: new Dict(vehicle_enter_status)
}FieldFormat.vue
templatedivtemplate v-iflabel data !hasSlot{{ data[label] }}/templateslot/slotslot nameformat :datadata/slotslot namelist :listlist/slot/div
/templatescript
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中缓存的数据return this.$store.state.fieldFormat.types;},hasSlot() {// 判断有没有插槽默认插槽除外return (this.$scopedSlots (!!this.$scopedSlots.list || !!this.$scopedSlots.format))|| (this.$slots (!!this.$slots.list || !!this.$slots.format));}},watch: {type: {handler(n) {// 类型改变时重新获取数据if (n) {this.getData();}}},value: {handler(n) {// 值改变时重新解析if (n) {this.format();}}}},methods: {/*** 解析*/format() {// 在列表中查找对应数据const list this.list;if (list list.length 0) {this.data list.find(datum String(datum[this.id]) String(this.value));}},/*** 获取参数* returns {string|*}*/getOption() {// 根据type获取optionconst option formatOptions[this.type];// 赋值属性Object.assign(this.$data, option);return option.serve;},/*** 获取数据*/getData() {const method this.method;const serve this.getOption();// 如果vuex中有当前类型缓存则取缓存if (this.fieldFormats[this.type]) {this.list this.fieldFormats[this.type];this.format();return;}if (serve instanceof Function) {// 如果serve类型为Function则直接调用取值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请求和post请求的参数不一样query[this.method get ? params : data] this.params;// 请求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);});},/*** 解析结果*/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();}
}
/scriptmain.js添加可全局使用不需要页面单独引入
import FieldFormat from /components/FieldFormat;
Vue.component(FieldFormat, FieldFormat)下面是使用方法
字段格式化工具可以格式化字典、枚举、字段
1. 添加参数
在 src/components/FieldFormat/formatOptions.js 中添加格式化参数
你可以直接使用 JSON 格式来添加参数也可以使用已定义的 class
export default {// 车辆类型vehicleType: {serve: vehicleTypeService.getList,id: vehicleTypeId,label: name,method: get,dataField: data},// 审批状态approvalStatusEnum: new Enum(com.yunku.project.entryApplication.enums.ApprovalStatus)
}属性
属性类型说明serveString 或 Function请求地址或请求方法或枚举类型请求方法可以是api中的必须是Function: () Promise格式idString请求后的数据列表字段用于匹配那一条数据labelString请求后的数据列表字段用于自动格式化字段methodString请求方式默认getdataFieldString请求后的data字段默认dataisEnumBoolean是否枚举开启将请求后端枚举isDictBoolean是否字典开启将请求后端字典
class
属性类型说明Enum枚举用以匹配后端枚举Dict字典用以匹配后端字典Field字段用以匹配后端字段
2. 使用
格式化
在需要格式化的地方使用组件 field-formatvalue为已知数据值 type 为 formatOptions 中添加的名称另外还有 params 字段用于请求自定义传参
field-format :valueform.vehicleType typevehicleType/field-format自定义插槽
可以使用插槽实现更多场景的功能如
field-format :valueform.vehicleType typevehicleTypetemplate #format{data}{{ data.name }}/template
/field-format遍历
或者获取所有列表用于遍历
field-format typevehicleTypetemplate #list{list}el-select v-modelform.vehicleTypeel-optionv-foritem in list:labelitem.name:valueitem.vehicleTypeId:keyitem.vehicleTypeId/el-option/el-select/template/field-format
/el-form-item默认插槽
用以自定义追加数据
