ZF sun
70c9c49b94
1. 新增form-platform-mixin.js集中管理平台判断、别名兼容和配置键获取逻辑 2. 移除ns-form和ns-newform组件内重复的平台相关代码 3. 统一替换rpx单位处理逻辑为$util.rpx，简化样式计算代码 4. 移除冗余的_resolveFontSize工具方法，复用现有工具能力
105 lines
3.2 KiB
JavaScript
105 lines
3.2 KiB
JavaScript
/**
|
||
* form-platform-mixin.js
|
||
*
|
||
* 表单组件共用的平台检测 mixin
|
||
*
|
||
* 集中维护 3 个 computed：
|
||
* - platform 当前运行平台 key（与后端 formConfig.terminal 键名对齐）
|
||
* - platformAliases 后端键名 → 内部 platform 名 兼容层
|
||
* - platformConfigKeys 当前平台的有效配置键集合（用于从 formConfig.terminal 查找）
|
||
*
|
||
* 消费方：
|
||
* - components/ns-form/ns-form.vue
|
||
* - components/ns-newform/ns-newform.vue
|
||
* - 任何需要按端读取 formConfig.terminal.{h5|weapp|harmony|app} 的表单组件
|
||
*
|
||
* 设计原则：
|
||
* 1. 单一真值：避免 ns-form / ns-newform 各自维护导致漂移
|
||
* 2. 纯 computed mixin：不依赖 props/data/methods，便于跨组件复用
|
||
* 3. 不依赖 util.js 等其它模块，避免循环依赖
|
||
* 4. 通过 mixins: [...] 引入，组件侧不再写平台判断代码
|
||
*
|
||
* 用法：
|
||
* import formPlatformMixin from '@/common/js/form-platform-mixin.js';
|
||
* export default {
|
||
* mixins: [formPlatformMixin],
|
||
* computed: {
|
||
* config() {
|
||
* const cur = this.platform;
|
||
* const keys = this.platformConfigKeys;
|
||
* // ...
|
||
* }
|
||
* }
|
||
* };
|
||
*/
|
||
|
||
export default {
|
||
computed: {
|
||
/**
|
||
* 当前运行平台标识（与后端 formConfig.terminal 键名对齐）
|
||
* 后端在 formConfig.terminal 下挂的差异化配置键：h5 / weapp / mp-harmony / app
|
||
* 这里返回的 key 必须与后端设计器输出的 terminal 字段名一致
|
||
*/
|
||
platform() {
|
||
// #ifdef H5
|
||
return 'h5';
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
return 'weapp';
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
return 'mp-alipay';
|
||
// #endif
|
||
// #ifdef MP-BAIDU
|
||
return 'mp-baidu';
|
||
// #endif
|
||
// #ifdef MP-TOUTIAO
|
||
return 'mp-toutiao';
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
return 'app';
|
||
// #endif
|
||
// #ifdef MP-HARMONY
|
||
return 'harmony';
|
||
// #endif
|
||
// #ifdef QUICKAPP-WEBVIEW
|
||
return 'quickapp';
|
||
// #endif
|
||
return 'h5';
|
||
},
|
||
/**
|
||
* 后端键名 → 内部 platform 名 兼容层
|
||
* 不同后端序列化路径可能用 mp-weixin / wechat / mp-harmony 等不同的 key，
|
||
* 在这里统一映射到内部 platform 名，避免 config() 里到处写 if/else。
|
||
*/
|
||
platformAliases() {
|
||
return {
|
||
'h5': 'h5',
|
||
'weapp': 'weapp',
|
||
'mp-weixin': 'weapp',
|
||
'wechat': 'weapp',
|
||
'harmony': 'harmony',
|
||
'app': 'app',
|
||
'app-plus': 'app'
|
||
};
|
||
},
|
||
/**
|
||
* 当前平台的有效配置键集合
|
||
* 用于 config() 中查找 formConfig.terminal 下的平台差异化配置：
|
||
* - 后端格式：formConfig.terminal = { h5: {...}, weapp: {...}, harmony: {...} }
|
||
* - 旧式扁平：formConfig[platformKey] = { ... }
|
||
* 返回所有映射到当前 platform 的后端键名，方便两种结构都能命中。
|
||
*/
|
||
platformConfigKeys() {
|
||
const cur = this.platform;
|
||
const aliases = this.platformAliases;
|
||
const keys = [];
|
||
Object.keys(aliases).forEach(k => {
|
||
if (aliases[k] === cur) keys.push(k);
|
||
});
|
||
// 加入当前平台名（兼容 formConfig[platform] 这种扁平写法）
|
||
if (keys.indexOf(cur) === -1) keys.push(cur);
|
||
return keys;
|
||
}
|
||
}
|
||
}; |