From 703047630f56ce22d2fc7729e4c6b146f5d4f44a Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 19 Aug 2024 17:59:22 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8DTab=E9=83=A8=E5=88=86=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/CanvasCore.vue  |  18 +-
 .../custom-component/de-tabs/Component.vue    |   1 +
 .../de-tabs/DataVComponent.vue                | 523 ------------------
 3 files changed, 11 insertions(+), 531 deletions(-)
 delete mode 100644 core/core-frontend/src/custom-component/de-tabs/DataVComponent.vue

diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index a0bc770939..07ea81f995 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -855,14 +855,16 @@ function removeItemById(componentId) {
 function removeItem(index) {
   let item = componentData.value[index]
   if (item && isSameCanvas(item, canvasId.value)) {
-    removeItemFromPositionBox(item)
-    let belowItems = findBelowItems(item)
-    _.forEach(belowItems, function (upItem) {
-      let canGoUpRows = canItemGoUp(upItem)
-      if (canGoUpRows > 0) {
-        moveItemUp(upItem, canGoUpRows)
-      }
-    })
+    if (isDashboard()) {
+      removeItemFromPositionBox(item)
+      let belowItems = findBelowItems(item)
+      _.forEach(belowItems, function (upItem) {
+        let canGoUpRows = canItemGoUp(upItem)
+        if (canGoUpRows > 0) {
+          moveItemUp(upItem, canGoUpRows)
+        }
+      })
+    }
     let checkedFields = []
     if (item.innerType === 'VQuery') {
       ;(item.propValue || []).forEach(ele => {
diff --git a/core/core-frontend/src/custom-component/de-tabs/Component.vue b/core/core-frontend/src/custom-component/de-tabs/Component.vue
index fab42d4736..e77a2c7360 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue
@@ -301,6 +301,7 @@ const componentMoveIn = component => {
         dvMainStore.setCurComponent({ component: null, index: null })
         component.canvasId = element.value.id + '--' + tabItem.name
         dataVTabComponentAdd(component, element.value.style)
+        tabItem.componentData.push(component)
       }
     }
   })
diff --git a/core/core-frontend/src/custom-component/de-tabs/DataVComponent.vue b/core/core-frontend/src/custom-component/de-tabs/DataVComponent.vue
deleted file mode 100644
index f4faa5e5f3..0000000000
--- a/core/core-frontend/src/custom-component/de-tabs/DataVComponent.vue
+++ /dev/null
@@ -1,523 +0,0 @@
-<template>
-  <div
-    v-if="state.tabShow"
-    style="width: 100%; height: 100%"
-    :class="[headClass, `ed-tabs-${curThemes}`]"
-    class="custom-tabs-head"
-    ref="tabComponentRef"
-  >
-    <de-custom-tab
-      v-model="editableTabsValue"
-      @tab-add="addTab"
-      :addable="isEditMode"
-      :font-color="fontColor"
-      :active-color="activeColor"
-      :border-color="noBorderColor"
-      :border-active-color="borderActiveColor"
-    >
-      <template :key="tabItem.name" v-for="(tabItem, index) in element.propValue">
-        <el-tab-pane
-          class="el-tab-pane-custom"
-          :lazy="isEditMode"
-          :label="tabItem.title"
-          :name="tabItem.name"
-        >
-          <template #label>
-            <span :style="titleStyle(tabItem.name)">{{ tabItem.title }}</span>
-            <el-dropdown
-              v-if="isEditMode"
-              :effect="curThemes"
-              style="line-height: 4 !important"
-              trigger="click"
-              @command="handleCommand"
-            >
-              <span class="el-dropdown-link">
-                <el-icon v-if="isEdit"><ArrowDown /></el-icon>
-              </span>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item :command="beforeHandleCommand('editTitle', tabItem)">
-                    编辑标题
-                  </el-dropdown-item>
-
-                  <el-dropdown-item
-                    v-if="element.propValue.length > 1"
-                    :command="beforeHandleCommand('deleteCur', tabItem)"
-                  >
-                    删除
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </template>
-          <de-canvas
-            v-if="isEdit && !mobileInPc"
-            :ref="'tabCanvas_' + index"
-            :component-data="tabItem.componentData"
-            :canvas-style-data="canvasStyleData"
-            :canvas-view-info="canvasViewInfo"
-            :canvas-id="element.id + '--' + tabItem.name"
-            :class="moveActive ? 'canvas-move-in' : ''"
-            :canvas-active="editableTabsValue === tabItem.name"
-          ></de-canvas>
-          <de-preview
-            v-else
-            :ref="'dashboardPreview'"
-            :dv-info="dvInfo"
-            :cur-gap="curPreviewGap"
-            :component-data="tabItem.componentData"
-            :canvas-style-data="canvasStyleData"
-            :canvas-view-info="canvasViewInfo"
-            :canvas-id="element.id + '--' + tabItem.name"
-            :preview-active="editableTabsValue === tabItem.name"
-            :show-position="showPosition"
-            :outer-scale="scale"
-          ></de-preview>
-        </el-tab-pane>
-      </template>
-    </de-custom-tab>
-    <el-dialog
-      title="编辑标题"
-      :append-to-body="true"
-      v-model="state.dialogVisible"
-      width="30%"
-      :show-close="false"
-      :close-on-click-modal="false"
-      center
-    >
-      <el-input
-        v-model="state.textarea"
-        maxlength="50"
-        :placeholder="$t('dataset.input_content')"
-      />
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="state.dialogVisible = false">取消</el-button>
-          <el-button :disabled="!titleValid" type="primary" @click="sureCurTitle">确认</el-button>
-        </span>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  computed,
-  getCurrentInstance,
-  nextTick,
-  onBeforeMount,
-  onMounted,
-  reactive,
-  ref,
-  toRefs,
-  watch
-} from 'vue'
-import DeCanvas from '@/views/canvas/DeCanvas.vue'
-import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { storeToRefs } from 'pinia'
-import { guid } from '@/views/visualized/data/dataset/form/util'
-import eventBus from '@/utils/eventBus'
-import { canvasChangeAdaptor, findComponentIndexById, isDashboard } from '@/utils/canvasUtils'
-import DeCustomTab from '@/custom-component/de-tabs/DeCustomTab.vue'
-import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
-import { useEmitt } from '@/hooks/web/useEmitt'
-import { getPanelAllLinkageInfo } from '@/api/visualization/linkage'
-import { dataVTabComponentAdd, groupSizeStyleAdaptor } from '@/utils/style'
-const dvMainStore = dvMainStoreWithOut()
-const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore)
-const tabComponentRef = ref(null)
-let carouselTimer = null
-
-const props = defineProps({
-  canvasStyleData: {
-    type: Object,
-    required: true
-  },
-  canvasViewInfo: {
-    type: Object,
-    required: true
-  },
-  dvInfo: {
-    type: Object,
-    required: true
-  },
-  element: {
-    type: Object,
-    default() {
-      return {
-        propValue: []
-      }
-    }
-  },
-  isEdit: {
-    type: Boolean,
-    default: false
-  },
-  showPosition: {
-    type: String,
-    required: false,
-    default: 'canvas'
-  },
-  scale: {
-    type: Number,
-    required: false,
-    default: 1
-  }
-})
-const { element, isEdit, showPosition, canvasStyleData, canvasViewInfo, dvInfo, scale } =
-  toRefs(props)
-
-const state = reactive({
-  activeTabName: '',
-  curItem: {},
-  textarea: '',
-  dialogVisible: false,
-  tabShow: true
-})
-const tabsAreaScroll = ref(false)
-const editableTabsValue = ref(null)
-
-// 无边框
-const noBorderColor = ref('none')
-let currentInstance
-
-const isEditMode = computed(() => editMode.value === 'edit' && isEdit.value && !mobileInPc.value)
-const curThemes = isDashboard() ? 'light' : 'dark'
-const calcTabLength = () => {
-  setTimeout(() => {
-    if (element.value.propValue.length > 1) {
-      const containerDom = document.getElementById(
-        'tab-' + element.value.propValue[element.value.propValue.length - 1].name
-      )
-      tabsAreaScroll.value =
-        containerDom.parentNode.clientWidth > tabComponentRef.value.clientWidth - 100
-    } else {
-      tabsAreaScroll.value = false
-    }
-  })
-}
-
-const beforeHandleCommand = (item, param) => {
-  return {
-    command: item,
-    param: param
-  }
-}
-const curPreviewGap = computed(() =>
-  dvInfo.value.type === 'dashboard' && canvasStyleData.value['dashboard'].gap === 'yes'
-    ? canvasStyleData.value['dashboard'].gapSize
-    : 0
-)
-
-function sureCurTitle() {
-  state.curItem.title = state.textarea
-  state.dialogVisible = false
-}
-
-function addTab() {
-  const newName = guid()
-  const newTab = {
-    name: newName,
-    title: '新建Tab',
-    componentData: [],
-    closable: true
-  }
-  element.value.propValue.push(newTab)
-  editableTabsValue.value = newTab.name
-}
-
-function deleteCur(param) {
-  state.curItem = param
-  let len = element.value.propValue.length
-  while (len--) {
-    if (element.value.propValue[len].name === param.name) {
-      element.value.propValue.splice(len, 1)
-      const activeIndex =
-        (len - 1 + element.value.propValue.length) % element.value.propValue.length
-      editableTabsValue.value = element.value.propValue[activeIndex].name
-      state.tabShow = false
-      nextTick(() => {
-        state.tabShow = true
-      })
-    }
-  }
-}
-
-function editCurTitle(param) {
-  state.activeTabName = param.name
-  state.curItem = param
-  state.textarea = param.title
-  state.dialogVisible = true
-}
-
-function handleCommand(command) {
-  switch (command.command) {
-    case 'editTitle':
-      editCurTitle(command.param)
-      break
-    case 'deleteCur':
-      deleteCur(command.param)
-      break
-  }
-}
-
-const reloadLinkage = () => {
-  // 刷新联动信息
-  if (dvInfo.value.id) {
-    getPanelAllLinkageInfo(dvInfo.value.id).then(rsp => {
-      dvMainStore.setNowPanelTrackInfo(rsp.data)
-    })
-  }
-}
-
-const componentMoveIn = component => {
-  element.value.propValue.forEach((tabItem, index) => {
-    if (editableTabsValue.value === tabItem.name) {
-      //获取主画布当前组件的index
-      const curIndex = findComponentIndexById(component.id)
-      // 从主画布中移除
-      if (isDashboard()) {
-        eventBus.emit('removeMatrixItem-canvas-main', curIndex)
-        dvMainStore.setCurComponent({ component: null, index: null })
-        component.canvasId = element.value.id + '--' + tabItem.name
-        const refInstance = currentInstance.refs['tabCanvas_' + index][0]
-        if (refInstance) {
-          const matrixBase = refInstance.getBaseMatrixSize() //矩阵基础大小
-          canvasChangeAdaptor(component, matrixBase)
-          component.x = 1
-          component.y = 200
-          component.style.left = 0
-          component.style.top = 0
-          tabItem.componentData.push(component)
-          if (isDashboard()) {
-            nextTick(() => {
-              refInstance.addItemBox(component) //在适当的时候初始化布局组件
-            })
-          }
-        }
-      } else {
-        // 从主画布删除
-        dvMainStore.deleteComponent(curIndex)
-        dvMainStore.setCurComponent({ component: null, index: null })
-        component.canvasId = element.value.id + '--' + tabItem.name
-        dataVTabComponentAdd(component, element.value.style)
-      }
-    }
-  })
-
-  reloadLinkage()
-}
-
-const componentMoveOut = component => {
-  canvasChangeAdaptor(component, bashMatrixInfo.value, true)
-  // 从Tab画布中移除
-  eventBus.emit('removeMatrixItemById-' + component.canvasId, component.id)
-  dvMainStore.setCurComponent({ component: null, index: null })
-  // 主画布中添加
-  if (isDashboard()) {
-    eventBus.emit('moveOutFromTab-canvas-main', component)
-  } else {
-    addToMain(component)
-  }
-  reloadLinkage()
-}
-
-const addToMain = component => {
-  component.canvasId = 'canvas-main'
-  dvMainStore.addComponent({
-    component,
-    index: undefined,
-    isFromGroup: true
-  })
-}
-
-const moveActive = computed(() => {
-  return tabMoveInActiveId.value && tabMoveInActiveId.value === element.value.id
-})
-
-const headClass = computed(() => {
-  if (tabsAreaScroll.value) {
-    return 'tab-head-left'
-  } else {
-    return 'tab-head-' + element.value.style.headHorizontalPosition
-  }
-})
-
-const titleStyle = itemName => {
-  if (editableTabsValue.value === itemName) {
-    return {
-      fontSize: (element.value.style.activeFontSize || 18) * scale.value + 'px'
-    }
-  } else {
-    return {
-      fontSize: (element.value.style.fontSize || 16) * scale.value + 'px'
-    }
-  }
-}
-
-const fontColor = computed(() => {
-  if (
-    element.value &&
-    element.value.style &&
-    element.value.style.headFontColor &&
-    typeof element.value.style.headFontColor === 'string'
-  ) {
-    return element.value.style.headFontColor
-  } else {
-    return 'none'
-  }
-})
-
-const activeColor = computed(() => {
-  if (
-    element.value &&
-    element.value.style &&
-    element.value.style.headFontActiveColor &&
-    typeof element.value.style.headFontActiveColor === 'string'
-  ) {
-    return element.value.style.headFontActiveColor
-  } else {
-    return 'none'
-  }
-})
-
-const borderActiveColor = computed(() => {
-  if (
-    element.value &&
-    element.value.style &&
-    element.value.style.headBorderActiveColor &&
-    typeof element.value.style.headBorderActiveColor === 'string'
-  ) {
-    return element.value.style.headBorderActiveColor
-  } else {
-    return 'none'
-  }
-})
-
-const titleValid = computed(() => {
-  return !!state.textarea && !!state.textarea.trim()
-})
-
-watch(
-  () => element.value,
-  () => {
-    calcTabLength()
-  },
-  { deep: true }
-)
-
-watch(
-  () => editableTabsValue.value,
-  () => {
-    nextTick(() => {
-      useEmitt().emitter.emit('tabCanvasChange-' + activeCanvasId.value)
-    })
-  },
-  { deep: true }
-)
-
-const activeCanvasId = computed(() => {
-  return element.value.id + '--' + editableTabsValue.value
-})
-
-const reShow = () => {
-  state.tabShow = false
-  nextTick(() => {
-    state.tabShow = true
-  })
-}
-
-watch(
-  () => isEditMode.value,
-  () => {
-    initCarousel()
-  }
-)
-
-const initCarousel = () => {
-  carouselTimer && clearInterval(carouselTimer)
-  carouselTimer = null
-  if (!isEditMode.value) {
-    if (element.value.carousel?.enable) {
-      const switchTime = (element.value.carousel.time || 5) * 1000
-      let switchCount = 1
-      // 轮播定时器
-      carouselTimer = setInterval(() => {
-        const nowIndex = switchCount % element.value.propValue.length
-        switchCount++
-        nextTick(() => {
-          editableTabsValue.value = element.value.propValue[nowIndex].name
-        })
-      }, switchTime)
-    }
-  }
-}
-
-onMounted(() => {
-  if (element.value.propValue.length > 0) {
-    editableTabsValue.value = element.value.propValue[0].name
-  }
-  calcTabLength()
-  eventBus.on('onTabMoveIn-' + element.value.id, componentMoveIn)
-  eventBus.on('onTabMoveOut-' + element.value.id, componentMoveOut)
-  eventBus.on('onTabSortChange-' + element.value.id, reShow)
-  currentInstance = getCurrentInstance()
-  initCarousel()
-  nextTick(() => {
-    groupSizeStyleAdaptor(element.value)
-  })
-})
-
-onBeforeMount(() => {
-  eventBus.off('onTabMoveIn-' + element.value.id, componentMoveIn)
-  eventBus.off('onTabMoveOut-' + element.value.id, componentMoveOut)
-  eventBus.off('onTabSortChange-' + element.value.id, reShow)
-  if (carouselTimer) {
-    clearInterval(carouselTimer)
-    carouselTimer = null
-  }
-})
-</script>
-<style lang="less" scoped>
-:deep(.ed-tabs__content) {
-  height: calc(100% - 46px) !important;
-}
-.ed-tabs-dark {
-  :deep(.ed-tabs__new-tab) {
-    margin-right: 25px;
-    color: #fff;
-  }
-  :deep(.el-dropdown-link) {
-    color: #fff;
-  }
-}
-.ed-tabs-light {
-  :deep(.ed-tabs__new-tab) {
-    margin-right: 25px;
-    background-color: #fff;
-  }
-}
-.el-tab-pane-custom {
-  width: 100%;
-  height: 100%;
-}
-.canvas-move-in {
-  border: 2px dotted transparent;
-  border-color: blueviolet;
-}
-
-.tab-head-left :deep(.ed-tabs__nav-scroll) {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.tab-head-right :deep(.ed-tabs__nav-scroll) {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.tab-head-center :deep(.ed-tabs__nav-scroll) {
-  display: flex;
-  justify-content: center;
-}
-</style>