添加新建时支持输入宽高，修复model关闭报错bug

@@ -2,13 +2,17 @@
   <a-modal
     title="添加小部件"
     centered
-    v-model="this.visible"
+    :visible="this.visible"
     @ok="add"
     @cancel="cancel"
     :destroyOnClose="true"
     :maskClosable="false"
+    :afterClose="afterClose"
     :okButtonProps="{ props: {disabled: selectItem===null?true:false} }"
   >
+    宽度：
+    <a-input-number :min="1" :max="100" v-model="width" />高度：
+    <a-input-number :min="1" v-model="height" />选择小部件：
     <a-select
       showSearch
       placeholder="搜索小部件"
@@ -32,7 +36,9 @@ export default {
     return {
       list: window.componentList,
       selectItem: null,
-      configSelect: null
+      configSelect: null,
+      width: 10,
+      height: 1
     };
   },
   methods: {
@@ -51,19 +57,26 @@ export default {
         this.configSelect = value;
       }
     },
+    afterClose: function() {
+      this.selectItem = null;
+      this.configSelect = null;
+      this.width = 10;
+      this.height = 1;
+    },
     add: function() {
       if (!this.isUpdate) {
         this.$store.commit("layout/setUpdate", true);
       }
-      this.$store.commit("layout/addLayout", this.selectItem);
-      this.selectItem = null;
-      this.configSelect = null;
-      this.$emit('closeAddGrid');
+      this.$store.commit("layout/addLayout", {
+        name: this.selectItem,
+        width: this.width,
+        height: this.height
+      });
+
+      this.$emit("closeAddGrid");
     },
     cancel: function() {
-      this.selectItem = null;
-      this.configSelect = null;
-      this.$emit('closeAddGrid');
+      this.$emit("closeAddGrid");
     }
   }
 };

@@ -8,8 +8,8 @@
       @click="() => visible = true"
       v-if="isLock"
     ></a-button>
-    <a-button size="small" shape="circle" :icon="isLock?'unlock':'lock'" @click="setLock()"></a-button>
-    <add-grid :visible="visible" @closeAddGrid="setVisible()"/>
+    <a-button size="small" shape="circle" :icon="isLock?'unlock':'lock'" @click="setLock"></a-button>
+    <add-grid :visible="visible" @closeAddGrid="setVisible"/>
   </div>
 </template>
 

-import Vue from 'vue';
-import App from './App.vue';
-import store from './store';
-import './autoImport';
-import { Modal, Button, Select, message } from 'ant-design-vue';
-import { inventory } from './api';
+import Vue from "vue";
+import App from "./App.vue";
+import store from "./store";
+import "./autoImport";
+import { Modal, Button, Select, message, InputNumber } from "ant-design-vue";
+import { inventory } from "./api";
 
 Vue.config.productionTip = false;
 Vue.use(Modal);
 Vue.use(Button);
 Vue.use(Select);
+Vue.use(InputNumber);
 
 Vue.prototype.$message = message;
 Vue.prototype.$inventory = inventory;
 
 new Vue({
-  el: '#app',
+  el: "#app",
   store,
-  render: (h) => h(App),
+  render: h => h(App)
 });

@@ -2,7 +2,7 @@ const state = {
   layout: [],
   isLock: true,
   dashboardId: null,
-  isUpdate: false,
+  isUpdate: false
 };
 
 const mutations = {
@@ -15,14 +15,14 @@ const mutations = {
   setUpdate(state, value) {
     state.isUpdate = value;
   },
-  addLayout(state, name) {
+  addLayout(state, obj) {
     state.layout.push({
       x: 0,
       y: 0,
-      w: 10,
-      h: 2,
+      w: obj.width,
+      h: obj.height,
       i: state.layout.length + 1,
-      name,
+      name: obj.name
     });
   },
   updateLayout(state, array) {
@@ -30,7 +30,7 @@ const mutations = {
   },
   removeLayout(state, index) {
     state.layout.splice(index, 1);
-  },
+  }
 };
 
 export default {