diff --git a/gringotts-frontend/components/constants.js b/gringotts-frontend/components/constants.js index 0b49e51..16876dc 100644 --- a/gringotts-frontend/components/constants.js +++ b/gringotts-frontend/components/constants.js @@ -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'), } } diff --git a/gringotts-frontend/components/resource/dialog-resource.js b/gringotts-frontend/components/resource/dialog-resource.js index 020ae55..fee2f01 100644 --- a/gringotts-frontend/components/resource/dialog-resource.js +++ b/gringotts-frontend/components/resource/dialog-resource.js @@ -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, + } + }, + } + } } \ No newline at end of file diff --git a/gringotts-frontend/pages/index/main.js b/gringotts-frontend/pages/index/main.js index e26057b..3a27415 100644 --- a/gringotts-frontend/pages/index/main.js +++ b/gringotts-frontend/pages/index/main.js @@ -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(), ] }, } diff --git a/gringotts-frontend/pages/index/tab-data.js b/gringotts-frontend/pages/index/tab-data.js index fc2c3a3..fb465ea 100644 --- a/gringotts-frontend/pages/index/tab-data.js +++ b/gringotts-frontend/pages/index/tab-data.js @@ -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: [] + }, ] } ] diff --git a/gringotts-frontend/pages/index/tab-log.js b/gringotts-frontend/pages/index/tab-settings.js similarity index 57% rename from gringotts-frontend/pages/index/tab-log.js rename to gringotts-frontend/pages/index/tab-settings.js index 81b24b6..fa1d1f3 100644 --- a/gringotts-frontend/pages/index/tab-log.js +++ b/gringotts-frontend/pages/index/tab-settings.js @@ -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' ]