基于vue3+ant3的报表设计组件库

使用须知

实例中的后端： wind-report-node

后端接口文档

PS：根据自身需求，如需使用其他后端框架作为接口,请参考wind-report-node的接口文档进行食用

组件总览

数据库维护列表组件: <wr-db-table/>

数据源维护列表组件: <wr-ds-table/>

数据报表维护列表组件: <wr-r-d-list/>

数据报表设计组件: <wr-r-design/>

数据报表渲染组件: <wr-r-render/>

数据库维护列表组件

<!-- 组件引用 -->
<wr-db-table  :data="data"
              :validate="validate"  
              @validateChange="validateChange" 
              @testConnection="testConnection"
              @saveOrUpdate="saveOrUpdate"
              @deleteRow="deleteRow"
              >
</wr-db-table>

//  数据库对象
interface dbInfo {
  db_id?:string
  name?: string
  host?: string
  port?: number
  user?: string
  passsword?:string
  database?: string
  create_date?: string 
  update_date?: string 
}

| 属性/函数名 | 描述 | 类型 | 示例 | | ------ | ------ | ------ | ------ | | data | 数据库数据 | dbInfo[] |const data = ref<dbInfo[]>([]) | | validate | 组件测试连接结果 | boolean | const validate = ref(false) | | validateChange | 更新测试连接结果 | boolean | const validateChange = ref(false) | | testConnection | 测试连接 | function | const testConnection = (dbModel:dbInfo) =>{...} | | saveOrUpdate | 新增/修改 数据 | function | const saveOrUpdate = (dbModel:dbInfo,id:string) =>{...} | | deleteRow | 删除数据 | function | const deleteRow = (id:string) =>{...} |

数据源维护列表组件

<!-- 组件引用 -->
<wr-ds-table  :data="data"
              :dataDBs="dataDBs"
              :validate="validate" 
              @validateChange="validateChange"  
              @sqlConnection="sqlConnection"
              @saveOrUpdate="saveOrUpdate"
              @deleteRow="deleteRow"
              >
</wr-ds-table>

//  数据源对象
interface dsInfo {
  ds_id?:string
  name?: string
  db_id?: string
  db_name?:string
  sentence?: string
  columns?:string
  status?: number
  create_date?: string 
  update_date?: string 
}

//  数据库对象
interface dbInfo {
  db_id?:string
  name?: string
  host?: string
  port?: number
  user?: string
  passsword?:string
  database?: string
  create_date?: string 
  update_date?: string 
}

| 属性/函数名 | 描述 | 类型 | 示例 | | ------ | ------ | ------ | ------ | | data | 数据源数据 | dsInfo[] |const data = ref<dsInfo[]>([]) | | dataDBs | 数据库数据 | dbInfo[] |const data = ref<dbInfo[]>([]) | | validate | 组件SQL效验结果 | boolean | const validate = ref(false) | | validateChange | 更新测试连接结果 | boolean | const validateChange = ref(false) | | sqlConnection | SQL效验结果 | function | const sqlConnection = (dsModel:dsInfo) =>{...} | | saveOrUpdate | 新增/修改 数据 | function | const saveOrUpdate = (dsModel:dsInfo,id:string) =>{...} | | deleteRow | 删除数据 | function | const deleteRow = (id:string) =>{...} |

数据报表维护列表组件

<!-- 组件引用 -->
<wr-r-d-list  :data="data"
              :addUrl="addUrl"
              :editUrl="editUrl"
              :viewUrl="viewUrl"
              @render="render"
              @reportCollect="reportCollect"
              @reportDelete="reportDelete"
              @reportPaste="reportPaste"
              >
</wr-r-d-list>

//  数据报表对象
interface reportData {
  data_id?: string
  name?: string
  ds_id?: string
  columns?: string
  collect?: number
  create_date?: string
  update_date?: string
}

| 属性/函数名 | 描述 | 类型 | 示例 | | ------ | ------ | ------ | ------ | | data | 数据报表数据 | reportData[] |const data = ref<reportData[]>([]) | | addUrl | 新增数据报表路由地址 | string |const addUrl = ref('/design') | | editUrl | 编辑数据报表路由地址 | string |const editUrl = ref('/design') | | viewUrl | 数据报表渲染路由地址 | string |const viewUrl = ref('/view/report-data') | | render | 渲染数据列表 | function | const render = (current:number,pageSize:number) =>{...} | | reportCollect | 收藏/取消收藏 报表 | function | const reportCollect = (item:reportData) =>{...} | | reportDelete | 删除报表 | function | const reportDelete = (data_id:string) =>{...} | | reportPaste | 粘贴报表 | function | const reportPaste = (copyReport:reportData) =>{...}

数据报表设计组件

<!-- 组件引用 -->
<wr-r-design  :dataId="dataId"
              :dss="dsList"
              :rawData="rawData"
              @render="render"
              @saveOrUpdate="saveOrUpdate"
              >
</wr-r-design>

| 属性/函数名 | 描述 | 类型 | 示例 | | ------ | ------ | ------ | ------ | | dataId | 数据ID | string | const dataId = ref() | | dss | 数据源列表 | object[] | const dsList = ref<any[]>([]) | | rawData | 数据报表信息(原始数据) | object |const rawData = ref() | | render | 渲染数据报表信息 | function | const render = () =>{...} | | saveOrUpdate | 保存数据报表 | function | const saveOrUpdate = (obj:any,id:string) =>{...} |

数据报表渲染组件

<!-- 组件引用 -->
<wr-r-render  :data="data"
              :config="config"
              >
</wr-r-render>

| 属性/函数名 | 描述 | 类型 | 示例 | | ------ | ------ | ------ | ------ | | data | 报表数据 | object | const data = ref<any[]>() | | config | 报表配置 | object | const config = ref<any[]>() |

Author：lehman

Blog

Lehman-Blog

Genshin