Skip to content

E
ec-report-refactor
Commit 8035ef41 authored by Jenny's avatar Jenny
Browse files
Options

feat: 选项卡新增属性配置

parent 179e1026
Hide whitespace changes
Inline Side-by-side
Showing with 211 additions and 158 deletions
components/NormalTabs/NormalTabs.vue
View file @ 8035ef41
<template>
<view class="normal-tabs">
<u-tabs
v-if="elementInfo.option.tabs.type === 'radio'"
:list="elementData.dataList.series"
:is-scroll="false"
:current="currentTabs"
:active-color="elementInfo.option.tabs.activeColor"
:inactive-color="elementInfo.option.tabs.color"
:bg-color="elementInfo.option.tabs.backgroundColor"
@change="handleTabsChange"
></u-tabs>
<template v-if="elementInfo.option.tabs.type === 'select'">
<u-input
v-model="tabsValue"
type="select"
border="true"
@click="show = true"
/>
<u-select
v-model="show"
:default-value="defaultValue"
:list="elementData.dataList.series"
:safe-area-inset-bottom="true"
label-name="name"
@confirm="handleSelectChange"
></u-select>
</template>
<swiper
v-if="elementInfo.option.tabs.type === 'group'"
class="tab-swiper"
:indicator-dots="tabsGroup.length > 1"
:style="[tabsStyle]"
:indicator-color="'#ccc'"
:indicator-active-color="elementInfo.option.tabs.backgroundColor"
>
<swiper-item class="tab-group" v-for="(item, index) in tabsGroup" :key="index">
<view
class="tab-item"
:class="[tabsValue == tab.value ? 'active': '']"
v-for="tab in item"
:key="tab.value"
@click="handleChangeTabValue(tab.value)"
>{{tab.name}}</view>
</swiper-item>
</swiper>
</view>
<view class="normal-tabs">
<u-tabs
v-if="elementInfo.option.tabs.type === 'radio'"
:list="elementData.dataList.series"
:is-scroll="false"
:current="currentTabs"
:active-color="elementInfo.option.tabs.activeColor"
:inactive-color="elementInfo.option.tabs.color"
:bg-color="elementInfo.option.tabs.backgroundColor"
@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"
:list="elementData.dataList.series"
:safe-area-inset-bottom="true"
label-name="name"
@confirm="handleSelectChange"
></u-select>
</template>
<swiper
v-if="elementInfo.option.tabs.type === 'group'"
class="tab-swiper"
:indicator-dots="tabsGroup.length > 1"
:style="[tabsStyle]"
:indicator-color="'#ccc'"
:indicator-active-color="elementInfo.option.tabs.backgroundColor"
>
<swiper-item
class="tab-group"
v-for="(item, index) in tabsGroup"
:key="index"
>
<view
class="tab-item"
:class="[tabsValue == tab.value ? 'active' : '']"
v-for="tab in item"
:key="tab.value"
@click="handleChangeTabValue(tab.value)"
>
{{ tab.name }}
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import echartElementData from '@/mixins/echartElementData.js'
export default {
name:"NormalTabs",
mixins: [echartElementData],
data() {
return {
currentTabs: 0,
show: false,
tabsValue: '',
defaultValue: [0]
};
},
mounted() {
uni.$on('handlePullDownRefresh', () => {
this.initChart()
})
},
destroy() {
uni.$off('handlePullDownRefresh')
},
computed: {
tabsGroup() {
const { type, count} = this.elementInfo.option.tabs
if (type === 'group') {
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
return {
height: `${this.elementInfo.height}px`,
'--width': `${(100 / Number(count)) - 2}%`,
'--font-size': `${fontSize}px`,
'--color': color,
'--active-color': activeColor,
'--background-color': backgroundColor,
'--border-style': `${frameWidth}px ${frameStyle} ${frameColor}`,
'--item-background-color': itemBackgroundColor
}
}
},
methods: {
initChart(index = 0) {
this.currentTabs = index
this.defaultValue = [0]
this.tabsValue = this.elementData.dataList.series[this.currentTabs].value
},
handleTabsChange(index) {
this.initChart(index)
this.tabsValueChange()
},
handleSelectChange(e) {
this.tabsValue = 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()
},
/**
* 改变选项卡的值
*/
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
}
}
}
import echartElementData from '@/mixins/echartElementData.js'
export default {
name: 'NormalTabs',
mixins: [echartElementData],
data() {
return {
currentTabs: 0,
show: false,
tabsValue: this.elementInfo.option.tabs.defaultValue,
defaultValue: [0]
}
},
mounted() {
uni.$on('handlePullDownRefresh', () => {
this.initChart()
})
},
destroy() {
uni.$off('handlePullDownRefresh')
},
computed: {
tabsGroup() {
const { type, count } = this.elementInfo.option.tabs
if (type === 'group') {
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
return {
height: `${this.elementInfo.height}px`,
'--width': `${100 / Number(count) - 2}%`,
'--font-size': `${fontSize}px`,
'--color': color,
'--active-color': activeColor,
'--background-color': backgroundColor,
'--border-style': `${frameWidth}px ${frameStyle} ${frameColor}`,
'--item-background-color': itemBackgroundColor
}
}
},
methods: {
initChart(index = 0) {
this.currentTabs = index
this.defaultValue = [0]
this.tabsValue = this.elementData.dataList.series[this.currentTabs].value
},
handleTabsChange(index) {
this.initChart(index)
this.tabsValueChange()
},
handleSelectChange(e) {
this.tabsValue = 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 = []
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
}
}
}
</script>
<style scoped lang="scss">
.tab-group {
display: flex !important;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
display: flex !important;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
}
.tab-item {
width: var(--width);
margin: 1%;
font-size: var(--font-size);
color: var(--color);
border: var(--border-style);
background: var(--item-background-color);
border-radius: 5px;
padding: 5px 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
cursor: pointer;
&.active {
color: var(--active-color);
background: var(--background-color);
border-color: var(--background-color);
}
width: var(--width);
margin: 1%;
font-size: var(--font-size);
color: var(--color);
border: var(--border-style);
background: var(--item-background-color);
border-radius: 5px;
padding: 5px 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
cursor: pointer;
&.active {
color: var(--active-color);
background: var(--background-color);
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
View file @ 8035ef41
......@@ -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
View file @ 8035ef41
......@@ -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)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment