feat: 选项卡组件交互

components/NormalTabs/NormalTabs.vue

@@ -35,21 +35,46 @@
 		data() {
 			return {
 				currentTabs: 0,
-				show: false
+				show: false,
+				tabsValue: ''
 			};
 		},
-		computed: {
-			tabsValue() {
-				return this.elementData.dataList.series[this.currentTabs].value
-			}
-		},
 		methods: {
-			initChart() {},
+			initChart() {
+				this.tabsValue = this.elementData.dataList.series[this.currentTabs].value
+			},
 			handleTabsChange(index) {
 				this.currentTabs = index
+				this.initChart()
+				this.tabsValueChange()
 			},
 			handleSelectChange(e) {
-				console.log(e)
+				this.tabsValue = e[0].value
+				this.tabsValueChange()
+			},
+			/**
+			 * 改变选项卡的值
+			 */
+			tabsValueChange() {
+				const { index, paramName, data } = this.elementInfo.child
+				if(this.elementInfo.child.type === 'param') {
+					uni.$emit('handleLinkParams', { index, paramName, value: this.tabsValue })
+				} else if(this.elementInfo.child.type === 'comp') {
+					const showData = [], hideData = []
+					data.forEach(element => {
+						if(element.name == this.tabsValue) showData.push(element.comp)
+						if(element.name != this.tabsValue) hideData.push(element.comp)
+					});
+					uni.$emit('handleLinkComp', { showData, hideData })
+				}
+			}
+		},
+		watch: {
+			'elementInfo.child.index': {
+				handler(newVal) {
+					if(newVal.length) this.tabsValueChange()
+				},
+				immediate: true
 			}
 		}
 	}

mixins/echartElementData.js

@@ -25,7 +25,6 @@ export default {
 		async handleDynamicData (value) {
 			let { dataUrl, dataMethod, dataFormatter, dataProcessing } = { ...value }
 			dataUrl = dataUrl.replace(/^(\/dashboardCharts)?|^(\/dashboardAPI)?/, '')
-			if (value.queryFormatter) dataFormatter = {...dataFormatter, ...value.queryFormatter}
 			let res = await this.$u[dataMethod.toLowerCase()](dataUrl, dataFormatter)
 			if (dataProcessing) {
 				this.elementData.dataList = this.$u.common.converFunction(dataProcessing, res.data)
@@ -38,12 +37,12 @@ export default {
 		 * 全局数据
 		 */
 		handlePublicData (value) {
-			if (!this.globalData) return
+			if (!this.vuex_globalData) return
 			const { dataProcessing } = { ...value }
 			if (dataProcessing) {
-				this.elementData.dataList = this.$u.common.converFunction(dataProcessing, JSON.parse(this.globalData))
+				this.elementData.dataList = this.$u.common.converFunction(dataProcessing, JSON.parse(this.vuex_globalData))
 			} else {
-				this.elementData.dataList = JSON.parse(this.globalData)
+				this.elementData.dataList = JSON.parse(this.vuex_globalData)
 			}
 			this.initChart()
 		},
@@ -106,13 +105,13 @@ export default {
 					}
 				}
 			},
-			immediate: true,
-			deep: true
+			deep: true,
+			immediate: true
 		},
 		/**
 		 * 全局数据更新监测
 		 */
-		globalData () {
+		'vuex_globalData' () {
 			if (this.elementInfo.data.dataType === 'public') this.handlePublicData(this.elementInfo.data)
 		}
   }

pages/center/index.vue

 <template>
 	<view>
         <view class="item-list">
-            <block v-for="(item,index) in itemList">
+            <block v-for="(item,index) in itemList" :key="index">
                 <view class="item-cell" @tap="selectCell(index)">
                     <view class="item-cell-text">{{item.text}}</view>
                     <view class="item-cell-list-count" v-if="item.show">({{item.count}})人</view>

pages/customer/customer.vue

 <template>
     <view class="wrap">
         <view class="item-list">
-            <block v-for="(item,index) in userList">
+            <block v-for="(item,index) in userList" :key="item.id">
                 <view class="item-cell">
                     <view class="item-name">{{item.userName}}</view>
                     <view class="item-button" @tap ="authorized(item.id, item.authorized, index)" v-if="item.authorized">取消授权</view>

pages/index/index.vue

@@ -58,11 +58,19 @@
 				}
 			}
 		}, 
-		async onLoad() {
+		onLoad() {
+			this.userAuthCheck()
 			this.getReportList()
+			/**
+			 * 组件交互 - 参数
+			 */
+			uni.$on('handleLinkParams', ({index, paramName, value}) => {
+				this.handleValueChange(index, paramName, value)
+			})
 		},  
-		onShow() {
-				this.userAuthCheck()
+		onUnload() {
+			// 移除监听事件
+			uni.$off('handleLinkParams')
 		},
 		methods: {
 			//检查是否登录
@@ -104,8 +112,6 @@
 				let res = await this.$u.api.getReportList({id: '61c424a4c06bff0ce05d9a53'})
 				const { Status, Result: { info, list } } = res.data
 				if (Status === 'true') {
-					this.reportInfo = info
-					this.reportData = list
 					if(info.dataUrl) {
 						this.getGlobalData(info)
 						if(info.dataPollingInterval) {
@@ -114,6 +120,8 @@
 							}, parseInt(info.dataPollingInterval) * 1000)
 						}
 					}
+					this.reportInfo = info
+					this.reportData = list
 				}
 			},
 			/**
@@ -122,7 +130,25 @@
 			async getGlobalData(info) {
 				const dataUrl = info.dataUrl.replace(/^(\/dashboardCharts)?|^(\/dashboardAPI)?/, '')
 				let res = await this.$u[info.dataMethod.toLowerCase()](dataUrl, info.dataFormatter)
-				this.$u.vuex('globalData', JSON.stringify(res.data))
+				this.$u.vuex('vuex_globalData', JSON.stringify(res.data))
+			},
+			/**
+			 * 组件之间关联
+			 */
+			handleValueChange(index, paramName, value) {
+				if(index.length && paramName && value) {
+					this.reportData.map(item => {
+						if(index.includes(item.id) && item.data.dataType === 'dynamic') {
+							if(!item.data.dataFormatter) item.data.dataFormatter = {}
+							this.$set(item.data.dataFormatter, paramName, value)
+						}
+						if(index.includes(item.id) && item.data.dataType === 'dataSet') {
+							if(!item.data.dataSetInfo.queryFormatter) item.data.dataSetInfo.queryFormatter = {}
+							this.$set(item.data.dataSetInfo.queryFormatter, paramName, value)
+						}
+						return item
+					})
+				}
 			}
 		},
 		onReachBottom() {

store/index.js

@@ -31,7 +31,7 @@ const saveLifeData = function(key, value) {
 const store = new Vuex.Store({
 	state: {
 		vuex_token: lifeData.vuex_token || '',
-		globalData: ""
+		vuex_globalData: ""
 	},
 	mutations: {
 		$uStore(state, payload) {