Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
ferry_web
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
jianan
ferry_web
Commits
dc14d7fd
Commit
dc14d7fd
authored
Nov 02, 2022
by
lanyulei
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 添加通过请求方式获取远端数据的功能。
parent
f7bf98d3
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
212 additions
and
64 deletions
+212
-64
src/components/VueFormMaking/App.vue
+3
-3
src/components/VueFormMaking/components/GenerateFormItem.vue
+49
-7
src/components/VueFormMaking/components/WidgetConfig.vue
+112
-24
src/components/VueFormMaking/components/WidgetForm.vue
+17
-9
src/components/VueFormMaking/components/componentsConfig.js
+26
-18
src/components/VueFormMaking/lang/en-US.js
+1
-0
src/components/VueFormMaking/lang/zh-CN.js
+4
-3
No files found.
src/components/VueFormMaking/App.vue
View file @
dc14d7fd
...
@@ -9,13 +9,13 @@
...
@@ -9,13 +9,13 @@
<div
class=
"fm-link"
>
<div
class=
"fm-link"
>
<a
target=
"_blank"
href=
"http://form.xiaoyaoji.cn/pricing"
>
{{
$t
(
'header.pricing'
)
}}
</a>
<a
target=
"_blank"
href=
"http://form.xiaoyaoji.cn/pricing"
>
{{
$t
(
'header.pricing'
)
}}
</a>
<a
target=
"_blank"
href=
"http://docs.form.xiaoyaoji.cn"
>
{{
$t
(
'header.document'
)
}}
</a>
<a
target=
"_blank"
href=
"http://docs.form.xiaoyaoji.cn"
>
{{
$t
(
'header.document'
)
}}
</a>
<a
v-if=
"$lang == 'zh-CN'"
target=
"_blank"
href=
"http://docs.form.xiaoyaoji.cn/zh/other/course.html"
>
学习课程
</a>
<a
v-if=
"$lang ==
=
'zh-CN'"
target=
"_blank"
href=
"http://docs.form.xiaoyaoji.cn/zh/other/course.html"
>
学习课程
</a>
<a
target=
"_blank"
href=
"https://github.com/GavinZhuLei/vue-form-making"
>
GitHub
</a>
<a
target=
"_blank"
href=
"https://github.com/GavinZhuLei/vue-form-making"
>
GitHub
</a>
<div
class=
"action-item"
>
<div
class=
"action-item"
>
<el-dropdown
trigger=
"click"
@
command=
"handleLangCommand"
>
<el-dropdown
trigger=
"click"
@
command=
"handleLangCommand"
>
<span
class=
"el-dropdown-link"
>
<span
class=
"el-dropdown-link"
>
{{
$route
.
params
.
lang
==
'zh-CN'
?
'简体中文'
:
'English'
}}
<i
class=
"el-icon-arrow-down el-icon--right"
/>
{{
$route
.
params
.
lang
==
=
'zh-CN'
?
'简体中文'
:
'English'
}}
<i
class=
"el-icon-arrow-down el-icon--right"
/>
</span>
</span>
<el-dropdown-menu
slot=
"dropdown"
>
<el-dropdown-menu
slot=
"dropdown"
>
<el-dropdown-item
command=
"zh-CN"
>
简体中文
</el-dropdown-item>
<el-dropdown-item
command=
"zh-CN"
>
简体中文
</el-dropdown-item>
...
@@ -25,7 +25,7 @@
...
@@ -25,7 +25,7 @@
</div>
</div>
<a
class=
"ad"
href=
"http://form.xiaoyaoji.cn"
target=
"_blank"
>
{{
$t
(
'header.advanced'
)
}}
</a>
<a
class=
"ad"
href=
"http://form.xiaoyaoji.cn"
target=
"_blank"
>
{{
$t
(
'header.advanced'
)
}}
</a>
<a
v-if=
"$lang == 'zh-CN'"
class=
"ad"
href=
"http://www.xiaoyaoji.cn"
target=
"_blank"
>
小幺鸡接口工具
</a>
<a
v-if=
"$lang ==
=
'zh-CN'"
class=
"ad"
href=
"http://www.xiaoyaoji.cn"
target=
"_blank"
>
小幺鸡接口工具
</a>
</div>
</div>
</div>
</div>
<div
class=
"fm-container"
><router-view
/></div>
<div
class=
"fm-container"
><router-view
/></div>
...
...
src/components/VueFormMaking/components/GenerateFormItem.vue
View file @
dc14d7fd
...
@@ -329,6 +329,7 @@
...
@@ -329,6 +329,7 @@
<
script
>
<
script
>
import
FmUpload
from
'./Upload'
import
FmUpload
from
'./Upload'
import
FileUpload
from
'./Upload/file'
import
FileUpload
from
'./Upload/file'
import
axios
from
'axios'
export
default
{
export
default
{
name
:
'GenetateFormItem'
,
name
:
'GenetateFormItem'
,
...
@@ -388,7 +389,48 @@ export default {
...
@@ -388,7 +389,48 @@ export default {
},
},
created
()
{
created
()
{
if
(
this
.
widget
.
type
!==
'cascader'
)
{
if
(
this
.
widget
.
type
!==
'cascader'
)
{
if
(
this
.
widget
.
options
.
remote
&&
this
.
remote
[
this
.
widget
.
options
.
remoteFunc
])
{
if
(
this
.
widget
.
options
.
remote
===
99
)
{
let
headers
=
JSON
.
parse
(
this
.
widget
.
options
.
requestMethod
.
headers
)
headers
[
"content-type"
]
=
"application/json; charset=utf-8"
let
params
=
JSON
.
parse
(
this
.
widget
.
options
.
requestMethod
.
params
)
let
axiosParams
=
{
url
:
this
.
widget
.
options
.
requestMethod
.
url
,
method
:
this
.
widget
.
options
.
requestMethod
.
method
,
headers
:
headers
}
if
(
this
.
widget
.
options
.
requestMethod
.
method
===
'get'
)
{
axiosParams
[
"params"
]
=
params
}
else
if
(
this
.
widget
.
options
.
requestMethod
.
method
===
'post'
)
{
axiosParams
[
"data"
]
=
params
}
axios
(
axiosParams
).
then
(
resp
=>
{
let
fields
=
[]
if
(
this
.
widget
.
options
.
requestMethod
.
result
)
{
fields
=
this
.
widget
.
options
.
requestMethod
.
result
.
split
(
"."
)
}
else
{
fields
=
[
"data"
]
}
let
result
=
resp
.
data
for
(
let
f
of
fields
)
{
result
=
result
[
f
]
}
this
.
widget
.
options
.
remoteOptions
=
result
.
map
(
item
=>
{
return
{
value
:
item
[
this
.
widget
.
options
.
props
.
value
],
label
:
item
[
this
.
widget
.
options
.
props
.
label
],
}
})
}).
catch
(
err
=>
{
console
.
log
(
err
)
})
}
if
(
this
.
widget
.
options
.
remote
!==
99
&&
this
.
widget
.
options
.
remote
&&
this
.
remote
[
this
.
widget
.
options
.
remoteFunc
])
{
this
.
remote
[
this
.
widget
.
options
.
remoteFunc
]((
data
)
=>
{
this
.
remote
[
this
.
widget
.
options
.
remoteFunc
]((
data
)
=>
{
if
(
this
.
widget
.
type
!==
'cascader'
)
{
if
(
this
.
widget
.
type
!==
'cascader'
)
{
this
.
widget
.
options
.
remoteOptions
=
data
.
map
(
item
=>
{
this
.
widget
.
options
.
remoteOptions
=
data
.
map
(
item
=>
{
...
@@ -443,21 +485,21 @@ export default {
...
@@ -443,21 +485,21 @@ export default {
this
.
dataModel
=
files
this
.
dataModel
=
files
},
},
handleDisplayVerifiy
()
{
handleDisplayVerifiy
()
{
if
(
Object
.
keys
(
this
.
widget
.
options
).
indexOf
(
'displayVerif
i
y'
)
>=
0
)
{
if
(
Object
.
keys
(
this
.
widget
.
options
).
indexOf
(
'displayVerify'
)
>=
0
)
{
if
(
this
.
widget
.
options
.
displayVerif
i
y
.
type
!==
'hide'
)
{
if
(
this
.
widget
.
options
.
displayVerify
.
type
!==
'hide'
)
{
var
c
=
0
var
c
=
0
for
(
var
v
of
this
.
widget
.
options
.
displayVerif
i
y
.
list
)
{
for
(
var
v
of
this
.
widget
.
options
.
displayVerify
.
list
)
{
if
(
this
.
models
[
v
.
model
].
toString
()
===
v
.
value
)
{
if
(
this
.
models
[
v
.
model
].
toString
()
===
v
.
value
)
{
c
++
c
++
}
}
}
}
if
(
this
.
widget
.
options
.
displayVerif
i
y
.
type
===
'and'
)
{
if
(
this
.
widget
.
options
.
displayVerify
.
type
===
'and'
)
{
if
(
c
!==
this
.
widget
.
options
.
displayVerif
i
y
.
list
.
length
)
{
if
(
c
!==
this
.
widget
.
options
.
displayVerify
.
list
.
length
)
{
this
.
showStatus
=
false
this
.
showStatus
=
false
}
else
{
}
else
{
this
.
showStatus
=
true
this
.
showStatus
=
true
}
}
}
else
if
(
this
.
widget
.
options
.
displayVerif
i
y
.
type
===
'or'
)
{
}
else
if
(
this
.
widget
.
options
.
displayVerify
.
type
===
'or'
)
{
if
(
c
===
0
)
{
if
(
c
===
0
)
{
this
.
showStatus
=
false
this
.
showStatus
=
false
}
else
{
}
else
{
...
...
src/components/VueFormMaking/components/WidgetConfig.vue
View file @
dc14d7fd
...
@@ -108,8 +108,87 @@
...
@@ -108,8 +108,87 @@
<el-radio-group
v-model=
"data.options.remote"
size=
"mini"
style=
"margin-bottom:10px;"
>
<el-radio-group
v-model=
"data.options.remote"
size=
"mini"
style=
"margin-bottom:10px;"
>
<el-radio-button
:label=
"false"
>
{{
$t
(
'fm.config.widget.staticData'
)
}}
</el-radio-button>
<el-radio-button
:label=
"false"
>
{{
$t
(
'fm.config.widget.staticData'
)
}}
</el-radio-button>
<el-radio-button
:label=
"true"
>
{{
$t
(
'fm.config.widget.remoteData'
)
}}
</el-radio-button>
<el-radio-button
:label=
"true"
>
{{
$t
(
'fm.config.widget.remoteData'
)
}}
</el-radio-button>
<el-radio-button
:label=
"99"
>
{{
$t
(
'fm.config.widget.requestMethod'
)
}}
</el-radio-button>
</el-radio-group>
</el-radio-group>
<template
v-if=
"data.options.remote"
>
<template
v-if=
"data.options.remote === 99"
>
<div
class=
"form-request-method"
>
<div>
<div
class=
"form-request-method-title"
>
URL
</div>
<div
class=
"form-request-method-content"
>
<el-input
v-model=
"data.options.requestMethod.url"
placeholder=
"请输入URL"
size=
"mini"
/>
</div>
</div>
<div>
<div
class=
"form-request-method-title"
>
请求方式
</div>
<div
class=
"form-request-method-content"
>
<el-radio-group
v-model=
"data.options.requestMethod.method"
size=
"mini"
>
<el-radio
label=
"get"
>
Get
</el-radio>
<el-radio
label=
"post"
>
Post
</el-radio>
</el-radio-group>
</div>
</div>
<div>
<div
class=
"form-request-method-title"
style=
"margin-bottom: 6px"
>
参数(JSON)
</div>
<div
class=
"form-request-method-content"
>
<el-input
v-model=
"data.options.requestMethod.params"
size=
"mini"
type=
"textarea"
:rows=
"2"
placeholder=
"请输入内容"
/>
</div>
</div>
<div>
<div
class=
"form-request-method-title"
style=
"margin-bottom: 6px"
>
请求头(JSON)
</div>
<div
class=
"form-request-method-content"
>
<el-input
v-model=
"data.options.requestMethod.headers"
size=
"mini"
type=
"textarea"
:rows=
"2"
placeholder=
"请输入内容"
/>
</div>
</div>
<div>
<div
class=
"form-request-method-title"
style=
"margin-bottom: 6px"
>
超时时间
</div>
<div
class=
"form-request-method-content"
>
<el-input
v-model=
"data.options.requestMethod.timeout"
size=
"mini"
type=
"number"
placeholder=
"请输入内容"
/>
</div>
</div>
<div>
<div
class=
"form-request-method-title"
style=
"margin-bottom: 6px"
>
返回字段
</div>
<div
class=
"form-request-method-content"
>
<el-input
v-model=
"data.options.requestMethod.result"
size=
"mini"
placeholder=
"请输入内容"
/>
</div>
</div>
<div>
<div
class=
"form-request-method-title"
style=
"margin-bottom: 6px"
>
字段映射
</div>
<div
class=
"form-request-method-content"
>
<el-input
v-model=
"data.options.props.value"
size=
"mini"
style=
""
>
<template
slot=
"prepend"
>
{{
$t
(
'fm.config.widget.value'
)
}}
</
template
>
</el-input>
<el-input
v-model=
"data.options.props.label"
size=
"mini"
style=
""
>
<
template
slot=
"prepend"
>
{{
$t
(
'fm.config.widget.label'
)
}}
</
template
>
</el-input>
<el-input
v-if=
"data.type === 'cascader'"
v-model=
"data.options.props.children"
size=
"mini"
style=
""
>
<
template
slot=
"prepend"
>
{{
$t
(
'fm.config.widget.childrenOption'
)
}}
</
template
>
</el-input>
</div>
</div>
</div>
</template>
<
template
v-else-if=
"data.options.remote"
>
<div>
<div>
<el-input
v-model=
"data.options.remoteFunc"
size=
"mini"
style=
""
>
<el-input
v-model=
"data.options.remoteFunc"
size=
"mini"
style=
""
>
<template
slot=
"prepend"
>
{{
$t
(
'fm.config.widget.remoteFunc'
)
}}
</
template
>
<template
slot=
"prepend"
>
{{
$t
(
'fm.config.widget.remoteFunc'
)
}}
</
template
>
...
@@ -221,21 +300,21 @@
...
@@ -221,21 +300,21 @@
</template>
</template>
</el-form-item>
</el-form-item>
<!-- 默认值 -->
<!-- 默认值 -->
<el-form-item
v-if=
"Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type ==
'textarea' || data.type
== 'input' || data.type=='rate' || data.type=='color' || data.type=='switch')"
:label=
"$t('fm.config.widget.defaultValue')"
>
<el-form-item
v-if=
"Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type ==
= 'textarea' || data.type =
== 'input' || data.type=='rate' || data.type=='color' || data.type=='switch')"
:label=
"$t('fm.config.widget.defaultValue')"
>
<el-input
v-if=
"data.type=='textarea'"
v-model=
"data.options.defaultValue"
type=
"textarea"
:rows=
"5"
/>
<el-input
v-if=
"data.type=='textarea'"
v-model=
"data.options.defaultValue"
type=
"textarea"
:rows=
"5"
/>
<el-input
v-if=
"data.type=='input'"
v-model=
"data.options.defaultValue"
/>
<el-input
v-if=
"data.type=='input'"
v-model=
"data.options.defaultValue"
/>
<el-rate
v-if=
"data.type == 'rate'"
v-model=
"data.options.defaultValue"
style=
"display:inline-block;vertical-align: middle;"
:max=
"data.options.max"
:allow-half=
"data.options.allowHalf"
/>
<el-rate
v-if=
"data.type ==
=
'rate'"
v-model=
"data.options.defaultValue"
style=
"display:inline-block;vertical-align: middle;"
:max=
"data.options.max"
:allow-half=
"data.options.allowHalf"
/>
<el-button
v-if=
"data.type == 'rate'"
type=
"text"
style=
"display:inline-block;vertical-align: middle;margin-left: 10px;"
@
click=
"data.options.defaultValue=0"
>
{{ $t('fm.actions.clear') }}
</el-button>
<el-button
v-if=
"data.type ==
=
'rate'"
type=
"text"
style=
"display:inline-block;vertical-align: middle;margin-left: 10px;"
@
click=
"data.options.defaultValue=0"
>
{{ $t('fm.actions.clear') }}
</el-button>
<el-color-picker
<el-color-picker
v-if=
"data.type == 'color'"
v-if=
"data.type ==
=
'color'"
v-model=
"data.options.defaultValue"
v-model=
"data.options.defaultValue"
:show-alpha=
"data.options.showAlpha"
:show-alpha=
"data.options.showAlpha"
/>
/>
<el-switch
v-if=
"data.type=='switch'"
v-model=
"data.options.defaultValue"
/>
<el-switch
v-if=
"data.type=='switch'"
v-model=
"data.options.defaultValue"
/>
</el-form-item>
</el-form-item>
<!-- 显示类型 -->
<!-- 显示类型 -->
<
template
v-if=
"data.type ==
'time' || data.type
== 'date'"
>
<
template
v-if=
"data.type ==
= 'time' || data.type =
== 'date'"
>
<el-form-item
v-if=
"data.type == 'date'"
:label=
"$t('fm.config.widget.showType')"
>
<el-form-item
v-if=
"data.type ==
=
'date'"
:label=
"$t('fm.config.widget.showType')"
>
<el-select
v-model=
"data.options.type"
>
<el-select
v-model=
"data.options.type"
>
<el-option
value=
"year"
/>
<el-option
value=
"year"
/>
<el-option
value=
"month"
/>
<el-option
value=
"month"
/>
...
@@ -247,29 +326,29 @@
...
@@ -247,29 +326,29 @@
<el-option
value=
"daterange"
/>
<el-option
value=
"daterange"
/>
</el-select>
</el-select>
</el-form-item>
</el-form-item>
<el-form-item
v-if=
"data.type == 'time'"
:label=
"$t('fm.config.widget.isRange')"
>
<el-form-item
v-if=
"data.type ==
=
'time'"
:label=
"$t('fm.config.widget.isRange')"
>
<el-switch
<el-switch
v-model=
"data.options.isRange"
v-model=
"data.options.isRange"
/>
/>
</el-form-item>
</el-form-item>
<el-form-item
v-if=
"data.type == 'date'"
:label=
"$t('fm.config.widget.isTimestamp')"
>
<el-form-item
v-if=
"data.type ==
=
'date'"
:label=
"$t('fm.config.widget.isTimestamp')"
>
<el-switch
<el-switch
v-model=
"data.options.timestamp"
v-model=
"data.options.timestamp"
/>
/>
</el-form-item>
</el-form-item>
<el-form-item
v-if=
"(!data.options.isRange && data.type ==
'time') || (data.type != 'time' && data.options.type != 'datetimerange' && data.options.type !
= 'daterange')"
:label=
"$t('fm.config.widget.placeholder')"
>
<el-form-item
v-if=
"(!data.options.isRange && data.type ==
= 'time') || (data.type !== 'time' && data.options.type !== 'datetimerange' && data.options.type !=
= 'daterange')"
:label=
"$t('fm.config.widget.placeholder')"
>
<el-input
v-model=
"data.options.placeholder"
/>
<el-input
v-model=
"data.options.placeholder"
/>
</el-form-item>
</el-form-item>
<el-form-item
v-if=
"(data.options.isRange) || data.options.type==
'datetimerange' || data.options.type
=='daterange'"
:label=
"$t('fm.config.widget.startPlaceholder')"
>
<el-form-item
v-if=
"(data.options.isRange) || data.options.type==
='datetimerange' || data.options.type=
=='daterange'"
:label=
"$t('fm.config.widget.startPlaceholder')"
>
<el-input
v-model=
"data.options.startPlaceholder"
/>
<el-input
v-model=
"data.options.startPlaceholder"
/>
</el-form-item>
</el-form-item>
<el-form-item
v-if=
"data.options.isRange || data.options.type==
'datetimerange' || data.options.type
=='daterange'"
:label=
"$t('fm.config.widget.endPlaceholder')"
>
<el-form-item
v-if=
"data.options.isRange || data.options.type==
='datetimerange' || data.options.type=
=='daterange'"
:label=
"$t('fm.config.widget.endPlaceholder')"
>
<el-input
v-model=
"data.options.endPlaceholder"
/>
<el-input
v-model=
"data.options.endPlaceholder"
/>
</el-form-item>
</el-form-item>
<el-form-item
:label=
"$t('fm.config.widget.format')"
>
<el-form-item
:label=
"$t('fm.config.widget.format')"
>
<el-input
v-model=
"data.options.format"
/>
<el-input
v-model=
"data.options.format"
/>
</el-form-item>
</el-form-item>
<el-form-item
v-if=
"data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0"
:label=
"$t('fm.config.widget.defaultValue')"
>
<el-form-item
v-if=
"data.type==
=
'time' && Object.keys(data.options).indexOf('isRange')>=0"
:label=
"$t('fm.config.widget.defaultValue')"
>
<el-time-picker
<el-time-picker
v-if=
"!data.options.isRange"
v-if=
"!data.options.isRange"
key=
"1"
key=
"1"
...
@@ -290,7 +369,7 @@
...
@@ -290,7 +369,7 @@
</el-form-item>
</el-form-item>
</
template
>
</
template
>
<!-- 图片上传 -->
<!-- 图片上传 -->
<
template
v-if=
"data.type==
'imgupload' || data.type
=='file'"
>
<
template
v-if=
"data.type==
='imgupload' || data.type=
=='file'"
>
<el-form-item
:label=
"$t('fm.config.widget.limit')"
>
<el-form-item
:label=
"$t('fm.config.widget.limit')"
>
<el-input
v-model
.
number=
"data.options.length"
type=
"number"
/>
<el-input
v-model
.
number=
"data.options.length"
type=
"number"
/>
...
@@ -476,19 +555,19 @@
...
@@ -476,19 +555,19 @@
</div>
</div>
</el-form-item>
</el-form-item>
</
template
>
</
template
>
<el-form-item
v-if=
"Object.keys(data.options).indexOf('displayVerif
iy')>=0"
:label=
"$t('fm.config.widget.displayVerifi
y')"
>
<el-form-item
v-if=
"Object.keys(data.options).indexOf('displayVerif
y')>=0"
:label=
"$t('fm.config.widget.displayVerif
y')"
>
<el-radio-group
v-model=
"data.options.displayVerif
i
y.type"
>
<el-radio-group
v-model=
"data.options.displayVerify.type"
>
<el-radio
label=
"hide"
>
不校验
</el-radio>
<el-radio
label=
"hide"
>
不校验
</el-radio>
<el-radio
label=
"and"
>
与
</el-radio>
<el-radio
label=
"and"
>
与
</el-radio>
<el-radio
label=
"or"
>
或
</el-radio>
<el-radio
label=
"or"
>
或
</el-radio>
</el-radio-group>
</el-radio-group>
<div
v-if=
"data.options.displayVerif
i
y.type !== 'hide'"
>
<div
v-if=
"data.options.displayVerify.type !== 'hide'"
>
<
template
v-for=
"(item, index) in data.options.displayVerif
i
y.list"
>
<
template
v-for=
"(item, index) in data.options.displayVerify.list"
>
<div
:key=
"item.model"
>
<div
:key=
"item.model"
>
<el-input
v-model=
"item.model"
size=
"mini"
:placeholder=
"$t('fm.config.widget.displayVerif
i
yPlaceholderModel')"
/>
<el-input
v-model=
"item.model"
size=
"mini"
:placeholder=
"$t('fm.config.widget.displayVerifyPlaceholderModel')"
/>
<el-input
v-model=
"item.value"
size=
"mini"
:placeholder=
"$t('fm.config.widget.displayVerif
i
yPlaceholderValue')"
/>
<el-input
v-model=
"item.value"
size=
"mini"
:placeholder=
"$t('fm.config.widget.displayVerifyPlaceholderValue')"
/>
<el-button
v-if=
"index > 0"
type=
"text"
icon=
"el-icon-remove-outline"
@
click=
"delDisplayVerifiy(index)"
>
删 除
</el-button>
<el-button
v-if=
"index > 0"
type=
"text"
icon=
"el-icon-remove-outline"
@
click=
"delDisplayVerifiy(index)"
>
删 除
</el-button>
<hr
v-if=
"data.options.displayVerif
i
y.list.length > 1"
style=
"background-color: #dcdfe6; border:none; height:1px;"
>
<hr
v-if=
"data.options.displayVerify.list.length > 1"
style=
"background-color: #dcdfe6; border:none; height:1px;"
>
</div>
</div>
</
template
>
</
template
>
<el-button
type=
"text"
icon=
"el-icon-circle-plus-outline"
@
click=
"addDisplayVerifiy"
>
新 增
</el-button>
<el-button
type=
"text"
icon=
"el-icon-circle-plus-outline"
@
click=
"addDisplayVerifiy"
>
新 增
</el-button>
...
@@ -608,13 +687,13 @@ export default {
...
@@ -608,13 +687,13 @@ export default {
},
},
methods
:
{
methods
:
{
addDisplayVerifiy
()
{
addDisplayVerifiy
()
{
this
.
data
.
options
.
displayVerif
i
y
.
list
.
push
({
this
.
data
.
options
.
displayVerify
.
list
.
push
({
model
:
(
new
Date
()).
valueOf
(),
model
:
(
new
Date
()).
valueOf
(),
value
:
'字段值'
value
:
'字段值'
})
})
},
},
delDisplayVerifiy
(
index
)
{
delDisplayVerifiy
(
index
)
{
this
.
data
.
options
.
displayVerif
i
y
.
list
.
splice
(
index
,
1
)
this
.
data
.
options
.
displayVerify
.
list
.
splice
(
index
,
1
)
},
},
// 级联选择器
// 级联选择器
handleAddCascaderTopDialog
()
{
handleAddCascaderTopDialog
()
{
...
@@ -767,7 +846,7 @@ export default {
...
@@ -767,7 +846,7 @@ export default {
}
}
</
script
>
</
script
>
<
style
scoped
>
<
style
lang=
"scss"
scoped
>
.custom-tree-node
{
.custom-tree-node
{
flex
:
1
;
flex
:
1
;
display
:
flex
;
display
:
flex
;
...
@@ -776,4 +855,13 @@ export default {
...
@@ -776,4 +855,13 @@ export default {
font-size
:
14px
;
font-size
:
14px
;
padding-right
:
8px
;
padding-right
:
8px
;
}
}
.form-request-method
{
.form-request-method-title
{
font-size
:
13px
;
height
:
25px
;
}
.form-request-method-content
{
}
}
</
style
>
</
style
>
src/components/VueFormMaking/components/WidgetForm.vue
View file @
dc14d7fd
<
template
>
<
template
>
<div
class=
"widget-form-container"
>
<div
class=
"widget-form-container"
>
<div
v-if=
"data.list.length == 0"
class=
"form-empty"
>
{{
$t
(
'fm.description.containerEmpty'
)
}}
</div>
<div
v-if=
"data.list.length ==
=
0"
class=
"form-empty"
>
{{
$t
(
'fm.description.containerEmpty'
)
}}
</div>
<el-form
:size=
"data.config.size"
label-suffix=
":"
:label-position=
"data.config.labelPosition"
:label-width=
"data.config.labelWidth + 'px'"
>
<el-form
:size=
"data.config.size"
label-suffix=
":"
:label-position=
"data.config.labelPosition"
:label-width=
"data.config.labelWidth + 'px'"
>
<draggable
<draggable
...
@@ -14,13 +14,13 @@
...
@@ -14,13 +14,13 @@
<transition-group
name=
"fade"
tag=
"div"
class=
"widget-form-list"
>
<transition-group
name=
"fade"
tag=
"div"
class=
"widget-form-list"
>
<template
v-for=
"(element, index) in data.list"
>
<template
v-for=
"(element, index) in data.list"
>
<!-- 珊格 -->
<!-- 珊格 -->
<template
v-if=
"element.type == 'grid'"
>
<template
v-if=
"element.type ==
=
'grid'"
>
<el-row
<el-row
v-if=
"element && element.key"
v-if=
"element && element.key"
:key=
"element.key"
:key=
"element.key"
class=
"widget-col widget-view"
class=
"widget-col widget-view"
type=
"flex"
type=
"flex"
:class=
"
{active: selectWidget.key == element.key}"
:class=
"
{active: selectWidget.key ==
=
element.key}"
:gutter="element.options.gutter ? element.options.gutter : 0"
:gutter="element.options.gutter ? element.options.gutter : 0"
:justify="element.options.justify"
:justify="element.options.justify"
:align="element.options.align"
:align="element.options.align"
...
@@ -52,18 +52,18 @@
...
@@ -52,18 +52,18 @@
</draggable>
</draggable>
</el-col>
</el-col>
<div
v-if=
"selectWidget.key == element.key"
class=
"widget-view-action widget-col-action"
>
<div
v-if=
"selectWidget.key ==
=
element.key"
class=
"widget-view-action widget-col-action"
>
<i
class=
"iconfont icon-trash"
@
click
.
stop=
"handleWidgetDelete(index)"
/>
<i
class=
"iconfont icon-trash"
@
click
.
stop=
"handleWidgetDelete(index)"
/>
</div>
</div>
<div
v-if=
"selectWidget.key == element.key"
class=
"widget-view-drag widget-col-drag"
>
<div
v-if=
"selectWidget.key ==
=
element.key"
class=
"widget-view-drag widget-col-drag"
>
<i
class=
"iconfont icon-drag drag-widget"
/>
<i
class=
"iconfont icon-drag drag-widget"
/>
</div>
</div>
</el-row>
</el-row>
</template>
</template>
<!-- 子表单 -->
<!-- 子表单 -->
<
template
v-else-if=
"element.type == 'subform'"
>
<
template
v-else-if=
"element.type ==
=
'subform'"
>
<el-row
<el-row
v-if=
"element && element.key"
v-if=
"element && element.key"
:key=
"element.key"
:key=
"element.key"
...
@@ -77,7 +77,7 @@
...
@@ -77,7 +77,7 @@
>
>
<div
<div
type=
"flex"
type=
"flex"
:class=
"
{active: selectWidget.key == element.key}"
:class=
"
{active: selectWidget.key ==
=
element.key}"
:gutter="element.options.gutter ? element.options.gutter : 0"
:gutter="element.options.gutter ? element.options.gutter : 0"
:justify="element.options.justify"
:justify="element.options.justify"
:align="element.options.align"
:align="element.options.align"
...
@@ -117,11 +117,11 @@
...
@@ -117,11 +117,11 @@
</draggable>
</draggable>
</el-col>
</el-col>
<div
v-if=
"selectWidget.key == element.key"
class=
"widget-view-action widget-col-action"
>
<div
v-if=
"selectWidget.key ==
=
element.key"
class=
"widget-view-action widget-col-action"
>
<i
class=
"iconfont icon-trash"
@
click
.
stop=
"handleWidgetDelete(index)"
/>
<i
class=
"iconfont icon-trash"
@
click
.
stop=
"handleWidgetDelete(index)"
/>
</div>
</div>
<div
v-if=
"selectWidget.key == element.key"
class=
"widget-view-drag widget-col-drag"
>
<div
v-if=
"selectWidget.key ==
=
element.key"
class=
"widget-view-drag widget-col-drag"
>
<i
class=
"iconfont icon-drag drag-widget"
/>
<i
class=
"iconfont icon-drag drag-widget"
/>
</div>
</div>
</div>
</div>
...
@@ -225,6 +225,14 @@ export default {
...
@@ -225,6 +225,14 @@ export default {
})
})
}
}
if
(
this
.
data
.
list
[
newIndex
].
options
.
requestMethod
)
{
this
.
data
.
list
[
newIndex
].
options
.
requestMethod
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
data
.
list
[
newIndex
].
options
.
requestMethod
))
}
if
(
this
.
data
.
list
[
newIndex
].
options
.
displayVerify
)
{
this
.
data
.
list
[
newIndex
].
options
.
displayVerify
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
data
.
list
[
newIndex
].
options
.
displayVerify
))
}
this
.
selectWidget
=
this
.
data
.
list
[
newIndex
]
this
.
selectWidget
=
this
.
data
.
list
[
newIndex
]
},
},
handleWidgetColAdd
(
$event
,
row
,
colIndex
)
{
handleWidgetColAdd
(
$event
,
row
,
colIndex
)
{
...
...
src/components/VueFormMaking/components/componentsConfig.js
View file @
dc14d7fd
...
@@ -14,7 +14,7 @@ export const basicComponents = [
...
@@ -14,7 +14,7 @@ export const basicComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -36,7 +36,7 @@ export const basicComponents = [
...
@@ -36,7 +36,7 @@ export const basicComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -60,7 +60,7 @@ export const basicComponents = [
...
@@ -60,7 +60,7 @@ export const basicComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -103,7 +103,7 @@ export const basicComponents = [
...
@@ -103,7 +103,7 @@ export const basicComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -143,7 +143,7 @@ export const basicComponents = [
...
@@ -143,7 +143,7 @@ export const basicComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -208,7 +208,7 @@ export const basicComponents = [
...
@@ -208,7 +208,7 @@ export const basicComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -228,7 +228,7 @@ export const basicComponents = [
...
@@ -228,7 +228,7 @@ export const basicComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -262,6 +262,14 @@ export const basicComponents = [
...
@@ -262,6 +262,14 @@ export const basicComponents = [
remote
:
false
,
remote
:
false
,
filterable
:
false
,
filterable
:
false
,
remoteOptions
:
[],
remoteOptions
:
[],
requestMethod
:
{
url
:
''
,
method
:
'get'
,
params
:
'{}'
,
headers
:
'{}'
,
result
:
'data'
,
timeout
:
10
},
props
:
{
props
:
{
value
:
'value'
,
value
:
'value'
,
label
:
'label'
label
:
'label'
...
@@ -270,7 +278,7 @@ export const basicComponents = [
...
@@ -270,7 +278,7 @@ export const basicComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -289,7 +297,7 @@ export const basicComponents = [
...
@@ -289,7 +297,7 @@ export const basicComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -314,7 +322,7 @@ export const basicComponents = [
...
@@ -314,7 +322,7 @@ export const basicComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -336,7 +344,7 @@ export const basicComponents = [
...
@@ -336,7 +344,7 @@ export const basicComponents = [
customClass
:
''
,
customClass
:
''
,
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -356,7 +364,7 @@ export const advanceComponents = [
...
@@ -356,7 +364,7 @@ export const advanceComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -389,7 +397,7 @@ export const advanceComponents = [
...
@@ -389,7 +397,7 @@ export const advanceComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -416,7 +424,7 @@ export const advanceComponents = [
...
@@ -416,7 +424,7 @@ export const advanceComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -434,7 +442,7 @@ export const advanceComponents = [
...
@@ -434,7 +442,7 @@ export const advanceComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -486,7 +494,7 @@ export const advanceComponents = [
...
@@ -486,7 +494,7 @@ export const advanceComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -512,7 +520,7 @@ export const advanceComponents = [
...
@@ -512,7 +520,7 @@ export const advanceComponents = [
labelWidth
:
100
,
labelWidth
:
100
,
labelWidthDisabled
:
false
,
labelWidthDisabled
:
false
,
labelWidthStatus
:
true
,
labelWidthStatus
:
true
,
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
@@ -554,7 +562,7 @@ export const layoutComponents = [
...
@@ -554,7 +562,7 @@ export const layoutComponents = [
font_family
:
''
,
// 字体属性
font_family
:
''
,
// 字体属性
direction
:
'horizontal'
,
// horizontal / vertical 设置分割线方向
direction
:
'horizontal'
,
// horizontal / vertical 设置分割线方向
content_position
:
'center'
,
// left / right / center 设置分割线文案的位置
content_position
:
'center'
,
// left / right / center 设置分割线文案的位置
displayVerif
i
y
:
{
displayVerify
:
{
type
:
'hide'
,
type
:
'hide'
,
list
:
[{
list
:
[{
model
:
'字段标识'
,
model
:
'字段标识'
,
...
...
src/components/VueFormMaking/lang/en-US.js
View file @
dc14d7fd
...
@@ -102,6 +102,7 @@ export default {
...
@@ -102,6 +102,7 @@ export default {
option
:
'Option'
,
option
:
'Option'
,
staticData
:
'Static Data'
,
staticData
:
'Static Data'
,
remoteData
:
'Remote Date'
,
remoteData
:
'Remote Date'
,
requestMethod
:
'Request Method'
,
remoteFunc
:
'Remote Function'
,
remoteFunc
:
'Remote Function'
,
value
:
'Value'
,
value
:
'Value'
,
label
:
'Label'
,
label
:
'Label'
,
...
...
src/components/VueFormMaking/lang/zh-CN.js
View file @
dc14d7fd
...
@@ -104,6 +104,7 @@ export default {
...
@@ -104,6 +104,7 @@ export default {
option
:
'选项'
,
option
:
'选项'
,
staticData
:
'静态数据'
,
staticData
:
'静态数据'
,
remoteData
:
'远端数据'
,
remoteData
:
'远端数据'
,
requestMethod
:
'请求方法'
,
remoteFunc
:
'远端方法'
,
remoteFunc
:
'远端方法'
,
value
:
'值'
,
value
:
'值'
,
label
:
'标签'
,
label
:
'标签'
,
...
@@ -178,9 +179,9 @@ export default {
...
@@ -178,9 +179,9 @@ export default {
validatorType
:
'格式不正确'
,
validatorType
:
'格式不正确'
,
validatorPattern
:
'格式不匹配'
,
validatorPattern
:
'格式不匹配'
,
showAllLevels
:
'完整路径'
,
showAllLevels
:
'完整路径'
,
displayVerif
i
y
:
'显示校验'
,
displayVerify
:
'显示校验'
,
displayVerif
i
yPlaceholderModel
:
'请输入字段标识'
,
displayVerifyPlaceholderModel
:
'请输入字段标识'
,
displayVerif
i
yPlaceholderValue
:
'请输入字段值'
displayVerifyPlaceholderValue
:
'请输入字段值'
}
}
},
},
upload
:
{
upload
:
{
...
...
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