feat: update layout

src/store/modules/dashboard.ts

@@ -19,17 +19,17 @@ import { store } from "@/store";
 import { GridItemData } from "@/types/dashboard";
 
 interface DashboardState {
-  layouts: GridItemData[];
+  layout: GridItemData[];
 }
 
 export const dashboardStore = defineStore({
   id: "dashboard",
   state: (): DashboardState => ({
-    layouts: [],
+    layout: [],
   }),
   actions: {
-    setLayouts(data: GridItemData[]) {
-      this.layouts = data;
+    setLayout(data: GridItemData[]) {
+      this.layout = data;
     },
     addWidget() {
       const newWidget: GridItemData = {
@@ -37,13 +37,13 @@ export const dashboardStore = defineStore({
         y: 0,
         w: 12,
         h: 3,
-        i: String(this.layouts.length),
+        i: String(this.layout.length),
       };
-      this.layouts = this.layouts.map((d: GridItemData) => {
+      this.layout = this.layout.map((d: GridItemData) => {
         d.y = d.y + 3;
         return d;
       });
-      this.layouts.push(newWidget);
+      this.layout.push(newWidget);
     },
   },
 });

src/views/dashboard/Edit.vue

@@ -27,14 +27,13 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { toRefs, defineComponent, reactive, ref } from "vue";
 import { ElButton } from "element-plus";
-import GridLayout from "./widget/Layout.vue";
+import GridLayout from "./panel/Layout.vue";
 import { GridItemData } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const dashboardStore = useDashboardStore();
-const layouts: GridItemData[] = [
+const layout: GridItemData[] = [
   { x: 0, y: 0, w: 2, h: 2, i: "0" },
   { x: 2, y: 0, w: 2, h: 4, i: "1" },
   { x: 4, y: 0, w: 2, h: 5, i: "2" },
@@ -56,7 +55,7 @@ const layouts: GridItemData[] = [
   { x: 0, y: 9, w: 2, h: 3, i: "18" },
   { x: 2, y: 6, w: 2, h: 2, i: "19" },
 ];
-dashboardStore.setLayouts(layouts);
+dashboardStore.setLayout(layout);
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {

src/views/dashboard/panel/Layout.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <grid-layout
-    v-model:layout="dashboardStore.layouts"
+    v-model:layout="dashboardStore.layout"
     :col-num="12"
     :row-height="30"
     :is-draggable="true"
@@ -22,9 +22,10 @@ limitations under the License. -->
     :is-mirrored="false"
     :vertical-compact="true"
     :use-css-transforms="true"
+    @layout-updated="layoutUpdatedEvent"
   >
     <grid-item
-      v-for="item in dashboardStore.layouts"
+      v-for="item in dashboardStore.layout"
       :x="item.x"
       :y="item.y"
       :w="item.w"
@@ -32,14 +33,19 @@ limitations under the License. -->
       :i="item.i"
       :key="item.i"
     >
-      {{ item.i }}
+      <Widget :item="item" />
     </grid-item>
   </grid-layout>
 </template>
 <script lang="ts" setup>
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { GridItemData } from "@/types/dashboard";
+import Widget from "./Widget.vue";
 
 const dashboardStore = useDashboardStore();
+function layoutUpdatedEvent(newLayout: GridItemData) {
+  dashboardStore.setLayout(newLayout);
+}
 </script>
 <style lang="scss" scoped>
 .vue-grid-layout {
@@ -52,7 +58,6 @@ const dashboardStore = useDashboardStore();
   background: #fff;
   box-shadow: 0px 1px 4px 0px #00000029;
   border-radius: 5px;
-  // border: 1px solid black;
 }
 
 .vue-grid-item .resizing {

src/views/dashboard/panel/Widget.vue

@@ -13,48 +13,15 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <VueDragResize
-    :isActive="item.static"
-    :w="item.w"
-    :h="item.h"
-    :x="item.x"
-    :y="item.y"
-    @resizing="resize"
-    @dragging="resize"
-  >
-    <h3>Hello World {{ item.i }}</h3>
-  </VueDragResize>
+  <div class="header">title</div>
+  <div class="body">chart</div>
 </template>
 <script lang="ts" setup>
-import { defineProps, defineEmits } from "vue";
+import { defineProps } from "vue";
 import type { PropType } from "vue";
-import VueDragResize from "vue-drag-resize";
-interface GridItemData {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-  i: number;
-  static: boolean;
-}
+import { GridItemData } from "@/types/dashboard";
+
 const props = defineProps({
   item: { type: Object as PropType<GridItemData> },
 });
-const emit = defineEmits(["move"]);
-
-function resize(newRect: {
-  width: number;
-  height: number;
-  top: number;
-  left: number;
-}) {
-  const m = {
-    ...props.item,
-    x: newRect.left,
-    y: newRect.top,
-    w: newRect.width,
-    h: newRect.height,
-  };
-  emit("move", m);
-}
 </script>