添加修改布局钩子，保存到网络

孙玉明
Commit bb334c407d2f1864471a4b0760d1200ef74879e7 bb334c40 1 parent c3abc622
Showing 5 changed files with 94 additions and 48 deletions
src/App.vue
src/components/gridComponent.vue
src/components/layout.vue
src/components/setting.vue
src/store/components/layout.js
--- a/src/App.vue
View file @bb334c4
+++ b/src/App.vue
View file @bb334c4
 <template>
   <div id="app">
     <setting/>
-    <!-- <layout/> -->
+    <layout/>
   </div>
 </template>
 <script>
 import setting from "./components/setting";
-// import layout from "./components/layout";
+import layout from "./components/layout";
 export default {
   name: "app",
   components: {
     setting,
-    // layout
+    layout
   },
   mounted() {
     this.$inventory
@@ -34,19 +34,16 @@ export default {
             "layout/setDashboardId",
             list.managedObjects[0].id
           );
+          if (list.managedObjects[0].dashLayout) {
+            this.$store.commit(
+              "layout/updateLayout",
+              list.managedObjects[0].dashLayout
+            );
+          }
         }
       });
   },
-  methods: {
+  methods: {}
-    // isLock: function(val) {
-      // this.$store.commit("setLock", detail.id);
-    // this.isDraggable = val.isDraggable;
-    // this.isResizable = val.isResizable;
-    // this.$message.success(
-    //   val.isResizable && val.isDraggable ? "编辑已解锁" : "编辑已锁定"
-    // );
-    // }
-  }
 };
 </script>
--- a/src/components/gridComponent.vue
View file @bb334c4
+++ b/src/components/gridComponent.vue
View file @bb334c4
 <template>
   <div class="gridComponent">
     <div class="setting">
-      <a-button
+      <a-button size="small" shape="circle" icon="close" @click="close()" v-if="isLock"></a-button>
-        size="small"
+      <a-button size="small" shape="circle" icon="setting" v-if="isLock"></a-button>
-        shape="circle"
-        icon="close"
-        @click="close"
-        v-show="this.$store.state.layout.isDraggable&&this.$store.state.layout.isResizable"
-      ></a-button>
-      <a-button
-        size="small"
-        shape="circle"
-        icon="setting"
-        v-show="this.$store.state.layout.isDraggable&&this.$store.state.layout.isResizable"
-      ></a-button>
     </div>
     <component :is="layout.name" :isConfig="isConfig"></component>
   </div>
@@ -30,12 +19,15 @@
 </style>
 <script>
+import { mapState } from "vuex";
 export default {
+  computed: mapState({
+    isLock: state => state.layout.isLock,
+    isUpdate: state => state.layout.isUpdate
+  }),
   props: {
     layout: Object,
-    index: Number,
+    index: Number
-    // isDraggable: Boolean,
-    // isResizable: Boolean
   },
   data() {
     return {
@@ -44,7 +36,10 @@ export default {
   },
   methods: {
     close: function() {
-      this.$emit("close", this.index);
+      if (!this.isUpdate) {
+        this.$store.commit("layout/setUpdate", true);
+      }
+      this.$store.commit("layout/removeLayout", this.index);
     }
   }
 };
--- a/src/components/layout.vue
View file @bb334c4
+++ b/src/components/layout.vue
View file @bb334c4
 <template>
   <grid-layout
-    :layout.sync="this.$store.state.layout.layout"
+    :layout.sync="layout"
     :col-num="100"
     :row-height="30"
-    :is-draggable="this.$store.state.layout.isDraggable"
+    :is-draggable="isLock"
-    :is-resizable="this.$store.state.layout.isResizable"
+    :is-resizable="isLock"
     :is-mirrored="false"
     :vertical-compact="true"
     :margin="[0, 0]"
     :use-css-transforms="true"
+    @layout-updated="layoutUpdatedEvent"
   >
     <grid-item
-      v-for="(item,index) in this.$store.state.layout.layout"
+      v-for="(item,index) in layout"
       :x="item.x"
       :y="item.y"
       :w="item.w"
@@ -23,23 +24,43 @@
       :maxH="item.maxH"
       :key="item.i"
     >
-      <gridComponent :layout="item" :index="index" @close="close"/>
+      <gridComponent :layout="item" :index="index"/>
     </grid-item>
   </grid-layout>
 </template>
 <script>
+import { mapState } from "vuex";
 import VueGridLayout from "vue-grid-layout";
 import gridComponent from "./gridComponent";
 export default {
+  computed: mapState({
+    layout: state => state.layout.layout,
+    isLock: state => state.layout.isLock,
+    isUpdate: state => state.layout.isUpdate
+  }),
   components: {
     GridLayout: VueGridLayout.GridLayout,
     GridItem: VueGridLayout.GridItem,
     gridComponent
   },
-  methods:{
+  methods: {
-    close:function(val){
+    layoutUpdatedEvent: function(newLayout) {
-      // this.layout.splice(val,1)
+      let updateLayout;
+      updateLayout = Array.from(newLayout, item => {
+        return {
+          x: item.x,
+          y: item.y,
+          w: item.w,
+          h: item.h,
+          i: item.i,
+          name: item.name
+        };
+      });
+      this.$store.commit("layout/updateLayout", updateLayout);
+      if (!this.isUpdate) {
+        this.$store.commit("layout/setUpdate", true);
+      }
     }
   }
 };
--- a/src/components/setting.vue
View file @bb334c4
+++ b/src/components/setting.vue
View file @bb334c4
 <template>
   <div class="setting">
-    <a-button size="small" shape="circle" icon="plus" @click="() => visible = true" v-show="isLock"></a-button>
+    <a-button size="small" shape="circle" icon="save" @click="save()" v-if="isLock&&isUpdate"></a-button>
+    <a-button size="small" shape="circle" icon="plus" @click="() => visible = true" v-if="isLock"></a-button>
     <a-button size="small" shape="circle" :icon="isLock?'unlock':'lock'" @click="setLock()"></a-button>
     <a-modal
       title="添加小部件"
       centered
       v-model="visible"
       @ok="add"
+      @cancel="cancel"
       :destroyOnClose="true"
       :maskClosable="false"
       :okButtonProps="{ props: {disabled: selectItem===null?true:false} }"
@@ -29,7 +31,12 @@
 <script>
 import { mapState } from "vuex";
 export default {
-  computed: mapState({ isLock: state => state.layout.isLock }),
+  computed: mapState({
+    isLock: state => state.layout.isLock,
+    isUpdate: state => state.layout.isUpdate,
+    dashboardId: state => state.layout.dashboardId,
+    layout: state => state.layout.layout
+  }),
   data() {
     return {
       visible: false,
@@ -59,8 +66,24 @@ export default {
       }
     },
     add: function() {
-      this.$store.commit("layout/setLatout", this.selectItem);
+      if (!this.isUpdate) {
+        this.$store.commit("layout/setUpdate", true);
+      }
+      this.$store.commit("layout/addLayout", this.selectItem);
       this.visible = false;
+      this.selectItem = null;
+      this.configSelect = null;
+    },
+    cancel: function() {
+      this.selectItem = null;
+      this.configSelect = null;
+    },
+    save: function() {
+      this.$store.commit("layout/setUpdate", false);
+      this.$inventory.update({
+        id: this.dashboardId,
+        dashLayout: this.layout
+      });
     }
   }
 };
--- a/src/store/components/layout.js
View file @bb334c4
+++ b/src/store/components/layout.js
View file @bb334c4
@@ -2,6 +2,7 @@ const state = {
   layout: [],
   isLock: true,
   dashboardId: null,
+  isUpdate: false,
 };
 const mutations = {
@@ -11,16 +12,25 @@ const mutations = {
   setLock(state, value) {
     state.isLock = value;
   },
-  setLatout(state, name) {
+  setUpdate(state, value) {
+    state.isUpdate = value;
+  },
+  addLayout(state, name) {
     state.layout.push({
-        x: 0,
+      x: 0,
-        y: 0,
+      y: 0,
-        w: 10,
+      w: 10,
-        h: 2,
+      h: 2,
-        i: state.layout.length + 1,
+      i: state.layout.length + 1,
-        name
+      name,
     });
   },
+  updateLayout(state, array) {
+    state.layout = array;
+  },
+  removeLayout(state, index) {
+    state.layout.splice(index, 1);
+  },
 };
 export default {