fix: 修改activity自由容器组件功能异常bug

app/web/page/activity/component/FreedomContainer/index.ts

+import { Component, Prop, Vue } from 'vue-property-decorator';
+import LoginForm from '@/lib/Form/index.vue';
+import { ContextMenu } from '@editor/mixins/contextMenu.mixin';
+import { cloneDeep } from 'lodash';
+import { Action, Mutation, State } from 'vuex-class';
+
+@Component({ components: { LoginForm }, name: 'FreedomContainer' })
+export default class FreedomContainer extends Vue {
+  @Action('setDragable') setDragable;
+  @State(state => state.editor.curChildIndex) curChildIndex;
+
+  @Prop({type: Object, default: () => ({ child: [] })}) childItem;
+  @Prop({ type: Boolean, default: true }) showHeader;
+  @Prop(String) title;
+  @Prop(String) backgroundImage;
+
+  transformStyle(styleObj) {
+    const style = {};
+    for (const key of Object.keys(styleObj)) {
+      style[key] = typeof styleObj[key] !== 'string' ? `${styleObj[key]}px` : styleObj[key];
+      if (key === 'backgroundImage') {
+        style.backgroundImage = `url(${style.backgroundImage})`;
+      }
+    }
+    return style;
+  }
+}
\ No newline at end of file

app/web/page/activity/component/FreedomContainer/index.vue

+<template>
+  <div class="freedom">
+    <header v-if="showHeader">{{ title }}</header>
+    <div :class="['freedom-body', { 'freedom-body_full': showHeader }]" :style="{background: `url(${backgroundImage}) no-repeat 0 0 / cover`}">
+      <component :class="['freedom-body-item', { 'Fb-item_selected': curChildIndex === index }]" v-for="(item, index) in childItem.child" :style="transformStyle(item.commonStyle)" :is="item.name" :key="index" v-bind="item.props"></component>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./index.ts"></script>
+<style lang="less" scoped>
+  .freedom {
+    height: 100%;
+    width: 100%;
+    header {
+      width: 100%;
+      height: 48px;
+      line-height: 48px;
+      text-align: center;
+      border-bottom: 1px solid #f0f0f0;
+    }
+    &-body {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      &_full {
+        height: calc(100% - 48px);
+      }
+    }
+  }
+</style>
\ No newline at end of file

app/web/page/activity/component/components/GridItem.vue → app/web/page/activity/component/VueGridLayout/GridItem.vue

@@ -86,10 +86,10 @@
     }
 </style>
 <script>
-    import {setTopLeft, setTopRight, setTransformRtl, setTransform} from '../helpers/utils';
-    import {getControlPosition, createCoreData} from '../helpers/draggableUtils';
-    import {getColsFromBreakpoint} from '../helpers/responsiveUtils';
-    import {getDocumentDir} from "../helpers/DOM";
+    import {setTopLeft, setTopRight, setTransformRtl, setTransform} from './helpers/utils';
+    import {getControlPosition, createCoreData} from './helpers/draggableUtils';
+    import {getColsFromBreakpoint} from './helpers/responsiveUtils';
+    import {getDocumentDir} from "./helpers/DOM";
     //    var eventBus = require('./eventBus');
 
     import '@interactjs/auto-start'

app/web/page/activity/component/components/GridLayout.vue → app/web/page/activity/component/VueGridLayout/GridLayout.vue

@@ -20,12 +20,12 @@
     import Vue from 'vue';
     const elementResizeDetectorMaker = require("element-resize-detector");
 
-    import {bottom, compact, getLayoutItem, moveElement, validateLayout, cloneLayout, getAllCollisions} from '../helpers/utils';
-    import {getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout} from "../helpers/responsiveUtils";
+    import {bottom, compact, getLayoutItem, moveElement, validateLayout, cloneLayout, getAllCollisions} from './helpers/utils';
+    import {getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout} from "./helpers/responsiveUtils";
     //var eventBus = require('./eventBus');
 
     import GridItem from './GridItem.vue'
-    import {addWindowEventListener, removeWindowEventListener} from "../helpers/DOM";
+    import {addWindowEventListener, removeWindowEventListener} from "./helpers/DOM";
 
     export default {
         name: "GridLayout",

app/web/page/activity/component/components/CustomDragElement.vue

-<template>
-    <span class="text">
-        {{text}}
-    <button>xxx</button>
-    <span class="vue-draggable-handle"></span>
-    </span>
-</template>
-<style>
-    .vue-draggable-handle {
-        position: absolute;
-        width: 20px;
-        height: 20px;
-        top: 0;
-        left: 0;
-        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
-        background-position: bottom right;
-        padding: 0 8px 8px 0;
-        background-repeat: no-repeat;
-        background-origin: content-box;
-        box-sizing: border-box;
-        cursor: pointer;
-    }
-</style>
-<script>
-    export default {
-        name: "CustomDragElement",
-        props: {
-            text : {
-                type: String,
-                default: "x",
-            },
-        },
-        data: function() {
-            return {
-            }
-        },
-        mounted: function() {
-            console.log("### " + this.text + " ready!");
-        },
-    }
-</script>
\ No newline at end of file

app/web/page/activity/component/components/TestElement.vue

-<template>
-    <span class="text">
-        {{text}}
-    </span>
-</template>
-<style>
-</style>
-<script>
-    export default {
-        name: "TestElement",
-        props: {
-            text : {
-                type: String,
-                default: "x",
-            },
-        },
-        data: function() {
-            return {
-            }
-        },
-        mounted: function() {
-            console.log("### " + this.text + " ready!");
-        },
-    }
-</script>
\ No newline at end of file

app/web/page/activity/view/activity/index.ts

+import { kebabCase } from 'lodash';
 import { Vue, Component } from 'vue-property-decorator';
 import eleConfig from '../../../editor/utils/config';
-import FreedomContainer from '../../../editor/component/FreedomContainer/index.vue';
-// import schameConfig from '@qg/cherry-ui/src/button/schame.js';
-// import components from '@qg/cherry-ui/src/index.js';
-import { kebabCase } from 'lodash';
-// import {GridLayout, GridItem} from 'vue-grid-layout';
-import GridLayout from '../../component/components/GridLayout.vue';
-import GridItem from '../../component/components/GridItem.vue';
+import FreedomContainer from '../../component/FreedomContainer/index.vue';
+import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
+import GridItem from '../../component/VueGridLayout/GridItem.vue';
 import LoginForm from '@/lib/Form/index.vue';
 import TopBar from '@/component/TopBar';
 
@@ -17,12 +14,10 @@ import {
 @Component({ components: { FreedomContainer, GridLayout, GridItem, TopBar, LoginForm }, name: 'Activity'})
 export default class Activity extends Vue {
   @Getter('pageData') pageData;
-  // pageData = {elements: [{name: 'cr-field', point: {x: 0, y: 0, w: 12, h: 1, i: '1', moved: false}}, {name: 'cr-button', point: {x: 0, y: 1, w: 12, h: 1, i: '0', moved: false}, schame: [{key: 'color', name: '按钮颜色', type: 'ColorPicker'}, {key: 'text', name: '按钮文案', type: 'Input'}], props: {tag: 'button', type: 'default', size: 'normal', color: '#07c160', text: '按钮1', shape: 'square', nativeType: 'button', loadingSize: '20px'}, commonStyle: {position: 'absolute', top: 5, left: 5}}, {name: 'freedom-container', point: {x: 0, y: 2, w: 12, h: 5, i: '2', moved: false}, child: []}]};
 
   isLayoutComReady = false;
 
   get layout() {
-    console.log('this.pageData', this.pageData);
     return this.pageData && this.pageData.elements.map(v => v.point) || [];
   }
 
@@ -35,7 +30,6 @@ export default class Activity extends Vue {
   createStyle({h}) {
     return EASY_ENV_IS_NODE ? {
       height: `${h * 50 + Math.max(0, h - 1) * 10}px`,
-      // marginTop: '10px'
     } : {};
   }
 }
\ No newline at end of file

app/web/page/editor/component/FreedomContainer/index.ts

@@ -54,11 +54,4 @@ export default class FreedomContainer extends Mixins(ContextMenu) {
     console.log('handleElementClick', curEleIndex, curChildIndex, this.childItem);
     this.$emit('handleElementClick', curEleIndex, curChildIndex);
   }
-
-  home() {
-    console.log('主页');
-  },
-  deletedata() {
-    console.log('delete!');
-  }
 }
\ No newline at end of file

app/web/page/editor/component/FreedomContainer/index.vue

@@ -35,5 +35,8 @@
 				border: 2px dashed #0c0c0c !important;
 			}
 		}
+		.activity {
+			
+		}
 	}
 </style>
\ No newline at end of file