insert

src/views/report/smartReport/EditReport.vue

@@ -407,7 +407,7 @@ function deleteLayoutPic(type){
 }
 
 
-
+//当前选中的
 const currentState = reactive({
 	activeId: 0,
 	activeContent: '',
@@ -424,6 +424,9 @@ function handleChoose(item,index,cindex){
 		currentState.activePindex=index
 		currentState.activeCindex=cindex>=0?cindex:''
 
+		insertState.activeId = 0;
+		insertState.activePindex = '';
+
 		showInsertCompType.value = item.compId;
 		showReportInsertPop.value = true
 		if(item.compId === 1) {//文字组件
@@ -434,6 +437,27 @@ function handleChoose(item,index,cindex){
 }
 
 
+//在哪项后插入
+const insertState = reactive({
+	activeId: 0,
+	activePindex: '',
+})
+function handleOpenInsertCompPop(e,{element,index}) {
+	currentState.activeId=0
+	currentState.activeContent=''
+	currentState.activePindex=''
+	currentState.activeCindex=''
+
+	insertState.activeId = element.id;
+	insertState.activePindex = index;
+
+  showInsertCompType.value = e.compId;
+	temTextVal.value = ''
+	temImgVal.value = ''
+  showReportInsertPop.value = true
+}
+
+
 const showPopover = ref(false)
 const showReportInsertPop = ref(false)
 const showInsertCompType=ref(0)
@@ -466,6 +490,9 @@ function handleOpenComPop(e) {
 	currentState.activePindex=''
 	currentState.activeCindex=''
 
+	insertState.activeId = 0;
+	insertState.activePindex = '';
+
   showInsertCompType.value = e.compId;
 	temTextVal.value = ''
 	temImgVal.value = ''
@@ -515,8 +542,12 @@ function handleChartInsert({list,type,chartType}){
             child:[]
 				}))
     }
-
-    smartState.conList.splice(0,0,...tempCompDataArr)
+		
+		if(insertState.activeId) {
+			smartState.conList.splice(insertState.activePindex+1,0,...tempCompDataArr)
+		}else {
+			smartState.conList.splice(0,0,...tempCompDataArr)
+		}
     showReportInsertPop.value=false
 }
 //插入文本
@@ -542,7 +573,11 @@ function handleInsertText(content) {
 				style:'',
 				child:[]
 		}
-		smartState.conList.push(tempCompData)
+		if(insertState.activeId) {
+			smartState.conList.splice(insertState.activePindex+1,0,tempCompData)
+		}else {
+			smartState.conList.splice(0,0,tempCompData)
+		}
 	}
 
 	console.log(smartState.conList)
@@ -567,7 +602,11 @@ function handleInsertImg(e) {
 				style:'',
 				child:[]
 		}
-		smartState.conList.push(tempCompData)
+		if(insertState.activeId) {
+			smartState.conList.splice(insertState.activePindex+1,0,tempCompData)
+		}else {
+			smartState.conList.splice(0,0,tempCompData)
+		}
 	}
 
 		showReportInsertPop.value = false
@@ -828,6 +867,7 @@ const {
               :list="conList"
 							item-key="id"
               :group="{ name: 'component', pull: true, put: true }"
+							handle=".drag-btn_p"
               class="report-html-wrap"
               id="report-html-content"
               animation="300"
@@ -847,6 +887,7 @@ const {
                   <div class="resize-drag-box" @mousedown.stop="handleResizeP($event,index)"></div>
                   <div class="opt-btn-box"  style="display: none;">
 											<van-icon name="delete-o" @click.stop="handleDelItem(index,-1)" color="#f00"/>
+											<div class="drag-btn drag-btn_p"></div>
                   </div>
                   <div 
                       v-if="element.child&&!element.child.length"
@@ -857,10 +898,35 @@ const {
                       <component :is="getComponentName(element)" :compData="element"/>
                   </div>
 
+									<!-- 插入 -->
+									<div class="add-comp-wrapper comp-insert-add" @click.stop>
+										<van-popover v-model:show="element.showAddPopover">
+											<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.stop="handleOpenInsertCompPop(i,{element,index})"
+												/>
+											</van-grid>
+											<template #reference>
+													<svg-icon name="add-comp" size="40"/>
+											</template>
+										</van-popover>
+									</div>
+
 									<draggable
 											:list="element.child"
 											item-key="id"
 											:group="{ name: 'component', pull: true, put: element.child&&element.child.length<3?true:false }"
+											handle=".drag-btn_c"
 											animation="300"
 											tag="div"
 											class="report-drag-item-wrap_child-wrap"
@@ -878,6 +944,7 @@ const {
 													:style="child.element.style"
 											>
 													<div class="opt-btn-box2" style="display: none;">
+															<div class="drag-btn drag-btn_c"></div>
 															<van-icon name="delete-o" @click.stop="handleDelItem(index,child.index)" color="#f00"/>
 													</div>
 													<!-- 拖动按钮 -->
@@ -1078,7 +1145,7 @@ const {
 				min-height: 80px;
 				border: 1px dashed #0052D9;
 				position: relative;
-				margin-bottom: 3px;
+				margin-bottom: 120px;
 				&:hover{
 						border-style: solid;
 						.opt-btn-box{
@@ -1088,9 +1155,22 @@ const {
 								display: block;
 						}
 				}
+
+				.drag-btn {
+					display: block;
+				}
+				.drag-btn::after{
+						content: '';
+						display: block;
+						width: 40px;
+						height: 40px;
+						background-image: url('@/assets/imgs/report/icon_drag.png');
+						background-size: cover;
+						cursor:move;
+				}
 				.opt-btn-box{
 						position: absolute;
-						left: -36px;
+						right: -36px;
 						padding-right: 8px;
 						top: 0;
 				}
@@ -1176,7 +1256,7 @@ const {
 .report-content-box{
     width: 100%;
     margin: 0 auto;
-		padding: 20px 20px 20px 44px;
+		padding: 20px 40px;
 		.html-head-img-box,.html-end-img-box{
 				position: relative;
 				&:hover{
@@ -1186,7 +1266,7 @@ const {
 				}
 				.opt-btn-box{
 						position: absolute;
-						left: -36px;
+						right: -36px;
 						padding-right: 8px;
 						top: 0;
 				}
@@ -1279,6 +1359,12 @@ const {
 	display: flex;
 	align-items: center;
 }
+.comp-insert-add {
+	position: absolute;
+	bottom: -110px;
+	left: 50%;
+	transform: translateX(-50%);
+}
 @media screen and (min-width:$media-width){
     .add-report-page{
         height: calc(100dvh - 60px);
@@ -1319,8 +1405,14 @@ const {
 				padding: 20px 20px 20px 44px;
 			}
 			.report-drag-item-wrap {
+				margin-bottom: 80px;
+
+				.drag-btn::after{
+						width: 28px;
+						height: 28px;
+				}
 				.opt-btn-box{
-					left: -30px;
+					right: -30px;
 				}
 			}
 
@@ -1335,6 +1427,9 @@ const {
 				font-size: 16px;
 			}
 		}	
+		.comp-insert-add {
+			bottom: -60px;
+		}
 }
 
 </style>