fix: 处理分组编辑会选择数据上的问题

This commit is contained in:
奔跑的面条 2022-08-12 17:09:28 +08:00
parent e2a0478357
commit 57798b9000
2 changed files with 16 additions and 5 deletions

View File

@ -0,0 +1,6 @@
export enum TabsEnum {
PAGE_SETTING = 'pageSetting',
CHART_SETTING = 'chartSetting',
CHART_ANIMATION = 'chartAnimation',
CHART_DATA = 'chartData',
}

View File

@ -37,7 +37,7 @@
</n-tabs> </n-tabs>
<!-- 编辑 --> <!-- 编辑 -->
<n-tabs v-if="selectTarget" class="tabs-box" size="small" type="segment"> <n-tabs v-if="selectTarget" v-model:value="tabsSelect" class="tabs-box" size="small" type="segment">
<n-tab-pane <n-tab-pane
v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList" v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList"
:key="item.key" :key="item.key"
@ -66,6 +66,7 @@ import { ref, toRefs, watch, computed } from 'vue'
import { icon } from '@/plugins' import { icon } from '@/plugins'
import { loadAsyncComponent } from '@/utils' import { loadAsyncComponent } from '@/utils'
import { ContentBox } from '../ContentBox/index' import { ContentBox } from '../ContentBox/index'
import { TabsEnum } from './index.d'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@ -83,6 +84,7 @@ const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.
const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue')) const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
const collapsed = ref<boolean>(getDetails.value) const collapsed = ref<boolean>(getDetails.value)
const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING)
const collapsedHandle = () => { const collapsedHandle = () => {
collapsed.value = true collapsed.value = true
@ -99,6 +101,9 @@ const selectTarget = computed(() => {
// //
if (selectId.length !== 1) return undefined if (selectId.length !== 1) return undefined
const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()] const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
if (target?.isGroup) {
tabsSelect.value = TabsEnum.CHART_SETTING
}
return target return target
}) })
@ -113,7 +118,7 @@ watch(getDetails, newData => {
// //
const globalTabList = [ const globalTabList = [
{ {
key: 'pageSetting', key: TabsEnum.PAGE_SETTING,
title: '页面配置', title: '页面配置',
icon: DesktopOutlineIcon, icon: DesktopOutlineIcon,
render: CanvasPage render: CanvasPage
@ -122,13 +127,13 @@ const globalTabList = [
const chartsDefaultTabList = [ const chartsDefaultTabList = [
{ {
key: 'ChartSetting', key: TabsEnum.CHART_SETTING,
title: '定制', title: '定制',
icon: ConstructIcon, icon: ConstructIcon,
render: ChartSetting render: ChartSetting
}, },
{ {
key: 'ChartAnimation', key: TabsEnum.CHART_ANIMATION,
title: '动画', title: '动画',
icon: LeafIcon, icon: LeafIcon,
render: ChartAnimation render: ChartAnimation
@ -138,7 +143,7 @@ const chartsDefaultTabList = [
const chartsTabList = [ const chartsTabList = [
...chartsDefaultTabList, ...chartsDefaultTabList,
{ {
key: 'ChartData', key: TabsEnum.CHART_DATA,
title: '数据', title: '数据',
icon: FlashIcon, icon: FlashIcon,
render: ChartData render: ChartData