销售 新增编辑 模版

src/App.vue

 <template>
   <div v-if="isFinish" style="height: 100vh;background: rgb(243, 246, 251);">
     <Screen v-if="screening" />
-    <Market v-else-if="market"></Market>
+    <Market v-else-if="(market&&model!=2)||(market&&SalesEditor>0)"></Market>
+    <SellTemplate v-else-if="model==2&&SalesEditor==0"/>
     <Editor v-else-if="_isPC" />
     <Mobile v-else />
   </div>
@@ -10,7 +11,7 @@
 <script lang="ts" setup>
 import { onMounted,ref,provide } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useScreenStore, useMainStore, useSnapshotStore, useFontStore } from '@/store'
+import { useScreenStore, useMainStore, useSnapshotStore, useFontStore,useSellTemplate } from '@/store'
 import { LOCALSTORAGE_KEY_DISCARDED_DB } from '@/configs/storage'
 import { deleteDiscardedDB } from '@/utils/database'
 import { isPC, query } from './utils/common'
@@ -24,6 +25,7 @@ import Screen from './views/Screen/index.vue'
 import Mobile from './views/Mobile/index.vue'
 import Market from './views/Market/Index.vue'
 import NewFile from './views/Market/newFile.vue'
+import SellTemplate from './views/SellTemplate/index.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 const searchData = ref({} as any)
 provide(injectKeyTemplate,searchData)
@@ -44,6 +46,7 @@ const TempIdStore = useScreenStore()
 const { databaseId } = storeToRefs(mainStore)
 const { screening, market, model, ConfigId } = storeToRefs(useScreenStore())
 const { userInfo } = storeToRefs(userStore())
+const { SalesEditor } = storeToRefs(useSellTemplate())
 
 if (process.env.NODE_ENV === 'production') {
   window.onbeforeunload = () => false
@@ -61,7 +64,7 @@ const userLoginHandler = async ()=>{
   try {
     await userStore().setUserLoginAsync(userId,ConfigId) 
     await useFontStore().loadAllFonts()
-    if(ConfigId>0) await GetTripConfig(ConfigId)
+    if(ConfigId>0&&model!=2) await GetTripConfig(ConfigId)
   } catch (error) {}
   isFinish.value=true
   if(!ConfigId&&!model) ElMessageBox.confirm(

src/assets/styles/global.scss

@@ -136,11 +136,11 @@ textarea {
   background-color: #c1c1c1;
 }
 :root {
-  --el-color-primary: #d14424;
-  --el-color-primary-light-3: #de6949;
-  --el-color-primary-light-5: #e68d79;
-  --el-color-primary-light-7: #f8a491;
-  --el-color-primary-light-8: #fdcec4;
-  --el-color-primary-light-9: #ffebe6;
-  --el-color-primary-dark-2: #d43410;
+  --el-color-primary: #d14424 !important;
+  --el-color-primary-light-3: #de6949 !important;
+  --el-color-primary-light-5: #e68d79 !important;
+  --el-color-primary-light-7: #f8a491 !important;
+  --el-color-primary-light-8: #fdcec4 !important;
+  --el-color-primary-light-9: #ffebe6 !important;
+  --el-color-primary-dark-2: #d43410 !important;
 }
\ No newline at end of file

src/main.ts

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

src/services/ConfigService.ts

@@ -4,6 +4,34 @@ import Api,{ HttpResponse, Result } from './../utils/request';
  * 配置相关方法
  */
 class ConfigService{
+    /**
+     * 销售模版详情
+     */
+     static async sellGetTemplateDetails(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_GetTripOther",params)
+    }
+
+    /**
+     * 销售删除模版
+     */
+     static async sellSetRemoveTemplate(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_RemoveTripOther",params)
+    }
+
+    /**
+     * 销售新增编辑模版
+     */
+     static async sellSetTemplate(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_SetTripOther",params)
+    }
+
+    /**
+     * 获取销售模版列表
+     */
+     static async sellGetTripOtherPage(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_GetTripOtherPage",params)
+    }
+
     /**
      * 根据ConfigId获取行程配置相关数据
      */

src/store/index.ts

@@ -4,6 +4,7 @@ import { useSnapshotStore } from './snapshot'
 import { useKeyboardStore } from './keyboard'
 import { useScreenStore } from './screen'
 import { useFontStore } from './font'
+import { useSellTemplate } from './sellTemplate'
 
 export {
   useMainStore,
@@ -11,5 +12,6 @@ export {
   useSnapshotStore,
   useKeyboardStore,
   useScreenStore,
-  useFontStore
+  useFontStore,
+  useSellTemplate
 }
\ No newline at end of file

src/store/sellTemplate.ts

+import { fa } from 'element-plus/es/locale'
+import { defineStore } from 'pinia'
+
+export interface SalesState {
+    SalesEditor: number,
+}
+
+export const useSellTemplate = defineStore('sales', {
+  state: (): SalesState => ({
+    SalesEditor: 0, // 1 新增 2编辑 
+  }),
+
+  actions: {
+    setSalesEditor(SalesEditor: number) {
+      this.SalesEditor = SalesEditor
+    },
+  },
+})
\ No newline at end of file

src/utils/domainManager.ts

 export const domainManager = () => {
     const locationName = window.location.hostname
     const obj = {
-        domainUrl: locationName.indexOf('oytour') !== -1 ? "http://reborn.oytour.com/api/common/post" : "http://reborn.oytour.com/api/common/post",
+        domainUrl: locationName.indexOf('oytour') !== -1 ? "http://reborn.oytour.com/api/common/post" : "http://192.168.10.214/api/common/post",
         //上传站点
         UploadUrl: locationName.indexOf('oytour') !== -1 ? "http://upload.oytour.com" : "http://192.168.10.214:8120",
         //文件站点

src/views/Editor/EditorHeader/index.vue

 <template>
   <div class="editor-header">
     <div class="left">
-      <div class="menu-item" v-tooltip="'去首页'" @click="goBack()">首页</div>
+      <div v-if="SalesEditor==0" class="menu-item" v-tooltip="'返回到首页'" @click="goBack(1)">返回</div>
+      <Popover v-if="SalesEditor>0"  trigger="click" placement="bottom-start" v-model:value="mainBackVisible">
+        <template #content>
+          <div class="menu-item" @click="goBack(1)">去选模版</div>
+          <div class="menu-item" @click="goBack(0)">返回到首页</div>
+        </template>
+        <div class="menu-item">
+          <el-icon color="#d14424"><ArrowLeftBold /></el-icon>
+        </div>
+        <!-- <div class="menu-item ArrowLeftBold"> </div> -->
+      </Popover>
       <Popover trigger="click" placement="bottom-start" v-model:value="mainMenuVisible">
         <template #content>
           <!-- <FileInput accept=".pptist"  @change="files => {
@@ -63,11 +73,11 @@
       <div class="menu-item" v-tooltip="'导出'" @click="setDialogForExport('image')">
         <IconDownload class="icon" />
       </div>
-      <el-button type="danger" 
-      v-if="(userInfo.IsEditTripTemplate==1&&model==1)||(ConfigId>0&&model!=2)"
+      <el-button type="primary" 
+      v-if="userInfo.IsEditTripTemplate==1||ConfigId>0||model==2"
       size="small" :loading="datas.loading"
       @click="setTemplate" style="color: #ffff;margin-left: 10px;">
-        <template v-if="userInfo.IsEditTripTemplate==1&&model==1">
+        <template v-if="(userInfo.IsEditTripTemplate==1&&model==1)||model==2">
          保存模板
         </template>
         <template v-if="(ConfigId>0&&model!=2)">
@@ -95,7 +105,7 @@ 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 { useMainStore, useSlidesStore, useSellTemplate } from '@/store'
 import useScreening from '@/hooks/useScreening'
 import useImport from '@/hooks/useImport'
 import useSlideHandler from '@/hooks/useSlideHandler'
@@ -129,12 +139,15 @@ const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
 const layoutsStore = useSlidesStore()
 const { title, slides, slideIndex, viewportRatio } = storeToRefs(slidesStore)
+const { SalesEditor } = storeToRefs(useSellTemplate())
+const SalesEditorStore = useSellTemplate()
 const { enterScreening, enterScreeningFromStart } = useScreening()
 const { importSpecificFile, importPPTXFile, exporting } = useImport()
 const { resetSlides } = useSlideHandler()
 
 const imageThumbnailsRef = ref<HTMLElement>()
 const mainMenuVisible = ref(false)
+const mainBackVisible = ref(false)
 const hotkeyDrawerVisible = ref(false)
 const editingTitle = ref(false)
 const titleInputRef = ref<InstanceType<typeof Input>>()
@@ -163,9 +176,9 @@ const thumbnails = ref<string[]>()
 
 const psdVisibleStatus = ref(false)
 const { market, model, ConfigId, CoverImg, dataLoading, TempId, SourceLoading } = storeToRefs(useScreenStore())
-
 // 返回到首页
-const goBack = () =>{
+const goBack = (type:any) =>{
+  mainBackVisible.value = false
   let list = [
     {
       id: 'test-slide-1',
@@ -177,12 +190,15 @@ const goBack = () =>{
       },
     }
   ]
-  if(model.value) {
-    searchData.value.TempId = 0
-    marketStore.setMarket(true)
-    slidesStore.setSlides(list)
-    layoutsStore.setLayouts([])
-    CoverImgStore.setCoverImg(null)
+  if((model.value&&model.value!=2)||!type) {
+    setTimeout(()=>{
+      searchData.value.TempId = 0
+      if(type) marketStore.setMarket(true)
+      if(!type) SalesEditorStore.setSalesEditor(0)
+      slidesStore.setSlides(list)
+      layoutsStore.setLayouts([])
+      CoverImgStore.setCoverImg(null)
+    },200)
     return
   }
   ElMessageBox.confirm(
@@ -195,7 +211,8 @@ const goBack = () =>{
     }
   ).then(() => {
     searchData.value.TempId = 0
-    marketStore.setMarket(true)
+    if(type) marketStore.setMarket(true)
+    if(!type) SalesEditorStore.setSalesEditor(0)
     slidesStore.setSlides(list)
     slidesStore.setThumbnails([])
     layoutsStore.setLayouts([])
@@ -208,6 +225,35 @@ const UploadPsdHandler = () => {
   psdVisibleStatus.value = true
 }
 
+// 销售新增修改模版
+const SetSellTemplate = async () => {
+  try {
+      let queryMsg = {
+        Id: searchData.value.sellId?searchData.value.sellId:0,
+        TempId: queryObj.value.TempId,
+        TempData: queryObj.value.TempData,
+        Title: queryObj.value.Title
+      }
+      let TemplateRes = await ConfigService.sellSetTemplate(queryMsg);
+      if (TemplateRes.data.resultCode == 1) {
+        ElMessage({
+          showClose: true,
+          message: '操作成功',
+          type: 'success',
+        })
+        SalesEditorStore.setSalesEditor(0)
+      }else{
+        ElMessage({
+          showClose: true,
+          message: '操作失败',
+          type: 'warning',
+        })
+      }
+    } catch (error) {}
+    datas.loading = false
+}
+
+
 // 新增修改模版
 const SetTripTemplateSlide = async () => {
   try {
@@ -401,8 +447,10 @@ const setTemplate = async () =>{
   queryObj.value.TempData = JSON.stringify(arr)
   if(model.value==1&&userInfo.value.IsEditTripTemplate==1){
     await SetTripTemplateSlide()
-  }else if(ConfigId.value){
+  }else if(ConfigId.value&&model.value!=2){
     await SetTripTemplateConfig()
+  }else if(model.value==2){
+    await SetSellTemplate()
   }
 }
 

src/views/Editor/Thumbnails/index.vue

@@ -135,13 +135,6 @@ watch(() => dataLoading.value, (n,o) =>{
   }
 })
 
-// 监听数据源是否更新
-watch(() => SourceLoading.value, (n,o) =>{
-  if(n){
-    
-  }
-})
-
 
 queryObj.value = inject(injectKeyDataSource).queryObj
 
@@ -343,7 +336,7 @@ const ResolveTripDaysHandler = (items)=>{
 
 // 获取行程模版数据
 const GetTripTemplate = async () =>{
-  if(!searchData.value.TempId&&!TempId.value) {
+  if(!searchData.value.TempId&&!TempId.value&&!searchData.value.sellTempId) {
     let list = [
       {
         id: 'test-slide-1',
@@ -360,8 +353,9 @@ const GetTripTemplate = async () =>{
   try {
       let queryMsg = {
         TempId: 0
-      }
+      } 
       if(searchData.value.TempId) queryMsg.TempId = searchData.value.TempId
+      else if(searchData.value.sellTempId) queryMsg.TempId = searchData.value.sellTempId
       else if(TempId.value) queryMsg.TempId = TempId.value
       let dataRes = await ConfigService.GetTripTemplateSlide(queryMsg);
       if (dataRes.data.resultCode == 1) {
@@ -406,15 +400,43 @@ const GetTripTemplate = async () =>{
         queryObj.value.TempType = dataRes.data.data.TempType
         slidesStore.updateSlideIndex(0)
         datas.DataSource.pageType = newSlides[0].pageType
+        if(searchData.value.sellId) sellGetTripTemplate()
         if(ConfigId.value==0) return 
         if(TempId.value&&!searchData.value.TempId) await GetTripConfig()
         await GetTripFiledData()
+      }else{
+        
       }
   } catch (error) {
       console.log("GetTripTemplateSlide", error);
   }
 }
 
+// 销售模版数据
+const sellGetTripTemplate = async () =>{
+  try {
+      let queryMsg = {
+        Id: searchData.value.sellId
+      }
+      let dataRes = await ConfigService.sellGetTemplateDetails(queryMsg);
+      if (dataRes.data.resultCode == 1) {
+        let dataObj = dataRes.data.data
+        queryObj.value.Title = dataRes.data.data.Title
+        if(!searchData.value.TempId){
+          let SlidesData = JSON.parse(dataObj.TempData)
+          let newSlides = []
+          await SlidesData.forEach((x,i)=>{
+            newSlides.push(x)
+          })
+          slidesStore.setSlides(newSlides)
+        }
+      }
+  } catch (error) {
+      
+  }
+}
+
+
 // 页面被切换时
 const thumbnailsRef = ref<InstanceType<typeof Draggable>>()
 
@@ -602,7 +624,7 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
   ]
 }
 
-GetTripTemplate()
+  GetTripTemplate()
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/index.vue

@@ -54,7 +54,7 @@ const elementTabs = computed<ElementTabs[]>(() => {
   ]
 })
 const slideTabs = ref([] as any)
-if(model.value){
+if(model.value&&model.value!=2){
   slideTabs.value = [
     { label: '设计', key: ToolbarStates.SLIDE_DESIGN },
     { label: '切换', key: ToolbarStates.SLIDE_ANIMATION },

src/views/Market/Index.vue

@@ -14,9 +14,15 @@
                 </el-col>
                 <el-col :span="6" style="text-align: right;">
                     <el-button v-if="userInfo.IsEditTripTemplate==1&&model==1" 
-                    v-tooltip="'添加模版'" type="danger" 
+                    v-tooltip="'添加模版'" type="primary" 
                     size="small" icon="Plus"
                     @click="addTemplate()" style="color: #ffff;"></el-button>
+                    <el-button v-if="SalesEditor>0" 
+                    v-tooltip="'返回到首页'" type="primary" 
+                    size="small"
+                    @click="CloseTemplate()" style="color: #ffff;">返回
+                        <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
+                    </el-button>
                 </el-col>
             </el-row>
             <div class="q-mt-lg bg-white rounded text-nowrap" style="padding: 20px 20px 0 20px;">
@@ -61,31 +67,47 @@
                                 class="text-small q-mr-md">通用</el-check-tag>
                             <div class="row items-center nowrap">
                                 <template v-for="(x,i) in colorArr" :key="i">
-                                    <div>
-                                        <span class="colorMark"
-                                        :style="{'background':x.ColorValue}"></span>
-                                    </div>
-                                    <el-check-tag :checked="queryObj.ColorName == x.ColorName" @change="onColorNameChangeHandler(x.ColorName)"
-                                    class="text-small q-mr-md q-ml-sm">{{x.ColorName}}</el-check-tag>
+                                    <el-tooltip
+                                        class="box-item"
+                                        effect="dark"
+                                        :content="x.ColorName"
+                                        placement="bottom"
+                                    >
+                                        <div class="text-small q-mr-md q-ml-sm pointer" @click="onColorNameChangeHandler(x.ColorName)">
+                                            <span class="colorMark"
+                                            :style="{'background':x.ColorValue,'border-color':x.ColorName==queryObj.ColorName?'black':'#eee'}"></span>
+                                        </div>
+                                    </el-tooltip>
                                 </template>
                             </div>
-                            <Popover trigger="click" placement="bottom-start" v-model:value="MenuColorVisible">
+                            <Popover v-if="colorArrOther.length>0" trigger="click" placement="bottom-start" v-model:value="MenuColorVisible">
                                 <template #content>
-                                    <div v-for="(x,i) in colorArrOther" :key="i"
-                                    class="row">
-                                        <div>
-                                            <span class="colorMark"
-                                            :style="{'background':x.ColorValue}"></span>
-                                        </div>
-                                        <el-check-tag :checked="queryObj.ColorName == x.ColorName" 
-                                        @change="onColorNameChangeHandler(x.ColorName,x.ColorValue)"
-                                        class="text-small q-mr-md q-ml-sm">{{x.ColorName}}</el-check-tag>
+                                    <div class="row wrap" style="max-width: 500px;max-height: 300px;overflow: auto;padding: 25px 0;">
+                                        <template v-for="(x,i) in colorArrOther" :key="i">
+                                            <div class="text-small pointer q-mr-md" 
+                                            @click="onColorNameChangeHandler(x.ColorName,x.ColorValue)">
+                                                <div class="colorMark reactive"
+                                                :style="{'background':x.ColorValue,'border-color':x.ColorName==queryObj.ColorName?'black':'#eee'}">
+                                                    <div class="absolute ColorNameBox">
+                                                        <span class="ColorName">{{x.ColorName}}</span>
+                                                        <span class="ColorNameBJ"></span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </template>
                                     </div>
                                 </template>
                                 <div class="row items-center">
-                                    <div>
-                                        <span class="colorMark"
-                                        :style="{'background':datas.ColorValue}"></span>
+                                    <div v-if="datas.ColorValue">
+                                        <el-tooltip
+                                        class="box-item"
+                                        effect="dark"
+                                        :content="queryObj.ColorName"
+                                        placement="bottom"
+                                    >
+                                    <span class="colorMark"
+                                        :style="{'background':datas.ColorValue,'border-color':queryObj.ColorName?'black':'#eee'}"></span>
+                                    </el-tooltip>
                                     </div>
                                     <el-check-tag :checked="datas.ColorValue!=''"
                                     class="text-small q-mr-md q-ml-sm">
@@ -156,7 +178,7 @@
     import LineService from '@/services/LineService'
     import ConfigService from '@/services/ConfigService'
     import { userStore } from "@/store/user";
-    import { useSlidesStore } from '@/store'
+    import { useSlidesStore,useSellTemplate } from '@/store'
     import { useScreenStore } from "@/store/screen";
     import { storeToRefs } from "pinia";
     import { injectKeyTemplate } from '@/types/injectKey'
@@ -206,12 +228,18 @@
     const layoutsStore = useSlidesStore()
     const TempIdStore = useScreenStore()
     const { screening, market, model, isModel, ConfigId, TempId} = storeToRefs(useScreenStore())
+    
+    const SalesEditorStore = useSellTemplate()
+    const { SalesEditor } = storeToRefs(useSellTemplate())
 
     const addTemplate = () =>{
         marketStore.setMarket(!market)
         searchData.value.TempId = 0
     }
 
+    const CloseTemplate = () => {
+        SalesEditorStore.setSalesEditor(0)
+    }
     // 删除模版
     const deleteTemplate = (item:any) => {
         ElMessageBox.confirm(
@@ -233,7 +261,7 @@
                 })
                 let dataRes = await ConfigService.SetDeleteTripTemplate(queryMsg)
                 if (dataRes.data.resultCode == 1) {
-                    queryObj.pageIndex == 1
+                    queryObj.pageIndex = 1
                     ElMessage({
                         showClose: true,
                         message: '删除模版成功',
@@ -275,7 +303,7 @@
         if(!ConfigId.value&&!model.value) return
         datas.DetailsVisible = false
         searchData.value.TempId = item.TempId
-        marketStore.setMarket(!market)
+        marketStore.setMarket(false)
         datas.TemplateRow = {}
         // console.log("item", item.TempId);
     }
@@ -357,8 +385,14 @@
                 }
                 //颜色
                 if (tempData && tempData.ColorList) {
-                    colorArrOther.value = tempData.ColorList.filter((x,index)=>{ return index>=3})
-                    colorArr.value = tempData.ColorList.filter((x,index)=>{ return index<3})
+                    let arrList = function(list){
+                        list.forEach(x => {
+                            x.Visible = false
+                        });
+                    }
+                    arrList(tempData.ColorList)
+                    colorArrOther.value = tempData.ColorList.filter((x,index)=>{ return index>=6})
+                    colorArr.value = tempData.ColorList.filter((x,index)=>{ return index<6})
                 }
                 //季节
                 if (tempData && tempData.SeasonList) {
@@ -400,11 +434,39 @@
             url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
         font-display: swap;
     }
+    .colorMark:hover .ColorNameBox {
+        display: block;
+    }
+    .ColorNameBox{
+        width: 100px;
+        display: none;
+        left: 0;
+        top: -30px;
+    }
+    .ColorName{
+        background: black;
+        color: #fff;
+        padding: 2px 10px;
+        border-radius: 3px;
+        margin-left: -10px;
+    }
+    .ColorNameBJ{
+        width: 0px;
+        height: 0px;
+        border: 5px solid transparent;
+        border-top-color: black;
+        display: block;
+        margin-left: 2px;
+    }
     .colorMark{
-        width: 5px;
-        height: 5px;
+        width: 25px;
+        height: 25px;
+        position: relative;
         display: inline-block;
         border-radius: 50%;
+        margin: 5px;
+        background: #fff;
+        border: 5px solid #eee;
     }
     .aliMarketfont {
         font-family: aliMarketfont;

src/views/SellTemplate/SellTemplate.vue

+<template>
+    <div ref="SellTemplateRef">
+        <el-row justify="space-between">
+            <el-col :span="4"></el-col>
+            <el-col :span="10">
+                <el-input v-model="queryObj.Title" placeholder="输入关键字快速查找" class="input-with-select">
+                    <template #append>
+                        <el-button type="primary" @click="querySearchHandler">搜索</el-button>
+                    </template>
+                </el-input>
+            </el-col>
+            <el-col :span="4"></el-col>
+        </el-row>
+        <div style="margin-top: 20px;">
+            <div v-if="dataList.length>0" class="column">
+                <div class="row flex-between nowrap sellHeader">
+                    <div>PDF名称</div>
+                    <div>创建人</div>
+                    <div>更新时间</div>
+                    <div>操作</div>
+                </div>
+                <div class="row flex-between nowrap sellList pointer" v-for="(item,index) in dataList">
+                    <div>
+                        <span class="iconfont icon-pdf sellPdf"></span>
+                        <span>{{item.Title}}</span>
+                    </div>
+                    <div>
+                        {{item.CreateByName}}
+                        <span class="sellCreateTime">{{item.CreateTime}}</span>
+                    </div>
+                    <div>{{item.UpdateTime}}</div>
+                    <div class="row flex-between">
+                        <el-tooltip
+                            class="box-item"
+                            effect="dark"
+                            content="编辑"
+                            placement="top">
+                            <el-button type="primary" icon="Edit" size="small" @click="editDelete(item,0)"></el-button>
+                        </el-tooltip> 
+                        <el-tooltip
+                            class="box-item"
+                            effect="dark"
+                            content="删除"
+                            placement="top">
+                            <el-button type="primary" icon="Delete" size="small" @click="editDelete(item,1)"></el-button>
+                        </el-tooltip>
+                    </div>
+                </div>
+            </div>
+            <div v-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded" 
+            style="padding: 30px 10px 30px 10px;">
+                <el-empty description="暂无数据" />
+            </div>
+            <el-divider class="no-bg q-mt-lg" v-if='queryObj.pageCount == queryObj.pageIndex && !loading'>
+                <span class="text-samll" style="background: #f3f6fb;padding: 0 10px;color:#a3a3a3">已加载完成所有数据</span>
+            </el-divider>
+            <div style="height:40px;" class="q-mt-md no-bg" background="transparent" v-loading="loading"  element-loading-text="正在加载中"></div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { ref, reactive, provide, watch, inject, onMounted } from 'vue'
+    import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
+
+    import { injectKeyTemplate } from '@/types/injectKey'
+    import { useSellTemplate, useScreenStore } from '@/store'
+    import ConfigService from '@/services/ConfigService'
+    import { query } from '@/utils/common'
+    
+
+    import navItem from '@/views/components/navs/index.vue'
+    const SalesEditorStore = useSellTemplate()
+    const marketStore = useScreenStore()
+    const searchData = ref({} as any)
+    searchData.value = inject(injectKeyTemplate)
+    const deleteLoading = ref<any>(null)
+    const queryObj = reactive({
+        Title: '',
+        pageIndex: 1,
+        pageSize: 20,
+        pageCount: 0, //总页数
+    })
+    searchData.value.sellId = 0
+    const dataList = ref([] as Array < any > );
+    const loading = ref(false as any)
+    const SellTemplateRef = ref<any>()
+    const datas = reactive({
+        SellDatas:{
+            activeId: 1,
+        }
+    })
+    const DeleteTemplate = async (Id:Number) => {
+        ElMessageBox.confirm(
+            '此操作将删除该模版，是否确定?',
+            '提示',
+            {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+            }
+        ).then(async () => {
+            try {
+                let queryMsg = {
+                    Id: Id
+                }
+                deleteLoading.value = ElLoading.service({
+                    lock:true,
+                    text:'正在处理'
+                })
+                let pageRes = await ConfigService.sellSetRemoveTemplate(queryMsg);
+                if (pageRes.data.resultCode == 1) {
+                    queryObj.pageIndex = 1
+                    ElMessage({
+                        showClose: true,
+                        message: '删除模版成功',
+                        type: 'success',
+                    })
+                    querySearchHandler()
+                }else {
+                    ElMessage({
+                        showClose: true,
+                        message: '删除模版失败',
+                        type: 'warning',
+                    }) 
+                }
+                deleteLoading.value.close()
+                deleteLoading.value = null
+            } catch (error) {}
+        }).catch(() => {})
+        
+    }
+    const editDelete = async (row:any,type:Number) => {
+        if(type==1){
+            DeleteTemplate(row.Id)
+        }else{
+            searchData.value.sellId = row.Id
+            searchData.value.sellTempId = row.TempId
+            SalesEditorStore.setSalesEditor(2)
+            marketStore.setMarket(false)
+        }
+    }
+    const querySearchHandler = async () => {
+        loading.value = true
+        try {
+            if(queryObj.pageIndex == 1) dataList.value =[]
+            let pageRes = await ConfigService.sellGetTripOtherPage(queryObj);
+            if (pageRes.data.resultCode == 1) {
+                dataList.value = dataList.value.concat(pageRes.data.data.pageData);
+                queryObj.pageCount = pageRes.data.data.pageCount;
+            }
+            loading.value = false
+        } catch (error) {
+            loading.value = false
+        }
+    }
+    const scrollingHandler = () =>{
+        if(SellTemplateRef.value && !loading.value){
+            let maxHeight = SellTemplateRef.value.scrollHeight - SellTemplateRef.value.offsetHeight
+            let scrollTop = SellTemplateRef.value.scrollTop
+            if(maxHeight - scrollTop==0 && queryObj.pageCount > queryObj.pageIndex) {
+                queryObj.pageIndex++
+                querySearchHandler()
+            }
+        }
+        
+    }
+    querySearchHandler()
+
+
+    onMounted(()=>{
+        SellTemplateRef.value.addEventListener("scroll", scrollingHandler);
+    })
+</script>
+
+<style lang="scss" scoped>
+    @import "//at.alicdn.com/t/font_635492_wcd7pw1105.css";
+    @import url('../../assets/styles/common.css');
+
+    @font-face {
+        font-family: "aliMarketfont";
+        font-weight: 400;
+        src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/285OveHVCHM7.woff2") format("woff2"),
+            url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
+        font-display: swap;
+    }
+    .sellPdf{
+        margin-right: 15px;
+        color: $themeHoverColor;
+    }
+    .sellHeader{
+        font-size: 14px;
+        padding: 10px 8px 10px 8px;
+        border-bottom: 1px solid #eee;
+    }
+    .sellList{
+        padding: 10px 8px;
+        font-size: 14px;
+    }
+    .sellList:hover{
+        background: #eee;
+    }
+    .sellHeader>div,.sellList>div{
+        flex: 1;
+        flex-shrink: 0;
+    }
+    .sellHeader>div:last-child,.sellList>div:last-child{
+        flex: 0 0 80px;
+    }
+    .sellCreateTime{
+        color: #a3a3a3;
+        font-size: 13px;
+    }
+</style>
\ No newline at end of file

src/views/SellTemplate/index.vue

+<template>
+    <div class="common-layout" style="background: #f3f6fb;height:100vh;overflow: auto;">
+        <div style="padding: 30px; max-width:1440px; margin:0 auto;height: 100%;">
+            <el-container class="SellTemplate-form bg-white">
+                <el-aside width="200px" style="background: #F5F5F5;">
+                  <sellNavs />
+                </el-aside>
+                <el-container>
+                  <el-main>
+                    <SellTemplate />
+                  </el-main>
+                </el-container>
+            </el-container>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { ref, reactive, provide, watch, inject } from 'vue'
+    import sellNavs from '@/views/components/sellNavs/index.vue'
+    import SellTemplate from './SellTemplate.vue'
+    const datas = reactive({
+        SellDatas:{
+            activeId: 1,
+        }
+    })
+    provide('SellDatas',datas.SellDatas)
+</script>
+
+<style lang="scss" scoped>
+    .SellTemplate-form{
+        height: 100%;
+        border-radius: 5px;
+    }
+    
+</style>
\ No newline at end of file

src/views/components/sellNavs/index.vue

+<template>
+    <div class="navs-form">
+        <el-button class="navs-Button" type="primary" @click="sellAdd(1)">
+            + 新建
+        </el-button>
+        <div class="q-mt-lg">
+            <div v-for="(item,index) in datas.navs" class="q-mb-md">
+                <el-button class="navs-Button" 
+                :icon="item.icon"
+                :type="datas.SellDatas==item.Id?'danger':'info'" text
+                @click="datas.SellDatas=item.Id">
+                    <span>{{item.Name}}</span>
+                </el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { reactive, ref, inject, watch, onMounted} from "vue";
+    import { storeToRefs } from 'pinia'
+    import { useSellTemplate,useScreenStore } from '@/store'
+
+    import { injectKeyTemplate } from '@/types/injectKey'
+
+    const searchData = ref({} as any)
+    searchData.value = inject(injectKeyTemplate)
+    const SalesEditorStore = useSellTemplate()
+    const marketStore = useScreenStore()
+    const { market } = storeToRefs(useScreenStore())
+
+    const datas = reactive({
+        SellDatas: {},
+        navs: [
+            // {Name:'最近',Id:1,icon:'Timer'},
+            // {Name:'星标',Id:2,icon:'Star'},
+        ]
+    })
+    datas.SellDatas = inject('SellDatas')
+    const sellAdd = () =>{
+        searchData.value.sellId = 0
+        searchData.value.sellTempId = 0
+        SalesEditorStore.setSalesEditor(1)
+        marketStore.setMarket(true)
+    }
+</script>
+
+<style lang="scss" scoped>
+    .navs-form{
+        padding: 15px;
+    }
+    .navs-Button{
+        width: 100%;
+    }
+    
+</style>
\ No newline at end of file