Skip to content

P
pptist
Commit 8b97b975 authored by zhengke's avatar zhengke
Browse files
Options

no message

parent b0b2e3cc
Hide whitespace changes
Inline Side-by-side
Showing with 413 additions and 42 deletions
src/main.ts
View file @ 8b97b975
......@@ -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/plugins/icon.ts
View file @ 8b97b975
......@@ -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 @ 8b97b975
......@@ -4,6 +4,20 @@ import Api,{ HttpResponse, Result } from './../utils/request';
* 配置相关方法
*/
class ConfigService{
/**
* 新增修改模版数据
*/
static async SetTripTemplateSlide(params : any):Promise<HttpResponse>{
return Api.Post("triptemplate_SetTripTemplate",params)
}
/**
* 根据TempId获取模版数据
*/
static async GetTripTemplateSlide(params : any):Promise<HttpResponse>{
return Api.Post("triptemplate_GetTripTemplate",params)
}
/**
* 获取绑定数据源列表
*/
......@@ -19,7 +33,6 @@ class ConfigService{
return Api.Post("triptemplate_GetTemplateConfigData",{})
}
/**
* 获取模板市场分页列表
*/
......
src/services/LineService.ts
View file @ 8b97b975
......@@ -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 @ 8b97b975
......@@ -59,7 +59,7 @@ export const useMainStore = defineStore('main', {
creatingElement: null, // 正在插入的元素信息，需要通过绘制插入的元素（文字、形状、线条）
creatingCustomShape: false, // 正在绘制任意多边形
availableFonts: SYS_FONTS, // 当前环境可用字体
toolbarState: ToolbarStates.SLIDE_DESIGN, // 右侧工具栏状态
toolbarState: ToolbarStates.EL_TEMPLATEDATA, // 右侧工具栏状态 设计SLIDE_DESIGN 模版数据EL_TEMPLATEDATA
clipingImageElementId: '', // 当前正在裁剪的图片ID
richTextAttrs: defaultRichTextAttrs, // 富文本状态
selectedTableCells: [], // 选中的表格单元格
......
src/types/toolbar.ts
View file @ 8b97b975
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 @ 8b97b975
......@@ -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,28 +49,21 @@
</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)=>{
......@@ -115,18 +107,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 @ 8b97b975
......@@ -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'
......@@ -104,6 +120,61 @@ 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(datas.DataSource.DataSourceList,'----保存接口',queryObj.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',
})
}
if(datas.DataSource.DataSourceList.length>0){
let obj = datas.DataSource.DataSourceList.find(x=>{
return !x.TemplateDataSource.Id||!x.TemplateDataSource
})
if(!obj){
return ElMessage({
showClose: true,
message: '请绑定数据源',
type: 'warning',
})
}
}
queryObj.value.TempData = JSON.stringify(datas.DataSource.DataSourceList)
return
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/Toolbar/ElementTemplateData.vue 0 → 100644
View file @ 8b97b975
<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-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>
<!-- <el-check-tag :checked="queryObj.LineId == x.LineID"
@change="onLineChangeHandler(x)"
class="text-small q-mr-md" v-for="x in lines" :key="x.LineID">{{x.LineName}}</el-check-tag> -->
</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 slidesStore = useSlidesStore()
const { slides, slideIndex } = storeToRefs(slidesStore)
const setCountryValue = () =>{
let obj = dispositionObj.value.ColorList.filter(x=>{
return x.ColorValue == queryObj.ColorStr
})
queryObj.value.ColorName = obj.ColorName
}
// 所有数据源
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 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 = Series.value.filter(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 @ 8b97b975
......@@ -100,15 +100,15 @@
<Button style="flex: 1;" @click="applyBackgroundAllSlide()">应用背景到全部</Button>
</div>
<div class="row">
<!-- <div class="row">
<Button style="flex: 1;" @click="AllDataSource()">数据源</Button>
</div>
</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 +118,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 +329,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)
......@@ -345,7 +356,6 @@ const {
} = useSlideTheme()
datas.DataSource = inject(injectKeyDataSource)
//提取字符串中的文字
const getHtmlPlainText = (html_str) => {
let re = new RegExp('<[^<>]+>', 'g')
......@@ -472,6 +482,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 @ 8b97b975
......@@ -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 @ 8b97b975
......@@ -30,7 +30,7 @@
</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'
......@@ -60,8 +60,56 @@ const datas = reactive({
jd:[],//酒店
jq:[],//景区
cs:[],//餐食
queryObj:{
TempId: 0,//编号(新增传0) 是 [int]
LineId: null,//线路Id 是 [int]
LtId: null,//系列Id 是 [int]
Title: '',//名称 是 [string]
TempData: null,//模板数据 是 [json]
CoverImg: '',//封面图 是 [string]
CountryName: null,//国家 是 [string]
SeasonName: '',//季节 是 [string]
ColorName: '',//颜色名称 是 [string]
ColorStr: null,//颜色值 是 [string]
LineName: '',//线路名称 是 [string]
TempType: 1,// 版面类型(1-横版，2-竖版)
}
},
})
const queryObj = reactive({
TempId: 0,
})
const slidesStore = useSlidesStore()
const { slides, slideIndex } = storeToRefs(slidesStore)
// 获取行程模版数据
const GetTripTemplate = async () =>{
try {
let queryObj = {
TempId: datas.DataSource.queryObj.TempId
}
let TemplateRes = await ConfigService.GetTripTemplateSlide(queryObj);
if (TemplateRes.data.resultCode == 1) {
datas.DataSource.TemplateDataSource = TemplateRes.data.data
datas.DataSource.jc = datas.DataSource.TemplateDataSource.filter(x => {
return x.FiledType==1
})
datas.DataSource.jd = datas.DataSource.TemplateDataSource.filter(x => {
return x.FiledType==2
})
datas.DataSource.jq = datas.DataSource.TemplateDataSource.filter(x => {
return x.FiledType==3
})
datas.DataSource.cs = datas.DataSource.TemplateDataSource.filter(x => {
return x.FiledType==4
})
}
} catch (error) {
console.log("TemplateGetTripFiled", error);
}
}
// 数据源
const GetTripFiled = async () =>{
......
src/views/Market/Index.vue
View file @ 8b97b975
......@@ -78,7 +78,7 @@
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 > ); //季节
......
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