LinYeFangHuo/src/views/chart/ContentConfigurations/index.vue

<template>
  <n-layout has-sider sider-placement="right">
    <n-layout-content>
      <!-- 图表拖拽区域 -->
      <content-edit></content-edit>
    </n-layout-content>
    <n-layout-sider
      collapse-mode="transform"
      :collapsed-width="0"
      :width="350"
      :collapsed="collapsed"
      :native-scrollbar="false"
      show-trigger="bar"
      @collapse="collapsedHandle"
      @expand="expandHandle"
    >
      <content-box class="go-content-configurations go-boderbox" :show-top="false" :depth="2">
        <!-- 页面配置 -->
        <n-tabs v-if="!selectTarget" class="tabs-box" size="small" type="segment">
          <n-tab-pane
            v-for="item in globalTabList"
            :key="item.key"
            :name="item.key"
            size="small"
            display-directive="show:lazy"
          >
            <template #tab>
              <n-space>
                <span>{{ item.title }}</span>
                <n-icon size="16" class="icon-position">
                  <component :is="item.icon"></component>
                </n-icon>
              </n-space>
            </template>
            <component :is="item.render"></component>
          </n-tab-pane>
        </n-tabs>

        <!-- 编辑 -->
        <n-tabs
          v-if="selectTarget"
          v-model:value="tabsSelect"
          class="tabs-box"
          size="small"
          type="segment"
        >
          <n-tab-pane
            v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList"
            :key="item.key"
            :name="item.key"
            size="small"
            display-directive="show:lazy"
          >
            <template #tab>
              <n-space>
                <span>{{ item.title }}</span>
                <n-icon size="16" class="icon-position">
                  <component :is="item.icon"></component>
                </n-icon>
              </n-space>
            </template>
            <component :is="item.render"></component>
          </n-tab-pane>
        </n-tabs>
      </content-box>
    </n-layout-sider>
  </n-layout>
</template>

<script setup lang="ts">
  import { ref, toRefs, watch, computed } from 'vue';
  import { icon } from '@/plugins';
  import { loadAsyncComponent, acquiesceAsyncComponent } from '@/utils';
  import { ContentBox } from '../ContentBox/index';
  import { TabsEnum } from './index.d';
  import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore';
  import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';

  const { getDetails } = toRefs(useChartLayoutStore());
  const { setItem } = useChartLayoutStore();
  const chartEditStore = useChartEditStore();

  const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5;

  const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'));
  const CanvasPage = acquiesceAsyncComponent(() => import('./components/CanvasPage/index.vue'));
  const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'));
  const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'));
  const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'));
  const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'));

  const collapsed = ref<boolean>(getDetails.value);
  const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING);

  const collapsedHandle = () => {
    collapsed.value = true;
    setItem(ChartLayoutStoreEnum.DETAILS, true);
  };

  const expandHandle = () => {
    collapsed.value = false;
    setItem(ChartLayoutStoreEnum.DETAILS, false);
  };

  const selectTarget = computed(() => {
    const selectId = chartEditStore.getTargetChart.selectId;
    // 排除多个
    if (selectId.length !== 1) return undefined;
    const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()];
    let selectTarget;
    if (target?.isGroup) {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      tabsSelect.value = TabsEnum.CHART_SETTING;
      if (selectId[0] != target.id) {
        target.groupList.forEach((element) => {
          if (element.id == selectId[0]) {
            selectTarget = element;
          }
        });
      } else {
        selectTarget = target;
      }
    } else {
      selectTarget = target;
    }
    return selectTarget;
  });

  watch(getDetails, (newData) => {
    if (newData) {
      collapsedHandle();
    } else {
      expandHandle();
    }
  });

  // 页面设置
  const globalTabList = [
    {
      key: TabsEnum.PAGE_SETTING,
      title: '页面配置',
      icon: DesktopOutlineIcon,
      render: CanvasPage,
    },
  ];
  const defaultTabList = [
    {
      key: TabsEnum.CHART_SETTING,
      title: '定制',
      icon: ConstructIcon,
      render: ChartSetting,
    },
    {
      key: TabsEnum.CHART_ANIMATION,
      title: '动画',
      icon: LeafIcon,
      render: ChartAnimation,
    },
  ];
  const chartsDefaultTabList = [
    ...defaultTabList,
    {
      key: TabsEnum.CHART_EVENT,
      title: '事件',
      icon: RocketIcon,
      render: ChartEvent,
    },
  ];

  const chartsTabList = [
    ...defaultTabList,
    {
      key: TabsEnum.CHART_DATA,
      title: '数据',
      icon: FlashIcon,
      render: ChartData,
    },
    {
      key: TabsEnum.CHART_EVENT,
      title: '事件',
      icon: RocketIcon,
      render: ChartEvent,
    },
  ];
</script>

<style lang="scss" scoped>
  @include go(content-configurations) {
    overflow: hidden;
    .tabs-box {
      padding: 10px;
      .icon-position {
        padding-top: 2px;
      }
    }
  }
</style>