基于jeecgboot的大屏设计器开发——大屏报表管理(二)

简介: 基于jeecgboot的大屏设计器开发——大屏报表管理(二)

接上一个文章,今天继续讲两个功能,一个是复制,一个分享功能

一、复制功能

复制主要是弹出复制对话框,保存就可以进行复制了

后端主要代码如下:

@Override
      @Transactional(rollbackFor = Exception.class)
      public String copy(ReportDto dto) {
          if (null == dto.getId()) {
            Result.error(ResponseCode.NOT_NULL, "id");
            return null; 
          }
          if (StringUtils.isBlank(dto.getReportCode())) {
            Result.error(ResponseCode.NOT_NULL, "报表编码");
            return null; 
          }
          LambdaQueryWrapper<BsReport> queryWrapperReport = Wrappers.lambdaQuery();
          queryWrapperReport.eq(BsReport::getId, dto.getId());
          BsReport report = reportService.getOne(queryWrapperReport);
          String reportCode = report.getReportCode();
          BsReport copyReport = copyReport(report, dto);
          //复制主表数据
          copyReport.setId(null);
          save(copyReport);
          String copyReportCode = copyReport.getReportCode();
          String reportType = report.getReportType();
          switch (reportType) {
              case "1":
                  //查询看板
                LambdaQueryWrapper<BsReportDashboard> queryWrapper = Wrappers.lambdaQuery();
                queryWrapper.eq(BsReportDashboard::getReportCode, reportCode);
                  BsReportDashboard reportDashboard = reportDashboardService.getOne(queryWrapper);
                  if (null != reportDashboard) {
                      reportDashboard.setId(null);
                      reportDashboard.setReportCode(copyReportCode);
                      reportDashboardService.save(reportDashboard);
                  }
                  //查询组件
                  LambdaQueryWrapper<BsReportDashboardWidget> queryWrapperWidget = Wrappers.lambdaQuery();
                  queryWrapperWidget.eq(BsReportDashboardWidget::getReportCode, reportCode);
                  List<BsReportDashboardWidget> reportDashboardWidgetList = reportDashboardWidgetService.list(queryWrapperWidget);
                  if (!CollectionUtils.isEmpty(reportDashboardWidgetList)) {
                      String finalCopyReportCode = copyReportCode;
                      reportDashboardWidgetList.forEach(reportDashboardWidget -> {
                          reportDashboardWidget.setId(null);
                          reportDashboardWidget.setReportCode(finalCopyReportCode);
                      });
                      reportDashboardWidgetService.saveBatch(reportDashboardWidgetList);
                  }
                  break;
              case "2":
                LambdaQueryWrapper<BsReportExcel> queryWrapperExcel = Wrappers.lambdaQuery();
                queryWrapperExcel.eq(BsReportExcel::getReportCode, reportCode);
                  BsReportExcel reportExcel = reportExcelService.getOne(queryWrapperExcel);
                  if (null != reportExcel) {
                      reportExcel.setId(null);
                      reportExcel.setReportCode(copyReportCode);
                      reportExcelService.save(reportExcel);
                  }
                  break;
              default:
          }
      return reportType;
      }

二、分享

打开分享码,同时创建链接如下:

 

复制后就可以进行打开了,当然在分享列表里也有相应的信息

比如输入上面地址http://localhost:9888/bs/IYSN33Xd

输入js10后就跟预览一样的效果了


前端分享主要代码如下:

<template>
  <el-dialog :z-index="1000" 
    class="tree_dialog"
    :title="titleBuild()"
    width="30%"
    :close-on-click-modal="false"
    center
    :visible.sync="visib"
    :before-close="closeDialog"
  >
    <div v-if="shareLinkFlag1">
      <el-form
        ref="userForm"
        :model="dialogForm"
        :rules="rules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="有效期" prop="shareValidType">
          <j-dict-select-tag
            placeholder="请选择"
            dictCode="bs_share_vaild"
            v-model="dialogForm.shareValidType"
          />
        </el-form-item>
        <el-form-item label="分享码" prop="sharePasswordFlag">
          <el-switch v-model="dialogForm.sharePasswordFlag"> </el-switch>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        plain
        @click="createShare"
        style="margin-left:45px"
        >创建链接</el-button
      >
    </div>
    <div v-else>
      <el-form
        ref="userForm"
        :model="dialogForm"
        :rules="rules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="链接" prop="reportShareUrl">
          <el-input v-model="reportShareUrl" :disabled="true" />
        </el-form-item>
        <el-form-item
          v-if="dialogForm.sharePasswordFlag"
          label="分享码"
          prop="sharePassword"
        >
          <el-input v-model="dialogForm.sharePassword" :disabled="true" />
        </el-form-item>
        <el-row :gutter="10">
          <el-button
            v-if="dialogForm.sharePassword == ''"
            type="primary"
            plain
            @click="copyShare"
            style="margin-left:45px"
            >复制链接</el-button
          >
          <el-button
            v-if="dialogForm.sharePassword != ''"
            type="primary"
            plain
            @click="copyShare"
            style="margin-left:45px"
            >复制链接和分享码</el-button
          >
        </el-row>
      </el-form>
    </div>
    <div slot="footer" style="text-align: center">
      <!--      <el-button type="primary" plain @click="saveReportShare">保存</el-button>-->
      <el-button type="danger" plain @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { reportShareAdd } from "@/api/bigscreen/reportShare";
import { excelShareAdd } from "@/api/bigscreen/reportShare";
export default {
  components: {  },
  props: {
    visib: {
      required: true,
      type: Boolean,
      default: false
    },
    reportCode: {
      required: true,
      type: String,
      default: () => {
        return "";
      }
    },
    reportName: {
      required: true,
      type: String,
      default: () => {
        return "";
      }
    },
    reportType: {
      required: true,
      type: String,
      default:() =>{
        return "";
      }
    }
  },
  data() {
    return {
      title: "报表分享",
      reportShareUrl: "",
      shareValidTypeOptions: [], // 有效期类型
      dialogForm: {
        shareValidType: 0,
        reportCode: "",
        reportType: "",
        shareUrl: "",
        shareCode: "",
        sharePassword: "",
        sharePasswordFlag: false
      },
      shareLinkFlag1: true,
      rules: {
        shareValidType: [
          { required: true, message: "有效期必选", trigger: "change" }
        ]
      }
    };
  },
  watch: {
    visib(val) {
      if (val) {
        // 弹窗弹出时需要执行的逻辑
        
      }
    }
  },
  created() {},
  methods: {
    titleBuild() {
      return "【" + this.reportName + "】" + "报表分享";
    },
    selectChange(val) {
      this.dialogForm.shareValidType = val;
    },
    async createShare() {
      this.dialogForm.reportType = this.reportType;
      this.dialogForm.reportCode = this.reportCode;
      this.dialogForm.shareUrl = window.location.href;
      const urlType = this.reportType == '1' ? reportShareAdd(this.dialogForm) : excelShareAdd(this.dialogForm)
      const { code, result } = await urlType
      if (code != "200") return;
      this.shareLinkFlag1 = false;
      this.$message.success("创建链接成功!");
      this.reportShareUrl = result.shareUrl;
      this.dialogForm.sharePassword = result.sharePassword;
    },
    copyShare() {
      let content = "";
      if (this.dialogForm.sharePassword == "") {
        content = "BS-Report分享链接:" + this.reportShareUrl;
      } else {
        content =
          "BS-Report分享链接:" +
          this.reportShareUrl +
          "  分享码:" +
          this.dialogForm.sharePassword;
      }
      this.copyToClip(content);
      this.$message.success("复制链接成功!");
    },
    copyToClip(content, message) {
      let aux = document.createElement("input");
      aux.setAttribute("value", content);
      document.body.appendChild(aux);
      aux.select();
      document.execCommand("copy");
      document.body.removeChild(aux);
    },
    async saveReportShare() {
      let params = {};
      this.closeDialog();
    },
    // 弹窗关闭之前需要执行的逻辑
    closeDialog() {
      this.$emit("handleClose");
    }
  }
};
</script>

后端主要的代码如下:

@Override
    @Transactional(rollbackFor = Exception.class)
    public ReportShareDto insertShare(ReportShareDto dto) {
        //设置分享码
        if (dto.isSharePasswordFlag()) {
            dto.setSharePassword(UuidUtil.getRandomPwd(4));
        }
        ReportShareDto reportShareDto = new ReportShareDto();
        BsReportShare entity = new BsReportShare();
        BeanUtils.copyProperties(dto, entity);
        init(entity);
        save(entity);
        //将分享链接返回
        reportShareDto.setShareUrl(entity.getShareUrl());
        reportShareDto.setSharePassword(dto.getSharePassword());
        return reportShareDto;
    }


目录
打赏
0
0
0
0
83
分享
相关文章
报表工具怎么选?盘点2025年10个最好用的报表平台,建议收藏!
报表工具怎么选?盘点2025年10个最好用的报表平台,建议收藏!
|
9月前
|
基于jeecgboot的大屏设计器开发——数据源设计(三)
基于jeecgboot的大屏设计器开发——数据源设计(三)
109 1
基于jeecgboot的大屏设计器开发——数据源设计(三)
|
9月前
|
基于jeecgboot的大屏设计器开发——数据源设计(二)
基于jeecgboot的大屏设计器开发——数据源设计(二)
172 1
商业开源MES+源码+送可拖拽式数据大屏
这是一个商业开源的JAVA MES系统,包含源码和本地部署教程。基于Springboot、Vue3和MySQL8,适用于开发学习。功能包括车间数据建模、生产物料控制、计划管理、过程控制、质量管理、库存管理、看板管理、报表分析和基础管理。需JDK11、Tomcat及Maven环境,源码付费获取。
148 0
基于jeecgboot的大屏设计器开发——大屏报表管理(一)
基于jeecgboot的大屏设计器开发——大屏报表管理(一)
199 0
基于jeecgboot的大屏设计器开发——数据源设计(一)
基于jeecgboot的大屏设计器开发——数据源设计(一)
105 0
[开源]免费开源MES系统,精美的可视化数字大屏,支持低代码大屏设计
万界星空开源MES制造执行系统的Java开源版本。开源mes系统包括系统管理,车间基础数据管理,计划管理,物料控制,生产执行,质量管理,库存管理,看板管理,数据分析等主体功能模块。广泛应用于汽车、高科技电子、 设备制造、新能源、电梯、家电、家居、纺织、电气、电机等行业。
1057 0
[开源]免费开源MES系统,精美的可视化数字大屏,支持低代码大屏设计
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等