ureport2 vue版本实现

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

 

打开报表文件： 

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

 

背景、 字体颜色

 

 

 

 图形

 

 数据源：

 

 数据集：

 

 json数据查看：

 

 

右键菜单：

 

<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>

 

<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>   <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>

标签：el,vue,name,formData,designer,datasource,版本,import,ureport2
来源： https://www.cnblogs.com/yrt-wms/p/ureport2-vue2.html