表单页面

src/views/haomo/components/details/HmComplexDetail.vue

@@ -73,8 +73,9 @@
           params: params
         }).then(resp => {
           self.list = resp.data
-          self.detail = self.list[0]
           console.log(self.list)
+          self.detail = self.list[0]
+          // console.log(self.list)
         })
       }
     }

src/views/haomo/components/forms/HmComplexForm.vue

 <template>
   <el-row type="flex" class="hm-form">
-    <!--左侧留白-->
     <el-col :span="6"><div></div></el-col>
     <el-col :span="12" style="border:1px solid orange"><div>
         <!--标题-->
         <h2 class="title">表单页面</h2>
         <!--表单部分-->
-        <el-form :model="form" ref="form" :rules="rules"  label-width="110px" status-icon style="width:80%;margin:0 auto">
+        <!--<el-form :model="form" ref="form" :rules="rules"  label-width="110px" status-icon style="width:80%;margin:0 auto">
           <el-form-item label="姓名" prop="name">
             <el-input type="text" v-model="form.name" autofocus placeholder="请输入姓名"></el-input>
           </el-form-item>
@@ -25,7 +24,7 @@
           <el-form-item label="照片" prop="img">
             <input type="file">
           </el-form-item>
-          <!--选择学历-->
+          &lt;!&ndash;选择学历&ndash;&gt;
           <el-form-item label="学历" prop="education">
             <el-select v-model="form.education" placeholder="请选择学历">
               <el-option label="博士" value="doctor"></el-option>
@@ -53,7 +52,7 @@
           <el-form-item label="住址" prop="address">
             <el-input type="textarea" placeholder="请填写地址" :autosize="{ minRows: 2, maxRows: 4}" resize="none" v-model="form.address"></el-input>
           </el-form-item>
-          <!--确定提交和重置-->
+          &lt;!&ndash;确定提交和重置&ndash;&gt;
           <el-form-item>
             <el-col :span="12">
               <el-button type="primary" @click="onSubmit()">确定</el-button>
@@ -62,15 +61,29 @@
               <el-button @click="resetForm()">重置</el-button>
             </el-col>
           </el-form-item>
-        </el-form>
+        </el-form>-->
+      <el-form label-width="110px" status-icon style="width:80%;margin:0 auto">
+        <el-form-item v-for="column in showColumns" :label="column.name">
+          <el-input :placeholder="column.codeCamel"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-col :span="12">
+            <el-button type="primary" @click="onSubmit()">确定</el-button>
+          </el-col>
+          <el-col :span="12">
+            <el-button @click="resetForm()">重置</el-button>
+          </el-col>
+        </el-form-item>
+      </el-form>
       </div>
     </el-col>
-    <!--右侧留白-->
     <el-col :span="6"><div></div></el-col>
   </el-row>
 </template>
 
 <script>
+  import _ from 'lodash'
+  import request from '@/utils/request'
   /**
    * 表单页面。
    */
@@ -82,52 +95,77 @@
     components: {},
     // 混入公共对象
     mixins: [],
-    props: {},
+    props: {
+      schema: {
+        type: Object,
+        required: true
+      }
+    },
     data() {
       return {
-        form: {
-          name: '',
-          gender: '男',
-          age: '',
-          password: '',
-          website: '',
-          img: '',
-          date: '',
-          education: '',
-          color: '#ff0000',
-          phone: '',
-          email: '',
-          address: ''
-        },
-        rules: {
-          name: [
-            { required: true, message: '请输入姓名', trigger: 'blur' },
-            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
-          ],
-          age: [
-            { required: true, message: '请输入年龄', trigger: 'blur' },
-            { type: 'number', message: '年龄必须为数字', trigger: 'change' }
-          ],
-          website: [
-            { required: true, message: '请输入网址', trigger: 'blur' },
-            { pattern: /[a-zA-z]+:\/\/[^\s]*/, message: '请输入正确的网址', trigger: 'change' }
-          ],
-          password: [
-            { required: true, message: '请输入密码', trigger: 'blur' },
-            { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须同时包含数字和字母 6-20位', trigger: 'change' }
-          ],
-          phone: [
-            { type: 'number', required: true, message: '请输入手机号', trigger: 'blur' },
-            { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }
-          ],
-          email: [
-            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
-          ]
-        }
+        list: null,
+        form: null,
+        showColumns: [] // 要显示的列数据
+        // form: {
+        //   name: '',
+        //   gender: '男',
+        //   age: '',
+        //   password: '',
+        //   website: '',
+        //   img: '',
+        //   date: '',
+        //   education: '',
+        //   color: '#ff0000',
+        //   phone: '',
+        //   email: '',
+        //   address: ''
+        // },
+        // rules: {
+        //   name: [
+        //     { required: true, message: '请输入姓名', trigger: 'blur' },
+        //     { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
+        //   ],
+        //   age: [
+        //     { required: true, message: '请输入年龄', trigger: 'blur' },
+        //     { type: 'number', message: '年龄必须为数字', trigger: 'change' }
+        //   ],
+        //   website: [
+        //     { required: true, message: '请输入网址', trigger: 'blur' },
+        //     { pattern: /[a-zA-z]+:\/\/[^\s]*/, message: '请输入正确的网址', trigger: 'change' }
+        //   ],
+        //   password: [
+        //     { required: true, message: '请输入密码', trigger: 'blur' },
+        //     { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须同时包含数字和字母 6-20位', trigger: 'change' }
+        //   ],
+        //   phone: [
+        //     { type: 'number', required: true, message: '请输入手机号', trigger: 'blur' },
+        //     { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }
+        //   ],
+        //   email: [
+        //     { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+        //     { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
+        //   ]
+        // }
       }
     },
+
+    created() {
+      this.init()
+      // console.log(this.schema)
+    },
     methods: {
+      init() {
+        const self = this
+        _.each(self.schema['columns'], function(column) {
+          const tmp = JSON.parse(JSON.stringify(column))
+          self.showColumns.push(tmp)
+        })
+        console.log(self.showColumns)
+        if (!request.defaults.baseURL) {
+          request.defaults.baseURL = '/org/api'
+        }
+        console.log(request.defaults)
+      },
       // 提交
       /**
        * 确定提交函数。

src/views/haomo/components/forms/index.vue

 <template>
   <div>
-    <hm-complex-form>
+    <hm-complex-form :schema="schema['HmUser']">
     </hm-complex-form>
   </div>
 </template>
 
 <script>
   import HmComplexForm from './HmComplexForm.vue'
+  import schema from '../../schemas/hm_org_schema'
 
   export default {
     name: 'HmComplexForm',
@@ -24,6 +25,8 @@
     filters: {
     },
     created() {
+      this.schema = schema
+      // console.log(this.schema)
     },
     methods: {}
   }