ts-bi

vue

环境准备

vue2.0

第三方引用

npm install ts-bi

main.js中注册

import tsBi from 'ts-bi';
import 'ts-bi/lib/style/index.css'
Vue.use(tsBi, { store });

引入编辑设计区

1. 引入设计列表模块

<template>
   <biEditor></biEditor>
</template>

2. 预览右上角显示设计按钮：引入预览时，传biOutDesign参数，点击设计可直达设计区

引入渲染功能

新建一个biPreview.vue文件，页面路径为：views/bi/biPreview.vue，路径必须严格遵守，不然将无法渲染 页面内容如下：

<template>
  <div
    class="height100"
  >
      <!--页面设计器 -->
      <biPreviewForm
        :params="params"
        :key="'page'+ new Date()"
        :isFromPreview="true"
      ></biPreviewForm>
  </div>
</template>

<script>
export default {
  name: 'biPreview',
  components: {
  },
  data: function() {
    return {
      show: true,
      params: {}
    }
  },
  created() {
    this.params = this.paramsFn()
  },
  mounted() {
  },
  methods: {
    // 地址参数获取
    paramsFn() {
      if (this.$route.query && this.$route.query.mid) {
        // 门户或者自定义报表或物理单表
        return {
          id: this.$route.path.substring(14),
          type: this.$route.query.type
        }
      }
      return { id: '' }
    }
  },
  watch: {
    $route(to, from) {
      let fromId =
        from.path &&
        from.path.indexOf('/bi/biPreview_') == 0 ?from.path.substring(14)
          : ''
      if (fromId) {
        // 删除跳转走后的页面内容
        let biPreviewMap = { ...this.$store.state.biPreviewMap }
        delete biPreviewMap[fromId]
        this.$store.commit('setAllBiPreviewMap', { ...biPreviewMap })
      }
      this.params = this.paramsFn()
    }
  }
}
</script>

引入报表中心

<template>
   <formCenterGrid></formCenterGrid>
</template>