Merge pull request #13048 from dataease/pr@dev-v2@refactor_mobile

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

core/core-frontend/src/utils/canvasUtils.ts

@@ -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 = {

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

@@ -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) => {

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

@@ -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"

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

@@ -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>

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

@@ -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>

core/core-frontend/src/views/dashboard/MobileConfigPanel.vue

@@ -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 } =
+      const { customAttrMobile, customStyleMobile, customAttr, customStyle } = mobileViewInfo[key]
-        canvasViewInfo.value[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')
       })