排序,页面类型

src/types/slides.ts

@@ -122,7 +122,8 @@ interface PPTBaseElement {
 export interface DataSourceType {
   Content?: string,
   Name?: string,
-  Id?: number
+  Id?: number,
+  index?: number,
 }
 
 

src/views/Editor/DataaSource/index.vue

@@ -25,10 +25,28 @@
                         </el-table-column>
                         <el-table-column
                         prop=""
+                        label="排序" v-if="datas.DataSource.pageType!=1">
+                            <template #default="scope">
+                                <div v-if="scope.row.TemplateList">
+                                    <el-select v-model="scope.row.TemplateDataSource.index"
+                                    clearable class="m-2" 
+                                    placeholder="请选择排序"
+                                    @change="setTemplateDataSource()">
+                                    <el-option
+                                        v-for="item in datas.sortList"
+                                        :key="item"
+                                        :label="item"
+                                        :value="item"/>
+                                    </el-select>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                        prop=""
                         label="绑定数据源"
                         width="170">
                             <template #default="scope">
-                                <div class="DataaSourceR" v-if="scope.row.TemplateList">
+                                <div v-if="scope.row.TemplateList">
                                     <el-select v-model="scope.row.TemplateDataSource.Id"
                                     clearable class="m-2" 
                                     placeholder="请绑定数据源"
@@ -57,9 +75,13 @@
   import { getHtmlPlainText } from '@/utils/common'
 
     const datas = reactive({
+        sortList:[],
         DataSource:{},
         loading: false,//是否更新数据源
     })
+    for(let i=0;i<11;i++){
+        datas.sortList.push(i)
+    }
     datas.DataSource = inject(injectKeyDataSource)
     const slidesStore = useSlidesStore()
     const { slides, slideIndex } = storeToRefs(slidesStore)
@@ -119,9 +141,11 @@
                 if(obj){
                     x.TemplateDataSource.Content = obj.Content
                     x.TemplateDataSource.Name = obj.Name
+                    x.TemplateDataSource.index = obj.index
                 }else{
                     x.TemplateDataSource.Content = ''
                     x.TemplateDataSource.Name = ''
+                    x.TemplateDataSource.index = null
                 }
                 // if(x.type=="text"){
                 //     x.FiledTypeStr = obj.Name

src/views/Editor/Thumbnails/index.vue

@@ -128,6 +128,7 @@ watch(() => dataLoading.value, (n,o) =>{
   }
 })
 
+
 queryObj.value = inject(injectKeyDataSource).queryObj
 
 /**
@@ -252,6 +253,13 @@ const GetTripTemplate = async () =>{
         }else if(SlidesData.length>0){
           newSlides = SlidesData
         }
+        newSlides.forEach(x=>{
+          x.elements.forEach(y=>{
+            if(x.pageType!=1&&y.TemplateDataSource&&y.TemplateDataSource.index==null){
+              Reflect.set(y.TemplateDataSource, 'index', null)
+            }
+          })
+        })
         slidesStore.setSlides(newSlides)
         layoutsStore.setLayouts(JSON.parse(JSON.stringify(newSlides)))
         CoverImgStore.setCoverImg(dataRes.data.data.CoverImg)
@@ -307,12 +315,16 @@ const changeSlideIndex = (index: number) => {
           TemplateDataSource: {
             Content: slide.TemplateDataSource&&slide.TemplateDataSource.Content?slide.TemplateDataSource.Content:'',
             Name: slide.TemplateDataSource&&slide.TemplateDataSource.Name?slide.TemplateDataSource.Name:'',
-            Id: slide.TemplateDataSource&&slide.TemplateDataSource.Id?slide.TemplateDataSource.Id:null as Number
+            Id: slide.TemplateDataSource&&slide.TemplateDataSource.Id?slide.TemplateDataSource.Id:null as Number,
+          }
+        }
+        if(newElements.pageType!=1){
+          let index = slide.TemplateDataSource&&slide.TemplateDataSource.index>=0?slide.TemplateDataSource.index:null as Number
+          Reflect.set(Obj.TemplateDataSource, 'index', index)
+        }
+        if(Obj){
+          datas.DataSource.DataSourceList.push(Obj)
         }
-      }
-      if(Obj){
-        datas.DataSource.DataSourceList.push(Obj)
-      }
     }
     
   })

src/views/Editor/Toolbar/ElementTemplateData.vue

-<template>
-    
+<template> 
     <div class="q-mt-xs bg-white q-pa-xs rounded ElementTemplateData">
         <div class="column text-mdall">
             <div class="column">
@@ -26,7 +25,7 @@
             <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="请页面类型">
+                    placeholder="请页面类型" @change="getPageType()">
                         <el-option
                             v-for="item in TemplateType"
                             :key="item.FiledType"
@@ -129,7 +128,7 @@
     </div>
 
     <!-- 生成封面图 -->
-    <div style="opacity: 0;position: absolute;left: 100px;" v-if="model&&slides">
+    <div style="opacity: 0;position: absolute;left: 100px;" v-if="isCoverImg">
         <div class="export-img-dialog">
           <div class="thumbnails-view">
             <div class="thumbnails" ref="FeatureImgRef">
@@ -191,16 +190,56 @@
     const FeatureImgRef = ref(null)
     const { exportImage } = useExport()
 
-    watch(() => datas.DataSource.pageType, () => {
+    watch(() => datas.DataSource.pageType, (n,o) => {
+        
+    })
+
+
+    const getPageType = () => {
+        let TemplateList = TemplateDataSource.value.filter(x=>{
+            return x.FiledType==datas.DataSource.pageType
+        })
         const newSlides = slides.value
         newSlides.forEach((slide,indexs)=>{
             if(slideIndex.value==indexs){
-                slide.pageType = datas.DataSource.pageType
+                datas.DataSource.DataSourceList = []
+                slide.elements.forEach(item=>{
+                    if(item.type=="text"||item.type=="image") {
+                        item.TemplateList = JSON.parse(JSON.stringify(TemplateList))
+                        item.TemplateDataSource = {
+                            Content: '',
+                            Name: '',
+                            Id: null,
+                        }
+                        if(datas.DataSource.pageType!=1){
+                            let index = item.TemplateDataSource&&item.TemplateDataSource.index>=0?item.TemplateDataSource.index:null as Number
+                            Reflect.set(item.TemplateDataSource, 'index', index)
+                        }
+                        let FiledTypeStr
+                        if(item.type=="text") FiledTypeStr = getHtmlPlainText(item.content)
+                        if(item.type=="image") FiledTypeStr = item.src
+                    
+                        let Obj = {}
+                        Obj = {
+                            ...item,
+                            FiledTypeStr: FiledTypeStr,
+                            TemplateList: TemplateList,
+                            TemplateDataSource: {
+                                Content: item.TemplateDataSource&&item.TemplateDataSource.Content?item.TemplateDataSource.Content:'',
+                                Name: item.TemplateDataSource&&item.TemplateDataSource.Name?item.TemplateDataSource.Name:'',
+                                Id: item.TemplateDataSource&&item.TemplateDataSource.Id?item.TemplateDataSource.Id:null as Number,
+                                index: item.TemplateDataSource&&item.TemplateDataSource.index>=0?item.TemplateDataSource.index:null as Number,
+                            }
+                        }
+                        if(Obj) datas.DataSource.DataSourceList.push(Obj)
+                    }
+                })
+                
             }
         })
-        slidesStore.setSlides(newSlides)
-    })
-
+        slidesStore.setSlides(JSON.parse(JSON.stringify(newSlides)))
+    }
+    getPageType()
     const showInput = () => {
         inputVisible.value = true
         nextTick(() => {
@@ -226,7 +265,9 @@
         // mainStore.setDialogForExport(type)
         mainMenuVisible.value = false
         isCoverImgStore.setIsCoverImg(true)
-        exportImage(FeatureImgRef.value, 'png', 1, true)
+        setTimeout(()=>{
+            exportImage(FeatureImgRef.value, 'png', 1, true)
+        },300)
     }
 
     const setCountryValue = () =>{
@@ -242,6 +283,8 @@
     
     // 所有数据源
     const AllDataSource = () => {
+        datas.DataSource.DataSourceOverlay = !datas.DataSource.DataSourceOverlay
+        return
         if(slides.value.elements&&slides.value.elements.length==0){
             return ElMessage({
                 showClose: true,
@@ -271,9 +314,13 @@
                     TemplateDataSource: {
                         Content: slide.TemplateDataSource&&slide.TemplateDataSource.Content?slide.TemplateDataSource.Content:'',
                         Name: slide.TemplateDataSource&&slide.TemplateDataSource.Name?slide.TemplateDataSource.Name:'',
-                        Id: slide.TemplateDataSource&&slide.TemplateDataSource.Id?slide.TemplateDataSource.Id:null as Number
+                        Id: slide.TemplateDataSource&&slide.TemplateDataSource.Id?slide.TemplateDataSource.Id:null as Number,
                     },
                 }
+                if(newElements.pageType!=1){
+                    let index = slide.TemplateDataSource&&slide.TemplateDataSource.index>=0?slide.TemplateDataSource.index:null as Number
+                    Reflect.set(Obj.TemplateDataSource, 'index', index)
+                }
                 if(Obj){
                     datas.DataSource.DataSourceList.push(Obj)
                 }