主题定制系列——字段图标替换
## 用户场景
在苍穹标准产品里,字段的默认按钮图标是固定的,比如:日期图标是日历、下拉列表图标是箭头,除此之外,业务字段更多的是一个搜索图标。
虽然目前基础资料字段支持设计器进行图标的替换,但是这仅能替换当前表单的当前字段。
有的客户希望能系统级别替换字段的图标,替换成具有自己品牌特色的图标或者具有特殊业务含义的图标,这样对于用户体验来说更加友好,更利于区分;
## 功能介绍
这里我们默认你已掌握了主题定制功能,如不了解,请先前往[主题定制](https://vip.kingdee.com/article/90752877873775360)
支持图标替换的字段有通用字段(日期、长日期、下拉列表、时间)、业务字段(包含:基础资料、组织、物料、币别、用户、科目、客户、供应商等);
基础资料可配置统一的按钮图标,同时可按基础资料具体业务进行绑定
```js
{
"theme": {
"@theme-color": "#5582F3"
},
"defaultProps": {
"common": {
"field": {
"replaceIcons": {
"basedata": {
"commonIcon": "iconfont iconfont-f", // 统一的按钮图标,没配置具体的按钮图标就取这个公共值
"specIcon": {
"bos_org": "iconfont icon-zuzhiqunzu", // 配置组织字段的按钮图标
"bd_material": "iconfont icon-wuliaoguanli", // 配置物料字段的按钮图标
"bd_currency": "iconfont icon-bibie-", // 配置币别字段的按钮图标
"bos_user": "iconfont icon-yonghu", // 配置用户字段的按钮图标
"bd_accountview": "iconfont icon-kemu", // 配置科目字段的按钮图标
"bd_customer": "iconfont icon-kehu", // 配置客户字段的按钮图标
"bd_supplier": "iconfont icon-gongyingshang" // 配置供应商字段的按钮图标
}
}
}
}
}
}
}
```
基础资料字段默认按钮图标生效规则为: 优先获取特定字段配置的图标,如无,则拿统一设置的公共图标。
注:有些字段支持设计器进行按钮图标的替换,比如基础资料,这时生效的是设计器配置的按钮图标
![image.webp](/download/0100b71798b575ba4fb3ae30255efc402e35.webp)
## 实操
1、扩展所需要的字体图标,如不了解,请先前往[字体图标拓展使用指引](https://vip.kingdee.com/article/109360188280612608)
2、进行主题配置:
```js
{
"theme": {
"@theme-color": "#5582F3"
},
"defaultProps": {
"common": {
"field": {
"replaceIcons": {
"date": "iconfont icon-riqi",
"datetime": "iconfont icon-geshi-changriqi",
"daterange": "iconfont icon-riqifanwei",
"select": "iconfont icon-xialaliebiao",
"time": "iconfont icon-shijian",
"timerange": "iconfont icon-shijianfanwei",
"basedata": {
"commonIcon": "iconfont iconfont-f",
"specIcon": {
"bos_org": "iconfont icon-zuzhiqunzu",
"bd_material": "iconfont icon-wuliaoguanli",
"bd_currency": "iconfont icon-bibie-",
"bos_user": "iconfont icon-yonghu",
"bd_accountview": "iconfont icon-kemu",
"bd_customer": "iconfont icon-kehu",
"bd_supplier": "iconfont icon-gongyingshang"
}
}
}
}
}
}
}
```
在这里,我们可看到:
基础资料字段拥有公共的按钮图标,组织、物料、币别、用户、科目、客户、供应商配置了特定的图标。所以除了这些特定配置的业务字段,其他类别的基础资料生效的就是配置的'iconfont-f'图标
## 效果展示
注:如下截图的页面二开都没有手动去设置字段按钮图标
苍穹标准平台
![image.webp](/download/0100963c4dc1f81c45aeb3bd3c14ac4b3fe0.webp)
配置字段图标替换后
![image.webp](/download/01008ad131dae0814ab7b7de4eb1b7ae508b.webp)
对比可看出,通过主题对日期、长日期、下拉列表、时间、组织、币别等进行了按钮图标系统级别的替换,更易于区分了,提升了用户体验
## 注意事项
所有字段的公共属性必须放在`common` 内,很多同学搞错了位置,导致配置不生效
主题定制系列——字段图标替换
## 用户场景在苍穹标准产品里,字段的默认按钮图标是固定的,比如:日期图标是日历、下拉列表图标是箭头,除此之外,业务字段更多的是一个...
点击下载文档
本文2024-09-23 00:38:47发表“云苍穹知识”栏目。
本文链接:https://wenku.my7c.com/article/kingdee-cangqiong-140807.html
您需要登录后才可以发表评论, 登录登录 或者 注册
最新文档
热门文章