lanyuanxiaoyao/gringotts
1
0
Fork 0
Code Activity

feat(frontend): 增加数据资源查看界面

Browse Source
This commit is contained in:
兰缘小妖
2024-11-21 19:18:04 +08:00
parent c51228bf42
commit aeb89e2367
5 changed files with 360 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
gringotts-frontend/components/constants.js
View File

@@ -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 { return {
useChunk: true,
accept: accept, accept: accept,
maxSize: maxSize, maxSize: maxSize,
autoUpload: false, autoUpload: false,
startChunkApi: apiPost('${base}/upload/start'),
chunkApi: apiPost('${base}/upload/slice'),
finishChunkApi: apiPost('${base}/upload/finish'),
} }
} }

149
gringotts-frontend/components/resource/dialog-resource.js
View File

@@ -1,32 +1,21 @@
import './dialog-resource.css' import './dialog-resource.css'
import {apiPost, horizontalFormOptions, inputFileFormItemCommonOptions} from "../constants.js"; import {
apiGet,
apiPost,
horizontalFormOptions,
inputFileFormItemCommonOptions,
size1GB,
size500MB
} from "../constants.js";
const clearable = { const clearable = {
clearable: true, clearable: true,
clearValueOnEmpty: true, clearValueOnEmpty: true,
} }
export function resourceAddDialog() { function detailForm() {
return { return {
actionType: 'dialog',
dialog: {
title: '新增数据资源',
// size: 'lg',
actions: [
{
type: 'reset',
label: '重置',
},
{
type: 'submit',
label: '确定',
level: 'primary',
}
],
body: {
debug: true,
type: 'form', type: 'form',
api: apiPost('${base}/data_resource/create'),
...horizontalFormOptions(), ...horizontalFormOptions(),
horizontal: { horizontal: {
left: 2, left: 2,
@@ -60,15 +49,15 @@ export function resourceAddDialog() {
selectFirst: true, selectFirst: true,
required: true, required: true,
options: [ options: [
{label: 'API', value: 'api'}, {label: 'API', value: 'API'},
{label: '文件', value: 'file'}, {label: '文件', value: 'FILE'},
{label: '数据库', value: 'database'}, {label: '数据库', value: 'DATABASE'},
{label: 'HDFS', value: 'hdfs'}, {label: 'HDFS', value: 'HDFS'},
{label: 'FTP', value: 'ftp'}, {label: 'FTP', value: 'FTP'},
] ]
}, },
{ {
visibleOn: "${resourceType === 'api'}", visibleOn: "${resourceType === 'API'}",
type: 'fieldSet', type: 'fieldSet',
body: [ body: [
{ {
@@ -93,19 +82,26 @@ export function resourceAddDialog() {
] ]
}, },
{ {
visibleOn: "${resourceType === 'file'}", visibleOn: "${resourceType === 'FILE'}",
type: 'fieldSet', type: 'fieldSet',
body: [ body: [
{ {
visibleOn: "${static}",
type: 'input-text',
label: '文件名称',
name: 'fileId',
},
{
visibleOn: "${!static}",
type: 'input-file', type: 'input-file',
name: 'filePath', name: 'fileId',
description: '只适合小于2M的资源文件使用，大文件请使用其他资源类型', description: '只适合小于1GB的资源文件使用，大文件请使用其他资源类型',
...inputFileFormItemCommonOptions('.zip', 2097152), ...inputFileFormItemCommonOptions('.zip', size1GB),
}, },
] ]
}, },
{ {
visibleOn: "${resourceType === 'database'}", visibleOn: "${resourceType === 'DATABASE'}",
type: 'fieldSet', type: 'fieldSet',
body: [ body: [
{ {
@@ -141,25 +137,39 @@ export function resourceAddDialog() {
] ]
}, },
{ {
visibleOn: "${resourceType === 'hdfs'}", visibleOn: "${resourceType === 'HDFS'}",
type: 'fieldSet', type: 'fieldSet',
body: [ body: [
{ {
type: 'input-file', visibleOn: "${static}",
description: 'core-site.xml', type: 'input-text',
name: 'coreSiteFile', label: '文件名称',
...inputFileFormItemCommonOptions('.xml', 1048576), name: 'coreSiteFileId',
}, },
{ {
visibleOn: "${!static}",
type: 'input-file', type: 'input-file',
description: 'hdfs-site.xml', label: 'core-site.xml',
name: 'hdfsSiteFile', name: 'coreSiteFileId',
...inputFileFormItemCommonOptions('.xml', 1048576), ...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'}", visibleOn: "${resourceType === 'FTP'}",
type: 'fieldSet', type: 'fieldSet',
body: [ body: [
{ {
@@ -223,6 +233,7 @@ export function resourceAddDialog() {
type: 'json-schema-editor', type: 'json-schema-editor',
name: 'jsonSchema', name: 'jsonSchema',
label: 'JSON格式', label: 'JSON格式',
description: '（使用JSON Schema格式）',
required: true, required: true,
enableAdvancedSetting: true, enableAdvancedSetting: true,
mini: true, mini: true,
@@ -232,7 +243,7 @@ export function resourceAddDialog() {
type: 'json-schema-editor', type: 'json-schema-editor',
name: 'jsonLineSchema', name: 'jsonLineSchema',
label: 'JSON格式', label: 'JSON格式',
description: 'JSON Line类型请定义单行JSON数据格式', description: 'JSON Line类型请定义单行JSON数据格式（使用JSON Schema格式）',
required: true, required: true,
enableAdvancedSetting: true, enableAdvancedSetting: true,
mini: true, mini: true,
@@ -242,7 +253,7 @@ export function resourceAddDialog() {
type: 'json-schema-editor', type: 'json-schema-editor',
name: 'csvSchema', name: 'csvSchema',
label: 'CSV格式', label: 'CSV格式',
description: '请定义单行数据中各个字段的格式', description: '请定义单行数据中各个字段的格式（使用JSON Schema格式）',
required: true, required: true,
enableAdvancedSetting: true, enableAdvancedSetting: true,
mini: true, mini: true,
@@ -253,16 +264,66 @@ export function resourceAddDialog() {
] ]
}, },
{ {
visibleOn: "${static}",
type: 'input-text',
label: '资源示例',
name: 'exampleFileId',
},
{
visibleOn: "${!static}",
type: 'input-file', type: 'input-file',
label: '资源示例', label: '资源示例',
description: '可以上传用于作为格式示范的样例数据', description: '可以上传用于作为格式示范的样例数据',
name: 'example', name: 'exampleFileId',
...inputFileFormItemCommonOptions(), ...inputFileFormItemCommonOptions(undefined, size500MB),
}, },
] ]
} }
] ]
} }
}
export function resourceAddDialog() {
return {
actionType: 'dialog',
dialog: {
title: '新增数据资源',
size: 'md',
actions: [
{
type: 'reset',
label: '重置',
},
{
type: 'submit',
label: '确定',
level: 'primary',
}
],
body: {
...detailForm(),
debug: true,
api: apiPost('${base}/data_resource/create'),
}
}
}
}
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,
}
},
} }
} }
} }

5
gringotts-frontend/pages/index/main.js
View File

@@ -1,10 +1,9 @@
import {apiGet, useAmis} from '../../components/constants.js' import {apiGet, useAmis} from '../../components/constants.js'
import {userChangePasswordDialog} from "../../components/user/dialog-user-change-password.js"; import {userChangePasswordDialog} from "../../components/user/dialog-user-change-password.js";
import {tabUser} from "./tab-user.js"; import {tabUser} from "./tab-user.js";
import {tabOverview} from "./tab-overview.js";
import {tabMarket} from "./tab-market.js"; import {tabMarket} from "./tab-market.js";
import {tabData} from "./tab-data.js"; import {tabData} from "./tab-data.js";
import {tabLog} from "./tab-log.js"; import {tabSettings} from "./tab-settings.js";
useAmis(information => { useAmis(information => {
return { return {
@@ -61,7 +60,7 @@ useAmis(information => {
// tabOverview(), // tabOverview(),
tabMarket(), tabMarket(),
tabUser(), tabUser(),
tabLog(), tabSettings(),
] ]
}, },
} }

55
gringotts-frontend/pages/index/tab-data.js
View File

@@ -1,30 +1,57 @@
import {resourceAddDialog} from "../../components/resource/dialog-resource.js"; import {resourceAddDialog, resourceDetailDialog} from "../../components/resource/dialog-resource.js";
import {apiPost, inputFileFormItemCommonOptions} from "../../components/constants.js"; import {apiPost, copyField, crudCommonOptions} from "../../components/constants.js";
export function tabData() { export function tabData() {
return { return {
title: '数据资源', title: '数据资源',
icon: 'fa fa-database', icon: 'fa fa-database',
body: [ body: [
{
type: 'crud',
api: {
...apiPost('${base}/data_resource/list')
},
...crudCommonOptions(),
headerToolbar: [
'reload',
{ {
type: 'action', type: 'action',
label: '', label: '新增数据资源',
icon: 'fa fa-plus', icon: 'fa fa-plus',
...resourceAddDialog() ...resourceAddDialog()
}, },
],
columns: [
{ {
type: 'form', label: '名称',
body: [ name: 'name',
width: 200,
...copyField(
'name',
'查看详情',
undefined,
resourceDetailDialog(),
)
},
{ {
type: 'input-file', label: '描述',
name: 'file', name: 'description',
label: '测试文件上传', },
...inputFileFormItemCommonOptions(undefined, 1073741824), {
useChunk: true, label: '创建时间',
startChunkApi: apiPost('${base}/upload/start'), width: 150,
chunkApi: apiPost('${base}/upload/slice'), align: 'center',
finishChunkApi: apiPost('${base}/upload/finish') type: 'tpl',
} tpl: "${IF(createdTime, DATETOSTR(createdTime), '-')}"
},
{
label: '操作',
width: 200,
type: 'operation',
fixed: 'right',
className: 'nowrap',
buttons: []
},
] ]
} }
] ]

6
gringotts-frontend/pages/index/tab-log.js → gringotts-frontend/pages/index/tab-settings.js
View File

@@ -1,8 +1,8 @@
export function tabLog() { export function tabSettings() {
return { return {
visibleOn: '${role === "ADMINISTRATOR"}', visibleOn: '${role === "ADMINISTRATOR"}',
title: '系统日志', title: '系统管理',
icon: 'fa fa-file', icon: 'fa fa-gear',
body: [ body: [
'hello world' 'hello world'
] ]