Skip to content

V
VueElementTemplate
Commit 1d573ab3 authored by 李静's avatar 李静
Browse files
Options

传参

parent 049d01f0
Hide whitespace changes
Inline Side-by-side
Showing with 55 additions and 39 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 1d573ab3
<template> <template>
<el-row type="flex" class="hm-form"> <el-row type="flex" class="hm-form">
<el-col :span="6"><div></div></el-col> <el-col :span="6">
<el-col :span="12" style="border:1px solid orange"><div> <div></div>
</el-col>
<el-col :span="12" style="border:1px solid orange">
<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 :model="form" ref="form" :rules="rules" label-width="110px" status-icon style="width:80%;margin:0 auto">
...@@ -61,29 +64,35 @@ ...@@ -61,29 +64,35 @@
</el-col> </el-col>
</el-form-item> </el-form-item>
</el-form>--> </el-form>-->
<el-form ref="form" :model="formModel" :rules="rules" label-width="110px" status-icon style="width:80%;margin:0 auto"> <el-form ref="form" :model="formModel" :rules="rules" label-width="110px" status-icon
<el-form-item v-for="(column,index) in showFields" :key="index" :label="column.name" :prop="column.codeCamel"> style="width:80%;margin:0 auto">
<el-input v-if="column.codeCamel==='password'" type="password" :placeholder="column.name" v-model="formModel[column.codeCamel]"></el-input> <el-form-item v-for="(column,index) in showFields" :key="index" :label="column.name" :prop="column.codeCamel">
<el-input v-if="column.codeCamel!=='password'" :placeholder="column.name" v-model="formModel[column.codeCamel]"></el-input> <el-input v-if="column.codeCamel==='password'" type="password" :placeholder="column.name"
</el-form-item> v-model="formModel[column.codeCamel]"></el-input>
<el-form-item> <el-input v-if="column.codeCamel!=='password'" :placeholder="column.name"
<el-col :span="12"> v-model="formModel[column.codeCamel]"></el-input>
<el-button type="primary" @click="onSubmit()">确定</el-button> </el-form-item>
</el-col> <el-form-item>
<el-col :span="12"> <el-col :span="12">
<el-button @click="resetForm()">重置</el-button> <el-button type="primary" @click="onSubmit()">确定</el-button>
</el-col> </el-col>
</el-form-item> <el-col :span="12">
</el-form> <el-button @click="resetForm()">重置</el-button>
</el-col>
</el-form-item>
</el-form>
</div> </div>
</el-col> </el-col>
<el-col :span="6"><div></div></el-col> <el-col :span="6">
<div></div>
</el-col>
</el-row> </el-row>
</template> </template>
<script> <script>
import _ from 'lodash' import _ from 'lodash'
import request from '@/utils/request' import request from '@/utils/request'
/** /**
* 表单页面。 * 表单页面。
*/ */
...@@ -110,12 +119,12 @@ ...@@ -110,12 +119,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
} }
} }
...@@ -141,26 +150,26 @@ ...@@ -141,26 +150,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)
...@@ -170,7 +179,7 @@ ...@@ -170,7 +179,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)
...@@ -181,7 +190,7 @@ ...@@ -181,7 +190,7 @@
console.log('1111111') console.log('1111111')
// console.log(self.showFields) // console.log(self.showFields)
// 将字符串对象进行替换处理 // 将字符串对象进行替换处理
_.each(self.showFields, function(column, index) { _.each(self.showFields, function (column, index) {
if (typeof column === 'string') { if (typeof column === 'string') {
// 生成一个新对象 // 生成一个新对象
const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()] const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()]
...@@ -193,9 +202,9 @@ ...@@ -193,9 +202,9 @@
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)
...@@ -219,8 +228,15 @@ ...@@ -219,8 +228,15 @@
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:
function (obj) {
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
}
}).then(resp => { }).then(resp => {
console.log(resp.data) console.log(resp.data)
}) })
...@@ -244,16 +260,16 @@ ...@@ -244,16 +260,16 @@
this.$refs.form.resetFields() this.$refs.form.resetFields()
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.title{ .title {
line-height: 40px; line-height: 40px;
background:orange; background: orange;
color:#fff; color: #fff;
text-align:center; text-align: center;
margin-top:0; margin-top: 0;
} }
</style> </style>
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