feat:新增 form 组件
This commit is contained in:
JaguarJack
@@ -0,0 +1,64 @@
|
||||
export default [
|
||||
{
|
||||
label: 'url',
|
||||
component: 'Input',
|
||||
name: 'props.api.url',
|
||||
initialValue: '/current/query/article',
|
||||
designKey: 'form-UrE8'
|
||||
},
|
||||
{
|
||||
label: '请求方式',
|
||||
component: 'Radio',
|
||||
name: 'props.api.method',
|
||||
props: {
|
||||
mode: 'static',
|
||||
autoSelectedFirst: true,
|
||||
options: [
|
||||
{
|
||||
label: 'GET',
|
||||
value: 'GET'
|
||||
},
|
||||
{
|
||||
label: 'POST',
|
||||
value: 'POST'
|
||||
},
|
||||
{
|
||||
label: 'PUT',
|
||||
value: 'PUT'
|
||||
},
|
||||
{
|
||||
label: 'DELETE',
|
||||
value: 'DELETE'
|
||||
}
|
||||
]
|
||||
},
|
||||
designKey: 'form-nOpD'
|
||||
},
|
||||
{
|
||||
label: '请求参数',
|
||||
component: 'JsonEdit',
|
||||
name: 'props.api.params',
|
||||
hidden: '{{ ["POST","PUT"].includes($values.props.api.method) }}',
|
||||
initialValue: {},
|
||||
props: {
|
||||
mode: 'dialog'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '请求参数',
|
||||
component: 'JsonEdit',
|
||||
name: 'props.api.data',
|
||||
hidden: '{{ ["GET","DELETE"].includes($values.props.api.method) }}',
|
||||
initialValue: {},
|
||||
props: {
|
||||
mode: 'dialog'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '数据路径',
|
||||
component: 'Input',
|
||||
name: 'props.api.dataPath',
|
||||
initialValue: 'data',
|
||||
designKey: 'form-UrE8'
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,47 @@
|
||||
import { recursionDelete } from '/admin/components/catchForm/support'
|
||||
|
||||
const basicAttr = (omit = [], moreAttrs = []) => {
|
||||
const attr = [
|
||||
{ label: '标签', component: 'Input', name: 'label' },
|
||||
{
|
||||
label: '唯一标识',
|
||||
component: 'Input',
|
||||
name: 'name',
|
||||
help: "既是唯一标识，也是数据路径。比如输入【props.name】，数据就会保存为 { props: { name:'xxx' } }"
|
||||
},
|
||||
{ label: '字段说明', component: 'Textarea', name: 'help' },
|
||||
{
|
||||
label: '占位提示',
|
||||
component: 'Input',
|
||||
name: 'props.placeholder',
|
||||
designKey: 'form-ekRL'
|
||||
},
|
||||
{ label: '初始值', component: 'Input', name: 'initialValue' },
|
||||
{
|
||||
component: 'Grid',
|
||||
children: [
|
||||
{ label: '是否必填', component: 'Switch', name: 'required' },
|
||||
{ label: '是否只读', component: 'Switch', name: 'props.readonly' },
|
||||
{ label: '是否禁用', component: 'Switch', name: 'props.disabled' },
|
||||
{ label: '隐藏字段', component: 'Switch', name: 'hidden' },
|
||||
{ label: '隐藏标签', component: 'Switch', name: 'hideLabel' }
|
||||
],
|
||||
props: {
|
||||
columns: 3,
|
||||
'row-gap': 0,
|
||||
'column-gap': 20
|
||||
},
|
||||
designKey: 'form-R003',
|
||||
name: 'cNmCuu',
|
||||
style: {
|
||||
marginBottom: 0
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const omitAttrs = recursionDelete(attr, (item) => !omit.includes(item.name))
|
||||
|
||||
return [...omitAttrs, ...moreAttrs]
|
||||
}
|
||||
|
||||
export default basicAttr
|
||||
@@ -0,0 +1,18 @@
|
||||
const basicAttr = (omit = []) => {
|
||||
const attr = [
|
||||
{ label: '自定义class', component: 'Input', name: 'props.class' },
|
||||
{
|
||||
label: '自定义style',
|
||||
component: 'JsonEdit',
|
||||
name: 'props.style',
|
||||
help: '与vue的style对象格式一样',
|
||||
props: {
|
||||
mode: 'dialog'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
return attr.filter((item) => !omit.includes(item.name))
|
||||
}
|
||||
|
||||
export default basicAttr
|
||||
@@ -0,0 +1,6 @@
|
||||
export { default as basicAttr } from './basicAttr'
|
||||
export { default as highAttr } from './highAttr'
|
||||
export { default as apiAttr } from './apiAttr'
|
||||
export { default as linkageAttr } from './linkageAttr'
|
||||
export { default as optionAttr } from './optionAttr'
|
||||
export { default as mergeAttr } from './mergeAttr'
|
||||
@@ -0,0 +1,36 @@
|
||||
export default [
|
||||
{
|
||||
component: 'Alert',
|
||||
props: {
|
||||
type: 'success',
|
||||
description: '对于配置级的联动，请直接点击下方按钮【编辑配置文本】，通过插值表达式实现',
|
||||
closable: true,
|
||||
'show-icon': true
|
||||
},
|
||||
designKey: 'design-MQPU',
|
||||
name: 'form-Oqi5'
|
||||
},
|
||||
{
|
||||
label: '值联动',
|
||||
help: '本字段值改变时，修改其他字段的值',
|
||||
name: 'change',
|
||||
component: 'FormList',
|
||||
children: [
|
||||
{
|
||||
label: '目标字段',
|
||||
name: 'target',
|
||||
component: 'Input',
|
||||
props: {}
|
||||
},
|
||||
{
|
||||
label: '值',
|
||||
name: 'value',
|
||||
component: 'Input',
|
||||
props: {}
|
||||
}
|
||||
],
|
||||
props: {
|
||||
mode: 'card'
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,32 @@
|
||||
const mergeAttr = (attrConfig) => {
|
||||
const { basic = [], high = [], linkage = [] } = attrConfig
|
||||
|
||||
const attrs = [
|
||||
{
|
||||
component: 'Collapse',
|
||||
name: 'mergeAttr',
|
||||
children: [
|
||||
{
|
||||
title: '常用属性',
|
||||
name: 'basic',
|
||||
checked: true,
|
||||
children: basic
|
||||
},
|
||||
{
|
||||
title: '高级属性',
|
||||
name: 'high',
|
||||
children: high
|
||||
},
|
||||
{
|
||||
title: '联动规则',
|
||||
name: 'linkage',
|
||||
children: linkage
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
return attrs
|
||||
}
|
||||
|
||||
export default mergeAttr
|
||||
@@ -0,0 +1,91 @@
|
||||
import apiAttr from './apiAttr'
|
||||
|
||||
export default [
|
||||
{
|
||||
component: 'Divider',
|
||||
props: {
|
||||
title: '选项设置',
|
||||
contentPosition: 'center'
|
||||
},
|
||||
designKey: 'design-gSnX',
|
||||
name: 'form-xDEe',
|
||||
style: {
|
||||
marginTop: '40px'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '标签key',
|
||||
component: 'Input',
|
||||
name: 'props.labelKey',
|
||||
designKey: 'form-X6hs'
|
||||
},
|
||||
{
|
||||
label: '值Key',
|
||||
component: 'Input',
|
||||
name: 'props.valueKey',
|
||||
designKey: 'form-STkl'
|
||||
},
|
||||
{
|
||||
label: '数据模式',
|
||||
component: 'Radio',
|
||||
name: 'props.mode',
|
||||
props: {
|
||||
mode: 'static',
|
||||
options: [
|
||||
{
|
||||
label: '静态',
|
||||
value: 'static'
|
||||
},
|
||||
{
|
||||
label: '远程',
|
||||
value: 'remote'
|
||||
}
|
||||
],
|
||||
optionType: 'button',
|
||||
space: 0
|
||||
},
|
||||
designKey: 'form-PLpj'
|
||||
},
|
||||
{
|
||||
label: '静态选项',
|
||||
name: 'props.options',
|
||||
component: 'FormList',
|
||||
hidden: '{{$values.props.mode!=="static"}}',
|
||||
children: [
|
||||
{
|
||||
label: '选项名',
|
||||
name: '{{$values.props.labelKey}}',
|
||||
component: 'Input',
|
||||
props: {
|
||||
placeholder: '请输入...'
|
||||
},
|
||||
designKey: 'form-LnGh'
|
||||
// initialValue: "{{ '选项' + ($index+1) }}"
|
||||
},
|
||||
{
|
||||
label: '选项值',
|
||||
name: '{{$values.props.valueKey}}',
|
||||
component: 'Input',
|
||||
props: {},
|
||||
designKey: 'form-HYtW'
|
||||
// initialValue: "{{ 'value' + ($index+1) }}"
|
||||
}
|
||||
],
|
||||
designKey: 'form-Iwpd',
|
||||
props: {
|
||||
mode: 'table',
|
||||
newItemDefaults:
|
||||
'{{ (index) => ({ [$values.props.labelKey]: `选项${index + 1}`, [$values.props.valueKey]: `value${index + 1}` }) }}'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Card',
|
||||
props: {
|
||||
// header: '远程数据'
|
||||
},
|
||||
designKey: 'id-pGeN',
|
||||
name: 'form-6vzT',
|
||||
hidden: '{{$values.props.mode==="static"}}',
|
||||
children: apiAttr
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user