111

src/App.vue

 <template>
-  <div v-if="isFinish">
+  <div v-if="isFinish" style="height: 100%;">
     <Screen v-if="screening" />
     <Market v-else-if="market"></Market>
     <Editor v-else-if="_isPC" />
@@ -8,19 +8,23 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted,ref } from 'vue'
+import { onMounted,ref,provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useScreenStore, useMainStore, useSnapshotStore } from '@/store'
 import { LOCALSTORAGE_KEY_DISCARDED_DB } from '@/configs/storage'
 import { deleteDiscardedDB } from '@/utils/database'
 import { isPC, query } from './utils/common'
 import { userStore } from './store/user'
+import { injectKeyTemplate } from '@/types/injectKey'
 
 import Editor from './views/Editor/index.vue'
 import Screen from './views/Screen/index.vue'
 import Mobile from './views/Mobile/index.vue'
 import Market from './views/Market/Index.vue'
 
+const searchData = ref({} as any)
+provide(injectKeyTemplate,searchData)
+
 const isFinish = ref(false)
 const userLoginHandler = async ()=>{
   let param = query()

src/hooks/useImport.ts

@@ -120,6 +120,7 @@ export default () => {
           id: nanoid(10),
           elements: [],
           background,
+          pageType: 1
         }
 
         const parseElements = (elements: Element[]) => {

src/hooks/useSlideHandler.ts

@@ -35,6 +35,7 @@ export default () => {
         type: 'solid',
         color: theme.value.backgroundColor,
       },
+      pageType: 1
     }
     slidesStore.updateSlideIndex(0)
     mainStore.setActiveElementIdList([])
@@ -84,6 +85,7 @@ export default () => {
         type: 'solid',
         color: theme.value.backgroundColor,
       },
+      pageType: 1,
     }
     mainStore.setActiveElementIdList([])
     slidesStore.addSlide(emptySlide)

src/main.ts

@@ -3,6 +3,9 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import './registerServiceWorker'
 
+import { ElMessage } from 'element-plus'
+import 'element-plus/dist/index.css'
+
 import '@icon-park/vue-next/styles/index.css'
 import 'prosemirror-view/style/prosemirror.css'
 import 'animate.css'

src/mocks/layout.ts

@@ -5,6 +5,7 @@ import type { Slide } from '@/types/slides'
 export const layouts: Slide[] = [
   {
     id: 'template',
+    pageType: 1,
     elements: [
       {
         type: 'shape',
@@ -80,6 +81,7 @@ export const layouts: Slide[] = [
   },
   {
     id: 'template',
+    pageType: 2,
     elements: [
       {
         type: 'text',
@@ -139,6 +141,7 @@ export const layouts: Slide[] = [
   },
   {
     id: 'template',
+    pageType: 3,
     elements: [
       {
         type: 'shape',
@@ -188,6 +191,7 @@ export const layouts: Slide[] = [
   },
   {
     id: 'MZVO1kkj',
+    pageType: 4,
     elements: [
       {
         type: 'shape',
@@ -273,6 +277,7 @@ export const layouts: Slide[] = [
   },
   {
     id: 'template',
+    pageType: 4,
     elements: [
       {
         type: 'shape',
@@ -457,6 +462,7 @@ export const layouts: Slide[] = [
   },
   {
     id: 'template',
+    pageType: 4,
     elements: [
       {
         type: 'shape',
@@ -510,6 +516,7 @@ export const layouts: Slide[] = [
   },
   {
     id: 'template',
+    pageType: 1,
     elements: [
       {
         type: 'text',
@@ -573,6 +580,7 @@ export const layouts: Slide[] = [
   },
   {
     id: 'template',
+    pageType: 1,
     elements: [
       {
         type: 'text',
@@ -690,6 +698,7 @@ export const layouts: Slide[] = [
   },
   {
     id: 'template',
+    pageType: 1,
     elements: [
       {
         type: 'text',
@@ -766,6 +775,7 @@ export const layouts: Slide[] = [
   },
   {
     id: 'template',
+    pageType: 1,
     elements: [
       {
         type: 'shape',

src/mocks/slides.ts

 import type { Slide } from '@/types/slides'
 
+// pageType 1基础 2酒店 3景 4餐
 export const slides: Slide[] = [
   {
     id: 'test-slide-1',
+    pageType: 1,
     elements: [
       {
         type: 'shape',
@@ -77,6 +79,7 @@ export const slides: Slide[] = [
   },
   {
     id: 'test-slide-2',
+    pageType: 2,
     elements: [
       {
         type: 'text',
@@ -136,6 +139,7 @@ export const slides: Slide[] = [
   },
   {
     id: 'test-slide-3',
+    pageType: 3,
     elements: [
       {
         type: 'shape',

src/plugins/icon.ts

@@ -96,7 +96,9 @@ import {
   ListView,
   Magic,
   HighLight,
+  Upload,
   Download,
+  Check,
   IndentLeft,
   IndentRight,
   VerticalSpacingBetweenItems,
@@ -221,7 +223,9 @@ export const icons: Icons = {
   IconListView: ListView,
   IconMagic: Magic,
   IconHighLight: HighLight,
+  IconUpload: Upload,
   IconDownload: Download,
+  IconCheck: Check,
   IconIndentLeft: IndentLeft,
   IconIndentRight: IndentRight,
   IconVerticalSpacingBetweenItems: VerticalSpacingBetweenItems,

src/services/ConfigService.ts

-import Api, {
-    HttpResponse,
-    Result
-} from './../utils/request';
+import Api,{ HttpResponse, Result } from './../utils/request';
 
 /**
  * 配置相关方法
  */
-class ConfigService {
+class ConfigService{
     /**
-     * 获取绑定数据源列表
+     * 新增修改模版数据
      */
-    static async TemplateGetTripFiled(params: any): Promise < HttpResponse > {
-        return Api.Post("triptemplate_GetTripFiled", params)
+     static async SetTripTemplateSlide(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_SetTripTemplate",params)
     }
 
     /**
-     * 
-     * @returns 获取模板查询条件
+     * 根据TempId获取模版数据
      */
-    static async GetTemplateQueryAsync(): Promise < HttpResponse > {
-        return Api.Post("triptemplate_GetTemplateConfigData", {})
+     static async GetTripTemplateSlide(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_GetTripTemplate",params)
     }
 
-
     /**
-     * 获取模板市场分页列表
+     * 获取绑定数据源列表
      */
-    static async GetTemplagePageAsync(params: any): Promise < HttpResponse > {
-        return Api.Post("triptemplate_GetTripTemplatePage", params);
+     static async TemplateGetTripFiled(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_GetTripFiled",params)
     }
 
     /**
-     * 根据配置编号(ConfigId)获取行程配置信息[根据编号获取行程数据(修改使用)]
+     * 
+     * @returns 获取模板查询条件
      */
-    static async GetTripConfig(params: any): Promise < HttpResponse > {
-        return Api.Post("triptemplate_GetTripConfig", params);
+    static async GetTemplateQueryAsync():Promise<HttpResponse>{
+        return Api.Post("triptemplate_GetTemplateConfigData",{})
     }
 
     /**
-     * 根据ConfigId获取行程中的配置信息【初始化使用】
+     * 获取模板市场分页列表
      */
-    static async GetTripFiledData(params: any): Promise < HttpResponse > {
-        return Api.Post("triptemplate_GetTripConfig", params);
+    static async GetTemplagePageAsync(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_GetTripTemplatePage",params)
     }
 }
 export default ConfigService;
\ No newline at end of file

src/services/LineService.ts

@@ -2,7 +2,17 @@ import Api,{ HttpResponse, Result } from './../utils/request';
 
 
 class LineService{
+    // 获取配置项数据(颜色、国家、季节)
+    static async GetTemplateConfigData(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_GetTemplateConfigData",params)
+    }
+
+    // 系列
+    static async GetSeriesListAsync(params : any):Promise<HttpResponse>{
+        return Api.Post("team_post_GetList",params)
+    }
 
+    // 线路
     static async GetLineListAsync():Promise<HttpResponse>{
         return Api.Post("line_post_GetAllList",{})
     }

src/store/main.ts

@@ -59,7 +59,7 @@ export const useMainStore = defineStore('main', {
     creatingElement: null, // 正在插入的元素信息，需要通过绘制插入的元素（文字、形状、线条）
     creatingCustomShape: false, // 正在绘制任意多边形
     availableFonts: SYS_FONTS, // 当前环境可用字体
-    toolbarState: ToolbarStates.SLIDE_DESIGN, // 右侧工具栏状态
+    toolbarState: ToolbarStates.SLIDE_DESIGN, // 右侧工具栏状态 设计 模版数据EL_TEMPLATEDATA
     clipingImageElementId: '', // 当前正在裁剪的图片ID  
     richTextAttrs: defaultRichTextAttrs, // 富文本状态
     selectedTableCells: [], // 选中的表格单元格

src/types/injectKey.ts

@@ -10,4 +10,5 @@ export type SlideDataSource = Ref<object>
 export const injectKeySlideScale: InjectionKey<SlideScale> = Symbol()
 export const injectKeySlideId: InjectionKey<SlideId> = Symbol()
 export const injectKeyRadioGroupValue: InjectionKey<RadioGroupValue> = Symbol()
-export const injectKeyDataSource: InjectionKey<SlideDataSource> = Symbol()
+export const injectKeyDataSource: InjectionKey<SlideDataSource> = Symbol()
\ No newline at end of file
+export const injectKeyTemplate: InjectionKey<SlideDataSource> = Symbol()
\ No newline at end of file

src/types/slides.ts

@@ -676,6 +676,7 @@ export interface Slide {
   background?: SlideBackground
   animations?: PPTAnimation[]
   turningMode?: TurningMode
+  pageType: number
 }
 
 /**

src/types/toolbar.ts

 export const enum ToolbarStates {
   SYMBOL = 'symbol',
   EL_ANIMATION = 'elAnimation',
+  EL_TEMPLATEDATA = 'elTemplateData',
   EL_STYLE = 'elStyle',
   EL_POSITION = 'elPosition',
   SLIDE_DESIGN = 'slideDesign',

src/views/Editor/DataaSource/index.vue

@@ -4,12 +4,10 @@
             <div class="DataaSource">
                 <div class="DataaSourceList">
                     <el-table
-                    ref="multipleTableRef"
                     :data="datas.DataSource.DataSourceList"
                     style="width: 100%"
                     border
-                    @selection-change="handleSelectionChange">
-                        <el-table-column type="selection" width="40" />
+                    >
                         <el-table-column
                         prop=""
                         label="基础数据">
@@ -28,10 +26,11 @@
                         <el-table-column
                         prop=""
                         label="绑定数据源"
-                        width="200">
+                        width="240">
                             <template #default="scope">
                                 <div class="DataaSourceR" v-if="scope.row.TemplateList">
-                                    <el-select v-model="scope.row.TemplateDataSource.Id" class="m-2" placeholder="Select"
+                                    <el-select v-model="scope.row.TemplateDataSource.Id" class="m-2" 
+                                    placeholder="请绑定数据源"
                                     @change="setTemplateDataSource(scope.row.TemplateDataSource.Id,scope.$index)">
                                         <el-option
                                             v-for="item in scope.row.TemplateList"
@@ -50,51 +49,47 @@
     </template>
   
   <script lang="ts" setup>
-//   import { ElTable } from 'element-plus'
   import { computed, nextTick, ref, watch, reactive, inject } from 'vue'
   import { storeToRefs } from 'pinia'
   import { useSlidesStore } from '@/store'
   import { injectKeyDataSource } from '@/types/injectKey'
 
     const datas = reactive({
-        DataSource:{
-            // DataSourceOverlay: false,
-            // DataSourceList:[],
-            // TemplateDataSource:[]
-        },
+        DataSource:{},
     })
     datas.DataSource = inject(injectKeyDataSource)
     
-    const multipleTableRef = ref<InstanceType<typeof any>>()
-    const multipleSelection = ref<[]>([])
-    
     const slidesStore = useSlidesStore()
     const { slides, slideIndex } = storeToRefs(slidesStore)
     const slidesData = slides.value
     watch(datas.DataSource, (n, o) => {
+        // 更新Slides数据
         const savelides = []
         const newSlides = []
         let obj = slidesData.find((x,index)=>{
             return slideIndex.value == index
         })
-        obj&&obj.elements&&obj.elements.forEach(x=>{
-            let dataObj = datas.DataSource.DataSourceList.find(y=>{
-                return y.id == x.id
+        if(obj){
+            obj.elements.forEach(x=>{
+                let dataObj = datas.DataSource.DataSourceList.find(y=>{
+                    return y.id == x.id
+                })
+                if(dataObj){
+                    x = dataObj
+                }
+                savelides.push(x)
             })
-            if(dataObj){
-                x = dataObj
-            }
-            savelides.push(x)
-        })
-        obj.elements = savelides
-        slidesData.forEach((x,index)=>{
-            if(slideIndex.value == index){
-                x.elements = obj.elements
+            obj.elements = savelides
+            slidesData.forEach((x,index)=>{
+                if(slideIndex.value == index){
+                    x.pgaeType = datas.DataSource.pgaeType
+                    x.elements = obj.elements
+                }
+                newSlides.push(x)
+            })
+            if(obj&&obj.TemplateDataSource&&obj.TemplateDataSource.Id){
+                slidesStore.setSlides(newSlides)
             }
-            newSlides.push(x)
-        })
-        if(obj.TemplateDataSource&&obj.TemplateDataSource.Id){
-            slidesStore.setSlides(newSlides)
         }
     })
     watch(datas.DataSource, (n, o) => {
@@ -115,18 +110,6 @@
         })
     }
 
-    const toggleSelection = (rows?: []) => {
-        if (rows) {
-            rows.forEach((row) => {
-            multipleTableRef.value!.toggleRowSelection(row, undefined)
-            })
-        } else {
-            multipleTableRef.value!.clearSelection()
-        }
-        }
-    const handleSelectionChange = (val: []) => {
-        multipleSelection.value = val
-    }
     const OffDataSource = () =>{
         datas.DataSource.DataSourceOverlay = !datas.DataSource.DataSourceOverlay
     }

src/views/Editor/EditorHeader/index.vue

@@ -28,21 +28,21 @@
         <Input 
           class="title-input" 
           ref="titleInputRef"
-          v-model:value="titleValue" 
+          v-model:value="queryObj.Title" 
           @blur="handleUpdateTitle()" 
           v-if="editingTitle" 
         ></Input>
         <div 
           class="title-text"
           @click="startEditTitle()"
-          :title="title"
+          :title="queryObj.Title"
           v-else
-        >{{ title }}</div>
+        >{{ queryObj.Title }}</div>
       </div>
     </div>
 
     <div class="right">
-      <div class="group-menu-item">
+      <!-- <div class="group-menu-item">
         <div class="menu-item" v-tooltip="'幻灯片放映'" @click="enterScreening()">
           <IconPpt class="icon" />
         </div>
@@ -53,13 +53,26 @@
           </template>
           <div class="arrow-btn"><IconDown class="arrow" /></div>
         </Popover>
+      </div> -->
+      <div class="group-menu-item" v-if="userInfo.IsEditTripTemplate==1">
+        <div class="menu-item" v-tooltip="'导入PSD'" @click="UploadPsd()">
+          <IconUpload class="icon" />
+        </div>
       </div>
       <div class="menu-item" v-tooltip="'导出'" @click="setDialogForExport('pptx')">
         <IconDownload class="icon" />
       </div>
-      <a class="github-link" href="https://github.com/pipipi-pikachu/PPTist" target="_blank">
+      <el-button v-tooltip="'保存'" type="danger" 
+      size="small" icon="Check" circle :loading="datas.loading"
+      @click="setTemplate()" style="color: #ffff;"></el-button>
+      <!-- <div class="menu-item" v-tooltip="'保存'" @click="setTemplate()"
+      style="padding: 0;width: 30px;">
+        <IconCheck class="icon" style="color: #fff;"/>
+        
+      </div> -->
+      <!-- <a class="github-link" href="https://github.com/pipipi-pikachu/PPTist" target="_blank">
         <div class="menu-item"><IconGithub class="icon" /></div>
-      </a>
+      </a> -->
     </div>
 
     <Drawer
@@ -75,13 +88,16 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, ref } from 'vue'
+import { nextTick, ref, reactive, inject } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import useScreening from '@/hooks/useScreening'
 import useImport from '@/hooks/useImport'
 import useSlideHandler from '@/hooks/useSlideHandler'
 import type { DialogForExportTypes } from '@/types/export'
+import { userStore } from "@/store/user";
+import ConfigService from '@/services/ConfigService'
+import { injectKeyDataSource } from '@/types/injectKey'
 
 import HotkeyDoc from './HotkeyDoc.vue'
 import FileInput from '@/components/FileInput.vue'
@@ -93,7 +109,7 @@ import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
-const { title } = storeToRefs(slidesStore)
+const { title, slides } = storeToRefs(slidesStore)
 const { enterScreening, enterScreeningFromStart } = useScreening()
 const { importSpecificFile, importPPTXFile, exporting } = useImport()
 const { resetSlides } = useSlideHandler()
@@ -104,6 +120,63 @@ const editingTitle = ref(false)
 const titleInputRef = ref<InstanceType<typeof Input>>()
 const titleValue = ref('')
 
+const { userInfo } = storeToRefs(userStore())
+
+const datas = reactive({
+  DataSource:{},
+  loading: false
+})
+const queryObj = ref({} as any)
+datas.DataSource = inject(injectKeyDataSource)
+queryObj.value = inject(injectKeyDataSource).queryObj
+
+// 导入PSD
+const UploadPsd = () => {
+
+}
+
+// 保存
+const setTemplate = async () =>{
+  // console.log(JSON.stringify(slides.value),'----保存接口',queryObj.value)
+  console.log(slides.value,'=============')
+  if(queryObj.value.Title==''||!queryObj.value.LineId||!queryObj.value.LtId
+  // ||queryObj.value.CoverImg==''
+  ||queryObj.value.CountryName==''||queryObj.value.SeasonName==''
+  ||queryObj.value.ColorName==''||queryObj.value.ColorStr==''||queryObj.value.LineName==''){
+    return ElMessage({
+      showClose: true,
+      message: '请完善右侧模版数据',
+      type: 'warning',
+    })
+  }
+  for(let i=0;i<slides.value.length;i++){
+    for(let j=0;j<slides.value[i].elements.length;j++){
+      if(slides.value[i].elements[j].type=="text"||slides.value[i].elements[j].type=="image"){
+        if(!slides.value[i].elements[j].TemplateDataSource
+        ||!slides.value[i].elements[j].TemplateDataSource.Id) {
+          return ElMessage({
+            showClose: true,
+            message: `请完善 第 ${i+1} 页 需要绑定的数据源`,
+            type: 'warning',
+          })
+        }
+      }
+    }
+  }
+  queryObj.value.TempData = JSON.stringify(slides.value)
+  datas.loading = true
+  try {
+      let TemplateRes = await ConfigService.SetTripTemplateSlide(queryObj.value);
+      if (TemplateRes.data.resultCode == 1) {
+          
+      }
+      datas.loading = false
+  } catch (error) {
+      datas.loading = false
+      console.log("TemplateGetTripFiled", error);
+  }
+}
+
 const startEditTitle = () => {
   titleValue.value = title.value
   editingTitle.value = true

src/views/Editor/Thumbnails/index.vue

@@ -57,6 +57,7 @@ import useSlideHandler from '@/hooks/useSlideHandler'
 import useScreening from '@/hooks/useScreening'
 import useLoadSlides from '@/hooks/useLoadSlides'
 import { injectKeyDataSource } from '@/types/injectKey'
+import ConfigService from '@/services/ConfigService'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import LayoutPool from './LayoutPool.vue'
@@ -91,12 +92,41 @@ const {
 const datas = reactive({
   DataSource:{}
 })
+const queryObj = ref({} as any)
 datas.DataSource = inject(injectKeyDataSource)
+// 获取行程模版数据
+const GetTripTemplate = async () =>{
+  if(!datas.DataSource.queryObj.TempId) return
+  try {
+      let queryMsg = {
+        TempId:datas.DataSource.queryObj.TempId
+      }
+      let dataRes = await ConfigService.GetTripTemplateSlide(queryMsg);
+      if (dataRes.data.resultCode == 1) {
+        const newSlides = JSON.parse(dataRes.data.data.TempData)
+        slidesStore.setSlides(newSlides)
+        queryObj.value.TempId = dataRes.data.data.TempId
+        queryObj.value.LineId = dataRes.data.data.LineId
+        queryObj.value.LineName = dataRes.data.data.LineName
+        queryObj.value.LtId = dataRes.data.data.LtId
+        queryObj.value.Title = dataRes.data.data.Title
+        queryObj.value.TempData = dataRes.data.data.TempData
+        queryObj.value.CoverImg = dataRes.data.data.CoverImg
+        queryObj.value.CountryName = dataRes.data.data.CountryName
+        queryObj.value.SeasonName = dataRes.data.data.SeasonName
+        queryObj.value.ColorName = dataRes.data.data.ColorName
+        queryObj.value.ColorStr = dataRes.data.data.ColorStr
+        queryObj.value.TempType = dataRes.data.data.TempType
+      }
+  } catch (error) {
+      console.log("GetTripTemplateSlide", error);
+  }
+}
+GetTripTemplate()
 
 // 页面被切换时
 const thumbnailsRef = ref<InstanceType<typeof Draggable>>()
 watch(() => slideIndex.value, () => {
-
   // 清除多选状态的幻灯片
   if (selectedSlidesIndex.value.length) {
     mainStore.updateSelectedSlidesIndex([])
@@ -124,7 +154,11 @@ const getHtmlPlainText = (html_str) => {
       return ''
     }
 }
-
+queryObj.value = inject(injectKeyDataSource).queryObj
+let pageObj = slides.value.find((slide,indexs) => {
+  return slideIndex.value==indexs
+})
+// pageType.value = pageObj.pageType
 // 切换页面
 const changeSlideIndex = (index: number) => {
   mainStore.setActiveElementIdList([])
@@ -132,45 +166,36 @@ const changeSlideIndex = (index: number) => {
   const newElements = slides.value.find((slide,indexs) => {
     return index==indexs
   })
+  datas.DataSource.pageType = newElements.pageType
+  let TemplateList
+  if(newElements.pageType==1) TemplateList = datas.DataSource.jc
+  else if(newElements.pageType==2) TemplateList = datas.DataSource.jd
+  else if(newElements.pageType==3) TemplateList = datas.DataSource.jq
+  else if(newElements.pageType==4) TemplateList = datas.DataSource.cs
   datas.DataSource.DataSourceList = []
   newElements.elements.forEach(slide=>{
+    if(slide.type!="text"&&slide.type!="image") return
+    let FiledTypeStr
+    if(slide.type=="text") FiledTypeStr = getHtmlPlainText(slide.content)
+    if(slide.type=="image") FiledTypeStr = slide.src
     let Obj = {}
-    if(slide.type=="text"){
-      if(slide.FiledTypeStr){
-        Obj = {
-          ...slide,
-        }
-      }else{
-        Obj = {
-          ...slide,
-          FiledTypeStr: getHtmlPlainText(slide.content),
-          TemplateList: datas.DataSource.jc,
-          TemplateDataSource: {
-            Content: '',
-            Name: '',
-            Id: null as Number
-          },
-        }
+    if(slide.FiledTypeStr){
+      Obj = {
+        ...slide,
       }
-      datas.DataSource.DataSourceList.push(Obj)
-    }
-    if(slide.type=="image"){
-      if(slide.FiledTypeStr){
-        Obj = {
-          ...slide,
-        }
-      }else{
-        Obj = {
-          ...slide,
-          FiledTypeStr: getHtmlPlainText(slide.content),
-          TemplateList: datas.DataSource.jd,
-          TemplateDataSource: {
-            Content: '',
-            Name: '',
-            Id: null as Number
-          },
-        }
+    }else{
+      Obj = {
+        ...slide,
+        FiledTypeStr: FiledTypeStr,
+        TemplateList: TemplateList,
+        TemplateDataSource: {
+          Content: '',
+          Name: '',
+          Id: null as Number
+        },
       }
+    }
+    if(Obj){
       datas.DataSource.DataSourceList.push(Obj)
     }
   })

src/views/Editor/Toolbar/ElementTemplateData.vue

+<template>
+    <div class="q-mt-xs bg-white q-pa-xs rounded ElementTemplateData">
+        <div class="column text-mdall">
+            <div class="row">
+                <Button style="flex: 1;" @click="AllDataSource()">数据源</Button>
+              </div>
+            <p class="q-mt-md"><span class="Required q-mr-md">*</span>页面类型：</p>
+            <div class="row wrap q-mt-md">
+                <el-select v-model="datas.DataSource.pageType" class="m-2" 
+                    placeholder="请页面类型">
+                        <el-option
+                            v-for="item in pageTypesList"
+                            :key="item.key"
+                            :label="item.label"
+                            :value="item.key"
+                        />
+                </el-select>
+            </div>
+            <p class="q-mt-md"><span class="Required q-mr-md">*</span>模版名称：</p>
+            <div class="row wrap q-mt-md">
+                <el-input v-model="queryObj.Title" placeholder="输入模板名称" class="input-with-select"></el-input>
+            </div>
+            <p class="q-mt-md"><span class="Required q-mr-md">*</span>国家：</p>
+            <div class="row wrap q-mt-md">
+                <el-select v-model="queryObj.CountryName" class="m-2" placeholder="请选择国家">
+                        <el-option
+                            v-for="item in dispositionObj.CountryList"
+                            :key="item.CountryValue"
+                            :label="item.CountryName"
+                            :value="item.CountryValue"
+                        />
+                </el-select>
+            </div>
+            <p class="q-mt-md"><span class="Required q-mr-md">*</span>选择线路：</p>
+            <div class="row wrap q-mt-md">
+                <el-select v-model="queryObj.LineId" class="m-2" 
+                    filterable placeholder="请选择线路"
+                    @change="onLineChangeHandler">
+                        <el-option
+                            v-for="item in lines"
+                            :key="item.LineID"
+                            :label="item.LineName"
+                            :value="item.LineID"
+                        />
+                </el-select>
+            </div>
+            <template v-if="Series.length>0">
+                <p class="q-mt-md"><span class="Required q-mr-md">*</span>选择系列：</p>
+                <div class="row wrap q-mt-md">
+                    <el-select v-model="queryObj.LtId" class="m-2" 
+                    filterable placeholder="请选择系列">
+                            <el-option
+                                v-for="item in Series"
+                                :key="item.LtID"
+                                :label="item.LtName"
+                                :value="item.LtID"
+                            />
+                    </el-select>
+                </div>
+            </template>
+            <p class="q-mt-md"><span class="Required q-mr-md">*</span>选择颜色：</p>
+            <div class="row wrap q-mt-md">
+                <el-select v-model="queryObj.ColorStr" class="m-2" placeholder="请选择颜色"
+                @change="setCountryValue">
+                        <el-option
+                            v-for="item in dispositionObj.ColorList"
+                            :key="item.ColorValue"
+                            :label="item.ColorName"
+                            :value="item.ColorValue"
+                        />
+                </el-select>
+            </div>
+            <p class="q-mt-md"><span class="Required q-mr-md">*</span>选择季节：</p>
+            <div class="row wrap q-mt-md">
+                <el-select v-model="queryObj.SeasonName" class="m-2" placeholder="请选择季节">
+                        <el-option
+                            v-for="item in dispositionObj.SeasonList"
+                            :key="item.SeasonValue"
+                            :label="item.SeasonName"
+                            :value="item.SeasonValue"
+                        />
+                </el-select>
+            </div>
+        </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { computed, ref, reactive, watch, inject } from 'vue'
+  import { storeToRefs } from 'pinia'
+  import { useMainStore, useSlidesStore } from '@/store'
+  import LineService from '@/services/LineService'
+  import ConfigService from '@/services/ConfigService'
+  import { injectKeyDataSource } from '@/types/injectKey'
+
+    const datas = reactive({
+        DataSource:{},
+        CountryValue: null
+    })
+    const dispositionObj = ref({} as any)
+    const queryObj = ref({} as any)
+    datas.DataSource = inject(injectKeyDataSource)
+    queryObj.value = inject(injectKeyDataSource).queryObj
+    const lines = ref([] as Array < any > ) //线路
+    const Series = ref([] as Array < any > ) //系列
+
+    const pageTypesList = ref([
+        { label: '基础', key: 1 },
+        { label: '酒店', key: 2 },
+        { label: '景', key: 3 },
+        { label: '餐', key: 4 },
+    ])
+
+    const slidesStore = useSlidesStore()
+    const { slides, slideIndex } = storeToRefs(slidesStore)
+    const setCountryValue = () =>{
+        let obj = dispositionObj.value.ColorList.find(x=>{
+            return x.ColorValue == queryObj.value.ColorStr
+        })
+        queryObj.value.ColorName = obj.ColorName
+    }
+
+    //提取字符串中的文字
+    const getHtmlPlainText = (html_str) => {
+    let re = new RegExp('<[^<>]+>', 'g')
+    if (html_str) {
+    let text = html_str.replace(re, '')
+        return text
+        } else {
+        return ''
+        }
+    }
+
+    let pageObj = slides.value.find((slide,indexs) => {
+            return slideIndex.value==indexs
+    })
+    watch(() => datas.DataSource.pageType, () => {
+        const newSlides = slides.value
+        newSlides.forEach((slide,indexs)=>{
+            if(slideIndex.value==indexs){
+                slide.pageType = datas.DataSource.pageType
+            }
+        })
+        slidesStore.setSlides(newSlides)
+    })
+    // 所有数据源
+    const AllDataSource = () => {
+        if(slides.value.elements&&slides.value.elements.length==0){
+            return ElMessage({
+                showClose: true,
+                message: '请完善PDF内容填充',
+                type: 'warning',
+            })
+        }
+        // 绑定数据源
+        const newElements = slides.value.find((slide,indexs) => {
+            return slideIndex.value==indexs
+        })
+        datas.DataSource.DataSourceOverlay = !datas.DataSource.DataSourceOverlay
+        let TemplateList
+        if(newElements.pageType==1) TemplateList = datas.DataSource.jc
+        else if(newElements.pageType==2) TemplateList = datas.DataSource.jd
+        else if(newElements.pageType==3) TemplateList = datas.DataSource.jq
+        else if(newElements.pageType==4) TemplateList = datas.DataSource.cs
+        datas.DataSource.DataSourceList = []
+        newElements.elements.forEach(slide=>{
+            if(slide.type!="text"&&slide.type!="image") return
+            let FiledTypeStr
+            if(slide.type=="text") FiledTypeStr = getHtmlPlainText(slide.content)
+            if(slide.type=="image") FiledTypeStr = slide.src
+            let Obj = {}
+            if(slide.FiledTypeStr){
+                Obj = {
+                ...slide,
+                }
+            }else{
+                Obj = {
+                    ...slide,
+                    FiledTypeStr: FiledTypeStr,
+                    TemplateList: TemplateList,
+                    TemplateDataSource: {
+                        Content: '',
+                        Name: '',
+                        Id: null as Number
+                    },
+                }
+            }
+            datas.DataSource.DataSourceList.push(Obj)
+        })
+    }
+
+
+    /**
+     * 获取线路列表
+     */
+     const getLinesHandler = async () => {
+        try {
+            let response = await LineService.GetLineListAsync()
+            if (response.data.resultCode == 1) {
+                lines.value = response.data.data;
+            }
+        } catch (error) {
+            console.log("getLinesHandler", error);
+        }
+    }
+
+    /**
+     * 获取系列列表
+     */
+    const onLineChangeHandler = async () =>{
+        let obj = lines.value.find(x=>{
+            return x.LineID == queryObj.value.LineId
+        })
+        queryObj.value.LtId = null
+        queryObj.value.LineName = obj.LineName
+        try {
+            let queryMsg = {
+                lineID: queryObj.value.LineId,
+                placeID: 0,
+                isTOOP: 1
+            }
+            let response = await LineService.GetSeriesListAsync(queryMsg)
+            if (response.data.resultCode == 1) {
+                Series.value = response.data.data;
+            }
+        } catch (error) {
+            console.log("getLinesHandler", error);
+        }
+    }
+
+    /**
+     * 获取配置项数据(颜色、国家、季节)
+     */
+     const GetTemplateConfigData = async () => {
+        try {
+            let response = await LineService.GetTemplateConfigData()
+            if (response.data.resultCode == 1) {
+                dispositionObj.value = response.data.data;
+            }
+        } catch (error) {
+            console.log("getLinesHandler", error);
+        }
+    }
+    GetTemplateConfigData()
+    getLinesHandler()
+  </script>
+  
+  <style lang="scss" scoped>
+    .ElementTemplateData{
+        /* min-height: 500px; */
+    }
+    .el-select{
+        width: 100%;
+    }
+    .Required{
+        color: red;
+    }
+  </style>
\ No newline at end of file

src/views/Editor/Toolbar/SlideDesignPanel.vue

@@ -99,16 +99,12 @@
     <div class="row">
       <Button style="flex: 1;" @click="applyBackgroundAllSlide()">应用背景到全部</Button>
     </div>
-
-    <div class="row">
-      <Button style="flex: 1;" @click="AllDataSource()">数据源</Button>
-    </div>
     
     <Divider />
 
     <div class="row">
       <div style="width: 40%;">画布尺寸：</div>
-      <Select 
+      <!-- <Select 
         style="width: 60%;" 
         :value="viewportRatio" 
         @update:value="value => updateViewportRatio(value as number)"
@@ -118,6 +114,15 @@
           { label: '标准 4 : 3', value: 0.75 },
           { label: '纸张 A3 / A4', value: 0.70710678 },
         ]"
+      /> -->
+      <Select 
+        style="width: 60%;" 
+        :value="viewportRatio" 
+        @update:value="value => updateViewportRatio(value as number)"
+        :options="[
+          { label: '横屏', value: 0.75 },
+          { label: '竖屏', value: 1.7777 },
+        ]"
       />
     </div>
 
@@ -320,7 +325,9 @@ const datas = reactive({
     DataSourceOverlay: false
   }
 })
-
+const queryObj = ref({} as any)
+datas.DataSource = inject(injectKeyDataSource)
+queryObj.value = inject(injectKeyDataSource).queryObj
 const slidesStore = useSlidesStore()
 const { availableFonts } = storeToRefs(useMainStore())
 const { slides, currentSlide, viewportRatio, theme, slideIndex } = storeToRefs(slidesStore)
@@ -344,69 +351,6 @@ const {
   applyThemeToAllSlides,
 } = useSlideTheme()
 
-
-datas.DataSource = inject(injectKeyDataSource)
-//提取字符串中的文字
-const getHtmlPlainText = (html_str) => {
-  let re = new RegExp('<[^<>]+>', 'g')
-  if (html_str) {
-  let text = html_str.replace(re, '')
-      return text
-    } else {
-      return ''
-    }
-}
-// 所有数据源
-const AllDataSource = () => {
-  datas.DataSource.DataSourceOverlay = !datas.DataSource.DataSourceOverlay
-  // 绑定数据源
-  const newElements = slides.value.find((slide,indexs) => {
-    return slideIndex.value==indexs
-  })
-  datas.DataSource.DataSourceList = []
-  newElements.elements.forEach(slide=>{
-    let Obj = {}
-    if(slide.type=="text"){
-      if(slide.FiledTypeStr){
-        Obj = {
-          ...slide,
-        }
-      }else{
-        Obj = {
-          ...slide,
-          FiledTypeStr: getHtmlPlainText(slide.content),
-          TemplateList: datas.DataSource.jc,
-          TemplateDataSource: {
-            Content: '',
-            Name: '',
-            Id: null as Number
-          },
-        }
-      }
-      datas.DataSource.DataSourceList.push(Obj)
-    }
-    if(slide.type=="image"){
-      if(slide.FiledTypeStr){
-        Obj = {
-          ...slide,
-        }
-      }else{
-        Obj = {
-          ...slide,
-          FiledTypeStr: getHtmlPlainText(slide.content),
-          TemplateList: datas.DataSource.jd,
-          TemplateDataSource: {
-            Content: '',
-            Name: '',
-            Id: null as Number
-          },
-        }
-      }
-      datas.DataSource.DataSourceList.push(Obj)
-    }
-  })
-}
-
 // 设置背景模式：纯色、图片、渐变色
 const updateBackgroundType = (type: 'solid' | 'image' | 'gradient') => {
   if (type === 'solid') {
@@ -472,6 +416,11 @@ const updateTheme = (themeProps: Partial<SlideTheme>) => {
 
 // 设置画布尺寸（宽高比例）
 const updateViewportRatio = (value: number) => {
+  if(value==0.75){
+    queryObj.value.TempType = 1
+  }else{
+    queryObj.value.TempType = 2
+  }
   slidesStore.setViewportRatio(value)
 }
 </script>

src/views/Editor/Toolbar/index.vue

@@ -21,6 +21,7 @@ import { ToolbarStates } from '@/types/toolbar'
 import ElementStylePanel from './ElementStylePanel/index.vue'
 import ElementPositionPanel from './ElementPositionPanel.vue'
 import ElementAnimationPanel from './ElementAnimationPanel.vue'
+import ElementTemplateData from './ElementTemplateData.vue'
 import SlideDesignPanel from './SlideDesignPanel.vue'
 import SlideAnimationPanel from './SlideAnimationPanel.vue'
 import MultiPositionPanel from './MultiPositionPanel.vue'
@@ -54,6 +55,7 @@ const slideTabs = [
   { label: '设计', key: ToolbarStates.SLIDE_DESIGN },
   { label: '切换', key: ToolbarStates.SLIDE_ANIMATION },
   { label: '动画', key: ToolbarStates.EL_ANIMATION },
+  { label: '模版数据', key: ToolbarStates.EL_TEMPLATEDATA },
 ]
 const multiSelectTabs = [
   { label: '样式', key: ToolbarStates.EL_STYLE },
@@ -82,6 +84,7 @@ const currentPanelComponent = computed(() => {
     [ToolbarStates.EL_STYLE]: ElementStylePanel,
     [ToolbarStates.EL_POSITION]: ElementPositionPanel,
     [ToolbarStates.EL_ANIMATION]: ElementAnimationPanel,
+    [ToolbarStates.EL_TEMPLATEDATA]: ElementTemplateData,
     [ToolbarStates.SLIDE_DESIGN]: SlideDesignPanel,
     [ToolbarStates.SLIDE_ANIMATION]: SlideAnimationPanel,
     [ToolbarStates.MULTI_POSITION]: MultiPositionPanel,

src/views/Editor/index.vue

@@ -5,12 +5,13 @@
       <Thumbnails class="layout-content-left" />
       <div class="layout-content-center">
         <CanvasTool class="center-top" />
-        <Canvas class="center-body" :style="{ height: `calc(100% - ${remarkHeight + 40}px)` }" />
-        <Remark
+        <!-- :style="{ height: `calc(100% - ${remarkHeight + 40}px)` }" -->
+        <Canvas class="center-body" :style="{ height: `100%`}" />
+        <!-- <Remark
           class="center-bottom" 
           v-model:height="remarkHeight" 
           :style="{ height: `${remarkHeight}px` }"
-        />
+        /> -->
         <DataaSource/>
       </div>
       <Toolbar class="layout-content-right" />
@@ -30,12 +31,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, provide, watch } from 'vue'
+import { ref, reactive, provide, watch, inject } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import useGlobalHotkey from '@/hooks/useGlobalHotkey'
 import usePasteEvent from '@/hooks/usePasteEvent'
-import { injectKeyDataSource } from '@/types/injectKey'
+import { injectKeyDataSource, injectKeyTemplate } from '@/types/injectKey'
 import { useSlidesStore } from '@/store'
 
 import EditorHeader from './EditorHeader/index.vue'
@@ -51,8 +52,10 @@ import Modal from '@/components/Modal.vue'
 import DataaSource from './DataaSource/index.vue'
 import ConfigService from '@/services/ConfigService'
 
+// inject(injectKeyTemplate).TempId?inject(injectKeyTemplate).TempId:
 const datas = reactive({
     DataSource:{
+        pageType: 1,//1基础 2酒店 3景 4餐
         DataSourceOverlay: false,
         DataSourceList:[],
         TemplateDataSource:[],
@@ -60,9 +63,31 @@ const datas = reactive({
         jd:[],//酒店
         jq:[],//景区
         cs:[],//餐食
+        queryObj:{
+          TempId: 10,//编号(新增传0)	是	[int]
+          LineId: null,//线路Id	是	[int]
+          LineName: '',//线路名称	是	[string]
+          LtId: null,//系列Id	是	[int]
+          Title: '',//名称	是	[string]
+          TempData: null,//模板数据	是	[json]
+          CoverImg: '',//封面图	是	[string]
+          CountryName: null,//国家	是	[string]
+          SeasonName: '',//季节	是	[string]
+          ColorName: '',//颜色名称	是	[string]
+          ColorStr: null,//颜色值	是	[string]
+          TempType: 1,//	版面类型(1-横版，2-竖版)
+        }
     },
+
 })
 
+
+const slidesStore = useSlidesStore()
+const { slides, slideIndex } = storeToRefs(slidesStore)
+
+watch(() => datas.DataSource, () => {
+  provide(injectKeyDataSource,datas.DataSource)
+})
 // 数据源
 const GetTripFiled = async () =>{
     try {

src/views/Market/Index.vue

@@ -62,23 +62,18 @@
 </template>
 
 <script setup lang="ts">
-    import {
-        reactive,
-        ref
-    } from "vue";
+    import { reactive, ref, inject} from "vue";
     import LineService from '@/services/LineService'
     import ConfigService from '@/services/ConfigService'
-    import {
-        userStore
-    } from "@/store/user";
-    import {
-        storeToRefs
-    } from "pinia";
+    import { userStore } from "@/store/user";
+    import { useScreenStore } from "@/store/screen";
+    import { storeToRefs } from "pinia";
+    import { injectKeyTemplate } from '@/types/injectKey'
 
     const {
         userInfo
     } = storeToRefs(userStore())
-    const lines = ref([] as Array < any > ) //线路
+    const line = ref([] as Array < any > ) //线路
     const countries = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
     const colorArr = ref([] as Array < any > ); //颜色
     const seasonArr = ref([] as Array < any > ); //季节
@@ -95,11 +90,17 @@
         pageCount: 0, //总页数
     })
 
+    const searchData = ref({} as any)
+    searchData.value = inject(injectKeyTemplate)
+    const marketStore = useScreenStore()
+    const { screening, market } = storeToRefs(useScreenStore())
     /**
      * 页面跳转
      */
     const goToTemplate = (item: any) => {
-        console.log("item", item);
+        // searchData.value.TempId = item.TempId
+        marketStore.setMarket(!market)
+        // console.log("item", item.TempId);
     }
 
     /***