危险

配置都需要在系统级项目的入口页配置，且必须在框架资源加载之前完成配置。子系统项目不可配置。

为保证系统体验一致，一个系统仅支持一种风格和尺寸，且组件不支持单独设置尺寸。

主题和尺寸

设置框架的主题风格和全局尺寸大小，不支持设置单个组件的尺寸。

配置文件路径

配置的文件引用路径为cabinx/core/config.js。

可选值

主题和尺寸的可选值请查看文档主题化，主题的尺寸的配置需要在框架加载之前。

API

cabinx/core/config.js文件提供了以下API：

• setConfig：设置配置

xxx/index.html

 ...
 seajs.use(['cabinx/core/config.js'],function(coreConfig) {
 
    
    // 设置 CabinX的主题为 海外，尺寸为 中等尺寸
    coreConfig.setConfig({
        themeConfig: { theme: 'overseas', size: 'normal' }
    });
    
    
    //加载框架或其他资源
    seajs.use(['xxx/xxx/xxx'],function(xxx) {
    ...
    });
    ...
});

• getConfig：获取配置

 import coreConfig from 'cabinx/core/config.js';
 
 const config = coreConfig.getConfig();
 
});

其他配置

支持配置个体组件的UI风格，权限，格式化，全局通用ajax请求拦截等。和主题和尺寸一样，需要在入口页配置，且需要在框架加载之前完成。

配置文件路径

其他配置的文件引用路径有所不同，为：cabinx/util/config.js。

API

该文件提供了以下API：

• setConfig：设置配置

xxx/index.html

 ...
 seajs.use(['cabinx/util/config.js'],function(cabinxConfig) {
 
    cabinxConfig.setConfig({       
        auth: {
            authPrivilege(authCode) {
                return { hasAuth: !!authCode, pass: true };
            },
        },
        formatter: {
            date: {
                format: 'yyyy-MM-dd',
                dayjsFormat: 'YYYY-MM-DD',
            },
    
            dateTime: {
                format: 'yyyy-MM-dd HH:mm:ss',
                dayjsFormat: 'YYYY-MM-DD HH:mm:ss',
            },
    
            quantity: {
                format: '#,###,###,##0.##',
                prefix: '', // 前缀
                suffix: '', // 后缀
                separator: ',', // 千分符
                decimal: '.', // 小数分隔符
                precision: 2, // 精度
            },
    
            unitPrice: {
                format: '#,###,###,##0.##',
                prefix: '', // 前缀
                suffix: '', // 后缀
                separator: ',', // 千分符
                decimal: '.', // 小数分隔符
                precision: 2, // 精度
            },
    
            amount: {
                format: '#,###,###,##0.##',
                prefix: '', // 前缀
                suffix: '', // 后缀
                separator: ',', // 千分符
                decimal: '.', // 小数分隔符
                precision: 2, // 精度
            },
        },        
    });
    
    //加载框架或其他资源
    seajs.use(['xxx/xxx/xxx'],function(xxx) {
    ...
    });
    ...
});

• getConfig：获取配置

 import cabinxConfig from 'cabinx/util/config.js';
 
 const config = cabinxConfig.getConfig();
 
});

配置说明

ui 交互

关于个体组件的默认风格在这里配置，详细支持的配置请看以下代码：

 seajs.use(['cabinx/util/config.js'],function(cabinxConfig) {
   cabinxConfig.setConfig({
       ...
       
       ui: {
           //布局相关
           layoutConfig: {
               pageLayoutResizeable: true,//page下第一层的布局容器是否可拖拽
               layoutPadding: 0,//根容器和跟容器下第一层的布局容器的上下间距，没有配置layoutLRPadding时，左右间隙为layoutPadding*2。
               layoutLRPadding: 0,//根容器和跟容器下第一层的布局容器的左右间距
               tabsPopUpActions: false,//tabs的操作区域是否上浮，目前仅移动端有效
               actionsTurned: false,//移动端有效，全局actions操作区域按钮和图标是否变为上下布局 ，true/false:是/否
           },
       },
       
       ...
   });
 });

auth 权限

auth中用于全局的权限配置，需要在authPrivilege函数中返回：

• hasAuth：控制配置了authCode属性的组件是否禁用，true：不禁用，false：禁用
• pass：控制配置了authCode属性的组件是否渲染,true：渲染，false：不渲染

 seajs.use(['cabinx/util/config.js'],function(cabinxConfig) {
   cabinxConfig.setConfig({
       ...
       
       auth: {
           authPrivilege(authCode) {
               return { 
                    hasAuth: !!authCode,//控制配置了authCode属性的组件是否禁用，true/false：不禁用/禁用
                    pass: true,//控制配置了authCode属性的组件是否渲染,true/false：渲染/不渲染
               };
           },
       },
       
       ...
   });
 });

ajax 请求

需要全局拦截CabinX.ajax的请求，可以在ajax中配置，支持接口请求前后的的配置，需要返回对应函数吐出的数据。

 seajs.use(['cabinx/util/config.js'],function(cabinxConfig) {
   cabinxConfig.setConfig({
       ...
   
       ajax: {
           reqFilter(param) {//接口请求前
               return param;
           },
           resFilter(response) {//接口请求后
               return response;
           },
       },
       
       ...
   });
 });

datepicker 日期组件

目前支持配置各种日期时间类型的快捷操作区域，具体如下代码：

 seajs.use(['cabinx/util/config.js'],function(cabinxConfig) {
   cabinxConfig.setConfig({
         ...
         
         datepicker: {
            date: { shortcuts: undefined },//年月日 的快捷操作区域
            datetime: { shortcuts: undefined },//年月日时间 的快捷操作区域
            daterange: { shortcuts: undefined },//年月日范围 的快捷操作区域
            datetimerange: { shortcuts: undefined },//年月日时间范围 的快捷操作区域
        },
        
        ...
   });
 });

formatter 格式化

• date：日期

• dateTime：日期和时间

• quantity：数量

• unitPrice：单价

• amount：金额

信息

• date和dateTime的配置方式一样，请参考DatePicker组件中的format&value-format。
• quantity、unitPrice和amount的配置方式一样，也可参考input组件中的format属性配置，支持以下配置：

    {
        prefix: '$', // 前缀
        suffix: '', // 后缀
        separator: ',', // 千分符
        decimal: '.', // 小数分隔符
        precision: 4, // 精度
        zero: 3, // 补零位数，注意：zero的值一定是 <= precision 的值
        max: 99999, // 最大值
        max: 0, // 最小值        
    }

 seajs.use(['cabinx/util/config.js'],function(cabinxConfig) {
   cabinxConfig.setConfig({
        ...
   
        formatter: {
            //日期组件格式
            date: {
                format: 'yyyy-MM-dd',
            },
    
            dateTime: {
                format: 'yyyy-MM-dd HH:mm:ss',
            },
    
            quantity: {
                prefix: '', // 前缀
                suffix: '', // 后缀
                separator: ',', // 千分符
                decimal: '.', // 小数分隔符
                precision: 2, // 精度
            },
    
            unitPrice: {
                prefix: '', // 前缀
                suffix: '', // 后缀
                separator: ',', // 千分符
                decimal: '.', // 小数分隔符
                precision: 2, // 精度
            },
    
            amount: {
                prefix: '', // 前缀
                suffix: '', // 后缀
                separator: ',', // 千分符
                decimal: '.', // 小数分隔符
                precision: 2, // 精度
            },
        },
        
        ...
   });
 });

input 输入框

input组件type为text时，支持separators配置一个长度为2的数组，释义如下：

• separators[0]：值类型为Array，在录入输入框时，输入的内容支持使用多个符号分隔；
• separators[1]：值类型为String，使用指定符号连接使用separators[0]分割的文案，得到最终的录入字符串。

 seajs.use(['cabinx/util/config.js'],function(cabinxConfig) {
   cabinxConfig.setConfig({
         ...
         
         input: {
             text: {
                 separators: [[',','#'], '%'],//input类型为text时，输入框输入的内容支持使用','和'#'分隔，使用‘%’连接。
             },
         },
         
         ...
   });
 });

select 下拉框

select的separators支持配置一个长度为2的数组，释义如下：

• separators[0]：值类型为Array，在录入搜索框时，输入的内容支持使用多个符号分隔；
• separators[1]：值类型为String，使用指定符号连接使用separators[0]分割的文案，得到最终的录入字符串。

 seajs.use(['cabinx/util/config.js'],function(cabinxConfig) {
   cabinxConfig.setConfig({
         ...
   
         select: {
             separators: [[',','#'], '%'],//select输入搜索框时，输入的内容支持使用','和'#'分隔，使用‘%’连接。
         },
         
         ...
   });
 });

cascader 级联

cascader的separators支持配置一个长度为2的数组，释义如下：

• separators[0]：值类型为Array，在录入搜索框时，输入的内容支持使用多个符号分隔；
• separators[1]：值类型为String，使用指定符号连接使用separators[0]分割的文案，得到最终的录入字符串。

 seajs.use(['cabinx/util/config.js'],function(cabinxConfig) {
   cabinxConfig.setConfig({
         ...
   
         cascader: {
             separators: [[',','#'], '%'],//cascader输入搜索框时，输入的内容支持使用','和'#'分隔，使用‘%’连接。
         },
         
         ...
   });
 });

emptyText 表单无值默认文案

表单locked和info模式时，组件没有值的默认显示文案可以使用emptyText配置。

 seajs.use(['cabinx/util/config.js'],function(cabinxConfig) {
   cabinxConfig.setConfig({
         ...
   
         emptyText: '',//表单locked和info模式，组件没有值的默认显示文案
         
         ...
   });
 });