销售 右侧选 酒店 景点 餐

src/services/ConfigService.ts

@@ -32,6 +32,14 @@ class ConfigService{
         return Api.Post("triptemplate_GetTripOtherPage",params)
     }
 
+    
+    /**
+     * 关键词检索获取行程酒店 餐 景点
+     */
+     static async getSourceDatas(params : any):Promise<HttpResponse>{
+        return Api.Post("hotel_post_GetSourceList",params)
+    }
+
     /**
      * 根据ConfigId获取行程配置相关数据
      */

src/types/slides.ts

@@ -120,7 +120,8 @@ interface PPTBaseElement {
 
 interface DataSourceMapping{
   id:number,
-  filed:string
+  filed:string,
+  name: string,
 }
 
 /** 

src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue

 <template>
   <div class="image-style-panel">
-    <div 
+    <div v-if="handleImageElement.src"
       class="origin-image"
       :style="{ backgroundImage: `url(${handleImageElement.src})` }"
     ></div>
@@ -41,7 +41,7 @@
       </Popover>
     </ButtonGroup>
 
-    <ElementDataMapping v-if="mode==0"></ElementDataMapping>
+    <ElementDataMapping v-if="mode==0||mode==2"></ElementDataMapping>
 
     <Divider />
     <ElementColorMask />
@@ -291,7 +291,8 @@ const initMapping = ()=>{
             below: x.TemplateDataSource.index,
             dataMapping: {
               id: 0,
-              filed: x.TemplateDataSource.Content.split('.').reverse()[0]
+              filed: x.TemplateDataSource.Content.split('.').reverse()[0],
+              name: ''
             }
           }
           slidesStore.updateElement({ id: x.id, props })

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -10,7 +10,7 @@
       >{{item.label}}</div>
     </div>
 
-    <ElementDataMapping v-if="mode==0"></ElementDataMapping>
+    <ElementDataMapping v-if="mode==0||mode==2"></ElementDataMapping>
 
     <Divider />
     
@@ -531,7 +531,8 @@ const initMapping = ()=>{
             below: x.TemplateDataSource.index,
             dataMapping: {
               id: 0,
-              filed: x.TemplateDataSource.Content.split('.').reverse()[0]
+              filed: x.TemplateDataSource.Content.split('.').reverse()[0],
+              name: ''
             }
           }
           slidesStore.updateElement({ id: x.id, props })

src/views/Editor/Toolbar/common/ElementDataMapping.vue

@@ -6,12 +6,24 @@
             <div class="text-small col">数据绑定</div>
             <el-checkbox v-model="updateUnionElement" label="更新关联数据" size="small"/>
         </div>
-        <Select 
+        <Select v-if="model==0"
             class="col"
             :value="currentId" 
             @update:value="value => changeDataSourceHandler(value)"
             :options="selectDataSource"
         />
+        <el-select v-else v-model="currentId" filterable remote
+            reserve-keyword placeholder="输入关键词查询" remote-show-suffix
+            :remote-method="remoteMethod" :loading="loading"
+            @change="value => changeDataSourceHandler(value)"
+            style="width: 100%;">
+            <el-option
+            v-for="item in selectDataSource"
+            :key="item.Id"
+            :label="item.Name"
+            :value="item.Id"
+            />
+        </el-select>
         <div class="row items-center wrap" v-if="handleElement && handleElement.type=='image' && currentImages && currentImages.length>0">
             <div class="item-image-box" v-for="(x,i) in currentImages" :key="i" @click="setImageHandler(x,handleElement,handleElement.dataMapping)">
                 <img :src="x" />
@@ -27,12 +39,13 @@ import Divider from '@/components/Divider.vue'
 import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas';
 import useHistorySnapshot from '@/hooks/useHistorySnapshot';
 import FileService from '@/services/FileService';
-import { useMainStore, useSlidesStore } from '@/store';
+import { useMainStore, useSlidesStore, useScreenStore } from '@/store';
 import { SlideDataSource, TravelDetail, injectKeyDataSource } from '@/types/injectKey';
 import { PPTImageElement } from '@/types/slides';
 import { getHtmlPlainText } from '@/utils/common';
 import { storeToRefs } from 'pinia';
 import { inject, onMounted, ref } from 'vue';
+import ConfigService from '@/services/ConfigService'
 const trip = ref<SlideDataSource>()
 const { addHistorySnapshot } = useHistorySnapshot()
 trip.value = inject(injectKeyDataSource)
@@ -41,11 +54,15 @@ const slidesStore = useSlidesStore()
 const { hotelInfo, scenicInfo, dinnerInfo } = trip.value?.TravelAatas??{}
 const resources:Array<TravelDetail[]> = [[],hotelInfo??[],scenicInfo??[],dinnerInfo??[]]
 const { handleElement }  = storeToRefs(mainStore)
+const { model } = storeToRefs(useScreenStore())
 const slide = slidesStore.currentSlide
 const selectDataSource = ref<{label:string,value:string|number}[]>([])
-const currentId = ref<number>(0)
+const currentId = model.value==0?ref<number>(0):ref<number>(null)
 const currentImages = ref<string[]>()
 const updateUnionElement = ref<boolean>(true)
+const loading = ref<boolean>(false)
+const loadingObj = ref<any>('')
+const query = ref<string>('')
 let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE, viewportRatio = slidesStore.viewportRatio
 if(viewportRatio<1){
     maxWidth = VIEWPORT_VER_SIZE
@@ -63,10 +80,48 @@ if(handleElement.value?.dataMapping){
     })
 }
 
+const remoteMethod = (query: string) => {
+  if (query) {
+    loading.value = true
+    setTimeout(() => {
+        getDatasTrip(query)
+    }, 200)
+  } else {
+    // selectDataSource.value = []
+  }
+}
+
+const getDatasTrip = async (query:string) => {
+    // loadingObj.value = ElLoading.service({
+    //     text:'正在查询数据',
+    //     lock:true
+    // })
+    
+    try {
+        let Type = 0
+        if(slide.pageType==2) Type = 1
+        if(slide.pageType==3) Type = 3
+        if(slide.pageType==4) Type = 2
+        let queryMsg = {
+            Name: query,
+            Type: Type // 1酒店 2景点 3餐食
+        }
+        let dataRes = await ConfigService.getSourceDatas(queryMsg);
+        if (dataRes.data.resultCode == 1) {
+            loading.value = false
+            selectDataSource.value = dataRes.data.data
+        }else{
+            loading.value = false
+        }
+        
+    } catch (error) { }
+    
+    // loadingObj.value.close()
+}
+
 const changeDataSourceHandler = (value:number) => {
     currentId.value = value
-    const data = resources[slide.pageType-1].find(x=>x.Id==value)
-   
+    const data = model.value==0?resources[slide.pageType-1].find(x=>x.Id==value):selectDataSource.value.find(x=>x.Id==value)
     if(data && handleElement.value && handleElement.value.dataMapping){
         updateUnionElementsHanlder(value)
     }
@@ -78,17 +133,17 @@ const updateUnionElementsHanlder = (newValue:number) => {
     let elements = slide.elements.filter(x=>x.dataMapping && x.below == handleElement.value?.below)
     if(!updateUnionElement.value) elements = elements.filter(x=>x.id==handleElement.value?.id)
     if(elements) {
-        const data = resources[slide.pageType-1].find(x=>x.Id==newValue)
+        const data = model.value==0?resources[slide.pageType-1].find(x=>x.Id==newValue):selectDataSource.value.find(x=>x.Id==newValue)
         elements.forEach(x => {
             if(x.dataMapping){
-                const newDataMapping = {id:newValue, filed:x.dataMapping.filed}
+                const newDataMapping = {id:newValue, filed:x.dataMapping.filed, name: data.Name}
                 if(x.type == 'text'){
                     const content = x.content.replace(getHtmlPlainText(x.content),data[x.dataMapping.filed])
                     const props = {content,dataMapping:newDataMapping}
                     slidesStore.updateElement({ id: x.id, props})
                 }else if(x.type == 'image'){
                     const urls = data[x.dataMapping.filed] as Array<string> ?? ['']
-                    setImageHandler(urls[0],x as PPTImageElement,newDataMapping)
+                    if(urls.length>0) setImageHandler(urls[0],x as PPTImageElement,newDataMapping)
                 }
             }
         })
@@ -106,6 +161,8 @@ const setImageHandler = async (url:string, element:PPTImageElement, mapping:any)
     }
     if(url!='' && url!=handleElement.value?.src){
         try {
+            let width = element.width
+            let height = element.height
             let tempSize = await FileService.getImageSizeWithoutDownloading(url)
             if(tempSize.width>maxWidth){
                 let ratio = maxWidth/tempSize.width
@@ -117,20 +174,33 @@ const setImageHandler = async (url:string, element:PPTImageElement, mapping:any)
                 tempSize.height = maxHeight
                 tempSize.width = tempSize.width*ratio
             }
+            if(tempSize.width!=width){
+                let ratio = width/tempSize.width
+                tempSize.width = Math.ceil(tempSize.width*ratio)
+                tempSize.height = Math.ceil(tempSize.height*ratio)
+            }
+            if(tempSize.height<height){
+                let ratio = height / tempSize.height
+                tempSize.width = Math.ceil(tempSize.width*ratio)
+                tempSize.height = Math.ceil(tempSize.height*ratio)
+            }
 
             props = {
                 src: url,
                 width: tempSize.width,
                 height: tempSize.height,
-                left: element.left,
-                top: element.top,
-                dataMapping:mapping
+                // left: element.left,
+                // top: element.top,
+                left: element.left -= (tempSize.width - width) / 2,
+                top: element.top -= (tempSize.height - height) / 2,
+                dataMapping:mapping,
+                fixedRatio: true
             }
             
-            if(props.left<0)props.left=0
-            if(props.top<0)props.top=0
+            // if(props.left<0)props.left=0
+            // if(props.top<0)props.top=0
         } catch (error) {
-            
+            element.fixedRatio = false
         }
     }
     
@@ -140,13 +210,17 @@ const setImageHandler = async (url:string, element:PPTImageElement, mapping:any)
 const loadCurrentImages = () => {
     if(handleElement.value && handleElement.value.dataMapping){
         currentImages.value = []
-        const data = resources[slide.pageType-1].find(x=>x.Id==currentId.value)
+        const data = model.value==0?resources[slide.pageType-1].find(x=>x.Id==currentId.value):selectDataSource.value.find(x=>x.Id==currentId.value)
         if(data){
             currentImages.value = data[handleElement.value.dataMapping.filed] as Array<string> ?? []
         }
     }
 }
-
+if(model.value==2&&handleElement.value 
+&& handleElement.value.dataMapping 
+&& handleElement.value.dataMapping.name) {
+    getDatasTrip(handleElement.value.dataMapping.name)
+}
 loadCurrentImages()
 </script>
 <style scoped>