使用模板创建

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

@@ -94,7 +94,7 @@ const { wsCache } = useCache('localStorage')
 const userStore = useUserStoreWithOut()
 const isIframe = computed(() => appStore.getIsIframe)
 const desktop = wsCache.get('app.desktop')
-const emits = defineEmits(['recoverToPublished'])
+const emits = defineEmits(['recoverToPublished','saveAsTemplate'])
 
 defineProps({
   createType: {
@@ -212,6 +212,7 @@ const publishStatusChange = status => {
 }
 
 const saveCanvasWithCheck = (withPublish = false, status?) => {
+  debugger
   if (userStore.getOid && wsCache.get('user.oid') && userStore.getOid !== wsCache.get('user.oid')) {
     ElMessageBox.confirm(t('components.from_other_organizations'), {
       confirmButtonType: 'primary',
@@ -524,7 +525,7 @@ const initOpenHandler = newWindow => {
   }
 }
 function saveas(){
-
+  emits('saveAsTemplate')
 }
 </script>
 
@@ -661,7 +662,7 @@ function saveas(){
           type="primary">
           {{ t('data_set.edit') }}
         </el-button>
-        <el-button class="savebtn" type="primary" @click="saveas">另存为</el-button>
+        <!-- <el-button class="savebtn" type="primary" @click="saveas">另存为</el-button> -->
         <el-button v-if="editMode === 'edit' || editMode === 'preview'" :disabled="styleChangeTimes < 1"
           @click="saveCanvasWithCheck()" style="float: right; margin-right: 12px" type="primary" class="savebtn">
           {{ t('data_set.save') }}

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

@@ -34,6 +34,7 @@ import eventBus from '@/utils/eventBus'
 import { useI18n } from '@/hooks/web/useI18n'
 import DashboardHiddenComponent from '@/components/dashboard/DashboardHiddenComponent.vue'
 import { recoverToPublished } from '@/api/visualization/dataVisualization'
+import { download2AppTemplate } from '@/utils/imgUtils'
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
 const canvasCacheOutRef = ref(null)
@@ -325,6 +326,12 @@ onUnmounted(() => {
   window.removeEventListener('storage', eventCheck)
   window.removeEventListener('message', winMsgHandle)
 })
+// 另存为
+function saveAsTemplate(){
+  const vueDom = document.querySelector('.template-canvas-main');
+    download2AppTemplate('template', vueDom, dvInfo.value.name, null, () => {
+  })
+}
 </script>
 
 <template>
@@ -334,7 +341,7 @@ onUnmounted(() => {
     v-loading="requestStore.loadingMap[permissionStore.currentPath]"
     v-if="loadFinish && !mobileConfig"
   >
-    <DbToolbar @recoverToPublished="doRecoverToPublished" />
+    <DbToolbar @recoverToPublished="doRecoverToPublished" @saveAsTemplate="saveAsTemplate" />
     <el-container
       class="dv-layout-container"
       :class="{ 'preview-content': editMode === 'preview' }"
@@ -346,6 +353,7 @@ onUnmounted(() => {
           style="overflow-x: hidden"
           v-if="dataInitState"
           ref="deCanvasRef"
+          class="template-canvas-main"
           :canvas-id="state.canvasId"
           :component-data="dashboardComponentData"
           :canvas-style-data="canvasStyleData"

core/core-frontend/src/viewsnew/TemplateResource/index.vue

@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router'
 import { searchMarketPreview } from '@/api/templateMarket'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useCache } from '@/hooks/web/useCache'
-import { ElMessage } from 'element-plus-secondary'
+import { ElMessage,ElMessageBox } from 'element-plus-secondary'
 import { Base64 } from 'js-base64'
 import { useEmbedded } from '@/store/modules/embedded'
 import { useAppStoreWithOut } from '@/store/modules/app'
@@ -12,7 +12,7 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 import type { FormInstance } from 'element-plus'
 import AddTemplate from '@/viewsnew/TemplateResource/addtemplate.vue'
 import AddTemplateClass from '@/viewsnew/TemplateResource/addclass.vue'
-import { update } from 'lodash'
+import { templateDelete } from '@/api/template'
 const basePath = import.meta.env.VITE_API_BASEPATH
 const router = useRouter()
 const { t } = useI18n()
@@ -22,8 +22,6 @@ const dataList: any = ref([])
 const classList: any = ref([])
 const mask = ref(-1) // 遮罩层
 const activeIndex: any = ref(null)
-const detailsList: any = ref([])
-const loading: any = ref(false)
 const embeddedStore = useEmbedded()
 const appStore = useAppStoreWithOut()
 const isEmbedded = computed(() => appStore.getIsDataEaseBi || appStore.getIsIframe)
@@ -130,7 +128,6 @@ const state = reactive({
   }
 })
 const templateApply = (template: any) => {
-
   state.curApplyTemplate = template
   state.dvCreateForm.name = template.title
   state.dvCreateForm.nodeType = template.templateType
@@ -274,6 +271,35 @@ function editTemplate(item) {
   console.log(item)
 
 }
+function refresh(){
+  searchMarketPreview().then(res => {
+    classList.value = res.data.contents
+    if (activeIndex.value) {
+      dataList.value = classList.value[activeIndex.value].contents
+    }else{
+      activeIndex.value = 0
+      dataList.value = classList.value[activeIndex.value].contents
+    }
+  }) 
+}
+function delTemplate(item){
+  console.log(classList.value[activeIndex.value].category.value)
+  ElMessageBox.confirm('提示，确定删除吗？', {
+    confirmButtonType: 'primary',
+      type: 'warning',
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    }).then(() => {
+      templateDelete(item.id, classList.value[activeIndex.value].category.value).then(() => {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+          showClose: true
+        })
+        refresh()
+      })
+    })
+}
 </script>
 <template>
   <div class="common-layout">
@@ -305,7 +331,7 @@ function editTemplate(item) {
           <div class="mask_box" v-if="mask == index">
             <div>
               <img src="@/assets/newimg/icon/editpro.png" @click="editTemplate(item)" style="cursor: pointer;" title="编辑模板">
-              <img src="@/assets/newimg/icon/del.png" alt="" style="margin-left: 10px;cursor: pointer;" title="删除">
+              <img src="@/assets/newimg/icon/del.png" alt="" @click="delTemplate(item)" style="margin-left: 10px;cursor: pointer;" title="删除">
             </div>
             <div style="display: flex;justify-content: center;margin-top: 20px;">
               <div class="yulan" @click="preview(item, index)">预览</div>

core/core-frontend/src/viewsnew/TemplateResource/templateinfo.vue

@@ -0,0 +1,463 @@
+<script lang="ts" setup>
+import { ref, onMounted, reactive, computed, } from 'vue'
+import { save, nameCheck, findOne, categoryTemplateNameCheck } from '@/api/template'
+import { ElMessage, ElMessageBox } from 'element-plus-secondary'
+import { useI18n } from '@/hooks/web/useI18n'
+import { findCategories } from '@/api/template'
+import AddTemplateClass from '@/viewsnew/TemplateResource/addclass.vue'
+import { ElTree } from 'element-plus'
+import { searchMarketPreview } from '@/api/templateMarket'
+import { useEmbedded } from '@/store/modules/embedded'
+import { useAppStoreWithOut } from '@/store/modules/app'
+import { useEmitt } from '@/hooks/web/useEmitt'
+import { Base64 } from 'js-base64'
+import { useCache } from '@/hooks/web/useCache'
+const props = defineProps({
+    templateinfo: {
+        type: Object,
+        required: true
+    }
+})
+const { wsCache } = useCache()
+const embeddedStore = useEmbedded()
+const appStore = useAppStoreWithOut()
+const isEmbedded = computed(() => appStore.getIsDataEaseBi || appStore.getIsIframe)
+const { t } = useI18n()
+const basePath = import.meta.env.VITE_API_BASEPATH
+const classname = ref('')
+const templatename = ref('')
+const classList = ref([])
+const defaultProps = {
+    children: 'children',
+    label: 'label',
+}
+const treeRef = ref<InstanceType<typeof ElTree>>()
+const treedata = ref([])
+const activeIndex = ref(null)
+const templateList = ref([])
+const handleNodeClick = (data: any) => {
+    console.log(data)
+    templateList.value = data.contents
+}
+const mask = ref(-1) // 遮罩层
+const state = reactive({
+    initReady: true,
+    curPosition: 'branch',
+    pid: null,
+    treeProps: {
+        value: 'label',
+        label: 'label'
+    },
+    templateType: 'all', // 模板类型 仪表板 数据大屏
+    templateSourceType: 'all', // 模板来源 模板市场 模板管理
+    templateClassifyType: 'all', // 模板分类 样式模板 应用模板
+    treeShow: true,
+    templateClassifyOptions: [
+        {
+            value: 'all',
+            label: t('visualization.all_type')
+        },
+        {
+            value: 'app',
+            label: t('visualization.apply_template')
+        },
+        {
+            value: 'template',
+            label: t('visualization.style_template')
+        }
+    ],
+    templateSourceOptions: [
+        {
+            value: 'all',
+            label: t('work_branch.all_source')
+        },
+        {
+            value: 'market',
+            label: t('visualization.template_market')
+        },
+        {
+            value: 'manage',
+            label: t('template_manage.name')
+        }
+    ],
+    templateTypeOptions: [
+        {
+            value: 'all',
+            label: t('work_branch.all_types')
+        },
+        {
+            value: 'PANEL',
+            label: t('work_branch.dashboard')
+        },
+        {
+            value: 'SCREEN',
+            label: t('work_branch.big_data_screen')
+        }
+    ],
+    loading: false,
+    hasResult: true,
+    templateMiniWidth: 250,
+    templateCurWidth: 310,
+    templateSpan: '25%',
+    previewVisible: false,
+    templatePreviewId: '',
+    marketTabs: [],
+    marketActiveTab: null,
+    searchText: null,
+    dvCreateForm: {
+        resourceName: null,
+        name: null,
+        pid: null,
+        nodeType: 'panel',
+        templateUrl: null,
+        newFrom: 'new_market_template',
+        templateId: null,
+        panelType: 'self',
+        panelStyle: {},
+        panelData: '[]'
+    },
+    panelGroupList: [],
+    curApplyTemplate: null,
+    folderSelectShow: false,
+    baseUrl: 'https://dataease.io/templates',
+    currentMarketTemplateShowList: [],
+    curTemplateShowFilter: [],
+    curTemplateIndex: 0,
+    curTemplate: null,
+    networkStatus: true,
+    rule: {
+        name: [
+            {
+                required: true,
+                message: t('visualization.template_name_tips'),
+                trigger: 'blur'
+            }
+        ],
+        pid: [
+            {
+                required: true,
+                message: '',
+                trigger: 'blur'
+            }
+        ]
+    }
+})
+onMounted(() => {
+    init()
+})
+function init() {
+    treedata.value = []
+    templateList.value = []
+    searchMarketPreview().then(res => {
+        // templateList.value = res.data.contents
+        res.data.contents.forEach((e, index) => {
+            treedata.value.push({
+                label: e.category.label,
+                slug: e.category.slug,
+                source: e.category.source,
+                value: e.category.value,
+                contents: e.contents
+            })
+            classList.value.push({
+                label: e.category.label,
+                slug: e.category.slug,
+                source: e.category.source,
+                value: e.category.value,
+                contents: e.contents
+            })
+        });
+    })
+}
+function preview(item) {
+
+}
+function design(item) {
+    templateApply(item)
+    state.pid = props.templateinfo.pid
+}
+const templateApply = (template: any) => {
+    state.curApplyTemplate = template
+    state.dvCreateForm.name = template.title
+    state.dvCreateForm.nodeType = template.templateType
+    if (template.source === 'market') {
+        state.dvCreateForm.newFrom = 'new_market_template'
+        state.dvCreateForm.templateUrl = template.metas.theme_repo
+        state.dvCreateForm.resourceName = template.id
+    } else {
+        state.dvCreateForm.newFrom = 'new_inner_template'
+        state.dvCreateForm.templateId = template.id
+    }
+    apply()
+}
+const apply = () => {
+    if (state.dvCreateForm.newFrom === 'new_market_template' && !state.dvCreateForm.templateUrl) {
+        ElMessage.warning(t('template_manage.get_download_link_hint'))
+        return false
+    }
+    const templateTemplate = {
+        newFrom: state.dvCreateForm.newFrom,
+        templateUrl: state.dvCreateForm.templateUrl,
+        resourceName: state.dvCreateForm.resourceName,
+        templateId: state.dvCreateForm.templateId
+    }
+    state.curApplyTemplate.recentUseTime = Date.now()
+    state.curApplyTemplate.categoryNames.push(t('work_branch.recent'))
+    const baseUrl =
+        (['dataV', 'SCREEN'].includes(state.dvCreateForm.nodeType)
+            ? '#/dvCanvas?opt=create&createType=template'
+            : '#/dashboard?opt=create&createType=template') +
+        '&templateParams=' +
+        encodeURIComponent(Base64.encode(JSON.stringify(templateTemplate)))
+    let newWindow = null
+    if (isEmbedded.value) {
+        embeddedStore.clearState()
+        embeddedStore.setCreateType('template')
+        embeddedStore.setTemplateParams(
+            encodeURIComponent(Base64.encode(JSON.stringify(templateTemplate)))
+        )
+        embeddedStore.setOpt('create')
+
+        if (state.pid) {
+            embeddedStore.setPid(state.pid)
+        }
+        useEmitt().emitter.emit(
+            'changeCurrentComponent',
+            ['dataV', 'SCREEN'].includes(state.dvCreateForm.nodeType)
+                ? 'VisualizationEditor'
+                : 'DashboardEditor'
+        )
+        return
+    }
+    const openType = wsCache.get('open-backend') === '1' ? '_self' : '_blank'
+    if (state.pid) {
+        newWindow = window.open(baseUrl + `&pid=${state.pid}`, openType)
+    } else {
+        newWindow = window.open(baseUrl, openType)
+    }
+    initOpenHandler(newWindow)
+}
+const openHandler = ref(null)
+const initOpenHandler = newWindow => {
+    if (openHandler?.value) {
+        const pm = {
+            methodName: 'initOpenHandler',
+            args: newWindow
+        }
+        openHandler.value.invokeMethod(pm)
+    }
+}
+function mouseover(index) { // 鼠标移入遮罩层
+    mask.value = index
+}
+function mouseleave() { // 鼠标移出遮罩层
+    mask.value = -1
+}
+</script>
+<template>
+    <div class="template-container">
+        <div class="template-header">
+            <div>使用模板创建</div>
+            <div>
+                <el-input v-model="templatename" placeholder="模板名称" style="width: 200px;margin-right: 10px;" />
+                <el-select v-model="classname" placeholder="分类" style="width: 240px">
+                    <el-option v-for="item in classList" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </div>
+        </div>
+        <div class="template-main">
+            <div class="template-main-left">
+                <el-tree :data="treedata" ref="treeRef" highlight-current node-key="value" :props="defaultProps"
+                    @node-click="handleNodeClick" />
+            </div>
+            <div class="template-main-right">
+                <div class="template-list-box">
+                    <div v-for="(item, index) in templateList" :key="index" class="template_list"
+                        @mouseover="mouseover(index)" @mouseleave="mouseleave">
+                        <img v-if="item.thumbnail != null && item.thumbnail != ''" :src="basePath + item.thumbnail"
+                            alt="" style="width: 267px;height: 155px;">
+                        <img v-else src="@/assets/newimg/u110.png" alt="" style="width: 267px;height: 155px;">
+                        <div style="display: flex;justify-content: space-between;">
+                            <div class="template_list_text">{{ item.title }}</div>
+                        </div>
+                        <div class="mask_box" v-if="mask == index">
+                            <div style="display: flex;justify-content: center;margin-top: 20px;">
+                                <div class="yulan" @click="preview(item, index)">预览</div>
+                                <div class="mokuaipeizhi" @click="design(item, index)">应用</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.template-container {
+    height: calc(100vh - 200px);
+}
+
+.template-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    border-bottom: 1px solid #434343;
+    padding-bottom: 10px;
+}
+
+.template-main {
+    display: flex;
+    width: 100%;
+
+    .template-main-left {
+        width: 260px;
+        height: calc(100vh - 221px);
+        border-right: 1px solid #434343;
+
+        :deep(.el-tree-node__content>.el-tree-node__expand-icon) {
+            padding: 0px;
+        }
+
+        :deep(.el-tree) {
+            background: #212121;
+            color: #fff;
+        }
+
+        :deep(.el-tree-node__content) {
+            height: 40px;
+            background: #212121;
+        }
+
+        :deep(.el-tree-node__content:hover) {
+            background: #3b3c3c;
+        }
+
+        :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
+            background: #3b3c3c;
+        }
+
+        :deep(.el-tree-node:focus>.el-tree-node__content) {
+            background: #3b3c3c;
+        }
+
+        :deep(.el-tree-node__label) {
+            color: #fff;
+        }
+    }
+
+    .template-main-right {
+        width: calc(100% - 260px);
+        background: #151515;
+        padding: 0px 10px;
+    }
+
+    .template-list-box {
+        display: flex;
+        flex-wrap: wrap;
+        height: calc(100vh - 235px);
+        overflow: auto;
+        align-content: flex-start;
+
+        .template_list {
+            position: relative;
+            margin-top: 10px;
+            width: 290px;
+            height: 210px;
+            background: inherit;
+            background-color: rgba(37, 38, 38, 1);
+            box-sizing: border-box;
+            padding: 10px;
+            border-width: 1px;
+            border-style: solid;
+            border-color: rgba(51, 51, 51, 1);
+            border-radius: 10px;
+            margin-right: 10px;
+            text-align: center;
+        }
+
+        .template_list_text {
+            font-family: 'Arial Normal', 'Arial';
+            font-weight: 400;
+            font-style: normal;
+            font-size: 12px;
+            color: #F2F4F5;
+            padding-top: 13px;
+            position: relative;
+            z-index: 11;
+        }
+
+        .mask_box {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 10;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            border-radius: 10px;
+            box-sizing: border-box;
+            padding-top: 60px;
+            border: 1px solid #0089ff;
+        }
+
+        .mask_box_img {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 20px;
+
+            img {
+                margin: 0 8px;
+                cursor: pointer;
+            }
+        }
+
+        .yulan {
+            width: 50px;
+            height: 28px;
+            line-height: 28px;
+            text-align: center;
+            background-color: rgba(255, 255, 255, 0.3);
+            border: none;
+            border-radius: 4px;
+            box-shadow: none;
+            font-size: 14px;
+            font-family: 'Arial Normal', 'Arial';
+            font-weight: 400;
+            font-style: normal;
+            color: rgb(255, 255, 255);
+            margin-right: 10px;
+            cursor: pointer;
+        }
+
+        .mokuaipeizhi {
+            width: 50px;
+            height: 28px;
+            line-height: 28px;
+            text-align: center;
+            background-color: rgba(0, 137, 255, 1);
+            border: none;
+            border-radius: 4px;
+            box-shadow: none;
+            font-size: 14px;
+            font-family: 'Arial Normal', 'Arial';
+            font-weight: 400;
+            font-style: normal;
+            color: rgb(255, 255, 255);
+            cursor: pointer;
+        }
+    }
+}
+</style>
+<style>
+.ed-select__wrapper {
+    background-color: #252626 !important;
+    border: 1px solid #434343 !important;
+    box-shadow: none !important;
+}
+
+::-webkit-scrollbar {
+    width: 0px !important;
+    height: 0px !important;
+}
+</style>

core/core-frontend/src/viewsnew/application/module/Leftmenu/index.vue

@@ -5,6 +5,7 @@ import { ElMessage,ElMessageBox } from 'element-plus-secondary'
 import { useI18n } from '@/hooks/web/useI18n'
 import { publicTree } from '@/utils/validate';
 import { moduleList,moduleAdd,moduleUpdate,moduleDel,moduleCopy } from '@/api/application/module'
+import TemplateCreate from '@/viewsnew/TemplateResource/templateinfo.vue'
 const emit = defineEmits(['handleNodeClick'])
 const { t } = useI18n()
 const router = useRouter()
@@ -57,7 +58,7 @@ const dataInfo:any =ref({
 })
 const treeData:any=ref([])// 树数据
 const defaultProps =  { label: "name" }
-
+const templatedialog = ref(false)
 watch(() => props.projectInfo, val => { // 初始化数据
   projectInfo.value = val
   getInit()
@@ -259,7 +260,14 @@ function delTreeClic(){ // 删除
     })
 
 }
-
+const templateinfo = ref({})
+function templateAdd(){
+  templateinfo.value = dataInfo.value
+  templatedialog.value = true
+}
+function templatedialogClose(){
+  templatedialog.value = false
+}
 </script>
 <template>
 <div class="project-left-box">
@@ -354,6 +362,7 @@ function delTreeClic(){ // 删除
   >
     <div class="drag-main-text" v-if="popupType == 1" @click="addTreeClic('目录')">新建目录</div>
     <div class="drag-main-text" v-if="popupType == 1"  @click="addTreeClic('模块')">新建模块</div>
+    <div class="drag-main-text" v-if="popupType == 1"  @click="templateAdd">使用模板创建模块</div>
 
 
     <div class="drag-main-text" v-if="popupType == 2"  @click="copyClick">复制</div>
@@ -363,6 +372,9 @@ function delTreeClic(){ // 删除
 
 
   </div>
+  <el-dialog v-model="templatedialog" top="5vh" title="使用模板创建" width="80%" :before-close="templatedialogClose">
+    <TemplateCreate v-if="templatedialog" :templateinfo="templateinfo" />
+  </el-dialog>
 </div>
 </template>
 
@@ -558,14 +570,14 @@ function delTreeClic(){ // 删除
 }
 .ed-select__popper.ed-popper{
   background: rgb(41,41,41) !important;
-  color: #fff;
+  color: #fff !important;
-  border:1px solid #434343;
+  border:1px solid #434343 !important;
 }
 .ed-select-dropdown__item{
-  color: #F2F4F5;
+  color: #F2F4F5 !important;
 }
 .ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover{
-  background-color: rgba(255, 255, 255, .1)
+  background-color: rgba(255, 255, 255, .1) !important;
 }                                                  
 .ed-select .ed-input__wrapper:hover {
   box-shadow: none;