eta1.4.2

src/views/smartReport/editReport.vue

@@ -55,10 +55,14 @@
                     animation="300"
                     :sort="false"
                     tag="ul"
+                    filter='.unDrag'
                 >
                     <li class="comp-item" :comp-data="JSON.stringify(comp)" v-for="comp in compList" :key="comp.id">
                         <img :src="comp.icon">
                     </li>
+                    <li class="comp-item unDrag" style="cursor: pointer;">
+                        <el-color-picker v-model="bgColor" @change="handleBgColorChange"></el-color-picker>
+                    </li>
                 </draggable>
 
                 <div class="report-content-box">
@@ -66,12 +70,14 @@
                         :list="conList"
                         :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"
+                        :style="{backgroundColor:bgColor}"
                     >
                         <div 
                             :class="[
@@ -358,6 +364,8 @@ export default {
             contentChange:false,//内容是否发生变化
 
             isDragResize:false,//是否正在拖动缩放
+
+            bgColor:'',
         }
     },
     methods: {
@@ -459,7 +467,7 @@ export default {
 
         // 跳转预览
         handlePreviewReport(){
-            const htmlStr=$('.report-html-wrap').html()
+            const htmlStr=document.getElementById('report-html-content').outerHTML;
             sessionStorage.setItem('smartReportContent', htmlStr);
 			let { href } = this.$router.resolve({ 
                 path: '/smartReportDetail',
@@ -762,10 +770,11 @@ export default {
 
         // 编辑保存报告
         handleReportEdit(e){
+            const html=document.getElementById('report-html-content').outerHTML;
             const params={
                 SmartReportId:Number(this.$route.query.id)||0,
                 ...e,
-                Content:$('.report-html-wrap').html(),
+                Content:html,
                 ContentStruct:JSON.stringify(this.conList)
             }
             console.log(params);
@@ -840,12 +849,13 @@ export default {
         
         // 自动/存草稿保存内容
         handleSaveContent({isAutoSave}){
+            const html=document.getElementById('report-html-content').outerHTML;
             return new Promise((resolve,reject)=>{
                 const id=this.$route.query.id||0
                 if(!id) return
                 apiSmartReport.saveReportContent({
                     SmartReportId:Number(id),
-                    Content:$('.report-html-wrap').html(),
+                    Content:html,
                     ContentStruct:JSON.stringify(this.conList),
                     NoChange:this.contentChange?2:1,
                 }).then(res=>{
@@ -1039,6 +1049,20 @@ export default {
     // min-height: 0 !important;
     // border: none !important;
 }
+
+.el-color-picker__trigger{
+    &::after{
+        content:'';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #0052D9;
+    }
+}
+
 }
 </style>
 <style lang='scss' scoped>