跳到主要内容

报表中展示表单上传图片且可点击查看原图

1. 使用场景

报表中展示表单图片上传组件上传的图片且点击后可查看原图。

2. 实现功能

2.1. 配置报表

直接将图片上传的预览地址放入表格数据列即可。

2.2. 配置图片预览链接跳转

参数名称可随意修改,修改后注意修改自定义执行内容中的参数名称。

自定义执行内容:

function onLinkClicked(info) {
const { originRecord, cardParams, meta, record } = info;
const { imgUrl = [] } = cardParams;
if (imgUrl.length) {
const removeUrlParameter = function (url, parameter) {
const result = [];
const params = url.split('?').splice(1);
for (let i = 0; i < params.length; i++) {
params[i] = params[i].split('&');
for (let j = 0; j < params[i].length; j++) {
if (params[i][j].split('=')[0] === 'process') {
params[i].splice(j, 1);
break;
}
}
result.push(url.split('?')[0] + '?' + params[i].join('&'));
}
return result;
};
window._custom_utils.previewImage({
urls: removeUrlParameter(imgUrl[0], 'process'),
current: removeUrlParameter(imgUrl[0], 'process')[0],
});
}
}

2.3. didMount 中加入下述代码

function didMount() {
// 页面节点加载渲染完毕
window._custom_utils = this.utils;
}

3. 实现效果

点击图片后(可左右切换预览其他图片):

4. 在线试玩


Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4