低代码oa表单中增加按钮
·
项目中有用到某企业的低代码平台,需求是在表单中一个字段上面增加一个可以下载文件的按钮,,这个低代码表单可以插入js脚本。
实现逻辑是,找到要在哪个字段上增加按钮,找到这个元素的id后,使用document操作增加按钮,后端服务器拿到模板base编码,返回给前端blob对象解析,创建a标签,模拟点击,实现下载。
具体代码如下,可参考:
viewModel.on('afterLoadData', (args) => {
const fileText = '附件1-科技项目申请书';
const fileTexts = '附件2-科技项目预算书';
const fileTextes = '附件3-公司科技项目专家评审意见表';
const btnTpl = `<span>附件下载:</span>
<button style="height: 17px; line-height: 1;" type="button" class="wui-button btnJointQuery mdf-button wui-button-text wui-button-default lx-btn">
<span class="wui-button-text-wrap">
<span class="lang-id-container">${fileText}</span><span>(模板)</span>
</span>
</button>
<button style="height: 17px; line-height: 1;" type="button" class="wui-button btnJointQuery mdf-button wui-button-text wui-button-default lx-btn2">
<span class="wui-button-text-wrap">
<span class="lang-id-container">${fileTexts}</span><span>(模板)</span>
</span>
</button>
`;
const btnTplfile = `<span>附件下载:</span>
<button style="height: 17px; line-height: 1;" type="button" class="wui-button btnJointQuery mdf-button wui-button-text wui-button-default lx-btnfile">
<span class="wui-button-text-wrap">
<span class="lang-id-container">${fileTextes}</span><span>(模板)</span>
</span>
</button>
`;
setTimeout(() => {
const filesDom = document.getElementById('stp_apply|attachments');
const filesDomfile = document.getElementById('stp_apply|feedbackForm');
const blockAccessoryLeft = filesDom.querySelector('.blockAccessoryLeft');
const blockAccessoryLeftfile = filesDomfile.querySelector('.blockAccessoryLeft');
var hasLxBtn = document.querySelectorAll('.lx-btn').length > 0;
if(false == hasLxBtn){
blockAccessoryLeft.insertAdjacentHTML('beforeend', btnTpl);
}
const btn = document.querySelector('.lx-btn');
btn.addEventListener('click', () => {
downloadFile(fileText);
});
const btn2 = document.querySelector('.lx-btn2');
btn2.addEventListener('click', () => {
downloadFile(fileTexts);
});
var hasLxBtnfile = document.querySelectorAll('.lx-btnfile').length > 0;
if(false == hasLxBtnfile){
blockAccessoryLeftfile.insertAdjacentHTML('beforeend', btnTplfile);
}
const btn3 = document.querySelector('.lx-btnfile');
btn3.addEventListener('click', () => {
downloadFile(fileTextes);
});
});
});
function downloadFile(spanText) {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
const responseText = xhr.responseText;
let byteCharacters = atob(responseText);
let byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'application/octet-stream' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = `${spanText}.docx`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}
};
xhr.open('GET', `https://${window.location.host}/oa-appservice-be/donwloadTemplate/getTemplate?filename=${spanText}`);
xhr.send();
}
更多推荐



所有评论(0)