fix design styles

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@xkeshi/vue-qrcode": "^1.0.0",
-    "avue-formdesigner": "^1.0.0",
+    "avue-form-design": "^1.0.0",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "classlist-polyfill": "^1.2.0",

src/main.js

@@ -15,14 +15,14 @@ import * as filters from './filters' // 全局filter
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import './styles/common.scss'
-import avueFormdesigner from 'avue-formdesigner/src/components/'
+import avueFormDesign from 'avue-form-design'
 import basicContainer from './components/basic-container/main'
 // 插件 json 展示
 import vueJsonTreeView from 'vue-json-tree-view'
 
 Vue.use(router)
 
-Vue.use(avueFormdesigner);
+Vue.use(avueFormDesign);
 Vue.use(vueJsonTreeView)
 
 Vue.use(VueAxios, axios)

src/views/gen/design.vue

@@ -1,50 +1,56 @@
 <template>
   <div class="webapp">
     <basic-container>
-      <avue-formdesigner :option="option"
-                         @submit="handleSubmit"></avue-formdesigner>
+      <avue-form-design :option="option"
+                        @submit="handleSubmit">
+      </avue-form-design>
     </basic-container>
   </div>
 </template>
 
 
 <script>
-  import {getForm} from '@/api/gen/gen'
-  import {validatenull} from "../../util/validate";
+import { getForm } from '@/api/gen/gen'
+import { validatenull } from "../../util/validate";
 
-  export default {
-    data() {
-      return {
-        box: true,
-        option: {}
+export default {
+  data () {
+    return {
+      box: true,
+      option: {
+        column: []
       }
+    }
+  },
+  created () {
+    this.getFormInfo()
+  },
+  methods: {
+    handleSubmit (json) {
+      console.log(json)
     },
-    created() {
-      this.getFormInfo()
-    },
-    methods: {
-      handleSubmit(json) {
-        console.log(json)
-      },
-      getFormInfo() {
-        let params = this.$route.query;
-        getForm(params.tableName).then(response => {
-          if (!validatenull(response.data.data)) {
-            this.option = JSON.parse(response.data.data.formInfo)
-          }
-        })
-      }
+    getFormInfo () {
+      let params = this.$route.query;
+      getForm(params.tableName).then(response => {
+        if (!validatenull(response.data.data)) {
+          this.option = JSON.parse(response.data.data.formInfo)
+        }
+      })
     }
   }
+}
 </script>
 <style lang="scss">
-  .webapp {
-    background-color: #fff;
-    position: fixed;
-    left: 0;
-    top: 0;
-
-    width: 100%;
-    height: 100%;
+.webapp {
+  background-color: #fff;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .form-designer {
+    height: 700px;
+  }
+  .form-designer .widget-config-container .el-tabs__header {
+    position: relative;
   }
+}
 </style>