From b62573ef69f2230269c2f5467bf4023a0f2d6fd9 Mon Sep 17 00:00:00 2001
From: neymar_Zhang <1390574090@qq.com>
Date: Mon, 17 Jun 2024 11:28:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20'src/views'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

报表集成样例

Signed-off-by: neymar_Zhang <1390574090@qq.com>
---
 src/views/test.vue | 128 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 108 insertions(+), 20 deletions(-)

diff --git a/src/views/test.vue b/src/views/test.vue
index 4ce9ce2..33c87af 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -1,21 +1,109 @@
-<template>
-    <div>
-        <base-drag-ball @handlepaly="handleaudioplay" style="cursor:pointer"></base-drag-ball>
-    </div>
-</template>
-<script>
-import baseDragBall from '@/components/base/baseDragBall'
-
-export default {
-    components: { baseDragBall },
-    methods: {
-        handleaudioplay() {
-        }
-    }
-};
+<template>
+	<div>
+		<el-button @click="saveData">保存</el-button>
+		<div id="container" style="width: 100%; height: 100%"></div>
+		<!-- <base-drag-ball @handlepaly="handleaudioplay" style="cursor:pointer"></base-drag-ball> -->
+	</div>
+</template>
+<script>
+	// import baseDragBall from '@/components/base/baseDragBall'
+	import "@/assets/XZReportDesigner/xzreportdesigner.js";
+	import "@/assets/XZReportDesigner/xzreportdesigner.css";
+	export default {
+		data() {
+			return {
+				sheetDesigner: null
+			}
+		},
+		// components: { baseDragBall },
+		methods: {
+			onUpdateDatasetList(){
+				// let results = [{
+				// 	name: "商品销售",
+				// 	id: "商品销售id",
+				// 	type: 4,
+				// 	columns: [{
+				// 			name: "商品名称", //这些name：可以是中文？
+				// 			data_type: 3
+				// 		},
+				// 		{
+				// 			name: "区域名称",
+				// 			data_type: 3
+				// 		},
+				// 		{
+				// 			name: "销售额",
+				// 			data_type: 2
+				// 		},
+				// 	],
+				// }]
+				return new Promise((resolve, reject) => {
+					// resolve的数据格式
+					let results = [{
+						name: "数据表名称",
+						id: "数据表id",
+						columns: [], // 数据表中字段 字段的数据结构 {name:"字段名称",data_type:"字段类型"} data_type => 1日期 2数字 3字符串
+						params: [], // 数据表中参数 参数耳朵数据结构 {name:"参数名称",data_type:"参数类型"} data_type => 1日期 2数字 3字符串
+					}]
+					console.log(results)
+					resolve(results)
+				})
+			},
+			initPage(){
+
+				let option = {
+					dataset: [ //数据集按钮的方式 
+						{
+							id: 1,
+							value: "新建Json数据集"
+						},
+						{
+							id: 3,
+							value: "API服务数据集"
+						},
+						{
+							id: 4,
+							value: "外部数据集"
+						}
+					],
+					onUpdateDatasetList:this.onUpdateDatasetList
+				}
+				console.log(option)
+				this.sheetDesigner = XZReportDesigner("#container", option);
+			},
+			saveData() {
+				// config 为报表配置 ， data为 数据配置
+				let reportTemplateInstance = this.sheetDesigner.getData();
+			
+				console.log(reportTemplateInstance)
+				console.log(reportTemplateInstance.config)
+				console.log(reportTemplateInstance.data);
+			}
+			// handleaudioplay() {}
+		},
+
+		watch:{
+			"dataset-edited":function(dataset) {
+			 console.log(dataset)
+			},
+			
+		},
+
+		mounted() {
+			this.initPage()
+			// const onUpdateDatasetList = () => {
+			// 	return new Promise((resolve, reject) => {
+			// 		console.log(resolve,reject,123)
+			// 		// resolve的数据格式
+			// 		let results = [{
+			// 			name: "数据表名称",
+			// 			id: "数据表id",
+			// 			columns: [], // 数据表中字段 字段的数据结构 {name:"字段名称",data_type:"字段类型"} data_type => 1日期 2数字 3字符串
+			// 			params: [], // 数据表中参数 参数耳朵数据结构 {name:"参数名称",data_type:"参数类型"} data_type => 1日期 2数字 3字符串
+			// 		}]
+			// 		resolve(results)
+			// 	})
+			// }
+
+		}
+	};
 </script>
-
-
-
-
-  
\ No newline at end of file