Merge pull request #13293 from dataease/pr@dev-v2@feat_tab-title-sort

feat(数据大屏): Tab支持标签排序功能 #12487

core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue

@@ -188,6 +188,11 @@ const bottomComponent = () => {
   menuOpt('bottomComponent')
 }
 
+const customSort = () => {
+  // do customSort
+  eventBus.emit('tabSort')
+}
+
 const componentCompose = () => {
   composeStore.compose()
   snapshotStore.recordSnapshotCache('componentCompose')
@@ -291,6 +296,7 @@ const editQueryCriteria = () => {
           <li @click="downComponent">下移一层</li>
           <li @click="topComponent">置于顶层</li>
           <li @click="bottomComponent">置于底层</li>
+          <li @click="customSort" v-if="curComponent.component === 'DeTabs'">排序</li>
           <xpack-component
             :chart="curComponent"
             is-screen

core/core-frontend/src/components/visualization/ComponentEditBar.vue

@@ -198,7 +198,7 @@
       </template>
       <fields-list :fields="state.curFields" :element="element" />
     </el-popover>
-    <custom-tabs-sort ref="customTabsSortRef" :element="element"></custom-tabs-sort>
+    <custom-tabs-sort ref="customTabsSortRef"></custom-tabs-sort>
   </div>
 </template>
 
@@ -227,7 +227,6 @@ import { ElMessage, ElTooltip, ElButton } from 'element-plus-secondary'
 import CustomTabsSort from '@/custom-component/de-tabs/CustomTabsSort.vue'
 import { exportPivotExcel } from '@/views/chart/components/js/panel/common/common_table'
 import { XpackComponent } from '@/components/plugin'
-import DatasetParamsComponent from '@/components/visualization/DatasetParamsComponent.vue'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const copyStore = copyStoreWithOut()
@@ -356,7 +355,7 @@ const state = reactive({
 })
 
 const tabSort = () => {
-  customTabsSortRef.value.sortInit()
+  customTabsSortRef.value.sortInit(element.value)
 }
 
 const downloadClick = () => {

core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue

@@ -40,35 +40,27 @@ import { ElButton } from 'element-plus-secondary'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import eventBus from '@/utils/eventBus'
 const snapshotStore = snapshotStoreWithOut()
-const props = defineProps({
-  element: {
-    type: Object,
-    required: true
-  }
-})
 
-onMounted(() => {
-  init()
-})
-const { element } = toRefs(props)
+const config = ref(null)
 
 const sortList = ref([])
 const dialogShow = ref(false)
-const sortInit = () => {
-  init()
+const sortInit = component => {
+  init(component)
   dialogShow.value = true
 }
-const init = () => {
-  sortList.value = deepCopy(element.value.propValue)
+const init = component => {
+  config.value = component
+  sortList.value = deepCopy(config.value.propValue)
 }
 
 const closeDialog = () => {
   dialogShow.value = false
 }
 const save = () => {
-  element.value.propValue = deepCopy(sortList.value)
+  config.value.propValue = deepCopy(sortList.value)
   snapshotStore.recordSnapshotCache()
-  eventBus.emit('onTabSortChange-' + element.value.id)
+  eventBus.emit('onTabSortChange-' + config.value.id)
   closeDialog()
 }
 

core/core-frontend/src/views/data-visualization/index.vue

@@ -45,6 +45,7 @@ import DeRuler from '@/custom-component/common/DeRuler.vue'
 import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import ChartStyleBatchSet from '@/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue'
+import CustomTabsSort from '@/custom-component/de-tabs/CustomTabsSort.vue'
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
@@ -62,6 +63,7 @@ const eventCheck = e => {
   }
 }
 const mainCanvasCoreRef = ref(null)
+const customTabsSortRef = ref(null)
 const appStore = useAppStoreWithOut()
 const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 const dvMainStore = dvMainStoreWithOut()
@@ -107,6 +109,12 @@ const state = reactive({
   baseHeight: 10
 })
 
+const tabSort = () => {
+  if (curComponent.value) {
+    customTabsSortRef.value.sortInit(curComponent.value)
+  }
+}
+
 // 启用拖动
 const enableDragging = e => {
   if (isSpaceDown.value) {
@@ -449,6 +457,8 @@ const popComponentData = computed(() =>
 )
 
 eventBus.on('handleNew', handleNew)
+
+eventBus.on('tabSort', tabSort)
 </script>
 
 <template>
@@ -604,6 +614,7 @@ eventBus.on('handleNew', handleNew)
     :canvas-view-info-preview="canvasViewInfo"
     :dv-info="dvInfo"
   ></dv-preview>
+  <custom-tabs-sort ref="customTabsSortRef"></custom-tabs-sort>
 </template>
 
 <style lang="less">