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> <template>
<view class="normal-tabs"> <view class="normal-tabs">
<u-tabs <u-tabs
v-if="elementInfo.option.tabs.type === 'radio'" v-if="elementInfo.option.tabs.type === 'radio'"
:list="elementData.dataList.series" :list="elementData.dataList.series"
:is-scroll="false" :is-scroll="false"
:current="currentTabs" :current="currentTabs"
:active-color="elementInfo.option.tabs.activeColor" :active-color="elementInfo.option.tabs.activeColor"
:inactive-color="elementInfo.option.tabs.color" :inactive-color="elementInfo.option.tabs.color"
:bg-color="elementInfo.option.tabs.backgroundColor" :bg-color="elementInfo.option.tabs.backgroundColor"
@change="handleTabsChange" @change="handleTabsChange"
></u-tabs> ></u-tabs>
<template v-if="elementInfo.option.tabs.type === 'select'"> <template v-if="elementInfo.option.tabs.type === 'select'">
<u-input <view class="input-group">
v-model="tabsValue" <u-input
type="select" v-model="tabsValue"
border="true" type="select"
@click="show = true" border="true"
/> :placeholder="elementInfo.option.tabs.placeholder"
<u-select @click="show = true"
v-model="show" />
:default-value="defaultValue" <u-icon
:list="elementData.dataList.series" class="close-icon"
:safe-area-inset-bottom="true" v-if="tabsValue && elementInfo.option.tabs.allowClear"
label-name="name" name="close-circle"
@confirm="handleSelectChange" @click.prevent.stop="handleClearValue"
></u-select> ></u-icon>
</template> </view>
<swiper <u-select
v-if="elementInfo.option.tabs.type === 'group'" v-model="show"
class="tab-swiper" :default-value="defaultValue"
:indicator-dots="tabsGroup.length > 1" :list="elementData.dataList.series"
:style="[tabsStyle]" :safe-area-inset-bottom="true"
:indicator-color="'#ccc'" label-name="name"
:indicator-active-color="elementInfo.option.tabs.backgroundColor" @confirm="handleSelectChange"
> ></u-select>
<swiper-item class="tab-group" v-for="(item, index) in tabsGroup" :key="index"> </template>
<view
class="tab-item" <swiper
:class="[tabsValue == tab.value ? 'active': '']" v-if="elementInfo.option.tabs.type === 'group'"
v-for="tab in item" class="tab-swiper"
:key="tab.value" :indicator-dots="tabsGroup.length > 1"
@click="handleChangeTabValue(tab.value)" :style="[tabsStyle]"
>{{tab.name}}</view> :indicator-color="'#ccc'"
</swiper-item> :indicator-active-color="elementInfo.option.tabs.backgroundColor"
</swiper> >
</view> <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> </template>
<script> <script>
import echartElementData from '@/mixins/echartElementData.js' import echartElementData from '@/mixins/echartElementData.js'
export default { export default {
name:"NormalTabs", name: 'NormalTabs',
mixins: [echartElementData], mixins: [echartElementData],
data() { data() {
return { return {
currentTabs: 0, currentTabs: 0,
show: false, show: false,
tabsValue: '', tabsValue: this.elementInfo.option.tabs.defaultValue,
defaultValue: [0] defaultValue: [0]
}; }
}, },
mounted() { mounted() {
uni.$on('handlePullDownRefresh', () => { uni.$on('handlePullDownRefresh', () => {
this.initChart() this.initChart()
}) })
}, },
destroy() { destroy() {
uni.$off('handlePullDownRefresh') uni.$off('handlePullDownRefresh')
}, },
computed: { computed: {
tabsGroup() { tabsGroup() {
const { type, count} = this.elementInfo.option.tabs const { type, count } = this.elementInfo.option.tabs
if (type === 'group') { if (type === 'group') {
return this.$u.common.chunk(this.elementData.dataList.series, Number(count) * 2) return this.$u.common.chunk(
} this.elementData.dataList.series,
return [] Number(count) * 2
}, )
tabsStyle() { }
const { fontSize, color, activeColor, backgroundColor, count, frameWidth, frameColor, frameStyle, itemBackgroundColor } = this.elementInfo.option.tabs return []
return { },
height: `${this.elementInfo.height}px`, tabsStyle() {
'--width': `${(100 / Number(count)) - 2}%`, const {
'--font-size': `${fontSize}px`, fontSize,
'--color': color, color,
'--active-color': activeColor, activeColor,
'--background-color': backgroundColor, backgroundColor,
'--border-style': `${frameWidth}px ${frameStyle} ${frameColor}`, count,
'--item-background-color': itemBackgroundColor frameWidth,
} frameColor,
} frameStyle,
}, itemBackgroundColor
methods: { } = this.elementInfo.option.tabs
initChart(index = 0) { return {
this.currentTabs = index height: `${this.elementInfo.height}px`,
this.defaultValue = [0] '--width': `${100 / Number(count) - 2}%`,
this.tabsValue = this.elementData.dataList.series[this.currentTabs].value '--font-size': `${fontSize}px`,
}, '--color': color,
handleTabsChange(index) { '--active-color': activeColor,
this.initChart(index) '--background-color': backgroundColor,
this.tabsValueChange() '--border-style': `${frameWidth}px ${frameStyle} ${frameColor}`,
}, '--item-background-color': itemBackgroundColor
handleSelectChange(e) { }
this.tabsValue = e[0].value }
this.defaultValue[0] = [this.elementData.dataList.series.findIndex(item => item.value === e[0].value)] },
this.tabsValueChange() methods: {
}, initChart(index = 0) {
handleChangeTabValue(value) { this.currentTabs = index
this.tabsValue = value this.defaultValue = [0]
this.tabsValueChange() this.tabsValue = this.elementData.dataList.series[this.currentTabs].value
}, },
/** handleTabsChange(index) {
* 改变选项卡的值 this.initChart(index)
*/ this.tabsValueChange()
tabsValueChange() { },
const { index, paramName, data } = this.elementInfo.child handleSelectChange(e) {
if(this.elementInfo.child.type === 'param') { this.tabsValue = e[0].value
uni.$emit('handleLinkParams', { index, paramName, value: this.tabsValue }) this.defaultValue[0] = [
} else if(this.elementInfo.child.type === 'comp') { this.elementData.dataList.series.findIndex(
const showData = [], hideData = [] item => item.value === e[0].value
data.forEach(element => { )
if(element.name == this.tabsValue) showData.push(element.comp) ]
if(element.name != this.tabsValue) hideData.push(element.comp) this.tabsValueChange()
}); },
uni.$emit('handleLinkComp', { showData, hideData }) handleChangeTabValue(value) {
} this.tabsValue = value
} this.tabsValueChange()
}, },
watch: { /** 清除值 */
'elementInfo.child.index': { handleClearValue() {
handler(newVal) { this.tabsValue = ''
if(newVal.length) this.tabsValueChange() this.tabsValueChange()
}, },
immediate: true /**
} * 改变选项卡的值
} */
} 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.tab-group { .tab-group {
display: flex !important; display: flex !important;
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
} }
.tab-item { .tab-item {
width: var(--width); width: var(--width);
margin: 1%; margin: 1%;
font-size: var(--font-size); font-size: var(--font-size);
color: var(--color); color: var(--color);
border: var(--border-style); border: var(--border-style);
background: var(--item-background-color); background: var(--item-background-color);
border-radius: 5px; border-radius: 5px;
padding: 5px 8px; padding: 5px 8px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
&.active { &.active {
color: var(--active-color); color: var(--active-color);
background: var(--background-color); background: var(--background-color);
border-color: 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> </style>
pages/details/details.vue
View file @ 8035ef41
...@@ -217,7 +217,7 @@ ...@@ -217,7 +217,7 @@
* 组件之间关联 * 组件之间关联
*/ */
handleValueChange(index, paramName, value) { handleValueChange(index, paramName, value) {
if(index.length && paramName && value) { if(index.length && paramName) {
const that = this const that = this
that.reportInfo.list = that.reportInfo.list.map(item => { that.reportInfo.list = that.reportInfo.list.map(item => {
const flag = index.includes(item.id) const flag = index.includes(item.id)
......
pages/index/index.vue
View file @ 8035ef41
...@@ -255,7 +255,7 @@ ...@@ -255,7 +255,7 @@
* 组件之间关联 * 组件之间关联
*/ */
handleValueChange(index, paramName, value) { handleValueChange(index, paramName, value) {
if(index.length && paramName && value) { if(index.length && paramName) {
const that = this const that = this
that.reportInfo.list = that.reportInfo.list.map(item => { that.reportInfo.list = that.reportInfo.list.map(item => {
const flag = index.includes(item.id) 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