主题定制系列——字段图标替换

栏目:云苍穹知识作者:金蝶来源:金蝶云社区发布:2024-09-23浏览:3

主题定制系列——字段图标替换

## 用户场景 在苍穹标准产品里,字段的默认按钮图标是固定的,比如:日期图标是日历、下拉列表图标是箭头,除此之外,业务字段更多的是一个搜索图标。 虽然目前基础资料字段支持设计器进行图标的替换,但是这仅能替换当前表单的当前字段。 有的客户希望能系统级别替换字段的图标,替换成具有自己品牌特色的图标或者具有特殊业务含义的图标,这样对于用户体验来说更加友好,更利于区分; ## 功能介绍 这里我们默认你已掌握了主题定制功能,如不了解,请先前往[主题定制](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` 内,很多同学搞错了位置,导致配置不生效

主题定制系列——字段图标替换

## 用户场景在苍穹标准产品里,字段的默认按钮图标是固定的,比如:日期图标是日历、下拉列表图标是箭头,除此之外,业务字段更多的是一个...
点击下载文档
确认删除?
回到顶部
客服QQ
  • 客服QQ点击这里给我发消息