center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

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

Browse Source 
feat(仪表板): Tab组件支持排序
This commit is contained in:
王嘉豪 2024-06-07 16:51:37 +08:00 committed by GitHub
commit b420ad1cbc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 71 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/core-frontend/package.json
View File

@ -52,6 +52,7 @@
"vue": "^3.3.4", "vue": "^3.3.4",
"vue-clipboard3": "^2.0.0", "vue-clipboard3": "^2.0.0",
"vue-codemirror": "^6.1.1", "vue-codemirror": "^6.1.1",
"vue-draggable-next": "^2.2.1",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"vue-router": "4.1.3", "vue-router": "4.1.3",
"vue-types": "^5.0.2", "vue-types": "^5.0.2",

14
core/core-frontend/src/custom-component/de-tabs/Component.vue
View File

@ -14,11 +14,12 @@
:border-color="noBorderColor" :border-color="noBorderColor"
:border-active-color="borderActiveColor" :border-active-color="borderActiveColor"
> >
<draggable :list="moveTabs" animation="100" class="drag-list" item-key="id">
<el-tab-pane <el-tab-pane
class="el-tab-pane-custom" class="el-tab-pane-custom"
:lazy="true" :lazy="true"
:key="tabItem.name" :key="tabItem.name"
v-for="(tabItem, index) in element.propValue" v-for="(tabItem, index) in moveTabs"
:label="tabItem.title" :label="tabItem.title"
:name="tabItem.name" :name="tabItem.name"
> >
@ -73,6 +74,7 @@
:outer-scale="scale" :outer-scale="scale"
></de-preview> ></de-preview>
</el-tab-pane> </el-tab-pane>
</draggable>
</de-custom-tab> </de-custom-tab>
<el-dialog <el-dialog
title="编辑标题" title="编辑标题"
@ -118,6 +120,7 @@ import { canvasChangeAdaptor, findComponentIndexById } from '@/utils/canvasUtils
import DeCustomTab from '@/custom-component/de-tabs/DeCustomTab.vue' import DeCustomTab from '@/custom-component/de-tabs/DeCustomTab.vue'
import DePreview from '@/components/data-visualization/canvas/DePreview.vue' import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
import { useEmitt } from '@/hooks/web/useEmitt' import { useEmitt } from '@/hooks/web/useEmitt'
import draggable from 'vuedraggable'
const dvMainStore = dvMainStoreWithOut() const dvMainStore = dvMainStoreWithOut()
const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore) const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore)
const tabComponentRef = ref(null) const tabComponentRef = ref(null)
@ -174,8 +177,17 @@ const editableTabsValue = ref(null)
const noBorderColor = ref('none') const noBorderColor = ref('none')
let currentInstance let currentInstance
const moveTabs = computed(
() => element.value.propValue || [{ name: '1', label: 'Tab 1', content: 'Content 1' }]
)
const isEditMode = computed(() => editMode.value === 'edit' && isEdit.value && !mobileInPc.value) const isEditMode = computed(() => editMode.value === 'edit' && isEdit.value && !mobileInPc.value)
const onMove = evt => {
// do custom
return true
}
const calcTabLength = () => { const calcTabLength = () => {
setTimeout(() => { setTimeout(() => {
if (element.value.propValue.length > 1) { if (element.value.propValue.length > 1) {