Skip to content

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

表单页面

parent 1d573ab3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 263 additions and 346 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 50c0f9d4
...@@ -7,64 +7,7 @@ ...@@ -7,64 +7,7 @@
<div> <div>
<h2 class="title">表单页面</h2> <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 ref="form" :model="formModel" :rules="rules" label-width="110px"
<el-form-item label="姓名" prop="name">
<el-input type="text" v-model="form.name" autofocus placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input type="age" v-model.number="form.age" placeholder="请输入年龄"></el-input>
</el-form-item>
<el-form-item label="出生日期" prop="date">
<el-date-picker v-model="form.date" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<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>
<el-option label="硕士" value="master"></el-option>
<el-option label="本科" value="bachelor"></el-option>
<el-option label="专科" value="professional"></el-option>
<el-option label="其他" value="others"></el-option>
</el-select>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="最常用的网站" prop="website">
<el-input type="url" v-model="form.url" placeholder="请输入网址"></el-input>
</el-form-item>
<el-form-item label="最喜欢的颜色" prop="color" class="color">
<input type="color" v-model="form.color" style="width:200px;height:36px;border:none;outline:0"/>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model.number="form.phone" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<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 ref="form" :model="formModel" :rules="rules" label-width="110px" status-icon
style="width:80%;margin:0 auto"> style="width:80%;margin:0 auto">
<el-form-item v-for="(column,index) in showFields" :key="index" :label="column.name" :prop="column.codeCamel"> <el-form-item v-for="(column,index) in showFields" :key="index" :label="column.name" :prop="column.codeCamel">
<el-input v-if="column.codeCamel==='password'" type="password" :placeholder="column.name" <el-input v-if="column.codeCamel==='password'" type="password" :placeholder="column.name"
...@@ -92,7 +35,7 @@ ...@@ -92,7 +35,7 @@
<script> <script>
import _ from 'lodash' import _ from 'lodash'
import request from '@/utils/request' import request from '@/utils/request'
/** /**
* 表单页面。 * 表单页面。
*/ */
...@@ -119,12 +62,12 @@ ...@@ -119,12 +62,12 @@
fields: { fields: {
type: Array, type: Array,
required: false, required: false,
validator: function (value) { validator: function(value) {
if (typeof value !== 'object') { if (typeof value !== 'object') {
console.warn(`传入的fields不符合要求，必须是数组`) console.warn(`传入的fields不符合要求，必须是数组`)
return false return false
} }
return true return true
} }
} }
...@@ -150,26 +93,26 @@ ...@@ -150,26 +93,26 @@
// }, // },
rules: { rules: {
username: [ username: [
{required: true, message: '请输入用户名', trigger: 'blur'}, { required: true, message: '请输入用户名', trigger: 'blur' },
{min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'} { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
], ],
loginid: [ loginid: [
{required: true, message: '请输入登陆ID', trigger: 'blur'} { required: true, message: '请输入登陆ID', trigger: 'blur' }
], ],
password: [ password: [
{required: true, message: '请输入密码', trigger: 'blur'}, { required: true, message: '请输入密码', trigger: 'blur' },
{pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须同时包含数字和字母 6-20位', trigger: 'change'} { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须同时包含数字和字母 6-20位', trigger: 'change' }
], ],
mobile: [ mobile: [
{pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确的电话号码或手机号', trigger: 'blur&change'} { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确的电话号码或手机号', trigger: 'blur&change' }
], ],
email: [ email: [
{type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur&change'} { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur&change' }
] ]
} }
} }
}, },
created() { created() {
this.init() this.init()
// console.log(this.schema) // console.log(this.schema)
...@@ -179,7 +122,7 @@ ...@@ -179,7 +122,7 @@
const self = this const self = this
// 如果没有传fields，则全部显示 // 如果没有传fields，则全部显示
if (!self.fields || !self.fields.length) { if (!self.fields || !self.fields.length) {
_.each(self.schema['columns'], function (column) { _.each(self.schema['columns'], function(column) {
const tmp = JSON.parse(JSON.stringify(column)) const tmp = JSON.parse(JSON.stringify(column))
// self.$set(tmp, 'code', tmp.code.toLowerCase()) // self.$set(tmp, 'code', tmp.code.toLowerCase())
self.showFields.push(tmp) self.showFields.push(tmp)
...@@ -202,9 +145,8 @@ ...@@ -202,9 +145,8 @@
console.log('2222222') console.log('2222222')
console.log(self.showFields) console.log(self.showFields)
} }
// 提取v-model绑定的变量 // 提取v-model绑定的变量
_.each(self.showFields, function (item) { _.each(self.showFields, function(item) {
self.formModel[item.codeCamel] = '' self.formModel[item.codeCamel] = ''
}) })
console.log(self.formModel) console.log(self.formModel)
...@@ -228,17 +170,19 @@ ...@@ -228,17 +170,19 @@
console.log('提交成功!') console.log('提交成功!')
request(self.schema.modelUnderscorePlural + '/new', { request(self.schema.modelUnderscorePlural + '/new', {
method: 'post', method: 'post',
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
data: self.formModel, data: self.formModel,
transformRequest: transformRequest:
function (obj) { function(obj) {
var str = []; var str = []
for (var p in obj) for (var p in obj) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
return str.join("&"); }
return str.join('&')
} }
}).then(resp => { }).then(resp => {
console.log(resp.data) console.log(resp.data)
self.resetForm()
}) })
} else { } else {
console.log('提交失败!!') console.log('提交失败!!')
...@@ -260,7 +204,7 @@ ...@@ -260,7 +204,7 @@
this.$refs.form.resetFields() this.$refs.form.resetFields()
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
......
src/views/haomo/components/forms/Readme.md deleted 100644 → 0
View file @ 1d573ab3
输入姓名:
```jsx
<input/> JACK
```
选择性别:
```jsx
<input type="radio" value="男" name="gender"/>
<input type="radio" value="女" name="gender"/>
```
输入年龄:
```jsx
<input/> 18
```
输入出生日期:
```jsx
<input/> 20180207
```
上传照片:
```jsx
<input type="file"/>
```
学历:
```jsx
<select>
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>专科</option>
<option>其他</option>
</select>
```
密码:
```jsx
<input type="password"/>
```
填写网站:
```jsx
<input type="url"/>
```
最喜欢的颜色:
```jsx
<input type="color"/>
```
填写手机号:
```jsx
<input type="number"/>
```
填写邮箱:
```jsx
<input type="email"/>
```
填写地址:
```jsx
<textarea>家庭地址</textarea>
```
```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-item label="姓名" prop="name">
<el-input type="text" v-model="form.name" autofocus placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input type="age" v-model.number="form.age" placeholder="请输入年龄"></el-input>
</el-form-item>
<el-form-item label="出生日期" prop="date">
<el-date-picker v-model="form.date" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="照片" prop="img">
<input type="file">
</el-form-item>
<!--选择学历-->
<el-form-item label="学历" prop="education">
<el-select v-model="form.education" placeholder="请选择学历">
<el-option label="博士" value="doctor"></el-option>
<el-option label="硕士" value="master"></el-option>
<el-option label="本科" value="bachelor"></el-option>
<el-option label="专科" value="professional"></el-option>
<el-option label="其他" value="others"></el-option>
</el-select>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="最常用的网站" prop="website">
<el-input type="url" v-model="form.url" placeholder="请输入网址"></el-input>
</el-form-item>
<el-form-item label="最喜欢的颜色" prop="color" class="color">
<input type="color" v-model="form.color" style="width:200px;height:36px;border:none;outline:0"/>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model.number="form.phone" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<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>
<!--确定提交和重置-->
<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>
/**
* 表单页面。
*/
export default {
name: 'HmComplexForm',
// 集成其他组件
extends: {},
// 使用其它组件
components: {},
// 混入公共对象
mixins: [],
props: {},
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' }
]
}
}
},
methods: {
// 提交
/**
* 确定提交函数。
*
* 所有选项输入正并验证通过，正确提交
* 验证失败，禁止提交并给出提示
*/
onSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log('提交成功!')
} else {
console.log('提交失败!!')
return false
}
})
},
// 重置
/**
* 表单重置函数。
*
* 清空所有输入及提示信息。
*/
resetForm() {
this.$refs.form.resetFields()
}
}
}
</script>
<style scoped>
.title{
line-height: 40px;
background:orange;
color:#fff;
text-align:center;
margin-top:0;
}
</style>
```
src/views/haomo/components/forms/index.vue
View file @ 50c0f9d4
...@@ -28,7 +28,6 @@ ...@@ -28,7 +28,6 @@
}, },
created() { created() {
this.schema = schema this.schema = schema
// console.log(this.schema)
}, },
methods: {} 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