github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-24 11:32:57 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor(仪表板): 优化移动端放弃编辑还原逻辑，支持图表内容还原

Browse Source
This commit is contained in:
wangjiahao 2024-10-31 18:41:05 +08:00
parent ec01b80fd0
commit 582c4219fc
6 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
core/core-frontend/src/utils/canvasUtils.ts
View File

@ -351,7 +351,7 @@ export async function initCanvasData(dvId, busiFlag, callBack) {
)
}
export async function backCanvasData(dvId, busiFlag, callBack) {
export async function backCanvasData(dvId, mobileViewInfo, busiFlag, callBack) {
initCanvasDataPrepare(
dvId,
busiFlag,
@ -361,11 +361,15 @@ export async function backCanvasData(dvId, busiFlag, callBack) {
componentData.value.forEach(ele => {
ele.inMobile = componentDataId.includes(ele.id)
if (ele.inMobile) {
const { mx, my, mSizeX, mSizeY } = componentDataCopy.find(itx => itx.id === ele.id)
const { mx, my, mSizeX, mSizeY, mPropValue, mEvents, mCommonBackground } =
componentDataCopy.find(itx => itx.id === ele.id)
ele.mx = mx
ele.my = my
ele.mSizeX = mSizeX
ele.mSizeY = mSizeY
ele.mPropValue = mPropValue
ele.mEvents = mEvents
ele.mCommonBackground = mCommonBackground
if (ele.component === 'DeTabs') {
ele.propValue.forEach(tabItem => {
tabItem.componentData.forEach(tabComponent => {
@ -373,13 +377,23 @@ export async function backCanvasData(dvId, busiFlag, callBack) {
tabComponent.my = tabComponent.my
tabComponent.mSizeX = tabComponent.mSizeX
tabComponent.mSizeY = tabComponent.mSizeY
tabComponent.mPropValue = tPropValue
tabComponent.mEvents = tEvents
tabComponent.mCommonBackground = tCommonBackground
})
})
}
}
})
Object.keys(mobileViewInfo).forEach(key => {
if (canvasViewInfo.value[key] && mobileViewInfo[key]) {
const { customAttrMobile, customStyleMobile } = mobileViewInfo[key]
// 此处作为还原移动设计使用
canvasViewInfo.value[key]['customStyleMobile'] = customStyleMobile
canvasViewInfo.value[key]['customAttrMobile'] = customAttrMobile
}
})
dvMainStore.setComponentData(componentData.value)
dvMainStore.setCanvasViewInfo(canvasViewInfoPreview)
const canvasStyleDataCopy = cloneDeep(canvasStyleData.value)
if (!canvasStyleDataCopy.mobileSetting) {
canvasStyleDataCopy.mobileSetting = {

4
core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
View File

@ -144,10 +144,6 @@ const eventsShow = computed(() => {
)
})
const pictureGroupShow = computed(() => {
return curComponent.value?.innerType === 'picture-group'
})
const showProperties = (property: EditorProperty) => properties.value?.includes(property)
const onMiscChange = (val, prop) => {

4
core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
View File

@ -21,7 +21,7 @@ import { cloneDeep, defaultsDeep } from 'lodash-es'
import { ElButton, ElIcon } from 'element-plus-secondary'
import Icon from '@/components/icon-custom/src/Icon.vue'
const dvMainStore = dvMainStoreWithOut()
const { batchOptStatus } = storeToRefs(dvMainStore)
const { batchOptStatus, mobileInPc } = storeToRefs(dvMainStore)
const { t } = useI18n()
@ -131,7 +131,7 @@ watch(
:label="t('chart.title')"
class="form-item"
:class="'form-item-' + themes"
v-if="!batchOptStatus"
v-if="!batchOptStatus && !mobileInPc"
>
<el-input
:effect="themes"

10
core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
View File

@ -10,6 +10,10 @@ import { COLOR_PANEL, DEFAULT_TABLE_CELL } from '@/views/chart/components/editor
import { ElSpace } from 'element-plus-secondary'
import { cloneDeep, defaultsDeep } from 'lodash-es'
import { convertToAlphaColor, isAlphaColor } from '@/views/chart/components/js/util'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
const dvMainStore = dvMainStoreWithOut()
const { mobileInPc } = storeToRefs(dvMainStore)
const { t } = useI18n()
@ -167,7 +171,7 @@ onMounted(() => {
</el-select>
</el-form-item>
</el-space>
<el-space>
<el-space :class="{ 'mobile-style': mobileInPc }">
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox
:effect="themes"
@ -459,4 +463,8 @@ onMounted(() => {
padding: 0;
}
}
.mobile-style {
margin-top: 25px;
}
</style>

10
core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
View File

@ -10,7 +10,10 @@ import { COLOR_PANEL, DEFAULT_TABLE_HEADER } from '@/views/chart/components/edit
import { ElSpace } from 'element-plus-secondary'
import { cloneDeep, defaultsDeep } from 'lodash-es'
import { convertToAlphaColor, isAlphaColor } from '@/views/chart/components/js/util'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
const dvMainStore = dvMainStoreWithOut()
const { mobileInPc } = storeToRefs(dvMainStore)
const { t } = useI18n()
const props = defineProps({
@ -138,7 +141,7 @@ onMounted(() => {
</el-select>
</el-form-item>
</el-space>
<el-space>
<el-space :class="{ 'mobile-style': mobileInPc }">
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox
:effect="themes"
@ -413,4 +416,7 @@ onMounted(() => {
padding: 0;
}
}
.mobile-style {
margin-top: 25px;
}
</style>

8
core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
View File

@ -15,6 +15,7 @@ import { storeToRefs } from 'pinia'
import { debounce } from 'lodash-es'
import mobileHeader from '@/assets/img/mobile-header.png'
import ComponentStyleEditor from '@/views/common/ComponentStyleEditor.vue'
import { deepCopy } from '@/utils/utils'
const dvMainStore = dvMainStoreWithOut()
const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore)
@ -59,8 +60,7 @@ const handleLoad = () => {
// 移动端初始化话
if (!!mobileViewInfo) {
Object.keys(mobileViewInfo).forEach(key => {
const { customAttrMobile, customStyleMobile, customAttr, customStyle } =
canvasViewInfo.value[key]
const { customAttrMobile, customStyleMobile, customAttr, customStyle } = mobileViewInfo[key]
mobileViewInfo[key]['customAttr'] = customAttrMobile || customAttr
mobileViewInfo[key]['customStyle'] = customStyleMobile || customStyle
})
@ -74,7 +74,7 @@ const handleLoad = () => {
JSON.stringify(unref(componentData.value.filter(ele => !!ele.inMobile)))
),
canvasStyleData: JSON.parse(JSON.stringify(unref(canvasStyleData))),
canvasViewInfo: mobileViewInfo,
canvasViewInfo: deepCopy(mobileViewInfo),
dvInfo: JSON.parse(JSON.stringify(unref(dvInfo))),
isEmbedded: !!embeddedStore.baseUrl
})
@ -258,7 +258,7 @@ const handleBack = () => {
showClose: false
}).then(() => {
setTimeout(() => {
backCanvasData(dvInfo.value.id, 'dashboard', () => {
backCanvasData(dvInfo.value.id, canvasViewInfoMobile.value, 'dashboard', () => {
changeTimes.value = 0
emits('pcMode')
})