d

iview-admin/src/view/components/tables/forms/forms.vue

 <template>
 <template>
   <div>
   <div>
     <Card>
     <Card>
-      <div></div>
-      <Form ref="formInline" :model="formdata" :rules="ruleInline">
+      <div>
+        <button type="primary" @click="testclick">test</button>
+      </div>
+      <Form ref="formInline" :model="formModel" :rules="metaRules">
         <template v-for="group in forminfo">
         <template v-for="group in forminfo">
           <Divider orientation="left" :key="group.title">{{group.title}}</Divider>
           <Divider orientation="left" :key="group.title">{{group.title}}</Divider>
           <Row :key="'r'+group.title">
           <Row :key="'r'+group.title">
             <Col :xs="2" :sm="4" :md="6" :lg="8" v-for="ctl in group.ctls" :key="ctl.prop">
             <Col :xs="2" :sm="4" :md="6" :lg="8" v-for="ctl in group.ctls" :key="ctl.prop">
-              <FormItem :label="ctl.label"></FormItem>
+              <FormItem :label="ctl.label" :prop="ctl.prop">
+                <template v-if="ctl.type=='input'">
+                  <input v-model="formModel[ctl.prop]" />
+                </template>
+              </FormItem>
             </Col>
             </Col>
           </Row>
           </Row>
         </template>
         </template>
@@ -27,76 +33,41 @@ export default {
         return [];
         return [];
       }
       }
     },
     },
-    refvalidatemethod:{
-      type:Function,
-      default(){
-        return (rule, value, callback)=>{
-          return callback()
-        }
+    refvalidatemethod: {
+      type: Function,
+      default() {
+        return (rule, value, callback) => {
+          return callback();
+        };
       }
       }
     }
     }
   },
   },
   data() {
   data() {
     return {
     return {
-      forminfo: [
-        {
-          title: "控制信息",
-          col: 3,
-          ctls: [
-            {
-              type: "switch",
-              prop: "isAdmin",
-              acText: "是管理员",
-              inactText: "否",
-              placeHolder: "请输入单次使用消耗的宝币数",
-              style: ""
-            }
-            //  {"type":"select","refModel":"pmproduct","isMulti":false,"label":"所属产品","prop":"pmproduct_id","labelField":"name","valueField":"id","style":""},
-          ]
-        },
-        {
-          title: "基本信息",
-          col: 3,
-          ctls: [
-            {
-              type: "input",
-              label: "账号",
-              prop: "userName",
-              placeHolder: "登录账号",
-              style: "",
-              rules: [{ required: true, message: "  ", trigger: "blur" }]
-            },
-            {
-              type: "input",
-              label: "昵称",
-              prop: "nickName",
-              placeHolder: "昵称",
-              style: "",
-              rules: [{ required: true, message: "  ", trigger: "blur" }]
-            },
-            {
-              type: "input",
-              label: "电话",
-              prop: "mobile",
-              placeHolder: "请输入电话",
-              style: "",
-              rules: [
-                { validator: "validatex", trigger: "blur" },
-                { required: true, message: "  ", trigger: "blur" }
-              ]
-            }
-            //  {"type":"select","refModel":"auth.role","isMulti":true,"label":"角色","prop":"roles","labelField":"name","valueField":"id","style":""},
-          ]
-        }
-      ],
+      forminfo: this.fminfo ? this.fminfo : [],
       formModel: {},
       formModel: {},
-      metaRules:{},
+      metaRules: {},
       btninfos: []
       btninfos: []
     };
     };
   },
   },
   watch: {
   watch: {
     fminfo(nf, of) {
     fminfo(nf, of) {
-      this.forminfo = nf;
+      console.log(">>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<<<<");
+     this.initFormModel()
+    }
+  },
+  methods: {
+    validatex(rule, value, callback) {
+      if (this.refvalidatemethod) {
+        return this.refvalidatemethod(rule, value, callback);
+      } else {
+        return callback();
+      }
+    },
+    testclick() {
+      console.log(this.formModel);
+    },
+    initFormModel() {
       this.forminfo.forEach(m => {
       this.forminfo.forEach(m => {
         if (!m || !m.ctls) {
         if (!m || !m.ctls) {
           return;
           return;
@@ -118,6 +89,7 @@ export default {
             if (ctl.type == "number") {
             if (ctl.type == "number") {
               this.$set(this.formModel, ctl.prop, 0);
               this.$set(this.formModel, ctl.prop, 0);
             } else {
             } else {
+              console.log("=============")
               this.$set(this.formModel, ctl.prop, "");
               this.$set(this.formModel, ctl.prop, "");
             }
             }
           }
           }
@@ -125,27 +97,10 @@ export default {
       });
       });
     }
     }
   },
   },
-  methods: {
-    handleDelete(params) {
-      console.log(params);
-    },
-    exportExcel() {
-      this.$refs.tables.exportCsv({
-        filename: `table-${new Date().valueOf()}.csv`
-      });
-    },
-    validatex(rule, value, callback){
-         if(this.refvalidatemethod){
-           return  this.refvalidatemethod(rule, value, callback);
-         }else{
-           return callback();
-         }
-    },
+  created(){
+    this.initFormModel();
   },
   },
   mounted() {
   mounted() {
-    getTableData().then(res => {
-      this.tableData = res.data;
-    });
   }
   }
 };
 };
 </script>
 </script>

iview-admin/src/view/components/tables/tables.vue

@@ -3,17 +3,20 @@
     <Card>
     <Card>
       <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-exec="doexec"/>
       <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-exec="doexec"/>
       <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
       <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
+      <Forms :fminfo="forminfo"></Forms>
     </Card>
     </Card>
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
 import Tables from '_c/tables'
 import Tables from '_c/tables'
+import Forms from './forms/forms'
 import { getTableData } from '@/api/data'
 import { getTableData } from '@/api/data'
 export default {
 export default {
   name: 'tables_page',
   name: 'tables_page',
   components: {
   components: {
-    Tables
+    Tables,
+    Forms
   },
   },
   props:{
   props:{
      metaName:String,
      metaName:String,
@@ -22,7 +25,7 @@ export default {
   data () {
   data () {
     this.metaName="user_info"
     this.metaName="user_info"
     return {
     return {
-  
+      forminfo:this.metaName?this.$store.getters[this.metaName]["form"]:[],
       columns: this.metaName?this.$store.getters[this.metaName]["list"]:[],
       columns: this.metaName?this.$store.getters[this.metaName]["list"]:[],
       tableData: []
       tableData: []
     }
     }