3 VUE实战 iframe嵌入帆软报表FineReport动态传参实现

目录

1. vue页面写一些查询条件，传递到帆软cpt中

2. vue js中拼接到cpt地址链接中

3. 帆软设计器中数据源sql要对应参数

 4. 参数动态查询展示

 5. 问题

---

1. vue页面写一些查询条件，传递到帆软cpt中

 如图所示，查询条件。

vue页面实现：

<el-form :model="queryParams" ref="queryForm" :inline="true"
      label-width="100px">
      <el-form-item label="时间" prop="startEnd">
        <el-date-picker v-model="startEnd" @change="selectDate" type="daterange" size="small" style="width: 202px" align="right"
                    unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="参数2" prop="orgLevel">
        <el-select v-model="queryParams.code" placeholder="请选择参数2" clearable
          size="small" >
          <el-option v-for="dict in codeOptions" :key="dict.dictValue"
            :label="dict.dictLabel" :value="dict.dictValue"/>
        </el-select>
      </el-form-item>
<el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
<el-form>

2. vue js中拼接到cpt地址链接中

js代码：

getList(){
      
      //使用获取的参数值拼接出最终的url
      this.reportURL = this.baseReportURL +  "/decision/view/report?viewlet=riskReport/warnModel.cpt"
        + '&pageNum=' + this.queryParams.pageNum
        + '&pageSize=' + this.queryParams.pageSize;
      if(this.queryParams.code){
          this.reportURL += '&code=' + this.queryParams.code;
      }
      if(this.queryParams.beginTime){
          this.reportURL += '&beginTime=' + this.queryParams.beginTime;
      }
      if(this.queryParams.endTime){
          this.reportURL += '&endTime=' + this.queryParams.endTime;
      }
      //URL 中可能包含中文或特殊字符因此需要进行编码转换，注意需要先引入 finereport.js
      this.reportURL = encodeURI(this.reportURL);

    },

3. 帆软设计器中数据源sql要对应参数

示例是oracle数据库：

 （1）下面的参数会自动带出，无需填写，或者点刷新也会出来。修改参数类型，可以设置初始值也可以不设。

 （2）sql语句注意单双号.

（3）设置模板参数

 点击+添加模板参数，双击修改参数名

 4. 参数动态查询展示

搜索指标和等级，点搜索，参数添加到cpt地址中，帆软会自动接收，第三步中的设置模板参数应该可以不用设，不过为了后续方便，一起设置了。

 5. 数据决策系统

数据决策系统的添加链接是为了预览，可以不用管这一块。刚开始看文档，我都被迷惑了。

 

 5. 问题

主要问题就是sqL语句，注意单双号，基本没啥问题了。