triptemplate_SetTripConfig 新增行程特色图字段

src/hooks/useExport.ts

@@ -27,10 +27,43 @@ export default () => {
   const slidesStore = useSlidesStore()
   const coverImgStore = useScreenStore()
   const isCoverImgStore = useScreenStore()
+  const FeatureImgStore = useScreenStore()
   const { slides, theme, viewportRatio, title } = storeToRefs(slidesStore)
-  const { isCoverImg } = storeToRefs(useScreenStore())
+  const { isCoverImg, FeatureImg } = storeToRefs(useScreenStore())
 
   const exporting = ref(false)
+
+  // 生成行程图片
+  const exportFeatureImg = (domRef: HTMLElement, format: string, quality: number, ignoreWebfont = true, i: number) => {
+    const toImage = format === 'png' ? toPng : toJpeg
+    const foreignObjectSpans = domRef.querySelectorAll('foreignObject [xmlns]')
+    foreignObjectSpans.forEach(spanRef => spanRef.removeAttribute('xmlns'))
+    setTimeout(() => {
+      const config: ExportImageConfig = {
+        quality,
+        width: 1600,
+      }
+
+      if (ignoreWebfont) config.fontEmbedCSS = ''
+      toImage(domRef, config).then(dataUrl => {
+        const obj = {
+          index: i,
+          url: dataUrl
+        }
+        // eslint-disable-next-line eqeqeq
+        const objData = FeatureImg.value.find( (x: { index: number }) => { return x.index == i } )
+        if (!objData) {
+          FeatureImg.value.push(obj)
+          FeatureImgStore.setFeatureImg(JSON.parse(JSON.stringify(FeatureImg.value)))
+        }
+      }).catch(() => {
+        message.error('导出图片失败')
+      })
+    }, 200)
+    
+  }
+
+  
   // 导出图片
   const exportImage = (domRef: HTMLElement, format: string, quality: number, ignoreWebfont = true) => {
     exporting.value = true
@@ -49,7 +82,7 @@ export default () => {
         exporting.value = false
         if (isCoverImg.value) {
           coverImgStore.setCoverImg(dataUrl)
-          isCoverImgStore.setIsCoverImg(false)
+          isCoverImgStore.setIsCoverImg(false) 
         } else {
           saveAs(dataUrl, `${title.value}.${format}`)
         }
@@ -783,6 +816,7 @@ export default () => {
 
   return {
     exporting,
+    exportFeatureImg,
     exportImage,
     exportJSON,
     exportSpecificFile,

src/store/screen.ts

@@ -12,6 +12,8 @@ export interface ScreenState {
   CoverImg: any,
   isCoverImg: boolean,
   dataLoading: boolean,
+  FeatureImg: any
+  
 }
 
 export const useScreenStore = defineStore('screen', {
@@ -26,6 +28,7 @@ export const useScreenStore = defineStore('screen', {
     CoverImg: null, // 封面图
     isCoverImg: false, // 封面
     dataLoading: false, // 记录保存是否成功
+    FeatureImg: [], // 行程特色图
   }),
 
   actions: {
@@ -61,6 +64,9 @@ export const useScreenStore = defineStore('screen', {
     },
     setDataLoading(dataLoading: boolean) {
       this.dataLoading = dataLoading
+    },
+    setFeatureImg(FeatureImg: any) {
+      this.FeatureImg = FeatureImg
     }
   },
 })
\ No newline at end of file

src/views/Editor/EditorHeader/index.vue

@@ -18,8 +18,8 @@
           </FileInput>
           <PopoverMenuItem @click="setDialogForExport('pptx')">导出文件</PopoverMenuItem>
           <PopoverMenuItem @click="resetSlides(); mainMenuVisible = false">重置幻灯片</PopoverMenuItem>
-          <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</PopoverMenuItem>
-          <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</PopoverMenuItem>
+          <!-- <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</PopoverMenuItem>
+          <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</PopoverMenuItem> -->
           <PopoverMenuItem @click="mainMenuVisible = false; hotkeyDrawerVisible = true">快捷键</PopoverMenuItem>
         </template>
         <div class="menu-item"><IconHamburgerButton class="icon" /></div>
@@ -77,6 +77,14 @@
           保存行程
         </template>
     </el-button>
+    <div>
+      <!-- <template v-for="item in datas.DataSource.FeatureImg">
+        <img :src="item.url" style="width: 50px;height: 50px;" />
+      </template> -->
+      <!-- <template v-for="item in datas.DataSource.FeatureImg">
+        <img :src="item" style="width: 50px;height: 50px;" />
+      </template> -->
+    </div>
       <!-- <a class="github-link" href="https://github.com/pipipi-pikachu/PPTist" target="_blank">
         <div class="menu-item"><IconGithub class="icon" /></div>
       </a> -->
@@ -93,11 +101,28 @@
     <FullscreenSpin :loading="exporting" tip="正在导入..." />
     <Psd-Upload :visible="psdVisibleStatus" @closed="psdVisibleStatus=false"></Psd-Upload>
   </div>
+  <div style="position: relative;z-index: -1;">
+    <div class="export-img-dialog">
+      <div class="thumbnails-view">
+        <div class="thumbnails" v-for="slide in renderSlides" ref="FeatureImgRef">
+          <ThumbnailSlide 
+            class="thumbnail" 
+            :key="slide.id" 
+            :slide="slide" 
+            :size="1600" 
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  
 </template>
 
 <script lang="ts" setup>
-import { nextTick, ref, reactive, inject } from 'vue'
+import { nextTick, ref, reactive, inject, computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
+import { toPng, toJpeg } from 'html-to-image'
+import message from '@/utils/message'
 import { useMainStore, useSlidesStore } from '@/store'
 import useScreening from '@/hooks/useScreening'
 import useImport from '@/hooks/useImport'
@@ -109,6 +134,8 @@ import ConfigService from '@/services/ConfigService'
 import { injectKeyDataSource, injectKeyTemplate } from '@/types/injectKey'
 import PsdUpload from '@/components/PSD/Index.vue'
 import { svg2Base64 } from '@/utils/svg2Base64'
+import useExport from '@/hooks/useExport'
+
 
 import HotkeyDoc from './HotkeyDoc.vue'
 import FileInput from '@/components/FileInput.vue'
@@ -117,6 +144,7 @@ import Drawer from '@/components/Drawer.vue'
 import Input from '@/components/Input.vue'
 import Popover from '@/components/Popover.vue'
 import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
+import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
@@ -126,12 +154,14 @@ const { enterScreening, enterScreeningFromStart } = useScreening()
 const { importSpecificFile, importPPTXFile, exporting } = useImport()
 const { resetSlides } = useSlideHandler()
 
+const imageThumbnailsRef = ref<HTMLElement>()
 const mainMenuVisible = ref(false)
 const hotkeyDrawerVisible = ref(false)
 const editingTitle = ref(false)
 const titleInputRef = ref<InstanceType<typeof Input>>()
 const titleValue = ref('')
 
+
 const { userInfo } = storeToRefs(userStore())
 
 const datas = reactive({
@@ -146,8 +176,17 @@ searchData.value = inject(injectKeyTemplate)
 const marketStore = useScreenStore()
 const CoverImgStore = useScreenStore()
 const dataLoadingStore = useScreenStore()
+const FeatureImgStore = useScreenStore()
 const psdVisibleStatus = ref(false)
-const { market, model, ConfigId, CoverImg, dataLoading } = storeToRefs(useScreenStore())
+const { market, model, ConfigId, CoverImg, dataLoading, FeatureImg } = storeToRefs(useScreenStore())
+
+const renderSlides = computed(() => {
+  return slides.value
+})
+
+const { exportFeatureImg } = useExport()
+
+const FeatureImgRef = ref(null)
 
 // 返回到首页
 const goBack = () =>{
@@ -196,7 +235,29 @@ const UploadPsdHandler = () => {
   psdVisibleStatus.value = true
 }
 
-
+// 监听请求保存成功 重新请求数据
+watch(() => FeatureImgRef.value, (n,o) =>{
+  if(FeatureImgRef.value.length==renderSlides.value.length){
+    FeatureImgStore.setFeatureImg([])
+    for(let i=0;i<FeatureImgRef.value.length;i++){
+      exportFeatureImg(FeatureImgRef.value[i], 'jpeg', 1, true,i+1)
+    }
+  }
+})
+watch(() => FeatureImg.value, (n,o) =>{
+  FeatureImg.value.sort((a,b)=>{
+    return a.index-b.index
+  })
+  datas.DataSource.FeatureImg = FeatureImg.value.map( x => { return x.url } )
+})
+watch(() => slides.value, (n,o) =>{
+  if(ConfigId.value&&FeatureImgRef.value.length==renderSlides.value.length){
+    FeatureImgStore.setFeatureImg([])
+    for(let i=0;i<FeatureImgRef.value.length;i++){
+      exportFeatureImg(FeatureImgRef.value[i], 'jpeg', 1, true,i+1)
+    }
+  }
+})
 // 新增修改模版
 const SetTripTemplateSlide = async () => {
   // console.log(JSON.parse(queryObj.value.TempData),'--------')
@@ -219,14 +280,14 @@ const SetTripTemplateConfig = async () => {
       let queryMsg = {
         ConfigId: ConfigId.value,
         TempId: queryObj.value.TempId,
-        TempData: queryObj.value.TempData
+        TempData: queryObj.value.TempData,
+        FeatureImg: datas.DataSource.FeatureImg
       }
-      console.log(queryMsg,'新增修改团数据---')
       let TemplateRes = await ConfigService.SetSetTripConfig(queryMsg);
       if (TemplateRes.data.resultCode == 1) {
-        
+        FeatureImgStore.setFeatureImg([])
+        dataLoadingStore.setDataLoading(true)
       }
-      dataLoadingStore.setDataLoading(true)
       datas.loading = false
   } catch (error) {
       datas.loading = false
@@ -291,7 +352,6 @@ const setTemplate = async () =>{
   }
 }
 
-
 const startEditTitle = () => {
   titleValue.value = title.value
   editingTitle.value = true
@@ -315,6 +375,70 @@ const setDialogForExport = (type: DialogForExportTypes) => {
 </script>
 
 <style lang="scss" scoped>
+.export-img-dialog {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+.thumbnails-view {
+  @include absolute-0();
+
+  &::after {
+    content: '';
+    background-color: #fff;
+    @include absolute-0();
+  }
+}
+.configs {
+  width: 350px;
+  height: calc(100% - 100px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 1;
+
+  .row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 25px;
+  }
+
+  .title {
+    width: 100px;
+    position: relative;
+
+    &::after {
+      content: attr(data-range);
+      position: absolute;
+      top: 20px;
+      left: 0;
+    }
+  }
+  .config-item {
+    flex: 1;
+  }
+}
+.btns {
+  width: 300px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+
+  .export {
+    flex: 1;
+  }
+  .close {
+    width: 100px;
+    margin-left: 10px;
+  }
+}
 .editor-header {
   background-color: #fff;
   user-select: none;