Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
V
VueElementTemplate
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
JIRA
JIRA
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
HireTest
VueElementTemplate
Commits
629a3014
Commit
629a3014
authored
7 years ago
by
王康
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
form
parent
1b449bb5
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
41 additions
and
43 deletions
+41
-43
HmComplexForm.vue
src/views/haomo/components/forms/HmComplexForm.vue
+36
-41
index.vue
src/views/haomo/components/forms/index.vue
+5
-2
No files found.
src/views/haomo/components/forms/HmComplexForm.vue
View file @
629a3014
...
@@ -21,14 +21,9 @@
...
@@ -21,14 +21,9 @@
:prop=
"column.codeCamel"
>
:prop=
"column.codeCamel"
>
<!--el-input
<el-input
v-if=
"column.codeCamel==='password'"
type=
"password"
<!--el-input
<el-input
v-if=
"column.codeCamel==='password'"
type=
"password"
v-model=
"formModel[column.codeCamel]"
></el-input>
-->
v-model=
"formModel[column.codeCamel]"
></el-input>
-->
<!-- 1 普通input -->
<el-input
v-if=
"column.widgetType === 1"
v-model=
"formModel[column.codeCamel]"
:disabled=
"column.disabled"
@
change=
"column.change && column.change($event)"
></el-input>
<!-- 2 日期选择 -->
<!-- 2 日期选择 -->
<el-date-picker
v-else-if=
"column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
<!-- -->
<el-date-picker
v-if=
"column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
v-model=
"formModel[column.codeCamel]"
v-model=
"formModel[column.codeCamel]"
:type=
"column.dateType || 'date'"
:type=
"column.dateType || 'date'"
align=
"right"
:disabled=
"column.disabled"
align=
"right"
:disabled=
"column.disabled"
...
@@ -99,6 +94,11 @@
...
@@ -99,6 +94,11 @@
<el-button
slot=
"trigger"
size=
"small"
type=
"primary"
<el-button
slot=
"trigger"
size=
"small"
type=
"primary"
:disabled=
"column.disabled"
>
选取文件
</el-button>
:disabled=
"column.disabled"
>
选取文件
</el-button>
</el-upload>
</el-upload>
<!-- 1 普通input -->
<el-input
v-else
v-model=
"formModel[column.codeCamel]"
:disabled=
"column.disabled"
@
change=
"column.change && column.change($event)"
></el-input>
</el-form-item>
</el-form-item>
<!--按钮-->
<!--按钮-->
<el-form-item
v-if=
"buttons && buttons.length > 0"
>
<el-form-item
v-if=
"buttons && buttons.length > 0"
>
...
@@ -169,29 +169,29 @@
...
@@ -169,29 +169,29 @@
* 所有的表单类型都可传入disabled属性,取值bolean类型,true/false,表示是否禁用,默认不禁用
* 所有的表单类型都可传入disabled属性,取值bolean类型,true/false,表示是否禁用,默认不禁用
* input类表单还可传入rule属性来进行自定义验证规则,rule取值规范参照elementUI,下面有简单示例
* input类表单还可传入rule属性来进行自定义验证规则,rule取值规范参照elementUI,下面有简单示例
* 示例:[
* 示例:[
{ name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: true,
{ name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: true,
rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
},
},
{ name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false,
{ name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false,
rule: [
rule: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
]
]
},
},
{ name: '选择类型', codeCamel: 'type', widgetType: 2, multiple: false,
{ name: '选择类型', codeCamel: 'type', widgetType: 2, multiple: false,
options: [
options: [
{ value: 0, label: '选项1' },
{ value: 0, label: '选项1' },
{ value: 1, label: '选项2' },
{ value: 1, label: '选项2' },
{ value: 2, label: '选项3' },
{ value: 2, label: '选项3' },
{ value: 3, label: '选项4' },
{ value: 3, label: '选项4' },
{ value: 4, label: '选项5' }
{ value: 4, label: '选项5' }
]
]
},
},
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'] },
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'] },
{ codeCamel: 'password', widgetType: 4 },
{ codeCamel: 'password', widgetType: 4 },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss' },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss' },
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] },
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] },
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8 }
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8 }
]
]
*/
*/
columns
:
{
columns
:
{
...
@@ -492,24 +492,18 @@
...
@@ -492,24 +492,18 @@
if
(
item
.
widgetType
===
8
||
(
item
.
widgetType
===
3
&&
item
.
options
&&
item
.
options
.
length
>
0
))
{
if
(
item
.
widgetType
===
8
||
(
item
.
widgetType
===
3
&&
item
.
options
&&
item
.
options
.
length
>
0
))
{
self
.
$set
(
self
.
formModel
,
item
.
codeCamel
,
[])
self
.
$set
(
self
.
formModel
,
item
.
codeCamel
,
[])
}
else
{
}
else
{
if
(
item
.
widgetType
===
6
)
{
item
.
default
?
self
.
$set
(
self
.
formModel
,
item
.
codeCamel
,
item
.
default
)
:
self
.
$set
(
self
.
formModel
,
item
.
codeCamel
,
''
)
item
.
default
&&
self
.
$set
(
self
.
formModel
,
item
.
codeCamel
,
new
Date
())
}
else
{
item
.
default
?
self
.
$set
(
self
.
formModel
,
item
.
codeCamel
,
item
.
default
)
:
self
.
$set
(
self
.
formModel
,
item
.
codeCamel
,
''
)
}
}
}
})
})
console
.
log
(
self
.
formModel
)
console
.
log
(
self
.
formModel
)
console
.
log
(
self
.
showUserColumns
)
console
.
log
(
self
.
showUserColumns
)
// 将字符串对象进行替换处理
// 将字符串对象进行替换处理
_
.
each
(
self
.
showUserColumns
,
function
(
column
,
index
)
{
_
.
each
(
self
.
showUserColumns
,
function
(
column
,
index
)
{
if
(
typeof
column
===
'
object
'
)
{
if
(
typeof
column
===
'
string
'
)
{
// 生成一个新对象
// 生成一个新对象
const
tmp
=
_
.
keyBy
(
self
.
schema
[
'columns'
],
'codeCamel'
)[
column
.
codeCamel
]
const
tmp
=
_
.
keyBy
(
self
.
schema
[
'columns'
],
'codeCamel'
)[
column
]
// console.log(tmp)
/* self.$set(tmp, 'code', tmp.code.toLowerCase())
// self.$set(tmp, 'code', tmp.code.toLowerCase())
column.name && self.$set(tmp, 'name', column.name) // 自定义字段名
column.name && self.$set(tmp, 'name', column.name) // 自定义字段名
self
.
$set
(
tmp
,
'widgetType'
,
column
.
widgetType
||
1
)
// 设置表单类型
column.rule && self.$set(tmp, 'rule', column.rule) // 设置表单校验规则
column.rule && self.$set(tmp, 'rule', column.rule) // 设置表单校验规则
column.disabled && self.$set(tmp, 'disabled', column.disabled) // 设置是否禁用
column.disabled && self.$set(tmp, 'disabled', column.disabled) // 设置是否禁用
column.options && self.$set(tmp, 'options', column.options) // 设置下拉框或者多选的选项
column.options && self.$set(tmp, 'options', column.options) // 设置下拉框或者多选的选项
...
@@ -517,7 +511,8 @@
...
@@ -517,7 +511,8 @@
column.dateType && self.$set(tmp, 'dateType', column.dateType) // 设置日期表单显示类型
column.dateType && self.$set(tmp, 'dateType', column.dateType) // 设置日期表单显示类型
column.dateFormate && self.$set(tmp, 'dateFormate', column.dateFormate) // 设置日期格式
column.dateFormate && self.$set(tmp, 'dateFormate', column.dateFormate) // 设置日期格式
column.change && self.$set(tmp, 'change', column.change) // 设置change函数
column.change && self.$set(tmp, 'change', column.change) // 设置change函数
column
.
url
&&
self
.
$set
(
tmp
,
'url'
,
column
.
url
)
// 设置文件上传地址
column.url && self.$set(tmp, 'url', column.url) // 设置文件上传地址 */
self
.
$set
(
tmp
,
'widgetType'
,
1
)
// 设置表单类型
self
.
$set
(
self
.
showUserColumns
,
index
,
tmp
)
// 顺序
self
.
$set
(
self
.
showUserColumns
,
index
,
tmp
)
// 顺序
}
}
})
})
...
...
This diff is collapsed.
Click to expand it.
src/views/haomo/components/forms/index.vue
View file @
629a3014
...
@@ -50,10 +50,13 @@
...
@@ -50,10 +50,13 @@
// 3多选 不支持默认值
// 3多选 不支持默认值
{
name
:
'部门ID'
,
codeCamel
:
'departmentId'
,
widgetType
:
3
,
options
:
[
'美女'
,
'帅哥'
],
change
:
this
.
inputChange
},
{
name
:
'部门ID'
,
codeCamel
:
'departmentId'
,
widgetType
:
3
,
options
:
[
'美女'
,
'帅哥'
],
change
:
this
.
inputChange
},
// 4密码
// 4密码
{
codeCamel
:
'password'
,
widgetType
:
4
,
change
:
this
.
inputChange
},
// { codeCamel: 'password', widgetType: 4, change: this.inputChange },
'password'
,
// 6日期
// 6日期
{
name
:
'新建时间'
,
codeCamel
:
'createTime'
,
widgetType
:
6
,
dateType
:
'datetime'
,
{
name
:
'新建时间'
,
codeCamel
:
'createTime'
,
widgetType
:
6
,
dateType
:
'datetime'
,
dateFormate
:
'yyyy-MM-dd HH:mm:ss'
,
change
:
this
.
inputChange
,
default
:
true
},
dateFormate
:
'yyyy-MM-dd HH:mm:ss'
,
change
:
this
.
inputChange
,
default
:
'2018-01-01 00:07:08'
},
'lastUpdateTime'
,
// 7单选
// 7单选
{
name
:
'登陆id'
,
codeCamel
:
'loginid'
,
widgetType
:
7
,
{
name
:
'登陆id'
,
codeCamel
:
'loginid'
,
widgetType
:
7
,
options
:
[
options
:
[
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment