ureport2 vue版本实现

开放源ureport2是采用jquery实现的，前端体验低于vue，加载文件过大，尤其设计器页面文件designer.bundle.js达到3.7M，common.bundle.js达到3M，改为vue2后将采用按需加载，同时将ureport改成springboot版本，先看效果图：

打开报表文件：

自定义边框，以及支持自定义边框样式，以便支持更多css style

背景、字体颜色

图形

数据源：

数据集：

json数据查看：

右键菜单：

ureport2 vue首页代码

<template><div ref="container"><el-container class="designer-container"><el-aside width="250px"><left-aside ref="left-aside" :designer="designer"></left-aside></el-aside><el-container class="designer-center-container" direction="vertical"><div class="content"><tools :designer="designer"></tools><div id="container"></div></div></el-container><!--属性窗口--><el-dialog v-dialogDrag :modal="false" :visible.sync="settingVisible" :append-to-body="true" :modal-append-to-body="true" width="400px" top="5vh" title="属性设置" class="attribute-config-container"><el-tabs value="widget"><el-tab-pane :label="`属性${designer.cellName?`[${designer.cellName}]`:''}`" name="widget"><el-scrollbar :noresize="false" :native="false" wrap-class="config scrollbar-wrap"><property-config :designer="designer"></property-config></el-scrollbar></el-tab-pane><el-tab-pane label="数据源" name="form"><el-scrollbar :noresize="false" :native="false" wrap-class="config scrollbar-wrap"><datasource-config :designer="designer"></datasource-config></el-scrollbar></el-tab-pane></el-tabs></el-dialog></el-container></div>
</template><script>
import propertyConfig from "./components/propertyConfig";
import datasourceConfig from "./components/datasourceConfig";
import { loadJs } from "./util/index.js";
import LeftAside from "./components/leftAside";
import tools from "./components/tools";
import UReportDesigner from "./util/designer.js";
import buildLocal from "./util/i18n/i18n.js";
import "handsontable/dist/handsontable.full.min.css";export default {name: "sys-dev-tools-bi-designer",components: {propertyConfig,datasourceConfig,LeftAside,tools},data () {return {// 参数设置窗口显示settingVisible: true,// 设计器designer: {rowIndex: 0,colIndex: 0,row2Index: 0,col2Index: 0,cellName: null, // 单元格名称cellDef: {} // 单元格数据}};},mounted () {buildLocal();this.designer = new UReportDesigner("container", this);loadJs("/lib/ace/src/ace.js");},deactivated () {this.settingVisible = false;},activated () {this.settingVisible = true;// SaaS模块权限this.common.hasSaaSAuth("打印模板设置", this.$refs.container);},methods: {}
};
</script><style lang="scss" scoped>
@import "./styles/index.scss";
::v-deep .handsontable table.htCore {border-collapse: collapse;
}.el-container {height: 100% !important;
}.el-radio + .el-radio {margin-left: 0 !important;
}
.el-radio {margin-right: 30px;line-height: 32px;
}
.el-checkbox + .el-checkbox {margin-left: 0 !important;
}
.el-checkbox {margin-right: 30px;
}
.designer-center-container {margin-bottom: 10px;
}.attribute-config-container {::v-deep .el-tabs__header {margin: 0;}
}
</style>

数据源对话框

<template><el-dialog v-dialogDrag :visible.sync="currentDialogVisible" :top="common.getDialogTop()" title="数据源配置" class="dialog-container" width="680px" append-to-body @opened="dialogOpened"><el-table v-if="formData.type==='buildin'" :data="datasources" size="mini" max-height="500px" style="width: 100%"><el-table-column prop="name" label="数据源名称" align="left" header-align="left"></el-table-column><el-table-column label="选择" width="150"><template slot-scope="{row, column}"><el-button type="text" size="small" @click="saveBuildin(row)"><i class="ureport ureport-open"></i> <span>选择</span></el-button></template></el-table-column></el-table><el-form v-else-if="formData.type==='jdbc'" ref="form" :model="formData" label-width="120px"><el-form-item label="数据源名称："><el-input v-model="formData.name" class="w-400"></el-input></el-form-item><el-form-item label="连接用户名："><el-input v-model="formData.username" class="w-400"></el-input></el-form-item><el-form-item label="连接密码："><el-input v-model="formData.password" class="w-400"></el-input></el-form-item><el-form-item label="驱动名称："><el-select v-model="formData.driver" placeholder="请选择驱动名称" class="w-400"><el-option v-for="item in sourceList" :key="item" :label="item" :value="item"></el-option></el-select></el-form-item><el-form-item label="连接URL："><el-input v-model="formData.url" class="w-400"></el-input></el-form-item><el-form-item label-width="0"><div class="tip-item">sqlserver写法：jdbc:sqlserver://ip:1433;databasename=数据库名</div><div class="tip-item">mysql写法：jdbc:mysql://ip:3306/数据库名?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC</div></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="currentDialogVisible = false">取 消</el-button><el-button v-if="formData.type==='jdbc'" :loading="isLoading" type="primary" icon="el-icon-yrt-icon2" @click="test">测试</el-button><el-button v-if="formData.type==='jdbc'" :loading="isLoading" type="primary" icon="el-icon-yrt-baocun" @click="save">确定</el-button></span></el-dialog>
</template><script>
export default {props: {designer: {type: Object,default: () => {return {};}},visible: {type: Boolean,default: false}},data () {return {isLoading: false,datasources: [],datasource: null,formData: {type: "jdbc",name: "wms",username: "wms_dev",password: "wms@123qaz",driver: "com.microsoft.sqlserver.jdbc.SQLServerDriver",url: "jdbc:sqlserver://116.62.202.26:1433;databasename=YrtWMS_SaaS_Dev"},sourceList: ["oracle.jdbc.OracleDriver", "com.ibm.db2.jcc.DB2Driver", "com.microsoft.sqlserver.jdbc.SQLServerDriver", "com.mysql.jdbc.Driver"]};},computed: {// 显示窗口currentDialogVisible: {get: function () {return this.visible;},set: function (val) {this.$emit("update:visible", val);}}},watch: {},methods: {// 打开时加载文件列表dialogOpened () {this.getDatasources();},test () {this.testConnection(false);},// 获取内建数据源列表getDatasources () {const url = "/datasource/loadBuildinDatasources";const data = {};this.designer.ajax(url, data, res => {if (res.code !== 200) {this.$message.error("获取数据源失败！");return;}this.datasources = res.data.map(m => {return {name: m};});});},save () {if (this.formData.type === "jdbc") {this.testConnection(true);} else if (this.formData.type === "buildin") {this.saveBuildin();}},// jdbc测试、保存testConnection (isSave) {const { context } = this.designer;const { name, username, password, driver, url } = this.formData;const reportDef = context.reportDef;if (!reportDef.datasources) {reportDef.datasources = [];}const datasources = reportDef.datasources;if (!name) {this.$message.error(`请输入数据源名称`);return;}if (!username) {this.$message.error(`请输入连接用户名`);return;}if (!driver) {this.$message.error(`请输入连接驱动`);return;}if (!url) {this.$message.error(`请输入连接URL`);return;}const datasource = datasources.find(item => item.name === name);if (datasource) {this.datasource = datasource;}const ajaxUrl = "/datasource/testConnection";const data = { username, password, driver, url };this.designer.ajax(ajaxUrl, data, res => {const data = res.data;if (isSave) {if (data.result) {if (!this.datasource) {datasources.push({type: "jdbc",name,username,password,driver,url,datasets: []});} else {this.datasource.name = this.formData.name;this.datasource.username = this.formData.username;this.datasource.password = this.formData.password;this.datasource.driver = this.formData.driver;this.datasource.url = this.formData.url;}this.$message.success(`保存成功！`);this.currentDialogVisible = false;this.$emit("on-datasource-success");} else {this.$message.error(`连接测试失败：` + data.error);}} else {if (data.result) {this.$message.success(`连接测试成功！`);} else {this.$message.error(`连接测试失败：` + data.error);}}});},// 内建数据源保存saveBuildin ({ name }) {const { context } = this.designer;const reportDef = context.reportDef;if (!reportDef.datasources) {reportDef.datasources = [];}const datasources = reportDef.datasources;const datasource = datasources.find(item => item.name === name);if (datasource) {this.datasource = datasource;}if (!this.datasource) {datasources.push({type: "buildin",name,datasets: []});} else {this.datasource.name = this.formData.name;this.datasource.username = this.formData.username;this.datasource.password = this.formData.password;this.datasource.driver = this.formData.driver;this.datasource.url = this.formData.url;}this.$message.success(`保存成功！`);this.currentDialogVisible = false;this.$emit("on-datasource-success");},init (datasource, type) {this.formData.type = type;if (datasource) {this.datasource = datasource;this.formData.name = datasource.name;if (datasource.type === "jdbc") {this.formData.username = datasource.username;this.formData.password = datasource.password;this.formData.driver = datasource.driver;this.formData.url = datasource.url;}} else {this.datasource = null;this.formData.name = null;this.formData.username = null;this.formData.password = null;this.formData.driver = null;this.formData.url = null;}}}
};
</script><style lang="scss" scoped>
.dialog-container {padding: 0;.tip-item {line-height: 28px;color: darkgrey;}
}
</style>

【ureport2 vue版本实现】相关推荐

ureport2 vue版本实现
开源ureport2是采用jquery实现的,前端体验低于vue,加载文件过大,尤其设计器页面文件designer.bundle.js达到3.7M,common.bundle.js达到3M,改为vue ...
解决vue版本不匹配的问题 Vue packages version mismatch:
解决vue版本不匹配的问题 Vue packages version mismatch: 参考文章: (1)解决vue版本不匹配的问题 Vue packages version mismatch: ( ...
二代身份证读取中控ID180 二三代身份证阅读器 Vue版本
二代身份证读取中控ID180 二三代身份证阅读器 Vue版本设备设备名称:台式身份证阅读机产品型号:ID180 设备驱动和文档链接:https://pan.baidu.com/s/1nAYk ...
vue/cli 和 vue 版本对应及安装
文章目录 Vue Cli 使用方式: 关于Vue Cli版本介绍 @vue/cli 安装: 版本号对应查看vue和@vue/cli版本: Vue Cli Vue CLI = Vue + 一堆的js插 ...
创建脚手架时，查看vue版本
查看当前创建的脚手架应用的vue版本问题描述: 每次重启电脑后创建一个脚手架,都直接帮我创建一个vue3的版本,但第二次创建时会跳出选择字眼查看当前vue版本: 进入项目的根目录,运行:npm l ...
抓娃娃机vue版本和jquery版本
由于公司需求,着手研究H5抓娃娃,从网上找到一份简单的jQuery手机H5抓娃娃机代码.先感谢下最初始分享代码的那位同志.这个分享对我们这些非专职前端的phper来说很关键.虽然简单,但是功能也是都实 ...
11 贪吃蛇小游戏 js版本 + vue版本
前言 // 呵呵, 1024 发一波基础知识的库存缘于一些小的需求因为一些原因可能到这里就不会再往后面设计了主要分为了两个版本, html + js 的版本和 vue 的版本核心的意 ...
vue版本的仿京东放大镜代码还有原生js版本的。（组件封装）
vue版本的仿京东放大镜 <template><div class="maxBox"><divref="left"class=&q ...
webpack版本和vue版本的冲突问题
最近在做vue的实例项目的时候,遇到用webpack来打包项目的时候,出现了一些版本的兼容性冲突问题,导致运行报错,出现的结果和解决办法如下,在此记录一下: 错误1:TypeErroethis.get ...

【ureport2 vue版本实现】

ureport2 vue版本实现

【ureport2 vue版本实现】相关推荐

最新文章

热门文章