Skip to content

P
pptist
Commit 0803642f authored by 黄奎's avatar 黄奎
Browse files
Options

111

parents a39d3e6d 4da597c1
Hide whitespace changes
Inline Side-by-side
Showing with 552 additions and 198 deletions
src/App.vue
View file @ 0803642f
<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
View file @ 0803642f
......@@ -120,6 +120,7 @@ export default () => {
id: nanoid(10),
elements: [],
background,
pageType: 1
}
const parseElements = (elements: Element[]) => {
......
src/hooks/useSlideHandler.ts
View file @ 0803642f
......@@ -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
View file @ 0803642f
......@@ -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
View file @ 0803642f
......@@ -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
View file @ 0803642f
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
View file @ 0803642f
......@@ -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
View file @ 0803642f
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
View file @ 0803642f
......@@ -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
View file @ 0803642f
......@@ -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
View file @ 0803642f
......@@ -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()
\ No newline at end of file
export const injectKeyDataSource: InjectionKey<SlideDataSource> = Symbol()
export const injectKeyTemplate: InjectionKey<SlideDataSource> = Symbol()
\ No newline at end of file
src/types/slides.ts
View file @ 0803642f
......@@ -676,6 +676,7 @@ export interface Slide {
background?: SlideBackground
animations?: PPTAnimation[]
turningMode?: TurningMode
pageType: number
}
/**
......
src/types/toolbar.ts
View file @ 0803642f
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
View file @ 0803642f
......@@ -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
View file @ 0803642f
......@@ -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
View file @ 0803642f
......@@ -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 0 → 100644
View file @ 0803642f
<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
View file @ 0803642f
......@@ -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
View file @ 0803642f
......@@ -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
View file @ 0803642f
......@@ -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
View file @ 0803642f
......@@ -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);
}
/***
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment