feat: tabs选项卡 select修改

components/MySelect/MySelect.vue

+<template>
+  <u-select
+    v-model="params.show"
+    :default-value="params.defaultValue"
+    :list="params.list"
+    :safe-area-inset-bottom="true"
+    label-name="name"
+    :z-index="999999"
+    @confirm="handleSelectChange"
+  ></u-select>
+</template>
+
+<script>
+export default {
+  name: 'MySelect',
+  data() {
+    return {
+      params: {}
+    }
+  },
+  created() {
+    uni.$on('showSelect', data => {
+      this.params = data
+    })
+  },
+  destroyed() {
+    uni.$off('showSelect')
+  },
+  methods: {
+    handleSelectChange(e) {
+      uni.$emit(`changeSelect-${this.params.id}`, e)
+    }
+  }
+}
+</script>
+
+<style></style>

components/NormalTable/NormalTable.vue

@@ -97,7 +97,7 @@
 				this.sticky = sticky
 			})
 		},
-		destroy() {
+		destroyed() {
 			uni.$off(elementInfo.id)
 		},
 		methods: {

components/NormalTabs/NormalTabs.vue

@@ -7,14 +7,14 @@
 		<template v-if="elementInfo.option.tabs.type === 'select'">
 			<view class="input-group">
 				<u-input v-model="selectValue" type="select" border="true"
-					:placeholder="elementInfo.option.tabs.placeholder" @click="show = true" />
+					:placeholder="elementInfo.option.tabs.placeholder" @click="handleShowSelect" />
 				<u-icon class="close-icon" v-if="tabsValue && elementInfo.option.tabs.allowClear" name="close-circle"
 					@click.prevent.stop="handleClearValue"></u-icon>
 			</view>
 
-			<u-select v-model="show" :default-value="defaultValue" :list="elementData.dataList.series"
+			<!-- <u-select v-model="show" :default-value="defaultValue" :list="elementData.dataList.series"
 				:safe-area-inset-bottom="true" label-name="name" :z-index="zIndex" @confirm="handleSelectChange">
-			</u-select>
+			</u-select> -->
 		</template>
 
 		<swiper v-if="elementInfo.option.tabs.type === 'group'" class="tab-swiper"
@@ -49,9 +49,13 @@
 			uni.$on('handlePullDownRefresh', () => {
 				this.initChart()
 			})
+			uni.$on(`changeSelect-${this.elementInfo.id}`, e => {
+				this.handleSelectChange(e)
+			})
 		},
-		destroy() {
+		destroyed() {
 			uni.$off('handlePullDownRefresh')
+			uni.$off(`changeSelect-${this.elementInfo.id}`)
 		},
 		computed: {
 			tabsGroup() {
@@ -104,6 +108,14 @@
 					}
 				}
 			},
+			handleShowSelect() {
+				uni.$emit('showSelect', {
+					id: this.elementInfo.id,
+					show: true,
+					list: this.elementData.dataList.series,
+					defaultValue: this.defaultValue
+				})
+			},
 			setTabsValue(index = 0) {
 				this.currentTabs = index
 				this.defaultValue = [0]
@@ -223,4 +235,4 @@
 		transform: translateY(-50%);
 		z-index: 2;
 	}
-</style>
+</style>

pages/details/details.vue

@@ -13,7 +13,7 @@
 					height: `${element.type == 'HorizontalBar' && horizontalBarHeight ? horizontalBarHeight : parseInt(element.height * scale)}px`,
 					left: `${parseInt(element.left * scale)}px`,
 					top: `${parseInt(element.top * scale)}px`,
-					zIndex: `${element.type == 'NormalTabs' || element.type == 'DateTimePicker' ? 9999 : index + 1}`
+					zIndex: `${element.type == 'DateTimePicker' ? 9999 : index + 1}`
 				}"
 			>
 				<!-- 普通柱状图 -->
@@ -65,6 +65,9 @@
 			:customRender="customRender"
 			@close="popupShow=false"
 		></ModelData>
+
+		<MySelect></MySelect>
+
 	</view>
 </template>
 

pages/index/index.vue

@@ -15,7 +15,7 @@
 					height: `${element.type == 'HorizontalBar' && horizontalBarHeight ? horizontalBarHeight : parseInt(element.height * scale)}px`,
 					left: `${parseInt(element.left * scale)}px`,
 					top: `${parseInt(element.top * scale)}px`,
-					zIndex: `${element.type == 'NormalTabs' || element.type == 'DateTimePicker' ? 9999 : index + 1}`
+					zIndex: `${element.type == 'DateTimePicker' ? 9999 : index + 1}`
 				}"
 			>
 				<!-- 普通柱状图 -->
@@ -68,6 +68,8 @@
 			:customRender="customRender"
 			@close="popupShow=false"
 		></ModelData>
+
+		<MySelect></MySelect>
 	</view>
 </template>