comit

src/routes/modules/oldRoutes.js

@@ -235,6 +235,11 @@ export default [
         name: "英文品种配置",
         component: () => import("@/views/report_manage/reportVariety.vue"),
       },
+      {
+        path: "smartReportEdit",
+        name: "智能报告",
+        component: () => import("@/views/smartReport/editReport.vue"),
+      }
     ],
   },
 

src/views/smartReport/components/ChartComp.vue

@@ -0,0 +1,19 @@
+<template>
+    <div 
+        class="report-comp-item img-comp" 
+        style="min-height:100px;background:#f5f5f5;margin:10px 0"
+        :comp-type="compData.compType"
+        >这是一个chart组件</div>
+</template>
+
+<script>
+export default {
+    props:{
+        compData:{}
+    }
+}
+</script>
+
+<style>
+
+</style>

src/views/smartReport/components/ImgComp.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="report-comp-item img-comp" style="min-height:100px;background:#f5f5f5;margin:10px 0" :comp-type="compData.compType">这是一个图片组件</div>
+</template>
+
+<script>
+export default {
+    props:{
+        compData:{}
+    }
+}
+</script>
+
+<style>
+
+</style>

src/views/smartReport/components/TextComp.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="report-comp-item text-comp" style="min-height:100px;background:#f5f5f5;margin:10px 0" :comp-type="compData.compType">这是一个富文本组件</div>
+</template>
+
+<script>
+export default {
+    props:{
+        compData:{}
+    }
+}
+</script>
+
+<style>
+
+</style>

src/views/smartReport/components/WrapComp.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="report-comp-item chart-comp" style="min-height:100px;background:#f5f5f5;margin:10px 0" :comp-type="compData.compType">
+        <draggable
+            :list="conList"
+            :group="{ name: 'component', pull: true, put: true }"
+            animation="300"
+            tag="div"
+            @add="handleAdd"
+        >
+            <template v-for="comp in compData.child">
+                <component :is="getComponentName(comp)" :key="comp.id" :compData="comp"/>
+            </template>
+        </draggable>
+    </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import TextComp from './TextComp.vue'
+import ChartComp from './ChartComp.vue'
+import ImgComp from './ImgComp.vue'
+import WrapComp from './WrapComp.vue'
+import _ from 'lodash'
+export default {
+    props:{
+        compData:{}
+    },
+    components: {
+        draggable,
+        TextComp,
+        ChartComp,
+        ImgComp,
+        WrapComp
+    },
+    data() {
+        return {
+            compList:[
+                {
+                    compId:0,
+                    compType:'wrap'
+                },
+                {
+                    compId:1,
+                    compType:'text'
+                },
+                {
+                    compId:2,
+                    compType:'chart'
+                },
+                {
+                    compId:3,
+                    compType:'img'
+                },
+            ],
+            
+        }
+    },
+    methods: {
+        getComponentName(item){
+            const temMap=new Map([
+                ['wrap',WrapComp],
+                ['text',TextComp],
+                ['chart',ChartComp],
+                ['img',ImgComp]
+            ])
+            return temMap.get(item.compType)
+        },
+        findComp(el){
+            const compType=el.getAttribute('comp-type')
+            console.log(compType);
+            return this.compList.find(item=>item.compType===compType)
+        },
+        // 生产随机id
+        getCompId(type){
+            return type+new Date().getTime()
+        },
+
+        handleAdd(e){
+            console.log('child-onAdd操作------------------->', e);
+
+            const {item,newDraggableIndex}=e
+            const comp=this.findComp(item)
+            // 非注册组件返回
+            if(!comp){
+                this.conList.splice(newDraggableIndex,1)
+                return
+            }
+            const tempCompData={
+                ...comp,
+                id:this.getCompId(comp.compType)
+            }
+            this.conList.splice(newDraggableIndex,1,tempCompData)
+            this.$emit('childAdd',{list:this.conList,data:this.props.compData})
+        }
+    },
+}
+</script>
+
+<style>
+
+</style>

src/views/smartReport/editReport.vue

@@ -0,0 +1,221 @@
+<template>
+    <div class="edit-smart-report-page">
+        <div class="left-wrap">
+            <draggable
+                :list="compList"
+                :group="{ name: 'component', pull: 'clone', put: false }"
+                class="temp-component-list"
+                animation="300"
+                tag="div"
+                :sort="false"
+            >
+                <div 
+                    class="item"
+                    v-for="item in compList" 
+                    :key="item.compId" 
+                    :comp-type="item.compType"
+                >{{item.compType}}</div>
+            </draggable>
+        </div>
+        <div class="main-wrap">
+            <!-- <draggable
+                :list="conList"
+                :group="{ name: 'component', pull: true, put: true }"
+                class="report-html-wrap"
+                animation="300"
+                tag="div"
+                @add="handleAdd"
+            >
+                <template v-for="comp in conList">
+                    <component :is="getComponentName(comp)" :key="comp.id" :compData="comp" @childAdd="handleChildAdd"/>
+                </template>
+            </draggable> -->
+            <draggable
+                :list="conList"
+                :group="{ name: 'component', pull: true, put: true }"
+                class="report-html-wrap"
+                animation="300"
+                tag="div"
+                @add="handleAdd"
+            >
+                <div class="report-drag-item-wrap " v-for="item in conList" :key="item.id">
+                    <draggable
+                        :list="item.child"
+                        :group="{ name: 'component', pull: true, put: true }"
+                        animation="300"
+                        tag="div"
+                        class="report-drag-item-wrap_child-wrap"
+                        @add="handleChildAdd"
+                    >
+                        <div class="report-drag-item-wrap_child" v-for="child in item.child" :key="child.id">
+                        {{child.type}}
+                        </div>
+                    </draggable>
+                </div>
+            </draggable>
+        </div>
+    </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import TextComp from './components/TextComp.vue'
+import ChartComp from './components/ChartComp.vue'
+import ImgComp from './components/ImgComp.vue'
+import WrapComp from './components/WrapComp.vue'
+import _ from 'lodash'
+export default {
+    name:"smartReportEdit",
+    components: {
+        draggable,
+        TextComp,
+        ChartComp,
+        ImgComp,
+        WrapComp
+    },
+    data() {
+        return {
+            compList:[
+                {
+                    compId:0,
+                    compType:'wrap'
+                },
+                {
+                    compId:1,
+                    compType:'text'
+                },
+                {
+                    compId:2,
+                    compType:'chart'
+                },
+                {
+                    compId:3,
+                    compType:'img'
+                },
+            ],
+            conList:[
+                {
+                    id:1,
+                    child:[
+                        {
+                            id:'21324321',
+                            type:'1'
+                        },
+                        {
+                            id:'21324re321',
+                            type:'4'
+                        }
+                    ]
+                },
+                {
+                    id:2,
+                    child:[
+                        {
+                            id:'414214',
+                            type:'2'
+                        },
+                        {
+                            id:'654432',
+                            type:'3'
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    methods: {
+        getComponentName(item){
+            const temMap=new Map([
+                ['wrap',WrapComp],
+                ['text',TextComp],
+                ['chart',ChartComp],
+                ['img',ImgComp]
+            ])
+            return temMap.get(item.compType)
+        },
+        findComp(el){
+            const compType=el.getAttribute('comp-type')
+            return this.compList.find(item=>item.compType===compType)
+        },
+        // 生产随机id
+        getCompId(type){
+            return type+new Date().getTime()
+        },
+
+        handleChildAdd({list,data}){
+            console.log(list,data);
+            this.conList.forEach(item=>{
+                if(item.id===data.id){
+                    item.child=list
+                }
+            })
+        },
+
+        handleAdd(e){
+            console.log('container-onAdd操作------------------->', e);
+
+            const {item,newDraggableIndex}=e
+            const comp=this.findComp(item)
+            // 非注册组件返回
+            if(!comp){
+                this.conList.splice(newDraggableIndex,1)
+                return
+            }
+            const tempCompData={
+                ...comp,
+                id:this.getCompId(comp.compType),
+                child:[]
+            }
+            this.conList.splice(newDraggableIndex,1,tempCompData)
+        }
+    },
+}
+</script>
+
+<style lang='scss' scoped>
+div{
+    box-sizing: border-box;
+}
+.edit-smart-report-page{
+    display: flex;
+    .left-wrap{
+        width: 300px;
+        background-color: #fff;
+        min-height: 90vh;
+        .temp-component-list{
+            .item{
+                margin-left: 10px;
+                margin-bottom: 30px;
+                width: 280px;
+                height: 150px;
+                background-color: beige;
+            }
+        }
+    }
+}
+.main-wrap{
+    background-color: #fff;
+    width: 864px;
+    min-height: 90vh;
+    margin: 0 30px;
+    .report-html-wrap{
+        min-height: 50vh;
+        .report-drag-item-wrap{
+            width: 100%;
+            padding: 20px;
+            min-height: 200px;
+            border: 1px dashed #0052D9;
+        }
+        .report-drag-item-wrap_child-wrap{
+            display: flex;
+            gap: 20px;
+        }
+        .report-drag-item-wrap_child{
+            min-height: 200px;
+            border: 1px dashed #0052D9;
+            flex: 1;
+            
+        }
+    }
+}
+</style>