加入动态form

BoBoooooo · Oct 30, 2018 · e652a1e · e652a1e
1 parent b1d2885
commit e652a1e
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 224 deletions.
diff --git a/src/router/index.js b/src/router/index.js
@@ -12,7 +12,6 @@ Vue.use(Router)
   * hidden : if `hidden:true` will not show in the sidebar
   * redirect : if `redirect:noredirect` will not redirct in the levelbar
   * noDropdown : if `noDropdown:true` will not has submenu in the sidebar
-  * meta : `{ role: ['admin'] }`  will control the page role
   **/
 export const constantRouterMap = [
   { path: '/login', component: ()=>import('@/views/login/index'), hidden: true },
@@ -54,7 +53,7 @@ export default new Router({
     {
       path: '/DouBan',
       component: Layout,
-      redirect: '/DouBan/person',
+      redirect: '/DouBan/movie',
       name:"DouBan",
       title:"豆瓣查询",
       icon:'tubiao',
@@ -69,19 +68,21 @@ export default new Router({
     {
       path: '/system',
       component: Layout,
-      redirect: '/system/user',
+      redirect: '/system/users',
       name:"system",
       title:"系统设置",
       icon:'zujian',
       children: [
         { path: 'users', name: 'users',title:"用户设置", component: ()=>import('@/views/system/users'),meta:{title:"用户设置"}},
         { path: 'dept', name: 'dept',title:"部门设置", component: ()=>import('@/views/system/dept'),meta:{title:"部门设置"}},
         { path: 'role', name: 'role',title:"角色设置", component: ()=>import('@/views/system/role'),meta:{title:"角色设置"}},
-        // { path: 'menu', name: 'menu',title:"菜单设置", component: ()=>import('@/views/system/menu'),meta:{title:"菜单设置"}}
+        { path: 'role2', name: 'role2',title:"表单设计", component: ()=>import('@/views/system/formdesigner'),meta:{title:"表单设计"}},
 
       ]
     },
 
+
+
     {path:"*",redirect:"/404",hidden:true}
   ]
 

diff --git a/src/views/Archive/person.vue b/src/views/Archive/person.vue
@@ -1,5 +1,14 @@
 <template>
   <div class="app-container" id="person">
+
+<el-button @click="test()"></el-button>
+
+<generate-form
+    :data="jsonData"
+    ref="generateForm">
+</generate-form>
+
+
 <el-row>
   <el-col :span="2">
       <el-button @click="New()" type="primary" size="small">新增</el-button>
@@ -116,10 +125,85 @@ import {
 } from "@/api/Archive/person"
 import { getToken } from "@/utils/auth"
 import UploadAffix from "@/components/UploadAffix"
+import {
+  GenerateForm
+} from 'form-making'
+
 export default {
   //
   data() {
     return {
+      jsonData:{
+  "list": [
+    {
+      "type": "input",
+      "name": "单行文本",
+      "icon": "regular/keyboard",
+      "options": {
+        "width": "100%",
+        "defaultValue": "",
+        "required": false,
+        "dataType": "string",
+        "pattern": "",
+        "placeholder": "",
+        "remoteFunc": "func_1540898325000_60519"
+      },
+      "key": "1540898325000_60519",
+      "model": "input_1540898325000_60519",
+      "rules": [
+        {
+          "type": "string",
+          "message": "单行文本格式不正确"
+        }
+      ]
+    },
+    {
+      "type": "textarea",
+      "name": "多行文本",
+      "icon": "regular/keyboard",
+      "options": {
+        "width": "100%",
+        "defaultValue": "",
+        "required": false,
+        "pattern": "",
+        "placeholder": "",
+        "remoteFunc": "func_1540898327000_70367"
+      },
+      "key": "1540898327000_70367",
+      "model": "textarea_1540898327000_70367",
+      "rules": []
+    },
+    {
+      "type": "time",
+      "name": "时间选择器",
+      "icon": "regular/clock",
+      "options": {
+        "defaultValue": "",
+        "readonly": false,
+        "disabled": false,
+        "editable": true,
+        "clearable": true,
+        "placeholder": "",
+        "startPlaceholder": "",
+        "endPlaceholder": "",
+        "isRange": false,
+        "arrowControl": true,
+        "format": "HH:mm:ss",
+        "required": false,
+        "width": "",
+        "remoteFunc": "func_1540898328000_61326"
+      },
+      "key": "1540898328000_61326",
+      "model": "time_1540898328000_61326",
+      "rules": []
+    }
+  ],
+  "config": {
+    "labelWidth": 100,
+    "labelPosition": "left",
+    "size": "small"
+  }
+},
       selected: null,
       textMap: {
         update: "编辑",
@@ -155,7 +239,8 @@ export default {
     }
   },
   components: {
-    UploadAffix
+    UploadAffix,
+    GenerateForm
   },
 
   created() {
@@ -244,7 +329,16 @@ export default {
         this.dialogFormVisible = false
         this.fetchData(this.listQuery)
       })
-    }
+    },
+    test(){
+            // 调用此方法验证表单数据和获取表单数据
+            this.$refs.generateForm.getData().then(data => {
+                console.log(data)
+                // data 为获取的表单数据
+            }).catch(e => {
+                // 数据校验失败
+            })
+        }
   }
 }
 </script>
diff --git a/src/views/system/formdesigner.vue b/src/views/system/formdesigner.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="app-container" ref="container" id="formdesigner">
+<making-form preview generate-json ref="form" >
+    <template slot="action">
+      <el-button @click="test">保存</el-button>
+    </template>
+</making-form>
+  </div>
+</template>
+
+<script>
+import {MakingForm} from 'form-making'
+
+export default {
+  name:"formdesigner",
+  data(){
+    return {
+
+    }
+  },
+  methods:{
+      test(){
+        this.$refs.form.getJSON().then(data=>{
+            console.log(data)
+        })
+      }
+  },
+  components:{
+MakingForm
+  }
+}
+</script>