Merge pull request #11032 from dataease/pr@dev-v2@refactor_app

refactor(数据大屏、仪表板): 优化应用功能

core/core-frontend/src/components/dashboard/DbToolbar.vue

@@ -2,7 +2,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import eventBus from '@/utils/eventBus'
 import { deepCopy } from '@/utils/utils'
-import { nextTick, reactive, ref, computed } from 'vue'
+import { nextTick, reactive, ref, computed, toRefs } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@@ -19,7 +19,7 @@ import MultiplexingCanvas from '@/views/common/MultiplexingCanvas.vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { getPanelAllLinkageInfo, saveLinkage } from '@/api/visualization/linkage'
 import { queryVisualizationJumpInfo } from '@/api/visualization/linkJump'
-import { canvasSave } from '@/utils/canvasUtils'
+import { canvasSave, initCanvasData } from '@/utils/canvasUtils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
 import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
@@ -29,11 +29,13 @@ import { XpackComponent } from '@/components/plugin'
 import DbMoreComGroup from '@/custom-component/component-group/DbMoreComGroup.vue'
 import { useCache } from '@/hooks/web/useCache'
 import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
+import DeAppApply from '@/views/common/DeAppApply.vue'
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const copyStore = copyStoreWithOut()
 const { styleChangeTimes, snapshotIndex } = storeToRefs(snapshotStore)
+const resourceAppOpt = ref(null)
 const {
   linkageSettingStatus,
   curLinkageView,
@@ -43,7 +45,8 @@ const {
   editMode,
   batchOptStatus,
   targetLinkageInfo,
-  curBatchOptComponents
+  curBatchOptComponents,
+  appData
 } = storeToRefs(dvMainStore)
 const dvModel = 'dashboard'
 const multiplexingRef = ref(null)
@@ -59,6 +62,15 @@ const resourceGroupOpt = ref(null)
 const outerParamsSetRef = ref(null)
 const { wsCache } = useCache('localStorage')
 
+const props = defineProps({
+  createType: {
+    type: String,
+    default: 'create'
+  }
+})
+
+const { createType } = toRefs(props)
+
 const editCanvasName = () => {
   nameEdit.value = true
   inputName.value = dvInfo.value.name
@@ -143,9 +155,23 @@ const resourceOptFinish = param => {
 
 const saveCanvasWithCheck = () => {
   if (dvInfo.value.dataState === 'prepare') {
-    const params = { name: dvInfo.value.name, leaf: true, id: dvInfo.value.pid }
-    resourceGroupOpt.value.optInit('leaf', params, 'newLeaf', true)
-    return
+    if (appData.value) {
+      // 应用保存
+      const params = {
+        base: {
+          pid: '',
+          name: dvInfo.value.name,
+          datasetFolderPid: null,
+          datasetFolderName: dvInfo.value.name
+        },
+        appData: appData.value
+      }
+      resourceAppOpt.value.init(params)
+    } else {
+      const params = { name: dvInfo.value.name, leaf: true, id: dvInfo.value.pid }
+      resourceGroupOpt.value.optInit('leaf', params, 'newLeaf', true)
+      return
+    }
   }
   saveResource()
 }
@@ -163,6 +189,12 @@ const saveResource = () => {
       snapshotStore.resetStyleChangeTimes()
       ElMessage.success('保存成功')
       window.history.pushState({}, '', `#/dashboard?resourceId=${dvInfo.value.id}`)
+      if (appData.value) {
+        initCanvasData(dvInfo.value.id, 'dashboard', () => {
+          useEmitt().emitter.emit('refresh-dataset-selector')
+          resourceAppOpt.value.close()
+        })
+      }
     })
   }
 }
@@ -623,6 +655,14 @@ const initOpenHandler = newWindow => {
   </div>
   <de-fullscreen show-position="edit" ref="fullScreeRef"></de-fullscreen>
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
+  <de-app-apply
+    ref="resourceAppOpt"
+    :component-data="componentData"
+    :dv-info="dvInfo"
+    :canvas-view-info="canvasViewInfo"
+    cur-canvas-type="dashboard"
+    @saveApp="saveCanvasWithCheck"
+  ></de-app-apply>
 </template>
 
 <style lang="less" scoped>

core/core-frontend/src/components/data-visualization/DvToolbar.vue

@@ -13,7 +13,7 @@ import MediaGroup from '@/custom-component/component-group/MediaGroup.vue'
 import TextGroup from '@/custom-component/component-group/TextGroup.vue'
 import CommonGroup from '@/custom-component/component-group/CommonGroup.vue'
 import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
-import { canvasSave } from '@/utils/canvasUtils'
+import { canvasSave, initCanvasData } from '@/utils/canvasUtils'
 import { changeSizeWithScale } from '@/utils/changeComponentsSizeWithScale'
 import MoreComGroup from '@/custom-component/component-group/MoreComGroup.vue'
 import { XpackComponent } from '@/components/plugin'
@@ -25,6 +25,7 @@ import MultiplexingCanvas from '@/views/common/MultiplexingCanvas.vue'
 import ComponentButtonLabel from '@/components/visualization/ComponentButtonLabel.vue'
 import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
 import DeAppApply from '@/views/common/DeAppApply.vue'
+import { useEmitt } from '@/hooks/web/useEmitt'
 let nameEdit = ref(false)
 let inputName = ref('')
 let nameInput = ref(null)
@@ -34,7 +35,7 @@ const { styleChangeTimes, snapshotIndex } = storeToRefs(snapshotStore)
 const resourceGroupOpt = ref(null)
 const resourceAppOpt = ref(null)
 const dvToolbarMain = ref(null)
-const { componentData, canvasStyleData, canvasViewInfo, dvInfo, editMode } =
+const { componentData, canvasStyleData, canvasViewInfo, dvInfo, editMode, appData } =
   storeToRefs(dvMainStore)
 let scaleEdit = 100
 const { wsCache } = useCache('localStorage')
@@ -101,9 +102,8 @@ const resourceOptFinish = param => {
 }
 
 const saveCanvasWithCheck = () => {
-  const appData = dvMainStore.getAppDataInfo()
   if (dvInfo.value.dataState === 'prepare') {
-    if (appData) {
+    if (appData.value) {
       // 应用保存
       const params = {
         base: {
@@ -112,7 +112,7 @@ const saveCanvasWithCheck = () => {
           datasetFolderPid: null,
           datasetFolderName: dvInfo.value.name
         },
-        appData: appData
+        appData: appData.value
       }
       resourceAppOpt.value.init(params)
     } else {
@@ -133,6 +133,12 @@ const saveResource = () => {
         wsCache.delete('DE-DV-CATCH-' + dvInfo.value.id)
         ElMessage.success('保存成功')
         window.history.pushState({}, '', `#/dvCanvas?dvId=${dvInfo.value.id}`)
+        if (appData.value) {
+          initCanvasData(dvInfo.value.id, 'dataV', () => {
+            useEmitt().emitter.emit('refresh-dataset-selector')
+            resourceAppOpt.value.close()
+          })
+        }
       })
     })
   }

core/core-frontend/src/components/de-app/AppExportForm.vue

@@ -125,7 +125,6 @@ const state = reactive({
 })
 
 const init = params => {
-  console.log('init==')
   state.applyDownloadDrawer = true
   state.form = params
 }

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -45,7 +45,7 @@ export const dvMainStore = defineStore('dataVisualization', {
       inMobile: false,
       firstLoadMap: [],
       canvasStyleData: { ...deepCopy(DEFAULT_CANVAS_STYLE_DATA_DARK), backgroundColor: null },
-      appData: {}, //应用信息
+      appData: null, //应用信息
       // 当前展示画布缓存数据
       componentDataCache: null,
       // PC布局画布组件数据

core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue

@@ -7,7 +7,7 @@ import { useAppStoreWithOut } from '@/store/modules/app'
 import _ from 'lodash'
 import { getDatasetTree, getDatasourceList } from '@/api/dataset'
 import { ElFormItem, FormInstance } from 'element-plus-secondary'
-import type { DataSource } from '@/views/visualized/data/dataset/form/util'
+import { useEmitt } from '@/hooks/web/useEmitt'
 
 const props = withDefaults(
   defineProps<{
@@ -193,6 +193,10 @@ const appStore = useAppStoreWithOut()
 const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 onMounted(() => {
   initDataset()
+  useEmitt({
+    name: 'refresh-dataset-selector',
+    callback: () => refresh()
+  })
 })
 </script>
 

core/core-frontend/src/views/common/DeAppApply.vue

@@ -306,7 +306,8 @@ const saveApp = () => {
 }
 
 defineExpose({
-  init
+  init,
+  close
 })
 </script>
 <style lang="less" scoped>

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

@@ -14,6 +14,10 @@ import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'
 import { download2AppTemplate, downloadCanvas2 } from '@/utils/imgUtils'
 import { storeToRefs } from 'pinia'
+import { ElMessage } from 'element-plus-secondary'
+import { personInfoApi } from '@/api/user'
+import AppExportForm from '@/components/de-app/AppExportForm.vue'
+const appExportFormRef = ref(null)
 
 const dvMainStore = dvMainStoreWithOut()
 const previewCanvasContainer = ref(null)
@@ -29,10 +33,11 @@ const state = reactive({
   canvasStylePreview: null,
   canvasViewInfoPreview: null,
   dvInfo: null,
-  curPreviewGap: 0
+  curPreviewGap: 0,
+  userLoginInfo: {}
 })
 
-const { fullscreenFlag } = storeToRefs(dvMainStore)
+const { fullscreenFlag, canvasViewDataInfo } = storeToRefs(dvMainStore)
 
 const { width, node } = useMoveLine('DASHBOARD')
 
@@ -108,10 +113,45 @@ const downloadH2 = type => {
 }
 
 const downloadAsAppTemplate = downloadType => {
+  if (downloadType === 'template') {
+    fileDownload(downloadType, null)
+  } else if (downloadType === 'app') {
+    downLoadToAppPre()
+  }
+}
+
+const downLoadToAppPre = () => {
+  const result = checkTemplate()
+  if (result && result.length > 0) {
+    ElMessage.warning(`当前仪表板中[${result}]属于模版视图，无法导出，请先设置数据集！`)
+  } else {
+    appExportFormRef.value.init({
+      appName: state.dvInfo.name,
+      icon: null,
+      version: '2.0',
+      creator: state.userLoginInfo?.name,
+      required: '2.9.0',
+      description: null
+    })
+  }
+}
+
+const checkTemplate = () => {
+  let templateViewNames = ','
+  Object.keys(canvasViewDataInfo.value).forEach(key => {
+    const viewInfo = canvasViewDataInfo.value[key]
+    if (viewInfo.dataFrom === 'template') {
+      templateViewNames = templateViewNames + viewInfo.title + ','
+    }
+  })
+  return templateViewNames.slice(1)
+}
+
+const fileDownload = (downloadType, attachParams) => {
   downloadStatus.value = true
   nextTick(() => {
     const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
-    download2AppTemplate(downloadType, vueDom, state.dvInfo.name, () => {
+    download2AppTemplate(downloadType, vueDom, state.dvInfo.name, attachParams, () => {
       downloadStatus.value = false
     })
   })
@@ -137,11 +177,18 @@ const resourceNodeClick = data => {
 }
 
 const previewShowFlag = computed(() => !!dvMainStore.dvInfo?.name)
-
+const findUserData = callback => {
+  personInfoApi().then(rsp => {
+    callback(rsp)
+  })
+}
 onBeforeMount(() => {
   if (showPosition.value === 'preview') {
     dvMainStore.canvasDataInit()
   }
+  findUserData(res => {
+    state.userLoginInfo = res.data
+  })
 })
 const sideTreeStatus = ref(true)
 const changeSideTreeStatus = val => {
@@ -156,6 +203,10 @@ const mouseleave = () => {
   appStore.setArrowSide(false)
 }
 
+const downLoadApp = appAttachInfo => {
+  fileDownload('app', appAttachInfo)
+}
+
 defineExpose({
   getPreviewStateInfo
 })
@@ -246,6 +297,13 @@ defineExpose({
       </template>
     </el-container>
   </div>
+  <app-export-form
+    ref="appExportFormRef"
+    :dv-info="state.dvInfo"
+    :component-data="state.canvasDataPreview"
+    :canvas-view-info="state.canvasViewInfoPreview"
+    @downLoadApp="downLoadApp"
+  ></app-export-form>
 </template>
 
 <style lang="less">

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

@@ -30,6 +30,7 @@ import { deepCopy } from '@/utils/utils'
 const interactiveStore = interactiveStoreWithOut()
 import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
+import eventBus from '@/utils/eventBus'
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
 const canvasCacheOutRef = ref(null)
@@ -194,23 +195,29 @@ onMounted(async () => {
       console.error('can not find watermark info')
     }
     let deTemplateData
+    let preName
     if (createType === 'template') {
       const templateParamsApply = JSON.parse(Base64.decode(decodeURIComponent(templateParams + '')))
       await decompressionPre(templateParamsApply, result => {
         deTemplateData = result
+        preName = deTemplateData.baseInfo?.preName
       })
     }
     nextTick(() => {
-      dvMainStore.createInit('dashboard', null, pid, watermarkBaseInfo)
+      dvMainStore.createInit('dashboard', null, pid, watermarkBaseInfo, preName)
       // 从模板新建
       if (createType === 'template') {
         wsCache.delete('de-template-data')
         dvMainStore.setComponentData(deTemplateData['componentData'])
         dvMainStore.setCanvasStyle(deTemplateData['canvasStyleData'])
         dvMainStore.setCanvasViewInfo(deTemplateData['canvasViewInfo'])
+        dvMainStore.setAppDataInfo(deTemplateData['appData'])
         setTimeout(() => {
           snapshotStore.recordSnapshotCache()
         }, 1500)
+        if (dvMainStore.getAppDataInfo()) {
+          eventBus.emit('save')
+        }
       }
       dataInitState.value = true
       // preOpt

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

@@ -115,7 +115,6 @@ const fileDownload = (downloadType, attachParams) => {
 }
 
 const downloadAsAppTemplate = downloadType => {
-  console.log('===test===' + downloadType)
   if (downloadType === 'template') {
     fileDownload(downloadType, null)
   } else if (downloadType === 'app') {
@@ -129,7 +128,7 @@ const downLoadToAppPre = () => {
     ElMessage.warning(`当前仪表板中[${result}]属于模版视图，无法导出，请先设置数据集！`)
   } else {
     appExportFormRef.value.init({
-      appName: dvInfo.value.name,
+      appName: state.dvInfo.name,
       icon: null,
       version: '2.0',
       creator: state.userLoginInfo?.name,

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

@@ -349,6 +349,9 @@ onMounted(async () => {
           snapshotStore.recordSnapshotCache()
         }, 1500)
       }
+      if (dvMainStore.getAppDataInfo()) {
+        eventBus.emit('save')
+      }
     })
   } else {
     let url = '#/screen/index'