

# 一、配置后台调用

```typescript

 //使用示例：
             <CorsComponent
              weId={`${this.props.weId || ''}_5nuw82`}
              app="@weapp/edc"
              compName="ShowTrans"
              dataSet={dataSet} 
              onChange={onChange}
              value={value}
              fieldType={transFormatType}
              optionFormatTypes={customOptions}
              fieldOnlyKey={editData?.fieldId}
            />

// 注意！！
显示转化的数据源使用 type='LOGIC'
{
        id: objId,
        type: 'LOGIC',
        groupId: 'weaver-ebuilder-form-service',
        appId,
      };
```

> 参数说明

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 配置信息 | ITransRule\[\] | 否 | \[\] |
| onChange | 配置信息修改回调（1、配置列表修改后调用2、配置弹框确认修改时候调用） | （value:IRrnsRule\[\]）=\>void | 否 | 无 |
| onDialogChange | 配置详情弹框显示关闭回调 | （val:boolean）=\>void | 否 |  |
| typeOptions | 自定义配置组件支持的【转换类型】 | RuleTypeType\[\] | 否 | 所有类型 |
| valueFormatOptions | 自定义【显示格式转换类型】支持的【转换格式】 | ValueFormatType\[\] | 否 | 所有类型 |
| optionFormatTypes | 【选项转换类型】选项值信息 | TransOptionFormat\[\] | 否 | \[\] |
| ruleSize | 转换规则数量限制 | number | 否 | 不限制 |
| fieldType | 表单字段类型【对接中增加】 | string | 否 | 无 |
| disabledTypeOptions | 禁用的【转换类型】【对接中增加】 | RuleTypeType\[\] | 否 | \[\] |
| disabledValueFormatOptions | 禁用【转换格式】【对接中增加】 | TransOptionFormat\[\] | 否 | \[\] |
| noAuto | 取消涉及自动方式【对接中增加】 | boolean | 否 | false |
| dataSet | 数据源来源配置（非必填选项，但尽量需要显示转化内部条件转化都需要数据源来获取数据） | DataSet | 否 | 无 |

> RuleTypeType类型说明

```typescript
highlight = 'highlight',// 突出显示
valueFormat = 'valueFormat',// 显示格式
option = 'option',// 选项
dataBar = 'dataBar',// 数据条
iconSet = 'iconSet',// 图标集
iconTrans = 'iconTrans',// 图标转换
gradation = 'gradation',// 色阶
tableFormat = 'tableFormat'// 表格格式
preSuffix = 'preSuffix',// 前后缀
cusHtml = 'cusHtml',// 自定义html
```

> ValueFormatType类型说明

```typescript
  none = 'none',// 无
  number = 'number',// 数字
  amountInWords = 'amountInWords',// 金额大写
  percentage = 'percentage',// 百分比
  progressBar = 'progressBar',// 进度条
  thumbnail = 'thumbnail',// 缩略图
  starRating = 'starRating',// 星级评分
  audio = 'audio',// 语音
  avatar = 'avatar',// 头像
  phone = "phone", // 手机号
  fName = "fName",// 姓
  name = "name",// 名
  alias = "alias",// 别名
  dep = "dep",// 部门
  leader = "leader",// 上级
  email = "email",//邮箱

  hr = "hr",// 人员相关
  option = "option",// 选项类型
  relation = "relation",// 关联类型
  other = "other",// 其他
```

> TransOptionFormat 类型说明

```typescript
id:number,// 必填选项的值，用于选项类型转换时候的实际判断依据
content:string,// 必填选项的展示值，用于选项类型转换时候转换展示文本依据
fontColor?:string,
background?:string,
borderColor?:string
```

> IRuleConfig 规则类型

```typescript

  // 规则类型
  ruleType: string;
  // 规则条件类型
  ruleConditionType: RuleConditonType;
  ruleCondition: string;
  ruleConditionValue: string;
  dataSet: any;// 数据源配置信息
  ruleConditionAdvance: any;// 高级条件设置

  showFormatType: ShowFormatType;// 显示格式类型
  highlightPredefined: TransHighlightPredefined;// 预定义显示格式
  highlightCustom: TransFontStyle;// 自定义显示格式
  quickHighlightOptions: any[],// 快捷显示格式

  // 选项数据
  optionFormat:TransOptionFormat[];// 显示格式
  optionBorderFillet: number;// 边框圆角

  // 显示格式
  valueFormat: TransValueFormat;// 转换格式
  avatarSize: string,// 头像大小
  isShowUserName: boolean,// 是否显示用户名字
  isShowDeptName: boolean,// 是否显示用户部门名字
  valueFormatUnit: string;// 数量单位
  valueFormatSuffix: string;// 单位后缀
  valueFormatOption: TransValueFormatOption;// 显示格式【选项类型】相关配置

  // 星级评分
  starRatingMaxValue: string; // 最大分数
  starRatingStyle: string;// 外观显示
  starRatingSize: string;// 大小显示
  isShowHalfStar: boolean;// 支持半星

  // 进度条
  progressColor: string; // 进度条颜色
  progressValColor: string; // 数值颜色
  progressDiameter?: number;// 环形直径
  progressMaxValue: number;// 进度条最大值

  // 关联类型
  relationType?: BrowserValueType; // 关联类型
  subRelationType?: BrowserValueType; // 二级关联类型（关联浏览、关联表单数据、关联ebuilder）
  showFields?: any; // 显示字段

  // 数据条 数据
  dataBarMinValue: TransDataBarRangeValue,// 最小值
  dataBarMaxValue: TransDataBarRangeValue,// 最大值
  dataBarFillMethod: string,// 填充方式
  dataBarFillPosition: string,// 填充位置
  dataBarPositiveColor: string,// 正值颜色
  dataBarNegativeColor: string,// 负值颜色
  dataBarIsShowOnly: boolean,// 仅显示数据条

  // 图标集 数据
  iconSetStyle: string,// 图标样式
  iconSetInfo: TransIconValueSet[],// 图标设置信息
  iconSetCondition:string,// 条件类型
  iconSetIsShowOnly: boolean,// 仅显示图标

  // 图标数据
  iconName: string,// 图标名字
  assetsItemData: any;// 图标相关配置信息
  iconColor: string,// 图标颜色(废弃)
  iconFillInfo: TransIconFill;// 图标填充信息
  iconShowOnly: boolean;// 仅展示图标

  // 色阶数据
  colorScaleStyle: string[]; // 色阶样式
  colorScaleMinValue: TransColorScaleStyle;// 最小值样式
  colorScaleMaxValue: TransColorScaleStyle;// 最大值样式

  // 表格格式数据
  tableType: string;// 类型
  tableCondition: any;// 条件
  tableConditionRowBackColor: string;// 条件行背景色
  tableConditionRowStyle: TransFontStyle;// 条件行样式
  tableOddRowBackColor:string;// 奇数行背景色
  tableOddRowStyle:TransFontStyle;// 奇数行样式
  tableEvenRowBackColor:string;// 偶数行背景色
  tableEvenRowStyle:TransFontStyle;// 偶数行样式

  prefix: string;// 前缀
  suffix: string;// 后缀

  cusHtml: string;// 自定义html
```

# 二、显示效果转换调用

```typescript
 //使用示例：
<CorsComponent 
  weId={`${weId || ''}_98wrhw`}
  app={"@weapp/edc"}
  compName="TransData"
  rules={datas}
  value={value}
  showValueSplitChar={String.fromCharCode(6)}
  srcSuffix="&authModule=ebuilderform"
  mainField={{ mainFieldId: 'id', mainFieldValue: rowDataId }}
  dataPermissionType={dataPermissionState}
  afterStyleChange={this.afterStyleChange}
  afterInit={this.onAfterInit}
  showAvatarDetail
/>
```

> 参数说明

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| rules | 【规则配置】组件设置的转换规则 | any\[\] | 否 | \[\] |
| value | 转换值 | string | 否 |  |
| showValue | 回显值，没有showValue，默认使用value做回显值 | string | 否 |  |
| valueList | 数据数组 | any\[\] | 否 | \[\] |
| valueIndex | 【转换值】在数据数组中的下标，如果传valueList,这个参数需要传递 | number | 否 |  |
| usePercentageSign | 使用百分比标识 | boolean | 否 | false |
| datas | 数据数组【数组中的元素是对象】 | any\[\] | 否 | \[\] |
| valueKey | 【转换值】是datas对象元素的key | string | 否 |  |
| dataRowNum | 数据行号，使用表格格式规则时候传递当前数据所属行下标 | number | 否 |  |
| showValueSplitChar | 数据是否要做分隔 | any | 否 | String.fromCharCode(6) |
| srcSuffix | 路径后缀（如图片路径需要拼接带上一些权限后缀：‘&authModule=ebuilderform’） | string | 否 |  |
| afterStyleChange | 可做转换内容复写回调 | (instance:any, list: Array) =\> void | 否 |  |
| afterInit | 初始化后回调获取实例 | (instance:any) =\> void | 否 |  |
| showAvatarDetail |  |  | 否 |  |

> 重点关注value、showValue、valueList、datas的使用

```typescript
- value
内部用作数据处理值，如 showValue 不存在则以 value 用作回显值

- showValue
显示转化回显值

- valueList
直接传数组类型

- datas
带对象的数组类型
如：
[{k1:v1,k2:v2...}...]

【优先级存在注意!!!!!】

value>valueList[valueIndex]>datas[valueIndex][valueKey]
```

如果使用数据条、色阶需要使用到数据范围的情况，请务必将当前一列的数据通过valueList或者是datas指定。

**已有模块对接问题记录（含处理方式）**

fiedlType说明：(模块中需求：能够根据字段类型自动带出【转换类型】和【显示格式转换类型】)

```typescript
已对接的模块需求增加的属性：用于传递表单字段类型自动带出支持的【转换类型】以及【显示格式转换类型】
下的【转换格式】
与typeOptions以及valueFormatOptions的关系为,最终的【转换类型】和【显示格式转换类型】为字段类型映
射的对应值和传递的typeOptions以及valueFormatOptions取并集.
```

disabledTypeOptions和说明：（对于某些【转换类型】和【显示格式转换类型】不需要使用）

```typescript
已对接的模块需求增加的属性：用于禁用传递的【转换类型】
```

noAuto说明：（模块中由于无法提供【显示转换展示】组件所需的完整的一列数据，导致自动最大最小值无法实现随增加此参数用于隔绝相关配置）
