lanyuanxiaoyao
3cf56adeac
- 将 fieldSet 组件替换为 wrapper 组件，以改善布局结构 - 为 wrapper 组件添加 size 属性，设置为 none，以适应不同资源类型的布局需求- 此修改涉及 API、FILE、DATABASE、HDFS 和 FTP资源类型的输入框布局
383 lines
11 KiB
JavaScript
383 lines
11 KiB
JavaScript
import './dialog-resource.css'
|
||
import {
|
||
apiGet,
|
||
apiPost,
|
||
formCreatedUserAndModifiedUser,
|
||
formInputClearable,
|
||
formInputSingleFileStatic,
|
||
horizontalFormOptions,
|
||
inputFileFormItemCommonOptions,
|
||
size1GB,
|
||
size500MB
|
||
} from "../constants.js";
|
||
|
||
function detailForm(showCreatedUserAndModifiedUser = false) {
|
||
return {
|
||
type: 'form',
|
||
...horizontalFormOptions(),
|
||
horizontal: {
|
||
left: 2,
|
||
},
|
||
body: [
|
||
{
|
||
type: 'hidden',
|
||
name: 'id',
|
||
},
|
||
{
|
||
type: 'input-text',
|
||
name: 'name',
|
||
label: '资源名称',
|
||
maxLength: 10,
|
||
showCounter: true,
|
||
required: true,
|
||
...formInputClearable,
|
||
},
|
||
{
|
||
type: 'textarea',
|
||
name: 'description',
|
||
label: '资源描述',
|
||
...formInputClearable,
|
||
showCounter: true,
|
||
trimContents: true,
|
||
minRows: 2,
|
||
maxRows: 2,
|
||
},
|
||
{
|
||
type: 'fieldSet',
|
||
title: '资源类型定义',
|
||
body: [
|
||
{
|
||
name: 'resourceType',
|
||
type: 'select',
|
||
label: '资源类型',
|
||
selectFirst: true,
|
||
required: true,
|
||
options: [
|
||
{label: 'API', value: 'API'},
|
||
{label: '文件', value: 'FILE'},
|
||
{label: '数据库', value: 'DATABASE'},
|
||
{label: 'HDFS', value: 'HDFS'},
|
||
{label: 'FTP', value: 'FTP'},
|
||
]
|
||
},
|
||
{
|
||
visibleOn: "${resourceType === 'API'}",
|
||
type: 'wrapper',
|
||
size: 'none',
|
||
body: [
|
||
{
|
||
type: 'input-text',
|
||
label: 'API地址',
|
||
name: 'apiUrl',
|
||
required: true,
|
||
...formInputClearable,
|
||
},
|
||
{
|
||
type: 'input-text',
|
||
label: '用户名',
|
||
name: 'apiUsername',
|
||
...formInputClearable,
|
||
},
|
||
{
|
||
type: 'input-password',
|
||
label: '密码',
|
||
name: 'apiPassword',
|
||
...formInputClearable,
|
||
},
|
||
]
|
||
},
|
||
{
|
||
visibleOn: "${resourceType === 'FILE'}",
|
||
type: 'wrapper',
|
||
size: 'none',
|
||
body: [
|
||
formInputSingleFileStatic('file', '数据文件'),
|
||
{
|
||
visibleOn: "${!detail}",
|
||
type: 'input-file',
|
||
label: '数据文件',
|
||
description: '只适合小于1GB的资源文件使用，大文件请使用其他资源类型',
|
||
name: 'file',
|
||
multiple: false,
|
||
required: true,
|
||
joinValues: false,
|
||
...inputFileFormItemCommonOptions('.zip', size1GB),
|
||
},
|
||
]
|
||
},
|
||
{
|
||
visibleOn: "${resourceType === 'DATABASE'}",
|
||
type: 'wrapper',
|
||
size: 'none',
|
||
body: [
|
||
{
|
||
type: 'select',
|
||
label: '数据库类型',
|
||
name: 'databaseType',
|
||
required: true,
|
||
options: [
|
||
{label: 'MySQL', value: 'MYSQL'},
|
||
{label: 'Oracle', value: 'ORACLE'},
|
||
{label: 'PostgreSQL', value: 'POSTGRESQL'},
|
||
]
|
||
},
|
||
{
|
||
type: 'input-text',
|
||
label: 'JDBC',
|
||
name: 'databaseJdbc',
|
||
required: true,
|
||
...formInputClearable,
|
||
},
|
||
{
|
||
type: 'input-text',
|
||
label: '用户名',
|
||
name: 'databaseUsername',
|
||
...formInputClearable,
|
||
},
|
||
{
|
||
type: 'input-password',
|
||
label: '密码',
|
||
name: 'databasePassword',
|
||
...formInputClearable,
|
||
},
|
||
]
|
||
},
|
||
{
|
||
visibleOn: "${resourceType === 'HDFS'}",
|
||
type: 'wrapper',
|
||
size: 'none',
|
||
body: [
|
||
formInputSingleFileStatic('coreSiteFile', 'core-site.xml'),
|
||
{
|
||
visibleOn: "${!detail}",
|
||
type: 'input-file',
|
||
label: 'core-site.xml',
|
||
name: 'coreSiteFile',
|
||
multiple: false,
|
||
required: true,
|
||
joinValues: false,
|
||
...inputFileFormItemCommonOptions('.xml'),
|
||
},
|
||
formInputSingleFileStatic('hdfsSiteFile', 'hdfs-site.xml'),
|
||
{
|
||
visibleOn: "${!detail}",
|
||
type: 'input-file',
|
||
label: 'hdfs-site.xml',
|
||
name: 'hdfsSiteFile',
|
||
multiple: false,
|
||
required: true,
|
||
joinValues: false,
|
||
...inputFileFormItemCommonOptions('.xml'),
|
||
},
|
||
]
|
||
},
|
||
{
|
||
visibleOn: "${resourceType === 'FTP'}",
|
||
type: 'wrapper',
|
||
size: 'none',
|
||
body: [
|
||
{
|
||
type: 'input-text',
|
||
label: 'FTP地址',
|
||
name: 'ftpUrl',
|
||
required: true,
|
||
...formInputClearable,
|
||
},
|
||
{
|
||
type: 'input-text',
|
||
label: 'FTP账号',
|
||
name: 'ftpUsername',
|
||
...formInputClearable,
|
||
},
|
||
{
|
||
type: 'input-password',
|
||
label: 'FTP密码',
|
||
name: 'ftpPassword',
|
||
...formInputClearable,
|
||
},
|
||
{
|
||
type: 'input-text',
|
||
label: '相对路径',
|
||
name: 'ftpPath',
|
||
description: '若为空，则使用用户根目录',
|
||
...formInputClearable,
|
||
},
|
||
{
|
||
type: 'input-text',
|
||
label: '文件筛选',
|
||
name: 'ftpRegexFilter',
|
||
description: '正则表达式，用于匹配文件的路径，只有符合筛选条件的文件才会被采集；若为空则默认采集全部文件',
|
||
...formInputClearable,
|
||
},
|
||
]
|
||
},
|
||
]
|
||
},
|
||
{
|
||
type: 'fieldSet',
|
||
title: '资源格式定义',
|
||
className: 'mt-5',
|
||
body: [
|
||
{
|
||
name: 'formatType',
|
||
type: 'select',
|
||
label: '资源格式',
|
||
selectFirst: true,
|
||
required: true,
|
||
options: [
|
||
{label: '无', value: 'NONE'},
|
||
{label: 'Line', value: 'LINE'},
|
||
{label: 'JSON', value: 'JSON'},
|
||
{label: 'JSON Line', value: 'JSON_LINE'},
|
||
{label: 'CSV', value: 'CSV'},
|
||
]
|
||
},
|
||
{
|
||
visibleOn: "${formatType === 'JSON' && !detail}",
|
||
type: 'json-schema-editor',
|
||
name: 'jsonSchema',
|
||
label: 'JSON格式',
|
||
description: '（使用JSON Schema格式）',
|
||
required: true,
|
||
enableAdvancedSetting: true,
|
||
mini: true,
|
||
},
|
||
{
|
||
visibleOn: "${formatType === 'JSON' && detail}",
|
||
type: 'editor',
|
||
name: 'jsonSchemaText',
|
||
label: 'JSON格式',
|
||
language: 'json',
|
||
},
|
||
{
|
||
visibleOn: "${formatType === 'JSON_LINE' && !detail}",
|
||
type: 'json-schema-editor',
|
||
name: 'jsonLineSchema',
|
||
label: 'JSON格式',
|
||
description: 'JSON Line类型请定义单行JSON数据格式（使用JSON Schema格式）',
|
||
required: true,
|
||
enableAdvancedSetting: true,
|
||
mini: true,
|
||
},
|
||
{
|
||
visibleOn: "${formatType === 'JSON_LINE' && detail}",
|
||
type: 'editor',
|
||
name: 'jsonLineSchemaText',
|
||
label: 'JSON格式',
|
||
language: 'json',
|
||
},
|
||
{
|
||
visibleOn: "${formatType === 'CSV' && !detail}",
|
||
type: 'json-schema-editor',
|
||
name: 'csvSchema',
|
||
label: 'CSV格式',
|
||
description: '请定义单行数据中各个字段的格式（使用JSON Schema格式）',
|
||
required: true,
|
||
enableAdvancedSetting: true,
|
||
mini: true,
|
||
disabledTypes: [
|
||
'object',
|
||
'array',
|
||
'null',
|
||
]
|
||
},
|
||
{
|
||
visibleOn: "${formatType === 'CSV' && detail}",
|
||
type: 'editor',
|
||
name: 'csvSchemaText',
|
||
label: 'JSON格式',
|
||
language: 'json',
|
||
},
|
||
formInputSingleFileStatic('exampleFile', '资源示例'),
|
||
{
|
||
visibleOn: "${!detail}",
|
||
type: 'input-file',
|
||
label: '资源示例',
|
||
name: 'exampleFile',
|
||
description: '可以上传用于作为格式示范的样例数据',
|
||
multiple: false,
|
||
joinValues: false,
|
||
...inputFileFormItemCommonOptions(undefined, size500MB),
|
||
},
|
||
]
|
||
},
|
||
...(showCreatedUserAndModifiedUser ? formCreatedUserAndModifiedUser() : [])
|
||
]
|
||
}
|
||
}
|
||
|
||
export function resourceAddDialog() {
|
||
return {
|
||
actionType: 'dialog',
|
||
dialog: {
|
||
title: '新增数据资源',
|
||
size: 'md',
|
||
actions: [
|
||
{
|
||
type: 'reset',
|
||
label: '重置',
|
||
},
|
||
{
|
||
type: 'submit',
|
||
label: '确定',
|
||
level: 'primary',
|
||
}
|
||
],
|
||
body: {
|
||
...detailForm(),
|
||
api: apiPost('${base}/data_resource/save'),
|
||
data: {
|
||
add: true,
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
export function resourceDetailDialog(field = 'id') {
|
||
return {
|
||
actionType: 'dialog',
|
||
dialog: {
|
||
title: '账号详情',
|
||
actions: [],
|
||
size: 'md',
|
||
body: {
|
||
...detailForm(true),
|
||
static: true,
|
||
initApi: apiGet(`\${base}/data_resource/detail/\${${field}}`),
|
||
data: {
|
||
detail: true,
|
||
}
|
||
},
|
||
}
|
||
}
|
||
}
|
||
|
||
export function resourceEditeDialog() {
|
||
return {
|
||
actionType: 'dialog',
|
||
dialog: {
|
||
title: '账号详情',
|
||
size: 'md',
|
||
actions: [
|
||
{
|
||
type: 'reset',
|
||
label: '重置',
|
||
},
|
||
{
|
||
type: 'submit',
|
||
label: '确定',
|
||
level: 'primary',
|
||
}
|
||
],
|
||
body: {
|
||
...detailForm(),
|
||
api: apiPost('${base}/data_resource/save'),
|
||
initApi: apiGet('${base}/data_resource/detail/${id}'),
|
||
data: {
|
||
edit: true,
|
||
}
|
||
},
|
||
}
|
||
}
|
||
} |