表格列绘制

在表格中，有时需要绘制的表格列需要整合表格行数据进行呈现，使用表格列绘制可满足这一需求。脚本代码为异步脚本，返回一个html格式的字符串，绘制时使用v-html绑定绘制。

参数

名称	类型	描述
data	IApiData	当前表格行数据
context	IApiContext	当前视图上下文
params	IApiParams	当前视图参数
controller	IGridColumnController	当前表格列
ctrl	IGridController	当前表格
view	IApiViewController	当前视图
metadata	IApiData	元数据（包含当前列模型）
document	Document	当前文档对象
selector	(className: string) => HTMLCollectionOf<Element>	元素选择器
env	IEnvironment	当前环境对象
appSession	IApiData	当前应用会话对象
topViewSession	IApiData	当前顶级视图会话对象
viewSession	IApiData	当前视图会话对象
viewParam	IApiParams
app	IApiAppHubController	当前应用
topView	IApiViewController	当前顶级视图
parentView	IApiViewController | undefined	当前父视图
parent	IApiViewController | undefined	当前父视图
util	{ message: IApiMessageUtil, notification: IApiNotificationUtil,modal: IApiModalUtil,confirm: IApiConfirmUtil,openView: IApiOpenViewUtil}	工具集

调用示例

根据当前行数据状态绘制单元格内容

使用当前行数据中的dynamodelflag进行判断，不同的dynamodelflag状态，显示内容不同

data.dynamodelflag === 0 ? data.logicname + '<span style="border-radius: 18px;background-color: #f5f5f5;color: #666;height: 24px;line-height: 24px;padding-left: 12px;padding-right: 12px;font-size: .75rem;font-weight: 400;display: inline-flex;align-items: center;border: 1px solid transparent;margin-left: .5rem !important;">系统</span>': data.logicname

根据当前行数据类型绘制单元格内容

使用当前行数据中的type进行判断，不同的type显示的图标不同

data.type === '10' ? '<i class="ibiz-icon fa fa-bar-chart" style="display: inline-block;height: 32px;margin-right: 7px;overflow: unset;"></i>' + data.name :
       data.type === '20' ? '<i class="ibiz-icon fa fa-pie-chart" style="display: inline-block;height: 32px;margin-right: 7px;overflow: unset;"></i>' + data.name :
       data.type === '30' ? '<i class="ibiz-icon fa fa-line-chart" style="display: inline-block;height: 32px;margin-right: 7px;overflow: unset;"></i>' + data.name :
       data.type === '40' ? '<i class="ibiz-icon fa fa-area-chart" style="display: inline-block;height: 32px;margin-right: 7px;overflow: unset;"></i>' + data.name :
       data.name

根据当前行数据代码表翻译绘制单元格内容

加载指定代码表数据，如果当前行数据中chart_type的值在代码表中存在，则绘制对应的代码项数据

const app = ibiz.hub.getApp(context.srfappid);
const dataItems = await app.codeList.get(
  'plmweb.insight__bi_chart_type2',
  context,
  params,
);
const item = dataItems.find(x => x.value === data.chart_type);
if (item && item.sysImage) {
    return '<div class="ibiz-code-list__item" style="height: 36px;line-height: 36px;"><div class="ibiz-icon" style="height: 100%;padding-right: 8px;">' + item.sysImage.rawContent + '</div>' + data.name + '</div>';
}
return data.name;

根据当前行数据将原本的数据替换后绘制单元格内容

使用当前行数据中的content数据，将其中的图片html内容替换为[图片]文本显示；@{...name: '姓名'}数据替换为@姓名显示；#{...name: '姓名'}数据替换为[图标]姓名显示

data.content.replaceAll(/<img(.+?)>/g,'[图片]').replaceAll(/@{(.+?)name":"(.+?)"}/g,'@$2').replaceAll(/#{(.+?)name":"(.+?)"((.|[\t\r\f\n\s])+?)}/g,'#$2')

根据数据业务条件绘制单元格内容

使用当前行数据中的overdue_time判断是否逾期，若逾期则显示逾期天数，否则不显示

let str = data.overdue_time;
let num = Number(str);
if (num > 0) {
    return `<span style="margin-right: 10px; color: red;">` + str + "天" + `</span>`;
} else {
    return  "";
}