wind-report-vue3-ant3

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