【Wyn7.1】动态拼接报表（二）——代码设计介绍

收藏

本帖最后由 Bella.Yuan 于 2024-9-23 10:12 编辑

我们在上一篇帖子中介绍了动态生成报表的思路和方式，这篇贴子介绍具体的代码实现（VUE项目）。最终的效果如下：
image.png583159484.png189159545.png

1. 页面设计，下拉组件和按钮我们使用element-plus前段控件实现：
① 页面上创建下拉框，选择要显示的报表；
② 创建两个按钮：创建报表：根据选择的内容生成报表；预览报表：预览刚刚生成的报表。
③ 报表预览显示区域（wyn-root）。

<template>
<div class="m-4" style="background-color: #E5E5E5; padding-top: 20px; padding-bottom: 10px">
<span style="margin-left: 20px;margin-top: 40px">报表列表：</span>
<el-select
v-model="reportSelection"
multiple
placeholder="请按顺序选择报表"
style="width: 360px; background-color: #E5E5E5;"
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="2"
clearable
@change="handleChange"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button-group>
<el-button type="primary" @click="createReport">创建报表</el-button>
<el-button type="primary" @click="viewReport">预览报表</el-button>
</el-button-group>
</div>
<div class="mydiv">
<p class="showSelectedReportList">显示的报表: {{ reportSelection.join(",") }}</p>
</div>
<div id="wyn-root"></div>
</template>

复制代码

2. 创建报表，这一步包括复制、修改、更新和保存新的报表四步：
2.1. 创建报表：根据记录的主报表的id，复制新的报表：

// 获取选择的报表及显示顺序
createReport() {
if (this.reportList.length === 0) {
ElMessage({
message: '未选中报表，请重新选择！',
type: 'error', // 消息的类型，可选值：success, warning, info, error
center: true, // 消息是否居中，默认为 true
duration: 3000, // 消息框自动关闭前的延迟时间，单位毫秒。设置为 0 或 null 则不会自动关闭
showClose: false // 是否显示关闭按钮，默认为true
})
return;
}
//console.log('选中的值是：', this.reportList.join(', ')); // 打印所有选中的值
var myHeaders = new Headers();
myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Accept", "*/*");
myHeaders.append("Host", "10.32.209.122:51980");
myHeaders.append("Connection", "keep-alive");
const randomIndex = Math.floor(Math.random() * 9000) + 1000
const newReportName = "主报表-" + randomIndex
/* 组装请求参数 */
var raw = JSON.stringify({
"query": "mutation {\n\t\t\tcopyDocument(\n\t\t\t\tdocumentId:"" + this.documentId + "",\n\t\t\t\tnewDocName:"" + newReportName + "",\n\t\t\t\tcurrentTagId:""\n\t\t\t) { copied_id }\n\t\t}"
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch(this.baseUrl + "/api/graphql?token=" + this.token, requestOptions)
.then(response => response.json())
.then(result => {
console.log(result.data.copyDocument.copied_id)
// 复制的报表id
this.copyReportId = result.data.copyDocument.copied_id;
// 获取复制后的报表的json文件
this.getCopyReport(this.copyReportId)
})
.catch(error => console.log('error', error));
}

复制代码

2.2. 获取创建的报表：并且根据选择的要显示的内容修改报表内容：

getCopyReport(copyReportId) {
var myHeaders = new Headers();
myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
myHeaders.append("Accept", "*/*");
myHeaders.append("Host", "10.32.209.122:51980");
myHeaders.append("Connection", "keep-alive");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
fetch(this.baseUrl + "/api/v2.0/reporting/reports/" + copyReportId + "?token=" + this.token, requestOptions)
.then(response => response.json())
.then(result => {
// 处理报表
let subReportMap = {}
result.ReportSections.forEach(function (old) {
subReportMap[old.Name] = old
})
const newReportSections = []
this.reportList.forEach(function (report) {
let newSection = subReportMap[report]
newSection.Visibility.Hidden = false
newReportSections.push(newSection)
})
console.log("============================")
console.log("newReportSections" + newReportSections)
console.log("============================")
result.ReportSections = newReportSections
this.updateCopyReport(result, copyReportId)
})
.catch(error => console.log('error', error));
}

复制代码

2.3. 更新报表内容：将前一步修改好的报表内容保存到系统中：

updateCopyReport(report, copyReportId) {
const myHeaders = new Headers();
myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Accept", "*/*");
myHeaders.append("Host", "localhost:51980");
myHeaders.append("Connection", "keep-alive");
const raw = JSON.stringify({
"report": JSON.stringify(report),
"isMaster": false,
"isTemplate": false
});
const requestOptions = {
method: 'PUT',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
const url = this.baseUrl + "/api/v2.0/reporting/reports/" + copyReportId + "?token=" + this.token
fetch(url, requestOptions)
.then(response => response.json())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}

复制代码

3. 预览报表：预览新的报表：

viewReport() {
console.log("viewer report ++++" + this.copyReportId)
if (this.reportViewer == null) {
this.reportViewer = WynIntegration.createReportViewer({
baseUrl: this.baseUrl,
token: this.token,
reportId: ""
}, '#wyn-root').then(ins => {
this.reportViewer = ins;
})
}
this.reportViewer.openReport(this.copyReportId);
}

复制代码

4. 最终的效果如下：
动态报表.gif806247863.png

附件是报使用的代码和报表文件，感兴趣的小伙伴可以下载体验哦。

方案的解决思路可以看这篇帖子： 【Wyn7.1】动态拼接报表（一）——解决思路介绍

		自动登录	找回密码
密码			立即注册

[报表] 【Wyn7.1】动态拼接报表（二）——代码设计介绍

0 个回复

Wyn高级认证

Wyn认证