feat(frontend): 增加数据资源查看界面
This commit is contained in:
@@ -83,11 +83,20 @@ export function paginationTemplate(perPage = 20, maxButtons = 5) {
|
||||
}
|
||||
}
|
||||
|
||||
export function inputFileFormItemCommonOptions(accept = '*', maxSize = 5242880) {
|
||||
export const size5MB = 5242880
|
||||
export const size100MB = 104857600
|
||||
export const size500MB = 524288000
|
||||
export const size1GB = 1073741824
|
||||
|
||||
export function inputFileFormItemCommonOptions(accept = '*', maxSize = size5MB) {
|
||||
return {
|
||||
useChunk: true,
|
||||
accept: accept,
|
||||
maxSize: maxSize,
|
||||
autoUpload: false,
|
||||
startChunkApi: apiPost('${base}/upload/start'),
|
||||
chunkApi: apiPost('${base}/upload/slice'),
|
||||
finishChunkApi: apiPost('${base}/upload/finish'),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,294 @@
|
||||
import './dialog-resource.css'
|
||||
import {apiPost, horizontalFormOptions, inputFileFormItemCommonOptions} from "../constants.js";
|
||||
import {
|
||||
apiGet,
|
||||
apiPost,
|
||||
horizontalFormOptions,
|
||||
inputFileFormItemCommonOptions,
|
||||
size1GB,
|
||||
size500MB
|
||||
} from "../constants.js";
|
||||
|
||||
const clearable = {
|
||||
clearable: true,
|
||||
clearValueOnEmpty: true,
|
||||
}
|
||||
|
||||
function detailForm() {
|
||||
return {
|
||||
type: 'form',
|
||||
...horizontalFormOptions(),
|
||||
horizontal: {
|
||||
left: 2,
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'name',
|
||||
label: '资源名称',
|
||||
required: true,
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'description',
|
||||
label: '资源描述',
|
||||
...clearable,
|
||||
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: 'fieldSet',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
label: 'API地址',
|
||||
name: 'apiUrl',
|
||||
required: true,
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '用户名',
|
||||
name: 'apiUsername',
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-password',
|
||||
label: '密码',
|
||||
name: 'apiPassword',
|
||||
...clearable,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
visibleOn: "${resourceType === 'FILE'}",
|
||||
type: 'fieldSet',
|
||||
body: [
|
||||
{
|
||||
visibleOn: "${static}",
|
||||
type: 'input-text',
|
||||
label: '文件名称',
|
||||
name: 'fileId',
|
||||
},
|
||||
{
|
||||
visibleOn: "${!static}",
|
||||
type: 'input-file',
|
||||
name: 'fileId',
|
||||
description: '只适合小于1GB的资源文件使用，大文件请使用其他资源类型',
|
||||
...inputFileFormItemCommonOptions('.zip', size1GB),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
visibleOn: "${resourceType === 'DATABASE'}",
|
||||
type: 'fieldSet',
|
||||
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,
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '用户名',
|
||||
name: 'databaseUsername',
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-password',
|
||||
label: '密码',
|
||||
name: 'databasePassword',
|
||||
...clearable,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
visibleOn: "${resourceType === 'HDFS'}",
|
||||
type: 'fieldSet',
|
||||
body: [
|
||||
{
|
||||
visibleOn: "${static}",
|
||||
type: 'input-text',
|
||||
label: '文件名称',
|
||||
name: 'coreSiteFileId',
|
||||
},
|
||||
{
|
||||
visibleOn: "${!static}",
|
||||
type: 'input-file',
|
||||
label: 'core-site.xml',
|
||||
name: 'coreSiteFileId',
|
||||
...inputFileFormItemCommonOptions('.xml'),
|
||||
},
|
||||
{
|
||||
visibleOn: "${static}",
|
||||
type: 'input-text',
|
||||
label: '文件名称',
|
||||
name: 'hdfsSiteFileId',
|
||||
},
|
||||
{
|
||||
visibleOn: "${!static}",
|
||||
type: 'input-file',
|
||||
label: 'hdfs-site.xml',
|
||||
name: 'hdfsSiteFileId',
|
||||
...inputFileFormItemCommonOptions('.xml'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
visibleOn: "${resourceType === 'FTP'}",
|
||||
type: 'fieldSet',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
label: 'FTP地址',
|
||||
name: 'ftpUrl',
|
||||
required: true,
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: 'FTP账号',
|
||||
name: 'ftpUsername',
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-password',
|
||||
label: 'FTP密码',
|
||||
name: 'ftpPassword',
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '相对路径',
|
||||
name: 'ftpPath',
|
||||
description: '若为空，则使用用户根目录',
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '文件筛选',
|
||||
name: 'ftpRegexFilter',
|
||||
description: '正则表达式，用于匹配文件的路径，只有符合筛选条件的文件才会被采集；若为空则默认采集全部文件',
|
||||
...clearable,
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
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'}",
|
||||
type: 'json-schema-editor',
|
||||
name: 'jsonSchema',
|
||||
label: 'JSON格式',
|
||||
description: '（使用JSON Schema格式）',
|
||||
required: true,
|
||||
enableAdvancedSetting: true,
|
||||
mini: true,
|
||||
},
|
||||
{
|
||||
visibleOn: "${formatType === 'JSON_LINE'}",
|
||||
type: 'json-schema-editor',
|
||||
name: 'jsonLineSchema',
|
||||
label: 'JSON格式',
|
||||
description: 'JSON Line类型请定义单行JSON数据格式（使用JSON Schema格式）',
|
||||
required: true,
|
||||
enableAdvancedSetting: true,
|
||||
mini: true,
|
||||
},
|
||||
{
|
||||
visibleOn: "${formatType === 'CSV'}",
|
||||
type: 'json-schema-editor',
|
||||
name: 'csvSchema',
|
||||
label: 'CSV格式',
|
||||
description: '请定义单行数据中各个字段的格式（使用JSON Schema格式）',
|
||||
required: true,
|
||||
enableAdvancedSetting: true,
|
||||
mini: true,
|
||||
disabledTypes: [
|
||||
'object',
|
||||
'array',
|
||||
'null',
|
||||
]
|
||||
},
|
||||
{
|
||||
visibleOn: "${static}",
|
||||
type: 'input-text',
|
||||
label: '资源示例',
|
||||
name: 'exampleFileId',
|
||||
},
|
||||
{
|
||||
visibleOn: "${!static}",
|
||||
type: 'input-file',
|
||||
label: '资源示例',
|
||||
description: '可以上传用于作为格式示范的样例数据',
|
||||
name: 'exampleFileId',
|
||||
...inputFileFormItemCommonOptions(undefined, size500MB),
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export function resourceAddDialog() {
|
||||
return {
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: '新增数据资源',
|
||||
// size: 'lg',
|
||||
size: 'md',
|
||||
actions: [
|
||||
{
|
||||
type: 'reset',
|
||||
@@ -24,245 +301,29 @@ export function resourceAddDialog() {
|
||||
}
|
||||
],
|
||||
body: {
|
||||
...detailForm(),
|
||||
debug: true,
|
||||
type: 'form',
|
||||
api: apiPost('${base}/data_resource/create'),
|
||||
...horizontalFormOptions(),
|
||||
horizontal: {
|
||||
left: 2,
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'name',
|
||||
label: '资源名称',
|
||||
required: true,
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'description',
|
||||
label: '资源描述',
|
||||
...clearable,
|
||||
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: 'fieldSet',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
label: 'API地址',
|
||||
name: 'apiUrl',
|
||||
required: true,
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '用户名',
|
||||
name: 'apiUsername',
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-password',
|
||||
label: '密码',
|
||||
name: 'apiPassword',
|
||||
...clearable,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
visibleOn: "${resourceType === 'file'}",
|
||||
type: 'fieldSet',
|
||||
body: [
|
||||
{
|
||||
type: 'input-file',
|
||||
name: 'filePath',
|
||||
description: '只适合小于2M的资源文件使用，大文件请使用其他资源类型',
|
||||
...inputFileFormItemCommonOptions('.zip', 2097152),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
visibleOn: "${resourceType === 'database'}",
|
||||
type: 'fieldSet',
|
||||
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,
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '用户名',
|
||||
name: 'databaseUsername',
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-password',
|
||||
label: '密码',
|
||||
name: 'databasePassword',
|
||||
...clearable,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
visibleOn: "${resourceType === 'hdfs'}",
|
||||
type: 'fieldSet',
|
||||
body: [
|
||||
{
|
||||
type: 'input-file',
|
||||
description: 'core-site.xml',
|
||||
name: 'coreSiteFile',
|
||||
...inputFileFormItemCommonOptions('.xml', 1048576),
|
||||
},
|
||||
{
|
||||
type: 'input-file',
|
||||
description: 'hdfs-site.xml',
|
||||
name: 'hdfsSiteFile',
|
||||
...inputFileFormItemCommonOptions('.xml', 1048576),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
visibleOn: "${resourceType === 'ftp'}",
|
||||
type: 'fieldSet',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
label: 'FTP地址',
|
||||
name: 'ftpUrl',
|
||||
required: true,
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: 'FTP账号',
|
||||
name: 'ftpUsername',
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-password',
|
||||
label: 'FTP密码',
|
||||
name: 'ftpPassword',
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '相对路径',
|
||||
name: 'ftpPath',
|
||||
description: '若为空，则使用用户根目录',
|
||||
...clearable,
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '文件筛选',
|
||||
name: 'ftpRegexFilter',
|
||||
description: '正则表达式，用于匹配文件的路径，只有符合筛选条件的文件才会被采集；若为空则默认采集全部文件',
|
||||
...clearable,
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
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'}",
|
||||
type: 'json-schema-editor',
|
||||
name: 'jsonSchema',
|
||||
label: 'JSON格式',
|
||||
required: true,
|
||||
enableAdvancedSetting: true,
|
||||
mini: true,
|
||||
},
|
||||
{
|
||||
visibleOn: "${formatType === 'JSON_LINE'}",
|
||||
type: 'json-schema-editor',
|
||||
name: 'jsonLineSchema',
|
||||
label: 'JSON格式',
|
||||
description: 'JSON Line类型请定义单行JSON数据格式',
|
||||
required: true,
|
||||
enableAdvancedSetting: true,
|
||||
mini: true,
|
||||
},
|
||||
{
|
||||
visibleOn: "${formatType === 'CSV'}",
|
||||
type: 'json-schema-editor',
|
||||
name: 'csvSchema',
|
||||
label: 'CSV格式',
|
||||
description: '请定义单行数据中各个字段的格式',
|
||||
required: true,
|
||||
enableAdvancedSetting: true,
|
||||
mini: true,
|
||||
disabledTypes: [
|
||||
'object',
|
||||
'array',
|
||||
'null',
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'input-file',
|
||||
label: '资源示例',
|
||||
description: '可以上传用于作为格式示范的样例数据',
|
||||
name: 'example',
|
||||
...inputFileFormItemCommonOptions(),
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function resourceDetailDialog() {
|
||||
return {
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: '账号详情',
|
||||
actions: [],
|
||||
size: 'md',
|
||||
body: {
|
||||
...detailForm(),
|
||||
static: true,
|
||||
initApi: apiGet('${base}/data_resource/detail/${id}'),
|
||||
data: {
|
||||
static: true,
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,9 @@
|
||||
import {apiGet, useAmis} from '../../components/constants.js'
|
||||
import {userChangePasswordDialog} from "../../components/user/dialog-user-change-password.js";
|
||||
import {tabUser} from "./tab-user.js";
|
||||
import {tabOverview} from "./tab-overview.js";
|
||||
import {tabMarket} from "./tab-market.js";
|
||||
import {tabData} from "./tab-data.js";
|
||||
import {tabLog} from "./tab-log.js";
|
||||
import {tabSettings} from "./tab-settings.js";
|
||||
|
||||
useAmis(information => {
|
||||
return {
|
||||
@@ -61,7 +60,7 @@ useAmis(information => {
|
||||
// tabOverview(),
|
||||
tabMarket(),
|
||||
tabUser(),
|
||||
tabLog(),
|
||||
tabSettings(),
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {resourceAddDialog} from "../../components/resource/dialog-resource.js";
|
||||
import {apiPost, inputFileFormItemCommonOptions} from "../../components/constants.js";
|
||||
import {resourceAddDialog, resourceDetailDialog} from "../../components/resource/dialog-resource.js";
|
||||
import {apiPost, copyField, crudCommonOptions} from "../../components/constants.js";
|
||||
|
||||
export function tabData() {
|
||||
return {
|
||||
@@ -7,24 +7,51 @@ export function tabData() {
|
||||
icon: 'fa fa-database',
|
||||
body: [
|
||||
{
|
||||
type: 'action',
|
||||
label: '',
|
||||
icon: 'fa fa-plus',
|
||||
...resourceAddDialog()
|
||||
},
|
||||
{
|
||||
type: 'form',
|
||||
body: [
|
||||
type: 'crud',
|
||||
api: {
|
||||
...apiPost('${base}/data_resource/list')
|
||||
},
|
||||
...crudCommonOptions(),
|
||||
headerToolbar: [
|
||||
'reload',
|
||||
{
|
||||
type: 'input-file',
|
||||
name: 'file',
|
||||
label: '测试文件上传',
|
||||
...inputFileFormItemCommonOptions(undefined, 1073741824),
|
||||
useChunk: true,
|
||||
startChunkApi: apiPost('${base}/upload/start'),
|
||||
chunkApi: apiPost('${base}/upload/slice'),
|
||||
finishChunkApi: apiPost('${base}/upload/finish')
|
||||
}
|
||||
type: 'action',
|
||||
label: '新增数据资源',
|
||||
icon: 'fa fa-plus',
|
||||
...resourceAddDialog()
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
label: '名称',
|
||||
name: 'name',
|
||||
width: 200,
|
||||
...copyField(
|
||||
'name',
|
||||
'查看详情',
|
||||
undefined,
|
||||
resourceDetailDialog(),
|
||||
)
|
||||
},
|
||||
{
|
||||
label: '描述',
|
||||
name: 'description',
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
type: 'tpl',
|
||||
tpl: "${IF(createdTime, DATETOSTR(createdTime), '-')}"
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
width: 200,
|
||||
type: 'operation',
|
||||
fixed: 'right',
|
||||
className: 'nowrap',
|
||||
buttons: []
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
export function tabLog() {
|
||||
export function tabSettings() {
|
||||
return {
|
||||
visibleOn: '${role === "ADMINISTRATOR"}',
|
||||
title: '系统日志',
|
||||
icon: 'fa fa-file',
|
||||
title: '系统管理',
|
||||
icon: 'fa fa-gear',
|
||||
body: [
|
||||
'hello world'
|
||||
]
|
||||
Reference in New Issue
Block a user