Skip to content

V
VueElementTemplate
Commit f6ab18c4 authored by 王康's avatar 王康
Browse files
Options

表单页面

parent 1a55d85b
Show whitespace changes
Inline Side-by-side
Showing with 91 additions and 49 deletions
src/views/haomo/components/details/HmComplexDetail.vue
View file @ f6ab18c4
......@@ -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
View file @ f6ab18c4
<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,20 @@
<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>
</el-col>
<el-col :span="12">
<el-button @click="resetForm()">重置</el-button>
</el-col>
</el-form-item>
</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>
......@@ -65,12 +77,13 @@
</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
View file @ f6ab18c4
<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: {}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment