Parcourir la source

feat formdesigner page

smallwei il y a 6 ans
Parent
commit
030866e514
4 fichiers modifiés avec 67 ajouts et 8 suppressions
  1. 2 1
      package.json
  2. 3 1
      src/main.js
  3. 19 6
      src/router/page/index.js
  4. 43 0
      src/views/formdesigner.vue

+ 2 - 1
package.json

@@ -10,13 +10,14 @@
   },
   "dependencies": {
     "@xkeshi/vue-qrcode": "^1.0.0",
+    "avue-formdesigner": "^1.0.0",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "classlist-polyfill": "^1.2.0",
     "clipboard": "^2.0.4",
     "crypto-js": "^3.1.9-1",
     "echarts": "^4.2.1",
-    "element-ui": "~2.10.0",
+    "element-ui": "^2.11.1",
     "js-cookie": "^2.2.0",
     "nprogress": "^0.2.0",
     "script-loader": "^0.7.2",

+ 3 - 1
src/main.js

@@ -15,17 +15,19 @@ 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 basicContainer from './components/basic-container/main'
 // 插件 json 展示
 import vueJsonTreeView from 'vue-json-tree-view'
 
 Vue.use(router)
 
+Vue.use(avueFormdesigner);
 Vue.use(vueJsonTreeView)
 
 Vue.use(VueAxios, axios)
 
-Vue.use(ElementUI,{
+Vue.use(ElementUI, {
   size: 'medium',
   menuType: 'text'
 })

+ 19 - 6
src/router/page/index.js

@@ -15,7 +15,7 @@ export default [{
   path: '/lock',
   name: '锁屏页',
   component: () =>
-      import(/* webpackChunkName: "page" */ '@/page/lock/index'),
+    import(/* webpackChunkName: "page" */ '@/page/lock/index'),
   meta: {
     keepAlive: true,
     isTab: false,
@@ -25,7 +25,7 @@ export default [{
 {
   path: '/404',
   component: () =>
-      import(/* webpackChunkName: "page" */ '@/components/error-page/404'),
+    import(/* webpackChunkName: "page" */ '@/components/error-page/404'),
   name: '404',
   meta: {
     keepAlive: true,
@@ -37,7 +37,7 @@ export default [{
 {
   path: '/403',
   component: () =>
-      import(/* webpackChunkName: "page" */ '@/components/error-page/403'),
+    import(/* webpackChunkName: "page" */ '@/components/error-page/403'),
   name: '403',
   meta: {
     keepAlive: true,
@@ -48,7 +48,7 @@ export default [{
 {
   path: '/500',
   component: () =>
-      import(/* webpackChunkName: "page" */ '@/components/error-page/500'),
+    import(/* webpackChunkName: "page" */ '@/components/error-page/500'),
   name: '500',
   meta: {
     keepAlive: true,
@@ -69,7 +69,7 @@ export default [{
     path: ':routerPath',
     name: 'iframe',
     component: () =>
-        import(/* webpackChunkName: "page" */ '@/components/iframe/main'),
+      import(/* webpackChunkName: "page" */ '@/components/iframe/main'),
     props: true
   }]
 },
@@ -81,11 +81,24 @@ export default [{
   path: '/authredirect',
   name: '授权页',
   component: () =>
-      import(/* webpackChunkName: "page" */ '@/page/login/authredirect'),
+    import(/* webpackChunkName: "page" */ '@/page/login/authredirect'),
+  meta: {
+    keepAlive: true,
+    isTab: false,
+    isAuth: false
+  }
+},
+{
+  path: '/formdesigner',
+  name: '表单设计',
+  component: () =>
+    import(/* webpackChunkName: "page" */ '@/views/formdesigner'),
   meta: {
     keepAlive: true,
     isTab: false,
     isAuth: false
   }
 }
+
+
 ]

+ 43 - 0
src/views/formdesigner.vue

@@ -0,0 +1,43 @@
+<template>
+
+  <div class="webapp">
+    <avue-formdesigner :option="option"
+                       @submit="handleSubmit"></avue-formdesigner>
+  </div>
+
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      box: true,
+      option: {
+        column: [{
+          label: '姓名',
+          prop: 'name'
+        }]
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created () {
+  },
+  methods: {
+    handleSubmit (json) {
+      console.log(json)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.webapp {
+  background-color: #fff;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>