forked from github/dataease
Merge pull request #10189 from dataease/pr@dev-v2@refactor_tab-sort
refactor(仪表板): 优化Tab组件排序
This commit is contained in:
王嘉豪
GitHub
commit
74140f0def
@ -10,6 +10,16 @@
|
||||
]"
|
||||
@mousedown="fieldsAreaDown"
|
||||
>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
placement="top"
|
||||
:content="'排序'"
|
||||
v-if="element.component === 'DeTabs' && showPosition === 'canvas'"
|
||||
>
|
||||
<el-icon class="bar-base-icon" @click="tabSort">
|
||||
<Sort />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<template v-if="element.component === 'VQuery' && showPosition === 'canvas'">
|
||||
<span title="添加查询条件">
|
||||
<el-icon class="bar-base-icon" @click="addQueryCriteria">
|
||||
@ -142,11 +152,12 @@
|
||||
</template>
|
||||
<fields-list :fields="state.curFields" :element="element" />
|
||||
</el-popover>
|
||||
<custom-tabs-sort ref="customTabsSortRef" :element="element"></custom-tabs-sort>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, h, onBeforeUnmount, onMounted, reactive, toRefs, watch } from 'vue'
|
||||
import { computed, h, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
@ -158,9 +169,11 @@ import { exportExcelDownload } from '@/views/chart/components/js/util'
|
||||
import FieldsList from '@/custom-component/rich-text/FieldsList.vue'
|
||||
import { RefreshLeft } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElTooltip, ElButton } from 'element-plus-secondary'
|
||||
import CustomTabsSort from '@/custom-component/de-tabs/CustomTabsSort.vue'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const snapshotStore = snapshotStoreWithOut()
|
||||
const copyStore = copyStoreWithOut()
|
||||
const customTabsSortRef = ref(null)
|
||||
const emits = defineEmits([
|
||||
'userViewEnlargeOpen',
|
||||
'closePreview',
|
||||
@ -273,6 +286,10 @@ const state = reactive({
|
||||
batchOptCheckModel: false
|
||||
})
|
||||
|
||||
const tabSort = () => {
|
||||
customTabsSortRef.value.sortInit()
|
||||
}
|
||||
|
||||
const downloadClick = () => {
|
||||
dvMainStore.setCurComponent({ component: element.value, index: index.value })
|
||||
}
|
||||
|
||||
@ -14,17 +14,17 @@
|
||||
:border-color="noBorderColor"
|
||||
:border-active-color="borderActiveColor"
|
||||
>
|
||||
<draggable :list="moveTabs" animation="100" class="drag-list" item-key="id">
|
||||
<draggable :list="moveTabs" animation="300" class="drag-list">
|
||||
<template #item="{ element, index }">
|
||||
<el-tab-pane
|
||||
class="el-tab-pane-custom"
|
||||
:lazy="true"
|
||||
:key="tabItem.name"
|
||||
v-for="(tabItem, index) in moveTabs"
|
||||
:label="tabItem.title"
|
||||
:name="tabItem.name"
|
||||
:key="element.name"
|
||||
:label="element.title"
|
||||
:name="element.name"
|
||||
>
|
||||
<template #label>
|
||||
<span :style="titleStyle(tabItem.name)">{{ tabItem.title }}</span>
|
||||
<span :style="titleStyle(element.name)">{{ element.title }}</span>
|
||||
<el-dropdown
|
||||
v-if="isEditMode"
|
||||
style="line-height: 4 !important"
|
||||
@ -36,13 +36,13 @@
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :command="beforeHandleCommand('editTitle', tabItem)">
|
||||
<el-dropdown-item :command="beforeHandleCommand('editTitle', element)">
|
||||
编辑标题
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-dropdown-item
|
||||
v-if="element.propValue.length > 1"
|
||||
:command="beforeHandleCommand('deleteCur', tabItem)"
|
||||
:command="beforeHandleCommand('deleteCur', element)"
|
||||
>
|
||||
删除
|
||||
</el-dropdown-item>
|
||||
@ -53,27 +53,28 @@
|
||||
<de-canvas
|
||||
v-if="isEdit && !mobileInPc"
|
||||
:ref="'tabCanvas_' + index"
|
||||
:component-data="tabItem.componentData"
|
||||
:component-data="element.componentData"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:canvas-view-info="canvasViewInfo"
|
||||
:canvas-id="element.id + '--' + tabItem.name"
|
||||
:canvas-id="element.id + '--' + element.name"
|
||||
:class="moveActive ? 'canvas-move-in' : ''"
|
||||
:canvas-active="editableTabsValue === tabItem.name"
|
||||
:canvas-active="editableTabsValue === element.name"
|
||||
></de-canvas>
|
||||
<de-preview
|
||||
v-else
|
||||
:ref="'dashboardPreview'"
|
||||
:dv-info="dvInfo"
|
||||
:cur-gap="curPreviewGap"
|
||||
:component-data="tabItem.componentData"
|
||||
:component-data="element.componentData"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:canvas-view-info="canvasViewInfo"
|
||||
:canvas-id="element.id + '--' + tabItem.name"
|
||||
:preview-active="editableTabsValue === tabItem.name"
|
||||
:canvas-id="element.id + '--' + element.name"
|
||||
:preview-active="editableTabsValue === element.name"
|
||||
:show-position="showPosition"
|
||||
:outer-scale="scale"
|
||||
></de-preview>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</draggable>
|
||||
</de-custom-tab>
|
||||
<el-dialog
|
||||
|
||||
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
ref="enlargeDialog"
|
||||
destroy-on-close
|
||||
:append-to-body="true"
|
||||
:title="'自定义排序'"
|
||||
v-model="dialogShow"
|
||||
width="30vw"
|
||||
top="10vh"
|
||||
>
|
||||
<div>
|
||||
<draggable :list="sortList" animation="300" class="drag-list">
|
||||
<template #item="{ element }">
|
||||
<span :key="element.name" class="item-dimension" :title="element.title">
|
||||
<el-icon size="20px">
|
||||
<Icon name="drag" />
|
||||
</el-icon>
|
||||
<span class="item-span">
|
||||
{{ element.title }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeDialog">取消</el-button>
|
||||
<el-button type="primary" @click="save">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import draggable from 'vuedraggable'
|
||||
import { onMounted, ref, toRefs } from 'vue'
|
||||
import { deepCopy } from '@/utils/utils'
|
||||
import { ElButton } from 'element-plus-secondary'
|
||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||
const snapshotStore = snapshotStoreWithOut()
|
||||
const props = defineProps({
|
||||
element: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
const { element } = toRefs(props)
|
||||
|
||||
const sortList = ref([])
|
||||
const dialogShow = ref(false)
|
||||
const sortInit = () => {
|
||||
init()
|
||||
dialogShow.value = true
|
||||
}
|
||||
const init = () => {
|
||||
sortList.value = deepCopy(element.value.propValue)
|
||||
}
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogShow.value = false
|
||||
}
|
||||
const save = () => {
|
||||
element.value.propValue = deepCopy(sortList.value)
|
||||
snapshotStore.recordSnapshotCache()
|
||||
closeDialog()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
sortInit
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.drag-list {
|
||||
overflow: auto;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.item-dimension {
|
||||
padding: 2px;
|
||||
margin: 2px;
|
||||
border: solid 1px #eee;
|
||||
text-align: left;
|
||||
color: #606266;
|
||||
/*background-color: rgba(35,46,64,.05);*/
|
||||
background-color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
cursor: move;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.item-span {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.blackTheme .item-dimension {
|
||||
border: solid 1px;
|
||||
border-color: var(--TableBorderColor);
|
||||
color: var(--TextPrimary);
|
||||
background-color: var(--MainBG);
|
||||
}
|
||||
|
||||
.item-dimension + .item-dimension {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.item-dimension:hover {
|
||||
color: #1890ff;
|
||||
background: #e8f4ff;
|
||||
border-color: #a3d3ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.blackTheme .item-dimension:hover {
|
||||
color: var(--Main);
|
||||
background: var(--ContentBG);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user