|
|
@@ -1,8 +1,10 @@
|
|
|
<script setup>
|
|
|
-import { nextTick, reactive, ref,toRefs } from 'vue'
|
|
|
+import { nextTick, reactive, ref,toRefs, watch,onMounted,onUnmounted } from 'vue'
|
|
|
+import { V3ColorPicker } from "v3-color-picker-teleport"
|
|
|
import ReportInsertContent from '../components/reportInsert/Index.vue'
|
|
|
// import ReportPublishTimeSet from './components/ReportPublishTimeSet.vue'
|
|
|
import apiReport from '@/api/report'
|
|
|
+import _ from 'lodash'
|
|
|
import {getSystemInfo} from '@/api/common'
|
|
|
import moment from 'moment'
|
|
|
import { showToast,showDialog } from 'vant'
|
|
|
@@ -15,10 +17,13 @@ import {Base64} from 'js-base64'
|
|
|
import AddReportBaseInfoV2 from '../components/AddReportBaseInfoV2.vue'
|
|
|
import { useReportHandles } from '../hooks/useReport'
|
|
|
import draggable from 'vuedraggable'
|
|
|
+import TextEditor from './components/TextEditor.vue'
|
|
|
+import ImgEditor from './components/ImgEditor.vue'
|
|
|
import TextComp from './components/TextComp.vue'
|
|
|
import ChartComp from './components/ChartComp.vue'
|
|
|
import ImgComp from './components/ImgComp.vue'
|
|
|
import SheetComp from './components/SheetComp.vue'
|
|
|
+import ReportLayoutImg from './components/ReportLayoutImg.vue'
|
|
|
|
|
|
|
|
|
const cachedViewsStore=useCachedViewsStore()
|
|
|
@@ -30,6 +35,7 @@ const {checkAuthBtn} = useAuthBtn()
|
|
|
|
|
|
// 获取报告详情
|
|
|
const reportInfo=ref(null)
|
|
|
+const reportCoopType = ref(Number(route.query.coopType))
|
|
|
const contentChange = ref(false)//内容是否发生变化
|
|
|
const smartState = reactive({
|
|
|
conList: [],//内容列表
|
|
|
@@ -113,6 +119,18 @@ async function getReportDetail(){
|
|
|
}
|
|
|
getReportDetail()
|
|
|
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => smartState.conList,
|
|
|
+ () => {
|
|
|
+ contentChange.value = true;
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+
|
|
|
/* map类型对应组件 */
|
|
|
function getComponentName(item){
|
|
|
const temMap=new Map([
|
|
|
@@ -154,7 +172,7 @@ function handleResizeP(e,index){
|
|
|
}
|
|
|
document.onmouseup=(el)=>{
|
|
|
console.log(targetBox.style.cssText);
|
|
|
- conList.value[index].style = targetBox.style.cssText
|
|
|
+ smartState.conList[index].style = targetBox.style.cssText
|
|
|
el.preventDefault()
|
|
|
document.onmousemove=null
|
|
|
setTimeout(() => {
|
|
|
@@ -165,7 +183,7 @@ function handleResizeP(e,index){
|
|
|
}
|
|
|
// 内部元素的缩放
|
|
|
function handleResizeC(e,index,cindex,type){
|
|
|
- this.isDragResize=true
|
|
|
+ isDragResize.value=true
|
|
|
e.preventDefault()
|
|
|
const parentBox=e.target.parentNode.parentNode
|
|
|
const parentBoxWidth=parentBox.offsetWidth
|
|
|
@@ -209,34 +227,185 @@ function handleResizeC(e,index,cindex,type){
|
|
|
})
|
|
|
// 存储修改的值
|
|
|
parentBox.childNodes.forEach((item,idx)=>{
|
|
|
- this.$set(this.conList[index].child[idx],'style',item.style.cssText)
|
|
|
+ smartState.conList[index].child[idx].style = item.style.cssText
|
|
|
})
|
|
|
}
|
|
|
el.preventDefault()
|
|
|
document.onmousemove=null
|
|
|
setTimeout(() => {
|
|
|
- this.isDragResize=false
|
|
|
+ isDragResize.value=false
|
|
|
document.onmouseup=null
|
|
|
}, 50);
|
|
|
}
|
|
|
}
|
|
|
+//新增内部元素
|
|
|
+function handleChildAdd(e,parent,parentIndex){
|
|
|
+ console.log('child-onAdd操作------------------->');
|
|
|
+
|
|
|
+ const {item,newDraggableIndex}=e
|
|
|
+
|
|
|
+ const compData=JSON.parse(item.getAttribute('comp-data'))
|
|
|
+
|
|
|
+ console.log(compData,newDraggableIndex);
|
|
|
+
|
|
|
+ const index=parentIndex
|
|
|
+ // if(index>-1){
|
|
|
+ let obj=_.cloneDeep(smartState.conList[index])
|
|
|
+
|
|
|
+ console.log(obj);
|
|
|
+
|
|
|
+ if(obj.child&&obj.child.length===1&&obj.id){
|
|
|
+ if(compData){
|
|
|
+ obj={
|
|
|
+ child:[
|
|
|
+ {
|
|
|
+ compId:obj.compId,
|
|
|
+ compType:obj.compType,
|
|
|
+ id:obj.id,
|
|
|
+ content:obj.content,
|
|
|
+ style:obj.compType==='chart'?'height:350px':'',
|
|
|
+ child:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ compId:compData.compId,
|
|
|
+ compType:compData.compType,
|
|
|
+ content:compData.content||'',
|
|
|
+ id:getCompId(compData.compType),
|
|
|
+ style:compData.compType==='chart'?'height:350px':'',
|
|
|
+ child:[]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }else{//是内容区域拖动排序的
|
|
|
+ const temItem=_.cloneDeep(obj.child[0])
|
|
|
+ if(temItem.child.length>0){//如果拖动的盒子里面有子元素则不能进入
|
|
|
+ obj={
|
|
|
+ ...obj,
|
|
|
+ child:[]
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ smartState.conList.splice(index,0,temItem)
|
|
|
+ }, 50);
|
|
|
+ }else{
|
|
|
+ obj={
|
|
|
+ child:[
|
|
|
+ {
|
|
|
+ compId:obj.compId,
|
|
|
+ compType:obj.compType,
|
|
|
+ id:obj.id,
|
|
|
+ content:obj.content,
|
|
|
+ style:obj.compType==='chart'?'height:350px':'',
|
|
|
+ child:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ...temItem
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ if(compData){//如果是从内容区域拖入的没有compData
|
|
|
+ obj.child.splice(newDraggableIndex,1,{
|
|
|
+ compId:compData.compId,
|
|
|
+ compType:compData.compType,
|
|
|
+ content:compData.content||'',
|
|
|
+ id:getCompId(compData.compType),
|
|
|
+ style:compData.compType==='chart'?'height:350px':'',
|
|
|
+ child:[]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(obj);
|
|
|
+
|
|
|
+ smartState.conList.splice(index,1,obj)
|
|
|
+ // }
|
|
|
+}
|
|
|
+//移除内部元素事件
|
|
|
+function handleChildRemove(e,arr){
|
|
|
+ console.log('child-remove操作------------------->');
|
|
|
|
|
|
-// 点击删除某个
|
|
|
+ // 如果当前移出的这个child还有两个的话则重置他们的宽度
|
|
|
+ arr.forEach(item=>{
|
|
|
+ if(item.style){
|
|
|
+ const styleArr=item.style.split(';').filter(s=>s&&(s.indexOf('width')===-1&&s.indexOf('flex')===-1)).join(';')
|
|
|
+ item.style=styleArr
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ // 如果child只剩一个了则移出来
|
|
|
+ smartState.conList=smartState.conList.map(_item=>{
|
|
|
+ if(_item.child&&_item.child.length===1){
|
|
|
+ const obj=_item.child[0]
|
|
|
+ if(obj.style){
|
|
|
+ const styleArr=obj.style.split(';').filter(s=>s&&(s.indexOf('width')===-1&&s.indexOf('flex')===-1)).join(';')
|
|
|
+ obj.style=styleArr
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ }else{
|
|
|
+ return _item
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 点击删除某个元素
|
|
|
function handleDelItem(pindex,cindex){
|
|
|
if(cindex===-1){
|
|
|
- conList.value.splice(pindex,1)
|
|
|
+ smartState.conList.splice(pindex,1)
|
|
|
}else{//删除子盒子
|
|
|
- conList.value[pindex].child.splice(cindex,1)
|
|
|
- if(conList.value[pindex].child.length===1){//只剩一个子盒子了则变成一个大盒子
|
|
|
- const styleArr=conList.value[pindex].child[0].style.split(';').filter(s=>s&&(s.indexOf('width')===-1&&s.indexOf('flex')===-1)).join(';')
|
|
|
- conList.value[pindex]=conList.value[pindex].child[0]
|
|
|
- conList.value[pindex].style=styleArr
|
|
|
+ smartState.conList[pindex].child.splice(cindex,1)
|
|
|
+ if(smartState.conList[pindex].child.length===1){//只剩一个子盒子了则变成一个大盒子
|
|
|
+ const styleArr=smartState.conList[pindex].child[0].style.split(';').filter(s=>s&&(s.indexOf('width')===-1&&s.indexOf('flex')===-1)).join(';')
|
|
|
+ smartState.conList[pindex]=smartState.conList[pindex].child[0]
|
|
|
+ smartState.conList[pindex].style=styleArr
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 删除版头版尾
|
|
|
+function deleteLayoutPic(type){
|
|
|
+ if(type===1){
|
|
|
+ smartState.headImg=''
|
|
|
+ smartState.headImgId = 0
|
|
|
+ }else{
|
|
|
+ smartState.endImg=''
|
|
|
+ smartState.endImgId = 0
|
|
|
+ }
|
|
|
+ contentChange.value=true
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const currentState = reactive({
|
|
|
+ activeId: 0,
|
|
|
+ activeContent: '',
|
|
|
+ activePindex: '',
|
|
|
+ activeCindex: ''
|
|
|
+})
|
|
|
+// 当前再编辑哪个
|
|
|
+function handleChoose(item,index,cindex){
|
|
|
+ //{item:数据,index:父序号,cindex:子序号}
|
|
|
+ if(!item.id||isDragResize.value||!['text','img'].includes(item.compType)) return
|
|
|
+ currentState.activeId=item.id
|
|
|
+ currentState.activeContent=item.content||''
|
|
|
+ currentState.activePindex=index
|
|
|
+ currentState.activeCindex=cindex>=0?cindex:''
|
|
|
+
|
|
|
+ showInsertCompType.value = item.compId;
|
|
|
+ showReportInsertPop.value = true
|
|
|
+ if(item.compId === 1) {//文字组件
|
|
|
+ temTextVal.value = item.content
|
|
|
+ }else if(item.compId === 2) { //图片组件
|
|
|
+ temImgVal.value = item.content
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
-const showPopover = ref(true)
|
|
|
+
|
|
|
+const showPopover = ref(false)
|
|
|
const showReportInsertPop = ref(false)
|
|
|
const showInsertCompType=ref(0)
|
|
|
const compType = [
|
|
|
@@ -264,11 +433,13 @@ function handleOpenComPop(e) {
|
|
|
console.log(e)
|
|
|
|
|
|
showInsertCompType.value = e.compId;
|
|
|
+ temTextVal.value = ''
|
|
|
+ temImgVal.value = ''
|
|
|
showReportInsertPop.value = true
|
|
|
}
|
|
|
/* 插入图表表格 */
|
|
|
function handleChartInsert({list,type,chartType}){
|
|
|
-
|
|
|
+ console.log(list,type,chartType)
|
|
|
let tempCompDataArr=[]
|
|
|
|
|
|
if(type==='iframe'){
|
|
|
@@ -304,26 +475,122 @@ function handleChartInsert({list,type,chartType}){
|
|
|
compId:2,
|
|
|
compType:'img',
|
|
|
id:getCompId(2),
|
|
|
- content:``,
|
|
|
- titleText: item.ExcelName,
|
|
|
+ content:item,
|
|
|
+ titleText: '',
|
|
|
style:'',
|
|
|
child:[]
|
|
|
}))
|
|
|
}
|
|
|
|
|
|
- conList.value.splice(0,1,...tempCompDataArr)
|
|
|
- console.log(conList.value)
|
|
|
+ smartState.conList.splice(0,0,...tempCompDataArr)
|
|
|
showReportInsertPop.value=false
|
|
|
}
|
|
|
//插入文本
|
|
|
-function handleInsertText() {
|
|
|
+const temTextVal = ref('')
|
|
|
+function handleInsertText(content) {
|
|
|
+ if(temTextVal.value) { //编辑
|
|
|
+ currentState.activeContent=content
|
|
|
+ if(currentState.activeCindex>=0&¤tState.activeCindex!==''){
|
|
|
+ smartState.conList[currentState.activePindex].child[currentState.activeCindex].content=content
|
|
|
+ }else{
|
|
|
+ smartState.conList[currentState.activePindex].content = content
|
|
|
+ }
|
|
|
+ }else { //新增
|
|
|
+
|
|
|
+ let tempCompData = {
|
|
|
+ compId:1,
|
|
|
+ compType:'text',
|
|
|
+ id:getCompId(1),
|
|
|
+ content:content,
|
|
|
+ style:'',
|
|
|
+ child:[]
|
|
|
+ }
|
|
|
+ smartState.conList.push(tempCompData)
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(smartState.conList)
|
|
|
+ showReportInsertPop.value = false
|
|
|
+}
|
|
|
+//插入图片
|
|
|
+const temImgVal=ref('')
|
|
|
+function handleInsertImg(e) {
|
|
|
+ if(temImgVal.value) { //编辑
|
|
|
+ currentState.activeContent=e
|
|
|
+ if(currentState.activeCindex>=0&¤tState.activeCindex!==''){
|
|
|
+ smartState.conList[currentState.activePindex].child[currentState.activeCindex].content=e
|
|
|
+ }else{
|
|
|
+ smartState.conList[currentState.activePindex].content = e
|
|
|
+ }
|
|
|
+ }else { //新增
|
|
|
+ let tempCompData = {
|
|
|
+ compId:2,
|
|
|
+ compType:'img',
|
|
|
+ id:getCompId(2),
|
|
|
+ content:e,
|
|
|
+ style:'',
|
|
|
+ child:[]
|
|
|
+ }
|
|
|
+ smartState.conList.push(tempCompData)
|
|
|
+ }
|
|
|
|
|
|
+ showReportInsertPop.value = false
|
|
|
}
|
|
|
function getCompId(type) {
|
|
|
return type+new Date().getTime()
|
|
|
}
|
|
|
|
|
|
+// 更新sheet表格高度
|
|
|
+function reInitSheetIframe(e){
|
|
|
+ const { height,code } = e.data;
|
|
|
+ let iframeDom = document.getElementsByClassName(`iframe${code}`)
|
|
|
+ Array.prototype.forEach.call(iframeDom, function (ele) {
|
|
|
+ ele.height = `${height}px`;
|
|
|
+ });
|
|
|
+}
|
|
|
+onMounted(()=>{
|
|
|
+ window.addEventListener('message',reInitSheetIframe)
|
|
|
+})
|
|
|
+onUnmounted(()=>{
|
|
|
+ window.removeEventListener('message',reInitSheetIframe)
|
|
|
+})
|
|
|
+
|
|
|
|
|
|
+
|
|
|
+//更多设置弹窗
|
|
|
+const showMoreHandlePop = ref(false)
|
|
|
+const showLayoutPop = ref(false)
|
|
|
+const showBgPop = ref(false)
|
|
|
+const temBgVar=ref("")
|
|
|
+//设置版图
|
|
|
+function handleConfirmSetLayout(e) {
|
|
|
+ if(e.type=='1'){
|
|
|
+ showToast('版头设置成功')
|
|
|
+ smartState.headImg=e.data.ImgUrl
|
|
|
+ smartState.headImgId = e.data.ResourceId
|
|
|
+ smartState.headImgStyle=e.data.Style?JSON.parse(e.data.Style):[]
|
|
|
+ }else{
|
|
|
+ showToast('版尾设置成功')
|
|
|
+ smartState.endImg=e.data.ImgUrl
|
|
|
+ smartState.endImgId = e.data.ResourceId
|
|
|
+ smartState.endImgStyle=e.data.Style?JSON.parse(e.data.Style):[]
|
|
|
+ }
|
|
|
+ contentChange.value=true
|
|
|
+ showLayoutPop.value = false
|
|
|
+}
|
|
|
+function handleOpenBgPop() {
|
|
|
+ temBgVar.value=smartState.bgColor||''
|
|
|
+ showMoreHandlePop.value=false
|
|
|
+ showBgPop.value=true;
|
|
|
+}
|
|
|
+//设置背景色
|
|
|
+function handleConfirmBgColor() {
|
|
|
+ smartState.bgColor=temBgVar.value||''
|
|
|
+ contentChange.value=true
|
|
|
+ showBgPop.value = false
|
|
|
+}
|
|
|
+
|
|
|
+/* 报告流程操作 */
|
|
|
+const { handleRefresh,handleSubmitReport } = useReportHandles()
|
|
|
// 报告基本信息
|
|
|
const showReportBaseInfo=ref(false)
|
|
|
let reportBaseInfoData={
|
|
|
@@ -351,6 +618,67 @@ async function handleReportBaseInfoChange(e){
|
|
|
showReportBaseInfo.value=false
|
|
|
}
|
|
|
|
|
|
+// 刷新所有图表
|
|
|
+async function handleRefreshAllChart(){
|
|
|
+ handleRefresh({ id: reportInfo.value.Id,chapterId:reportInfo.value.ChapterId })
|
|
|
+}
|
|
|
+
|
|
|
+//预览
|
|
|
+async function handlePreviewReport() {
|
|
|
+ if(document.getElementById('report-html-content')) {
|
|
|
+ // 存一次草稿
|
|
|
+ const saveRes=await autoSaveReportContent("auto")
|
|
|
+ if(!saveRes) return
|
|
|
+ }
|
|
|
+ const routerEl=router.resolve({
|
|
|
+ path:'/report/preview',
|
|
|
+ query:{
|
|
|
+ id: reportInfo.value.Id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ window.open(routerEl.href,'_blank')
|
|
|
+ return
|
|
|
+}
|
|
|
+
|
|
|
+/* 保存 定时保存 */
|
|
|
+function autoSaveReportContent(type="auto") {
|
|
|
+ if(!route.query.id) return
|
|
|
+
|
|
|
+ const html=document.getElementById('report-html-content').outerHTML.replace(/contenteditable="true"/g,'contenteditable="false"');
|
|
|
+ return new Promise(async (resolve,reject)=>{
|
|
|
+
|
|
|
+ let imgParams = {
|
|
|
+ HeadImg: reportCoopType.value===1?smartState.headImg:'',
|
|
|
+ EndImg:reportCoopType.value===1?smartState.endImg:'',
|
|
|
+ HeadResourceId:reportCoopType.value===1?smartState.headImgId:'',
|
|
|
+ EndResourceId:reportCoopType.value===1?smartState.endImgId:'',
|
|
|
+ CanvasColor:reportCoopType.value===1?smartState.bgColor:''
|
|
|
+ }
|
|
|
+
|
|
|
+ const res=await apiReport.reportContentSave({
|
|
|
+ ReportId:Number(route.query.id),
|
|
|
+ Content:html,
|
|
|
+ ContentStruct:JSON.stringify(smartState.conList),
|
|
|
+ NoChange:contentChange.value?0:1,
|
|
|
+ ...imgParams
|
|
|
+ })
|
|
|
+ if(res.Ret === 200) {
|
|
|
+ resolve(true)
|
|
|
+ type==='save' && showToast("保存成功");
|
|
|
+ contentChange.value=false
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+async function handlePublishReport(tp) {
|
|
|
+ if(document.getElementById('report-html-content')) {
|
|
|
+ // 存一次草稿
|
|
|
+ const saveRes=await autoSaveReportContent("auto")
|
|
|
+ if(!saveRes) return
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
const {
|
|
|
conList,
|
|
|
@@ -369,10 +697,34 @@ const {
|
|
|
<div class="main-wrap">
|
|
|
|
|
|
<div class="report-content-box" id="report-content-box" :style="{backgroundColor:bgColor}">
|
|
|
+
|
|
|
+ <div class="add-comp-wrapper">
|
|
|
+ <van-popover v-model:show="showPopover" @select="handleOpenComPop">
|
|
|
+ <van-grid
|
|
|
+ square
|
|
|
+ clickable
|
|
|
+ :border="false"
|
|
|
+ column-num="3"
|
|
|
+ style="width: 240px;"
|
|
|
+ >
|
|
|
+ <van-grid-item
|
|
|
+ v-for="i in compType"
|
|
|
+ :key="i.id"
|
|
|
+ :text="i.text"
|
|
|
+ :icon="i.icon"
|
|
|
+ @click="handleOpenComPop(i)"
|
|
|
+ />
|
|
|
+ </van-grid>
|
|
|
+ <template #reference>
|
|
|
+ <svg-icon name="add-comp" size="40"/>
|
|
|
+ </template>
|
|
|
+ </van-popover>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- 版头 -->
|
|
|
<div class="html-head-img-box">
|
|
|
- <div class="opt-btn-box">
|
|
|
- <div class="del-btn" @click.stop="deleteLayoutPic(1)"></div>
|
|
|
+ <div class="opt-btn-box" style="display: none;">
|
|
|
+ <van-icon name="delete-o" @click.stop="deleteLayoutPic(1)" color="#f00"/>
|
|
|
</div>
|
|
|
<img :src="headImg" alt="" style="display:block;width:100%">
|
|
|
<div class="head-layout-item" v-for="item in headImgStyle" :key="item.value"
|
|
|
@@ -384,21 +736,18 @@ const {
|
|
|
</div>
|
|
|
<draggable
|
|
|
:list="conList"
|
|
|
+ item-key="id"
|
|
|
:group="{ name: 'component', pull: true, put: true }"
|
|
|
class="report-html-wrap"
|
|
|
id="report-html-content"
|
|
|
animation="300"
|
|
|
tag="div"
|
|
|
- handle=".drag-btn_p"
|
|
|
- @add="handleParentAdd"
|
|
|
- @remove="handleParentRemove"
|
|
|
- :move="handleParentMove"
|
|
|
>
|
|
|
<template #item="{element,index}">
|
|
|
<div
|
|
|
:class="[
|
|
|
'report-drag-item-wrap',
|
|
|
- activeId===element.id?'blue-bg':'',
|
|
|
+ currentState.activeId===element.id?'blue-bg':'',
|
|
|
element.child&&!element.child.length?'report-drag-item-out':''
|
|
|
]"
|
|
|
:comp-type="element.compType"
|
|
|
@@ -406,10 +755,8 @@ const {
|
|
|
:style="element.style"
|
|
|
>
|
|
|
<div class="resize-drag-box" @mousedown.stop="handleResizeP($event,index)"></div>
|
|
|
- <div class="opt-btn-box">
|
|
|
- <div class="drag-btn drag-btn_p"></div>
|
|
|
- <!-- <div class="del-btn" @click.stop="handleDelItem(index,-1)"></div> -->
|
|
|
- <van-icon name="delete-o" @click.stop="handleDelItem(index,-1)"/>
|
|
|
+ <div class="opt-btn-box" style="display: none;">
|
|
|
+ <van-icon name="delete-o" @click.stop="handleDelItem(index,-1)" color="#f00"/>
|
|
|
</div>
|
|
|
<div
|
|
|
v-if="element.child&&!element.child.length"
|
|
|
@@ -419,14 +766,47 @@ const {
|
|
|
>
|
|
|
<component :is="getComponentName(element)" :compData="element"/>
|
|
|
</div>
|
|
|
+
|
|
|
+ <draggable
|
|
|
+ :list="element.child"
|
|
|
+ item-key="id"
|
|
|
+ :group="{ name: 'component', pull: true, put: element.child&&element.child.length<3?true:false }"
|
|
|
+ animation="300"
|
|
|
+ tag="div"
|
|
|
+ class="report-drag-item-wrap_child-wrap"
|
|
|
+ @add="handleChildAdd($event,element,index)"
|
|
|
+ @remove="handleChildRemove($event,element.child)"
|
|
|
+ style="display: flex;gap: 3px;align-items: flex-start;"
|
|
|
+ >
|
|
|
+ <template #item="child">
|
|
|
+ <div
|
|
|
+ :class="['report-drag-item-wrap_child_content',currentState.activeId===child.element.id?'blue-bg':'']"
|
|
|
+ :comp-type="child.element.compType"
|
|
|
+ :data-id="child.element.id"
|
|
|
+ @click.stop="handleChoose(child.element,index,child.index)"
|
|
|
+ style="flex:1"
|
|
|
+ :style="child.element.style"
|
|
|
+ >
|
|
|
+ <div class="opt-btn-box2" style="display: none;">
|
|
|
+ <van-icon name="delete-o" @click.stop="handleDelItem(index,child.index)" color="#f00"/>
|
|
|
+ </div>
|
|
|
+ <!-- 拖动按钮 -->
|
|
|
+ <div class="resize-drag-box_lb" @mousedown.stop="handleResizeC($event,index,child.index,'lb')"></div>
|
|
|
+ <div class="resize-drag-box_rb" @mousedown.stop="handleResizeC($event,index,child.index,'rb')"></div>
|
|
|
+ <component :is="getComponentName(child.element)" :compData="child.element"/>
|
|
|
+ <!-- -->
|
|
|
+ <div class="mark-box" v-if="isDragResize" style="position: absolute;left:0;right:0;top:0;bottom: 0;z-index: 10;"></div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </draggable>
|
|
|
</div>
|
|
|
</template>
|
|
|
</draggable>
|
|
|
|
|
|
<!-- 版尾 -->
|
|
|
<div class="html-end-img-box">
|
|
|
- <div class="opt-btn-box">
|
|
|
- <div class="del-btn" @click.stop="deleteLayoutPic(2)"></div>
|
|
|
+ <div class="opt-btn-box" style="display: none;">
|
|
|
+ <van-icon name="delete-o" @click.stop="deleteLayoutPic(2)" color="#f00"/>
|
|
|
</div>
|
|
|
<img :src="endImg" alt="" style="display:block;width:100%">
|
|
|
<div class="head-layout-item" v-for="item in endImgStyle" :key="item.value"
|
|
|
@@ -436,30 +816,6 @@ const {
|
|
|
{{ layoutBaseInfo[item.value] }}
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
- <div class="add-comp-wrapper">
|
|
|
- <van-popover v-model:show="showPopover" @select="handleOpenComPop">
|
|
|
- <van-grid
|
|
|
- square
|
|
|
- clickable
|
|
|
- :border="false"
|
|
|
- column-num="3"
|
|
|
- style="width: 240px;"
|
|
|
- >
|
|
|
- <van-grid-item
|
|
|
- v-for="i in compType"
|
|
|
- :key="i.id"
|
|
|
- :text="i.text"
|
|
|
- :icon="i.icon"
|
|
|
- @click="handleOpenComPop(i)"
|
|
|
- />
|
|
|
- </van-grid>
|
|
|
- <template #reference>
|
|
|
- <van-icon name="add-o" size="24" class="add-ico"/>
|
|
|
- </template>
|
|
|
- </van-popover>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -474,20 +830,20 @@ const {
|
|
|
<img src="@/assets/imgs/report/icon_refresh.png" alt="">
|
|
|
<span>刷新</span>
|
|
|
</div>
|
|
|
- <div class="item" @click="handlePreviewReport" >
|
|
|
+ <div class="item" @click="handlePreviewReport" v-permission="reportManageBtn.reportManage_reportView">
|
|
|
<img src="@/assets/imgs/report/icon_preview.png" alt="">
|
|
|
<span>预览</span>
|
|
|
</div>
|
|
|
- <div class="item" @click="autoSaveReportContent('save')">
|
|
|
+ <div class="item" @click="autoSaveReportContent('save')" v-permission="reportManageBtn.reportManage_publish">
|
|
|
<img src="@/assets/imgs/report/icon_save2.png" alt="">
|
|
|
<span>保存</span>
|
|
|
</div>
|
|
|
<template v-if="!isApprove||!hasApproveFlow">
|
|
|
- <div class="item" @click="handlePublishReport('dsfb')" >
|
|
|
+ <div class="item" @click="handlePublishReport('dsfb')" v-permission="reportManageBtn.reportManage_publish">
|
|
|
<img src="@/assets/imgs/report/icon_time.png" alt="">
|
|
|
<span>定时发布</span>
|
|
|
</div>
|
|
|
- <div class="item" @click="handlePublishReport('fb')">
|
|
|
+ <div class="item" @click="handlePublishReport('fb')" v-permission="reportManageBtn.reportManage_publish">
|
|
|
<img src="@/assets/imgs/report/icon_publish3.png" alt="">
|
|
|
<span>发布</span>
|
|
|
</div>
|
|
|
@@ -498,22 +854,38 @@ const {
|
|
|
<span>提交</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div class="item" @click="handlePreviewReport" >
|
|
|
- <img src="@/assets/imgs/report/icon_preview.png" alt="">
|
|
|
- <span>更多设置</span>
|
|
|
+ <div class="item" @click="showMoreHandlePop=true" v-if="reportInfo&&!reportInfo.ReportChapterId">
|
|
|
+ <van-icon name="ellipsis" size="24"/>
|
|
|
+ <div>更多设置</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 报告插入数据模块 -->
|
|
|
- <van-popup
|
|
|
- v-model:show="showReportInsertPop"
|
|
|
- position="bottom"
|
|
|
- round
|
|
|
- >
|
|
|
- <ReportInsertContent v-if="showInsertCompType===3" @insert="handleChartInsert"/>
|
|
|
- </van-popup>
|
|
|
+ <van-popup
|
|
|
+ v-model:show="showReportInsertPop"
|
|
|
+ position="bottom"
|
|
|
+ round
|
|
|
+ >
|
|
|
+ <!-- 文字插入 -->
|
|
|
+ <TextEditor
|
|
|
+ v-if="showInsertCompType===1"
|
|
|
+ :defaultVal="temTextVal"
|
|
|
+ @close="showReportInsertPop=false;temTextVal=''"
|
|
|
+ @confirm="handleInsertText"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 图片 -->
|
|
|
+ <ImgEditor
|
|
|
+ v-else-if="showInsertCompType===2"
|
|
|
+ :defaultVal="temImgVal"
|
|
|
+ @close="showReportInsertPop=false;temImgVal=''"
|
|
|
+ @confirm="handleInsertImg"
|
|
|
+ />
|
|
|
+ <!-- 图表资源 -->
|
|
|
+ <ReportInsertContent v-if="showInsertCompType===3" @insert="handleChartInsert"/>
|
|
|
+ </van-popup>
|
|
|
|
|
|
<!-- 报告基础信息 -->
|
|
|
<van-popup
|
|
|
@@ -527,6 +899,49 @@ const {
|
|
|
:defaultData="reportBaseInfoData"
|
|
|
@confirm="handleReportBaseInfoChange"
|
|
|
/>
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
+ <!-- 更多操作 背景色 版图 -->
|
|
|
+ <van-action-sheet
|
|
|
+ teleport="body"
|
|
|
+ v-model:show="showMoreHandlePop"
|
|
|
+ cancel-text="取消"
|
|
|
+ close-on-click-action
|
|
|
+ >
|
|
|
+ <div class="report-item-action-box">
|
|
|
+
|
|
|
+ <div class="item" @click="showLayoutPop=true;showMoreHandlePop=false">版图选择</div>
|
|
|
+ <div class="item" @click="handleOpenBgPop">背景色设置</div>
|
|
|
+ </div>
|
|
|
+ </van-action-sheet>
|
|
|
+
|
|
|
+ <!-- 版图设置 -->
|
|
|
+ <van-popup
|
|
|
+ v-model:show="showLayoutPop"
|
|
|
+ position="bottom"
|
|
|
+ >
|
|
|
+ <ReportLayoutImg
|
|
|
+ v-if="showLayoutPop"
|
|
|
+ @close="showLayoutPop=false"
|
|
|
+ @confirm="handleConfirmSetLayout"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
+ <!-- 背景色设置 -->
|
|
|
+ <van-popup
|
|
|
+ v-model:show="showBgPop"
|
|
|
+ position="bottom"
|
|
|
+ :style="{ height: '50%' }"
|
|
|
+ >
|
|
|
+ <div class="top-box">
|
|
|
+ <span style="color:#666666" @click="showBgPop=false">取消</span>
|
|
|
+ <span style="font-size:18px;font-weight:bold">背景色设置</span>
|
|
|
+ <span style="color:#0052D9" @click="handleConfirmBgColor">确定</span>
|
|
|
+ </div>
|
|
|
+ <div class="color-box">
|
|
|
+ <span>颜色选择</span>
|
|
|
+ <V3ColorPicker v-model:value="temBgVar" :zIndex="9999"/>
|
|
|
+ </div>
|
|
|
</van-popup>
|
|
|
</template>
|
|
|
<style scoped lang="scss">
|
|
|
@@ -544,7 +959,6 @@ const {
|
|
|
overflow-y: auto;
|
|
|
margin-top: 30px;
|
|
|
border: 1px solid #DCDFE6;
|
|
|
- pointer-events:auto;
|
|
|
|
|
|
.report-drag-item-wrap{
|
|
|
width: 100%;
|
|
|
@@ -567,24 +981,6 @@ const {
|
|
|
left: -36px;
|
|
|
padding-right: 8px;
|
|
|
top: 0;
|
|
|
- .drag-btn::after{
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- background-image: url('~@/assets/img/smartReport/icon12.png');
|
|
|
- background-size: cover;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .del-btn::after{
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- background-image: url('~@/assets/img/smartReport/icon13.png');
|
|
|
- background-size: cover;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
}
|
|
|
.resize-drag-box{
|
|
|
position: absolute;
|
|
|
@@ -606,9 +1002,7 @@ const {
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
- .report-drag-item-wrap_child-wrap{
|
|
|
- // min-height: 30px;
|
|
|
- }
|
|
|
+
|
|
|
.report-drag-item-wrap_child_content{
|
|
|
min-height: 80px;
|
|
|
border: 1px dashed #0052D9;
|
|
|
@@ -631,24 +1025,6 @@ const {
|
|
|
right: -15px;
|
|
|
top: 0;
|
|
|
z-index: 10;
|
|
|
- .drag-btn::after{
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- background-image: url('~@/assets/img/smartReport/icon12.png');
|
|
|
- background-size: cover;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .del-btn::after{
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- background-image: url('~@/assets/img/smartReport/icon13.png');
|
|
|
- background-size: cover;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
}
|
|
|
.resize-drag-box_lt,
|
|
|
.resize-drag-box_lb,
|
|
|
@@ -688,8 +1064,26 @@ const {
|
|
|
.report-content-box{
|
|
|
width: 100%;
|
|
|
margin: 0 auto;
|
|
|
- height: 100%;
|
|
|
padding: 20px 20px 20px 44px;
|
|
|
+ .html-head-img-box,.html-end-img-box{
|
|
|
+ position: relative;
|
|
|
+ &:hover{
|
|
|
+ .opt-btn-box{
|
|
|
+ display: block !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .opt-btn-box{
|
|
|
+ position: absolute;
|
|
|
+ left: -36px;
|
|
|
+ padding-right: 8px;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ .head-layout-item{
|
|
|
+ position: absolute;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.add-comp-wrapper {
|
|
|
display: flex;
|
|
|
@@ -744,6 +1138,35 @@ const {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.report-item-action-box{
|
|
|
+ .item{
|
|
|
+ padding: 20px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32px;
|
|
|
+ border-top: 1px solid $border-color;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.top-box{
|
|
|
+ padding:32px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #DCDFE6;
|
|
|
+ .close{
|
|
|
+ color:#666666;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ font-size: 36px;
|
|
|
+ }
|
|
|
+ .add-btn{
|
|
|
+ color:$theme-color;
|
|
|
+ }
|
|
|
+}
|
|
|
+.color-box {
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
@media screen and (min-width:$media-width){
|
|
|
.add-report-page{
|
|
|
height: calc(100dvh - 60px);
|
|
|
@@ -779,10 +1202,27 @@ const {
|
|
|
}
|
|
|
.main-wrap{
|
|
|
margin-top: 20px;
|
|
|
+ max-width: 800px;
|
|
|
+ .report-content-box {
|
|
|
+ padding: 20px 20px 20px 44px;
|
|
|
+ }
|
|
|
+ .report-drag-item-wrap {
|
|
|
+ .opt-btn-box{
|
|
|
+ left: -30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .report-drag-item-wrap_child_content{
|
|
|
+ .opt-btn-box2{
|
|
|
+ right: -10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .report-content-box{
|
|
|
- max-width: 800px;
|
|
|
- }
|
|
|
+ .report-item-action-box{
|
|
|
+ .item{
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
</style>
|
