【设计初衷是用户可根据给定的字段进行准确描述】
实现功能:
1. 文本域内容串动态配置字段,以$ {英文}拼接格式给到接口。
(传参如:$ {heat_status_code}正常,$ {wdy_temp}也正常!)
2. 编辑时根据接口返回的$ {英文}去匹配显示对应的中文到页面。
(页面显示如:$ {供暖状态} 正常,${室温}也正常!)
实现效果图:
关键代码-对表单内容串格式变换
methods: {
/***
* 页面显示格式(中文)与提交格式(英文)互换
* 参数alarmDesc 说明内容(会接受到两种格式:①页面操作时表单中的内容:${供暖状态}正常,${室温}也正常! ②后端详情接口给到的:${heat_status_code}正常,${wdy_temp}也正常!)
* 参数flag 为true时传来的是中文,匹配{中文}替换为{英文},主要用于页面显示;为false时传来的是英文,匹配{英文}替换为{中文},主要用于接口传参
*/
replaceKeysWithVals(alarmDesc, flag) {
// this.keyOptions 为说明参数字段(动态的),里面字段key为中文, val为对应的英文(如 key: 供暖状态,val: heat_status_code)
return this.keyOptions.reduce((desc, { key, val }) => {
const regex = new RegExp(`\\{${flag ? key : val}\\}`, "g");
return desc.replace(regex, `{${flag ? val : key}}`);
}, alarmDesc);
},
}