表单设计json 可以持久化存储到数据库

BoBoooooo · Nov 1, 2018 · 9b950e8 · 9b950e8
1 parent 61f5310
commit 9b950e8
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 87 deletions.
diff --git a/src/api/system/form.js b/src/api/system/form.js
@@ -0,0 +1,34 @@
+import fetch from '@/utils/fetch'
+export function getTables(){
+    return fetch({
+        url: '/form/GetTables',
+        method: 'post',
+
+      })
+}
+
+export function GetFormDetail(tablename){
+    return fetch({
+        url: '/form/detail',
+        method: 'post',
+
+        params:{tablename}
+      })
+}
+
+export function AddForm(data){
+    return fetch({
+        url: '/form/add',
+        method: 'post',
+        data
+      })
+}
+
+export function UpdateForm(data){
+    return fetch({
+        url: '/form/update',
+        method: 'post',
+        data
+      })
+}
+
diff --git a/src/main.js b/src/main.js
@@ -27,4 +27,3 @@ new Vue({
 
 })
 
-
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
@@ -65,3 +65,7 @@ const permission = {
 }
 
 export default permission
+
+
+// var => let
+//
diff --git a/src/views/system/formdesigner.vue b/src/views/system/formdesigner.vue
@@ -2,104 +2,98 @@
   <div class="app-container" ref="container" id="formdesigner">
 <making-form preview generate-json ref="form">
     <template slot="action">
-      <el-button @click="test">保存</el-button>
+
+          <span style="margin-left:20px" v-if="selectform!==''">{{selectform}}</span>
+            <el-button style="border:none;float:left;margin-left:80px" @click="openmodal">选择要制作的表</el-button>
+
+      <el-button style="border:none" @click="save">保存</el-button>
     </template>
 </making-form>
+
+
+
+ <el-dialog title="选择表单"  :visible.sync="dialogFormVisible" >
+     <el-select v-model="selectform" placeholder="请选择">
+    <el-option
+ v-for="(item, index) in tablelist"
+ :key="index"
+      :label="item.table_name"
+      :value="item.table_name">
+    </el-option>
+  </el-select>
+
+  <el-button @click="select">选择</el-button>
+  </el-dialog>
+
+
   </div>
+
+
+
+
 </template>
 
 <script>
-import {MakingForm} from 'form-making'
-
+import { MakingForm } from "form-making";
+import {
+  getTables,
+  GetFormDetail,
+  AddForm,
+  UpdateForm
+} from "@/api/system/form";
 export default {
-  name:"formdesigner",
-  data(){
+  name: "formdesigner",
+  data() {
     return {
-
-    }
+      IsNew: true,
+      tablelist: null,
+      selectform: "",
+      dialogFormVisible: false
+    };
   },
-  mounted(){
-
-    let obj = {
-  "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": "单行文本格式不正确"
-        }
-      ]
+  created() {
+    getTables().then(res => {
+      this.tablelist = res.data;
+    });
+  },
+
+  methods: {
+    save() {
+     let json = this.$refs.form.getJSON()
+     console.log(json)
+          let obj = {
+            tableName: this.selectform,
+            formJson: json
+          }
+          if (this.IsNew) AddForm(obj);
+          else UpdateForm(obj);
+
+          this.dialogFormVisible = false;
+     
+      
     },
-    {
-      "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": []
+    openmodal() {
+      this.dialogFormVisible = true;
     },
-    {
-      "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": []
+    select() {
+      GetFormDetail(this.selectform).then(res => {
+        if (res.code !== 400) {
+         
+          this.$refs.form.setJSON(JSON.parse(res.data.formJson));
+                    this.IsNew = false;
+
+        } else
+        {
+                    this.$refs.form.setJSON([]);
+                    this.IsNew = true;
+
+        }
+        this.dialogFormVisible = false;
+      });
     }
-  ],
-  "config": {
-    "labelWidth": 100,
-    "labelPosition": "left",
-    "size": "small"
-  }
-}
-    this.$refs.form.setJSON(obj)
-  },
-  methods:{
-      test(){
-       console.log(this.$refs.form.getJSON())
-      }
   },
-  components:{
-MakingForm
+  components: {
+    MakingForm
   }
-}
+};
 </script>