|
@@ -1,11 +1,15 @@
|
|
<template>
|
|
<template>
|
|
<div class="page-wrap">
|
|
<div class="page-wrap">
|
|
<div class="index-wrap ppt-page-wrap flex-column">
|
|
<div class="index-wrap ppt-page-wrap flex-column">
|
|
- <div class="cover-wrap" @click="openChooseCover">
|
|
|
|
- <div class="cover" :style="`background: no-repeat center/cover url(${firstPage.BackgroundImg||''});background-color:#F2F6FA;background-size:100% 100%;`">
|
|
|
|
|
|
+ <div class="cover-wrap">
|
|
|
|
+ <div class="flex-align">
|
|
|
|
+ <p class="hint-text" @click="openSelectImage(2,firstPage.CurrentBackgroundImgId,firstPage.CurrentBackgroundImg)">{{$t('Slides.select_ground_page')}}</p>
|
|
|
|
+ <p class="hint-text" style="margin-left:37px" @click="openSelectImage(3,firstPage.BackCoverImgId,firstPage.BackCoverImg)">{{$t('Slides.select_back_page')}}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="flex-align" style="margin:8px 0"><p class="hint-text" @click="openChooseCover">{{$t('Slides.select_cover_page')}}</p></div>
|
|
|
|
+ <div class="cover" @click="openChooseCover" :style="`background: no-repeat center/cover url(${firstPage.BackgroundImg||''});background-color:#F2F6FA;background-size:100% 100%;`">
|
|
<img src="~@/assets/img/ppt_m/add_first.png" />
|
|
<img src="~@/assets/img/ppt_m/add_first.png" />
|
|
</div>
|
|
</div>
|
|
- <p class="hint-text">{{$t('Slides.select_cover_page')}}</p>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="hint-box"><div class="hint" @click="showHint"><span class="el-icon-info" style="margin-right:5px;"></span>{{$t('Slides.operating_instructions')}}</div></div>
|
|
<div class="hint-box"><div class="hint" @click="showHint"><span class="el-icon-info" style="margin-right:5px;"></span>{{$t('Slides.operating_instructions')}}</div></div>
|
|
<div style="display:flex;justify-content: space-between;">
|
|
<div style="display:flex;justify-content: space-between;">
|
|
@@ -160,10 +164,11 @@
|
|
type="primary" @click="handlePublish">{{ result.ReportSource===1?'去发布':'去提交' }}</el-button>
|
|
type="primary" @click="handlePublish">{{ result.ReportSource===1?'去发布':'去提交' }}</el-button>
|
|
<el-button @click="handleSave('save')">{{$t('Slides.operations_save')}}</el-button>
|
|
<el-button @click="handleSave('save')">{{$t('Slides.operations_save')}}</el-button>
|
|
<el-button type="text" @click="handleChangeEditModal"><i class="el-icon-sort" style="transform: rotate(90deg);margin-right:5px;"></i>{{isEditLayer? $t('Slides.ppt_edit_btn'):$t('Slides.layer_editing')}}</el-button>
|
|
<el-button type="text" @click="handleChangeEditModal"><i class="el-icon-sort" style="transform: rotate(90deg);margin-right:5px;"></i>{{isEditLayer? $t('Slides.ppt_edit_btn'):$t('Slides.layer_editing')}}</el-button>
|
|
|
|
+ <el-button type="text" v-permission="permissionBtn.pptPermission.ppt_history" @click="handleVersionHistory"><i class="el-icon-time" style="margin-right:5px;"></i>{{$t('Slides.version_history')}}</el-button>
|
|
</div>
|
|
</div>
|
|
- <div class="richtext-tool"></div>
|
|
|
|
|
|
+ <div class="richtext-tool" v-if="!isVersionHistory"></div>
|
|
<!-- 防止el-tabs未渲染时触发scrollToActiveTab 报错,v-if改为v-show-->
|
|
<!-- 防止el-tabs未渲染时触发scrollToActiveTab 报错,v-if改为v-show-->
|
|
- <div class="addppt-right-box" v-show="!isEditLayer&&!isEditTitle">
|
|
|
|
|
|
+ <div class="addppt-right-box" v-show="!isEditLayer&&!isEditTitle && !isVersionHistory">
|
|
<el-tabs v-model="tabsactive">
|
|
<el-tabs v-model="tabsactive">
|
|
<el-tab-pane :label="tab.label" :name="tab.val" v-for="tab in panelTabs" :key="tab.val"></el-tab-pane>
|
|
<el-tab-pane :label="tab.label" :name="tab.val" v-for="tab in panelTabs" :key="tab.val"></el-tab-pane>
|
|
</el-tabs>
|
|
</el-tabs>
|
|
@@ -229,7 +234,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 图层编辑 -->
|
|
<!-- 图层编辑 -->
|
|
- <div class="layer-edit-box" v-if="isEditLayer">
|
|
|
|
|
|
+ <div class="layer-edit-box" v-if="isEditLayer && !isVersionHistory">
|
|
<el-collapse v-model="activeNames" class="tool-list">
|
|
<el-collapse v-model="activeNames" class="tool-list">
|
|
<el-collapse-item :title="$t('Slides.layer_element')" name="el">
|
|
<el-collapse-item :title="$t('Slides.layer_element')" name="el">
|
|
<div class="el-wrap">
|
|
<div class="el-wrap">
|
|
@@ -278,11 +283,17 @@
|
|
@textChange="handleTextChange"
|
|
@textChange="handleTextChange"
|
|
@applyToAll="changeSettingAll"/>
|
|
@applyToAll="changeSettingAll"/>
|
|
</div>
|
|
</div>
|
|
|
|
+ <!-- 历史记录编辑 -->
|
|
|
|
+ <div class="history-edit-box" v-if="isVersionHistory">
|
|
|
|
+ <VersionRecord ref="version" :PptId="PptId" @handleRestore="handleRestore"/>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 选择封面弹窗 -->
|
|
<!-- 选择封面弹窗 -->
|
|
- <ChooseCoverNew
|
|
|
|
|
|
+ <ChooseCoverNew
|
|
|
|
+ ref="ChooseCoverNewRef"
|
|
|
|
+ v-if="isShowChooseCover"
|
|
:isShowChooseCover="isShowChooseCover"
|
|
:isShowChooseCover="isShowChooseCover"
|
|
:firstPage="firstPage"
|
|
:firstPage="firstPage"
|
|
:pptCoverList="pptCoverList"
|
|
:pptCoverList="pptCoverList"
|
|
@@ -290,6 +301,7 @@
|
|
:CoverContent="CoverContent"
|
|
:CoverContent="CoverContent"
|
|
@saveCover="saveCover2"
|
|
@saveCover="saveCover2"
|
|
@close="isShowChooseCover=false"
|
|
@close="isShowChooseCover=false"
|
|
|
|
+ @chooseMoreCover="coverChooseImage()"
|
|
/>
|
|
/>
|
|
<!-- 批量删除弹窗 -->
|
|
<!-- 批量删除弹窗 -->
|
|
<delete-page-dialog
|
|
<delete-page-dialog
|
|
@@ -321,6 +333,7 @@
|
|
@cancel="addMyChartShow = false"
|
|
@cancel="addMyChartShow = false"
|
|
@addSuccess="addChartToGallery"
|
|
@addSuccess="addChartToGallery"
|
|
/>
|
|
/>
|
|
|
|
+ <selectImage @saveChoose='saveChooseImage' ref="selectImageRef"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -347,6 +360,7 @@ import {pptInterface} from '@/api/api.js';
|
|
import * as sheetInterface from '@/api/modules/sheetApi.js';
|
|
import * as sheetInterface from '@/api/modules/sheetApi.js';
|
|
import ShapePreview from './components/layer/shapePreview.vue';
|
|
import ShapePreview from './components/layer/shapePreview.vue';
|
|
import LayerEditTool from './components/layer/layerEditTool.vue';
|
|
import LayerEditTool from './components/layer/layerEditTool.vue';
|
|
|
|
+import VersionRecord from './components/layer/VersionRecord.vue';
|
|
import DeletePageDialog from './components/editor/DeletePageDialog.vue';
|
|
import DeletePageDialog from './components/editor/DeletePageDialog.vue';
|
|
import ChangeFormatDialog from './components/editor/ChangeFormatDialog.vue';
|
|
import ChangeFormatDialog from './components/editor/ChangeFormatDialog.vue';
|
|
import InsertPageDialog from './components/editor/InsertPageDialog.vue';
|
|
import InsertPageDialog from './components/editor/InsertPageDialog.vue';
|
|
@@ -356,6 +370,8 @@ import ContextMenu from './components/ContextMenu.vue';
|
|
import InsertSemantics from './components/editor/InsertSemantics.vue';
|
|
import InsertSemantics from './components/editor/InsertSemantics.vue';
|
|
import ChooseCoverNew from './components/editor/ChooseCoverNew.vue';
|
|
import ChooseCoverNew from './components/editor/ChooseCoverNew.vue';
|
|
import TitleEditorTool from './components/editor/TitleEditorTool';
|
|
import TitleEditorTool from './components/editor/TitleEditorTool';
|
|
|
|
+import selectImage from './components/selectImage.vue';
|
|
|
|
+import { apiSmartReport } from '@/api/modules/smartReport'
|
|
export default {
|
|
export default {
|
|
mixins:[pptmixin,//ppt页面共同逻辑
|
|
mixins:[pptmixin,//ppt页面共同逻辑
|
|
mixins,//图表加载逻辑
|
|
mixins,//图表加载逻辑
|
|
@@ -365,7 +381,7 @@ export default {
|
|
components: {
|
|
components: {
|
|
IndexItem, ChooseCover, AddFormat, ShapePreview,
|
|
IndexItem, ChooseCover, AddFormat, ShapePreview,
|
|
LayerEditTool, DeletePageDialog, ChangeFormatDialog, InsertPageDialog, addMyClassifyDia, InsertCharts, ContextMenu, InsertSemantics,
|
|
LayerEditTool, DeletePageDialog, ChangeFormatDialog, InsertPageDialog, addMyClassifyDia, InsertCharts, ContextMenu, InsertSemantics,
|
|
- ChooseCoverNew,TitleEditorTool
|
|
|
|
|
|
+ ChooseCoverNew, TitleEditorTool,selectImage, VersionRecord
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
@@ -423,7 +439,8 @@ export default {
|
|
search_have_more: true,
|
|
search_have_more: true,
|
|
|
|
|
|
chart_source: 1,//图表来源 1 eta 2 商品价格
|
|
chart_source: 1,//图表来源 1 eta 2 商品价格
|
|
- isShowMe: false
|
|
|
|
|
|
+ isShowMe: false,
|
|
|
|
+ isVersionHistory: false,//是否显示版本历史
|
|
};
|
|
};
|
|
},
|
|
},
|
|
computed:{
|
|
computed:{
|
|
@@ -508,7 +525,7 @@ export default {
|
|
i.isUpdating = false
|
|
i.isUpdating = false
|
|
})
|
|
})
|
|
this.dataLoading.close();
|
|
this.dataLoading.close();
|
|
- $('.ppt-item').css('background-image',`url(${this.pptBgImage})`);
|
|
|
|
|
|
+ // $('.ppt-item').css('background-image',`url(${this.pptBgImage})`);
|
|
//开启自动保存
|
|
//开启自动保存
|
|
this.autoSave()
|
|
this.autoSave()
|
|
},
|
|
},
|
|
@@ -526,6 +543,9 @@ export default {
|
|
this.ReportId=ReportId
|
|
this.ReportId=ReportId
|
|
this.CoverContent = this.result.CoverContent
|
|
this.CoverContent = this.result.CoverContent
|
|
this.titleSetting = TitleSetting||null
|
|
this.titleSetting = TitleSetting||null
|
|
|
|
+ if(this.firstPage.CurrentBackgroundImg){
|
|
|
|
+ $('.ppt-item').css('background-image',`url(${this.firstPage.CurrentBackgroundImg})`);
|
|
|
|
+ }
|
|
/* //开启自动保存
|
|
/* //开启自动保存
|
|
this.autoSave() */
|
|
this.autoSave() */
|
|
}else{
|
|
}else{
|
|
@@ -539,9 +559,58 @@ export default {
|
|
}
|
|
}
|
|
this.currentIndex = 0
|
|
this.currentIndex = 0
|
|
},
|
|
},
|
|
|
|
+ // 选择图片保存
|
|
|
|
+ saveChooseImage(item){
|
|
|
|
+ console.log(item)
|
|
|
|
+ const key={
|
|
|
|
+ 1:'BackgroundImg',
|
|
|
|
+ 2:'CurrentBackgroundImg',
|
|
|
|
+ 3:'BackCoverImg'
|
|
|
|
+ }
|
|
|
|
+ const idKey={
|
|
|
|
+ 1:'BackgroundImgId',
|
|
|
|
+ 2:'CurrentBackgroundImgId',
|
|
|
|
+ 3:'BackCoverImgId'
|
|
|
|
+ }
|
|
|
|
+ if(item.type==1){
|
|
|
|
+ const searchIndex = this.pptCoverList.findIndex(i=>i.Url===item.url)
|
|
|
|
+ //如果基本配置-封面图,没有当前ppt的封面图,则默认第一个
|
|
|
|
+ if(searchIndex>-1){
|
|
|
|
+ this.$refs.ChooseCoverNewRef.pageData.BackgroundImg = item.url
|
|
|
|
+ this.$refs.ChooseCoverNewRef.pageData.BackgroundImgId = item.id
|
|
|
|
+ this.$refs.ChooseCoverNewRef.choosedIndex=searchIndex
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ this.$set(this.firstPage,key[item.type],item.url)
|
|
|
|
+ this.$set(this.firstPage,idKey[item.type],item.id)
|
|
|
|
+ if(item.type==2){
|
|
|
|
+ $('.ppt-item').css('background-image',`url(${item.url})`);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 选择封面弹框选择更多模板
|
|
|
|
+ coverChooseImage(){
|
|
|
|
+ this.openSelectImage(1,this.$refs.ChooseCoverNewRef.pageData.BackgroundImgId,this.$refs.ChooseCoverNewRef.pageData.BackgroundImg)
|
|
|
|
+ },
|
|
|
|
+ // 打开选择背景图、封底图、封面图
|
|
|
|
+ openSelectImage(type,id,url){
|
|
|
|
+ this.$refs.selectImageRef.showHandle(type,id,url)
|
|
|
|
+ },
|
|
//打开选择封面页弹窗
|
|
//打开选择封面页弹窗
|
|
openChooseCover(){
|
|
openChooseCover(){
|
|
- this.isShowChooseCover = true
|
|
|
|
|
|
+ apiSmartReport.pptMaterialList({
|
|
|
|
+ CurrentIndex: 1,
|
|
|
|
+ PageSize: 1000,
|
|
|
|
+ ImageType: 1,
|
|
|
|
+ ImageName: '',
|
|
|
|
+ ConfType: 1
|
|
|
|
+ }).then(res => {
|
|
|
|
+ this.pptCoverList=res.Data ? res.Data.List : []
|
|
|
|
+ this.isShowChooseCover = true
|
|
|
|
+ this.$nextTick(()=>{
|
|
|
|
+ this.$refs.ChooseCoverNewRef.showDialog()
|
|
|
|
+ })
|
|
|
|
+ })
|
|
},
|
|
},
|
|
//关闭选择封面页弹窗
|
|
//关闭选择封面页弹窗
|
|
closeChooseCover(){
|
|
closeChooseCover(){
|
|
@@ -778,10 +847,12 @@ export default {
|
|
this.activeLayerEl = {}
|
|
this.activeLayerEl = {}
|
|
|
|
|
|
this.isEditTitle = false
|
|
this.isEditTitle = false
|
|
|
|
+ this.isVersionHistory = false
|
|
}
|
|
}
|
|
//点击当前页时,退出标题编辑模式
|
|
//点击当前页时,退出标题编辑模式
|
|
if(this.currentItem&&this.currentItem.id===id){
|
|
if(this.currentItem&&this.currentItem.id===id){
|
|
this.isEditTitle = false
|
|
this.isEditTitle = false
|
|
|
|
+ this.isVersionHistory = false
|
|
return
|
|
return
|
|
}
|
|
}
|
|
this.pageList.map((item,index)=>{
|
|
this.pageList.map((item,index)=>{
|
|
@@ -1032,6 +1103,28 @@ export default {
|
|
el.push(temp);
|
|
el.push(temp);
|
|
return el;
|
|
return el;
|
|
},
|
|
},
|
|
|
|
+ // 版本记录列表
|
|
|
|
+ handleVersionHistory(item) {
|
|
|
|
+ this.isEditLayer = false
|
|
|
|
+ this.isVersionHistory = true;
|
|
|
|
+ },
|
|
|
|
+ //
|
|
|
|
+ handleRestore(Id) {
|
|
|
|
+ this.$confirm('确认将报告恢复到该版本吗?', '提示', {
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ type: 'warning'
|
|
|
|
+ }).then(() => {
|
|
|
|
+ this.reportHistoryRevert(Id)
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ async reportHistoryRevert(Id) {
|
|
|
|
+ let res = await pptInterface.getPptHistoryRevert({Id});
|
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
|
+ this.$message.success('恢复成功!');
|
|
|
|
+ this.init()
|
|
|
|
+ },
|
|
//更新ppt页元素(数据)
|
|
//更新ppt页元素(数据)
|
|
refleshElements(els){
|
|
refleshElements(els){
|
|
this.currentItem.elements = els;
|
|
this.currentItem.elements = els;
|
|
@@ -1052,15 +1145,18 @@ export default {
|
|
return checkResult
|
|
return checkResult
|
|
}
|
|
}
|
|
let Content = JSON.stringify(this.pageList)
|
|
let Content = JSON.stringify(this.pageList)
|
|
- const {Title,ReportType,PptDate,BackgroundImg,BackIndex} = this.firstPage
|
|
|
|
|
|
+ const {Title,ReportType,PptDate,BackgroundImg,BackIndex,CurrentBackgroundImg,BackCoverImg, BackCoverImgId,BackgroundImgId,CurrentBackgroundImgId} = this.firstPage
|
|
const FirstPage = {
|
|
const FirstPage = {
|
|
- Title,ReportType,PptDate,BackIndex,
|
|
|
|
|
|
+ Title,ReportType,PptDate,BackIndex,BackCoverImg,CurrentBackgroundImg,BackCoverImgId,BackgroundImgId,CurrentBackgroundImgId,
|
|
ImgUrl:BackgroundImg,
|
|
ImgUrl:BackgroundImg,
|
|
TemplateType:BackIndex+1
|
|
TemplateType:BackIndex+1
|
|
}
|
|
}
|
|
this.isSaved = true
|
|
this.isSaved = true
|
|
if(this.$route.query.id||this.pptId){
|
|
if(this.$route.query.id||this.pptId){
|
|
await this.editPPT(FirstPage,Content,type)
|
|
await this.editPPT(FirstPage,Content,type)
|
|
|
|
+ if (this.isVersionHistory) {
|
|
|
|
+ this.$refs.version.handleChangeIsOnlyMine() // 刷新版本列表
|
|
|
|
+ }
|
|
}else{
|
|
}else{
|
|
// await this.addPPT(FirstPage,Content)
|
|
// await this.addPPT(FirstPage,Content)
|
|
}
|
|
}
|
|
@@ -1113,9 +1209,9 @@ export default {
|
|
//如果当前在刷新图表,则不进行自动保存
|
|
//如果当前在刷新图表,则不进行自动保存
|
|
if(this.refreshBtnLoading) return
|
|
if(this.refreshBtnLoading) return
|
|
const ppt_id = this.$route.query.id||this.pptId
|
|
const ppt_id = this.$route.query.id||this.pptId
|
|
- const {Title,ReportType,PptDate,BackgroundImg,BackIndex} = this.firstPage
|
|
|
|
|
|
+ const {Title,ReportType,PptDate,BackgroundImg,BackIndex,CurrentBackgroundImg,BackCoverImg,BackCoverImgId,BackgroundImgId,CurrentBackgroundImgId} = this.firstPage
|
|
const FirstPage = {
|
|
const FirstPage = {
|
|
- Title,ReportType,PptDate,BackIndex,
|
|
|
|
|
|
+ Title,ReportType,PptDate,BackIndex,CurrentBackgroundImg,BackCoverImg,CurrentBackgroundImg,BackCoverImgId,BackgroundImgId,CurrentBackgroundImgId,
|
|
ImgUrl:BackgroundImg,
|
|
ImgUrl:BackgroundImg,
|
|
TemplateType:BackIndex+1
|
|
TemplateType:BackIndex+1
|
|
}
|
|
}
|
|
@@ -1324,7 +1420,7 @@ export default {
|
|
},
|
|
},
|
|
updated(){
|
|
updated(){
|
|
$('.ppt-item').css('height',$('.ppt-item').width()*0.7);
|
|
$('.ppt-item').css('height',$('.ppt-item').width()*0.7);
|
|
- $('.ppt-item').css('background-image',`url(${this.pptBgImage})`);
|
|
|
|
|
|
+ $('.ppt-item').css('background-image',`url(${this.firstPage.CurrentBackgroundImg})`);
|
|
window.onresize = ()=>{
|
|
window.onresize = ()=>{
|
|
$('.ppt-item').css('height',$('.ppt-item').width()*0.7);
|
|
$('.ppt-item').css('height',$('.ppt-item').width()*0.7);
|
|
}
|
|
}
|
|
@@ -1432,7 +1528,7 @@ $titleColor:#333333;
|
|
.ppt-item {
|
|
.ppt-item {
|
|
//padding 两边 40 减掉边框两边 8 max-width:100% - 32px
|
|
//padding 两边 40 减掉边框两边 8 max-width:100% - 32px
|
|
width:calc(100% - 64px);
|
|
width:calc(100% - 64px);
|
|
- background: url('~@/assets/img/pptnextimg.png') no-repeat top;
|
|
|
|
|
|
+ background: transparent;
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
/* margin-bottom: 30px; */
|
|
/* margin-bottom: 30px; */
|
|
position: relative;
|
|
position: relative;
|
|
@@ -1610,5 +1706,9 @@ $titleColor:#333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .flex-align{
|
|
|
|
+ display:flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|