feat: 选项卡新增属性配置

components/NormalTabs/NormalTabs.vue

@@ -11,12 +11,22 @@
       @change="handleTabsChange"
     ></u-tabs>
     <template v-if="elementInfo.option.tabs.type === 'select'">
+      <view class="input-group">
         <u-input
           v-model="tabsValue"
           type="select"
           border="true"
+          :placeholder="elementInfo.option.tabs.placeholder"
           @click="show = true"
         />
+        <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"
@@ -35,31 +45,37 @@
       :indicator-color="'#ccc'"
       :indicator-active-color="elementInfo.option.tabs.backgroundColor"
     >
-			<swiper-item class="tab-group" v-for="(item, index) in tabsGroup" :key="index">
+      <swiper-item
+        class="tab-group"
+        v-for="(item, index) in tabsGroup"
+        :key="index"
+      >
         <view
           class="tab-item"
-					:class="[tabsValue == tab.value ? 'active': '']"
+          :class="[tabsValue == tab.value ? 'active' : '']"
           v-for="tab in item"
           :key="tab.value"
           @click="handleChangeTabValue(tab.value)"
-				>{{tab.name}}</view>
+        >
+          {{ tab.name }}
+        </view>
       </swiper-item>
     </swiper>
   </view>
 </template>
 
 <script>
-	import echartElementData from '@/mixins/echartElementData.js'
-	export default {
-		name:"NormalTabs",
+import echartElementData from '@/mixins/echartElementData.js'
+export default {
+  name: 'NormalTabs',
   mixins: [echartElementData],
   data() {
     return {
       currentTabs: 0,
       show: false,
-				tabsValue: '',
+      tabsValue: this.elementInfo.option.tabs.defaultValue,
       defaultValue: [0]
-			};
+    }
   },
   mounted() {
     uni.$on('handlePullDownRefresh', () => {
@@ -71,17 +87,30 @@
   },
   computed: {
     tabsGroup() {
-				const { type, count} = this.elementInfo.option.tabs
+      const { type, count } = this.elementInfo.option.tabs
       if (type === 'group') {
-					return this.$u.common.chunk(this.elementData.dataList.series, Number(count) * 2)
+        return this.$u.common.chunk(
+          this.elementData.dataList.series,
+          Number(count) * 2
+        )
       }
       return []
     },
     tabsStyle() {
-				const { fontSize, color, activeColor, backgroundColor, count, frameWidth, frameColor, frameStyle, itemBackgroundColor } = this.elementInfo.option.tabs
+      const {
+        fontSize,
+        color,
+        activeColor,
+        backgroundColor,
+        count,
+        frameWidth,
+        frameColor,
+        frameStyle,
+        itemBackgroundColor
+      } = this.elementInfo.option.tabs
       return {
         height: `${this.elementInfo.height}px`,
-					'--width': `${(100 / Number(count)) - 2}%`,
+        '--width': `${100 / Number(count) - 2}%`,
         '--font-size': `${fontSize}px`,
         '--color': color,
         '--active-color': activeColor,
@@ -103,26 +132,40 @@
     },
     handleSelectChange(e) {
       this.tabsValue = e[0].value
-				this.defaultValue[0] = [this.elementData.dataList.series.findIndex(item => item.value === e[0].value)]
+      this.defaultValue[0] = [
+        this.elementData.dataList.series.findIndex(
+          item => item.value === e[0].value
+        )
+      ]
       this.tabsValueChange()
     },
     handleChangeTabValue(value) {
       this.tabsValue = value
       this.tabsValueChange()
     },
+    /** 清除值 */
+    handleClearValue() {
+      this.tabsValue = ''
+      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 = []
+      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)
-					});
+          if (element.name == this.tabsValue) showData.push(element.comp)
+          if (element.name != this.tabsValue) hideData.push(element.comp)
+        })
         uni.$emit('handleLinkComp', { showData, hideData })
       }
     }
@@ -130,12 +173,12 @@
   watch: {
     'elementInfo.child.index': {
       handler(newVal) {
-					if(newVal.length) this.tabsValueChange()
+        if (newVal.length) this.tabsValueChange()
       },
       immediate: true
     }
   }
-	}
+}
 </script>
 
 <style scoped lang="scss">
@@ -165,4 +208,14 @@
     border-color: var(--background-color);
   }
 }
+.input-group {
+  position: relative;
+}
+.close-icon {
+  position: absolute;
+  right: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+}
 </style>

pages/details/details.vue

@@ -217,7 +217,7 @@
 			 * 组件之间关联
 			 */
 			handleValueChange(index, paramName, value) {
-				if(index.length && paramName && value) {
+				if(index.length && paramName) {
 					const that = this
 					that.reportInfo.list = that.reportInfo.list.map(item => {
 						const flag = index.includes(item.id)

pages/index/index.vue

@@ -255,7 +255,7 @@
 			 * 组件之间关联
 			 */
 			handleValueChange(index, paramName, value) {
-				if(index.length && paramName && value) {
+				if(index.length && paramName) {
 					const that = this
 					that.reportInfo.list = that.reportInfo.list.map(item => {
 						const flag = index.includes(item.id)