@bos-model-alpha/data
Version:
数据管理
325 lines (324 loc) • 22.8 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Modal, Form, Select, Input, Button, Upload, Checkbox, Divider, message, Progress } from 'antd';
import styled from '@emotion/styled';
import cookies from 'react-cookies';
import { Icon } from '@bos-alpha/common/lib/components';
import * as services from '@bos-alpha/common/lib/services';
import { downFile, setItem, getItem } from '@bos-alpha/common/lib/utils';
import { prefixCls } from '@bos-alpha/common';
import importIcon from '../img-base64/database-import';
// 支持的数据库类型
var databaseTypes = [
{
label: 'MySQL（TCP/IP）',
value: 'MySQL'
},
{
label: 'Oracle',
value: 'Oracle'
},
{
label: 'MongoDB',
value: 'MongoDB'
},
{
label: 'PgSQL',
value: 'PgSQL'
},
{
label: 'Microsoft SQL Server(TPC/IP)',
value: 'SQLServer'
}
];
// 数据库默认端口
var portMap = {
MySQL: '3306',
Oracle: '1521',
MongoDB: '27017',
PgSQL: '5432',
SQLServer: '1433'
};
var progressStatus = {
'0': 'active',
'1': 'active',
'2': 'success',
'-1': 'exception'
};
var timer = null;
export var DatabaseImport = function () {
var _a = useState(false), visible = _a[0], setVisible = _a[1];
var _b = useState(), file = _b[0], setFile = _b[1];
var _c = useState(1), step = _c[0], setStep = _c[1];
var form = Form.useForm()[0];
var _d = useState(false), testOk = _d[0], setTestOk = _d[1];
var _e = useState(), connect = _e[0], setConnect = _e[1];
// 导入选项
var _f = useState(true), addChecked = _f[0], setAddChecked = _f[1];
var _g = useState(true), updateChecked = _g[0], setUpdateChecked = _g[1];
// 导入任务id
var _h = useState(''), taskId = _h[0], setTaskId = _h[1];
// 任务进度
var _j = useState({
progress: 0,
remark: '',
status: '0',
statusText: '',
taskId: ''
}), progressInfo = _j[0], setProgressInfo = _j[1];
useEffect(function () {
if (!visible)
return;
var databaseLocalKey = getItem('database_local_key');
if (databaseLocalKey) {
form.setFieldsValue(__assign({}, databaseLocalKey));
}
else {
form.setFieldsValue({
type: databaseTypes[0].value
});
}
}, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(function () {
if (taskId === '') {
if (timer)
window.clearInterval(timer);
return;
}
timer = window.setInterval(function () {
loopQueryProgress();
}, 1000);
}, [taskId]); // eslint-disable-line react-hooks/exhaustive-deps
var loopQueryProgress = function () {
services
.getImportTaskStatus(taskId, {
params: {
t: new Date().getTime()
}
})
.then(function (res) {
setProgressInfo(__assign(__assign({}, res), { statusText: progressStatus[res.status], progress: parseInt(res.progress) }));
if (res.status === '-1') {
Modal.error({
title: '从第三方数据库导入数据失败',
okText: '确定',
cancelText: '取消',
content: (_jsxs("div", { children: [_jsx("p", { children: "\u4ECE\u7B2C\u4E09\u65B9\u6570\u636E\u5E93\u5BFC\u5165\u6570\u636E\u5931\u8D25, \u8BF7\u68C0\u67E5\u6570\u636E\u5E93\u8FDE\u63A5\u548C\u5BFC\u5165\u914D\u7F6E\u3002\u9519\u8BEF\u4FE1\u606F\u5982\u4E0B" }), (res.errorMsg || []).map(function (item, index) { return (_jsxs("p", { children: [index, ": ", item] })); })] })),
onOk: function () {
setStep(1);
setVisible(false);
},
onCancel: function () {
setStep(1);
setVisible(false);
}
});
setTaskId('');
}
// 已完成
else if (res.status === '2') {
setTaskId('');
setStep(1);
setVisible(false);
message.success('导入完成！');
}
})
.catch(function (err) {
setTaskId('');
setStep(1);
setVisible(false);
});
};
var getTemp = function () { return __awaiter(void 0, void 0, void 0, function () {
var res;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, services.getTemplate({
params: {
name: '第三方数据库数据导入配置文件.xlsx',
access_token: cookies.load('access_token')
}
})];
case 1:
res = _a.sent();
downFile(res.data, '第三方数据库数据导入配置文件.xlsx');
return [2 /*return*/];
}
});
}); };
var onImportChange = function (file) {
setFile(file);
return false;
};
// 测试连接
var onTestConfirm = function () { return __awaiter(void 0, void 0, void 0, function () {
var vals;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, form.validateFields()];
case 1:
vals = _a.sent();
return [4 /*yield*/, services.connectDatabase({
data: vals
})];
case 2:
_a.sent();
message.success('测试连接成功，点击“下一步”按钮导入第三方数据库数据');
setConnect(vals);
setItem('database_local_key', __assign(__assign({}, vals), { password: undefined }));
setTestOk(true);
return [2 /*return*/];
}
});
}); };
// 确定
var onConfirm = function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
if (!file || (file && !file.name))
return [2 /*return*/, message.error('请选择导入文件')];
if (file.name.indexOf('xls') === -1)
return [2 /*return*/, message.error('选择文件格式不正确')];
Modal.confirm({
title: '导入第三方数据库',
content: "\u672C\u64CD\u4F5C\u5C06\u4F1A\u66F4\u6539\u73B0\u6709BOS\u5BF9\u8C61\u548C\u5173\u7CFB\u6570\u636E\uFF0C\u786E\u5B9A\u8981\u6267\u884C\u6B64\u64CD\u4F5C\u5417\uFF1F",
okText: '确定',
cancelText: '取消',
okButtonProps: {
shape: 'round',
style: {
width: '106px'
}
},
cancelButtonProps: {
shape: 'round',
style: {
width: '106px'
}
},
onOk: function () {
return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
services
.importDatabaseFile({
data: {
file: file,
connect: JSON.stringify(connect),
insert: addChecked,
update: updateChecked
}
})
.then(function (res) {
message.success(res.remark);
setProgressInfo(__assign(__assign({}, res), { statusText: progressStatus[res.status], progress: parseInt(res.progress) }));
setTaskId(res.taskId);
resolve(res);
})
.catch(function (err) {
resolve(err);
});
return [2 /*return*/];
});
}); });
}
});
return [2 /*return*/];
});
}); };
return (_jsxs(_Fragment, { children: [_jsxs(Btn, __assign({ onClick: function () { return setVisible(true); } }, { children: [_jsx("img", { className: "icon", src: importIcon, alt: "" }), "\u4ECE\u7B2C\u4E09\u65B9\u6570\u636E\u5E93\u5BFC\u5165"] })), _jsx(Modal, __assign({ visible: visible, width: 814, bodyStyle: {
height: 503,
position: 'relative'
}, title: "\u4ECE\u7B2C\u4E09\u65B9\u6570\u636E\u5E93\u5BFC\u5165\u6570\u636E", onCancel: function () {
setStep(1);
setVisible(false);
}, maskClosable: false, forceRender: true, footer: null }, { children: step === 1 ? (_jsxs(ImportModal, { children: [_jsxs(StepBar, { children: [_jsx("span", { className: "left-border" }), _jsx("span", { children: "\u7B2C 1 \u6B65\uFF1A\u8FDE\u63A5\u7B2C\u4E09\u65B9\u6570\u636E\u5E93" })] }), _jsxs(Form, __assign({ form: form, className: "config-form", labelCol: { span: 6 }, wrapperCol: { span: 16 }, labelAlign: "left" }, { children: [_jsx(Form.Item, __assign({ label: "\u6570\u636E\u8FDE\u63A5\u7C7B\u578B", name: "type" }, { children: _jsx(Select, { className: "form-ipt", options: databaseTypes, placeholder: "\u8BF7\u9009\u62E9\u6570\u636E\u8FDE\u63A5\u7C7B\u578B", onChange: function (val) {
form.setFieldsValue({
port: portMap[val]
});
} }) })), _jsx(Form.Item, __assign({ label: "\u4E3B\u673A\u540D/IP", name: "ip", rules: [
{
required: true,
message: '请输入主机名/IP'
}
] }, { children: _jsx(Input, { className: "form-ipt", placeholder: "\u8BF7\u8F93\u5165\u4E3B\u673A\u540D/IP" }) })), _jsx(Form.Item, __assign({ label: "\u7AEF\u53E3", name: "port", rules: [
{
required: true,
message: '请输入端口'
}
] }, { children: _jsx(Input, { className: "form-ipt", placeholder: "\u8BF7\u8F93\u5165\u7AEF\u53E3" }) })), _jsx(Form.Item, __assign({ label: "\u7528\u6237\u540D", name: "username", rules: [
{
required: true,
message: '请输入用户名'
}
] }, { children: _jsx(Input, { className: "form-ipt", placeholder: "\u8BF7\u8F93\u5165\u7528\u6237\u540D" }) })), _jsx(Form.Item, __assign({ label: "\u5BC6\u7801", name: "password", rules: [
{
required: true,
message: '请输入密码'
}
] }, { children: _jsx(Input.Password, { className: "form-ipt", placeholder: "\u8BF7\u8F93\u5165\u5BC6\u7801" }) })), _jsx(Form.Item, __assign({ label: "\u6570\u636E\u5E93", name: "database", rules: [
{
required: true,
message: '请输入数据库'
}
] }, { children: _jsx(Input, { className: "form-ipt", placeholder: "\u8BF7\u8F93\u5165\u6570\u636E\u5E93" }) }))] })), _jsxs(FooterBtns, { children: [_jsx(Button, __assign({ type: "default", shape: "round", className: "btn", onClick: function () { return setVisible(false); } }, { children: "\u53D6\u6D88" })), _jsx(Button, __assign({ type: "primary", shape: "round", className: "btn", onClick: onTestConfirm }, { children: "\u6D4B\u8BD5\u8FDE\u63A5" })), _jsx(Button, __assign({ type: "default", shape: "round", disabled: !testOk, className: "btn", onClick: function () { return setStep(2); } }, { children: "\u4E0B\u4E00\u6B65" }))] })] })) : step === 2 ? (_jsxs(ImportModal, { children: [_jsxs(StepBar, { children: [_jsx("span", { className: "left-border" }), _jsx("span", { children: "\u7B2C 2 \u6B65\uFF1A\u5BFC\u5165\u7B2C\u4E09\u65B9\u6570\u636E\u5E93\u6570\u636E" })] }), _jsxs(TempSelect, { children: [_jsx("div", { children: "\u9009\u62E9\u6570\u636E\u5BFC\u5165\u914D\u7F6E\u6587\u4EF6\uFF1A" }), _jsx(Input, { className: "file-ipt", type: "text", disabled: true, value: file === null || file === void 0 ? void 0 : file.name, placeholder: "\u8BF7\u9009\u62E9\u6570\u636E\u5BFC\u5165\u914D\u7F6E\u6587\u4EF6" }), _jsx(Upload, __assign({ accept: ".xls,.xlsx", showUploadList: false, beforeUpload: onImportChange }, { children: _jsx(Button, __assign({ type: "primary", shape: "round" }, { children: "\u9009\u62E9" })) })), _jsx(Button, __assign({ className: "download-btn", type: "link", onClick: getTemp }, { children: "\u4E0B\u8F7D\u6A21\u677F" }))] }), _jsx(Divider, __assign({ orientation: "left" }, { children: "\u5BFC\u5165\u9009\u9879" })), _jsx("div", __assign({ className: "import-check" }, { children: _jsx(Checkbox, __assign({ checked: addChecked, onChange: function (e) {
return setAddChecked(e.target.checked);
} }, { children: "\u65B0\u589EBOS\u5B9E\u4F8B\u6570\u636E\uFF08\u53C2\u8003\u6765\u6E90\u6570\u636E\uFF0C\u65B0\u589EBOS\u5BF9\u8C61\u548C\u5173\u7CFB\u5B9E\u4F8B\u6570\u636E\uFF09" })) })), _jsx("div", __assign({ className: "import-check" }, { children: _jsx(Checkbox, __assign({ checked: updateChecked, onChange: function (e) {
return setUpdateChecked(e.target.checked);
} }, { children: "\u66F4\u65B0BOS\u5B9E\u4F8B\u6570\u636E\uFF08\u53C2\u8003\u6765\u6E90\u6570\u636E\uFF0C\u66F4\u65B0BOS\u4E2D\u5DF2\u5B58\u5728\u7684\u5BF9\u8C61\u548C\u5173\u7CFB\u5B9E\u4F8B\u6570\u636E\uFF09" })) })), taskId ? (_jsxs("div", __assign({ className: "progress-bar" }, { children: [_jsxs("div", __assign({ className: "progress-tip" }, { children: [progressInfo.status === '1' && (_jsx(Icon, { className: "progress-icon", type: "iconicon_daibanrenwu" })), progressInfo.status === '2' && (_jsx(Icon, { className: "progress-icon", type: "iconicon_success" })), _jsxs("span", { children: [" ", progressInfo.remark] })] })), _jsx(Progress, { status: progressInfo.statusText, percent: progressInfo.progress })] }))) : null, _jsxs(FooterBtns, { children: [_jsx(Button, __assign({ type: "default", shape: "round", className: "btn", onClick: function () { return setStep(1); } }, { children: "\u53D6\u6D88\u5BFC\u5165" })), _jsx(Button, __assign({ type: "primary", shape: "round", className: "btn", disabled: !!taskId, onClick: onConfirm }, { children: "\u5F00\u59CB\u5BFC\u5165" }))] })] })) : null }))] }));
};
var Btn = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0 16px;\n display: flex;\n color: #444;\n cursor: pointer;\n & > .icon {\n width: 20px;\n height: 20px;\n }\n"], ["\n margin: 0 16px;\n display: flex;\n color: #444;\n cursor: pointer;\n & > .icon {\n width: 20px;\n height: 20px;\n }\n"])));
var ImportModal = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: rgba(0, 0, 0, 0.85);\n .import-check {\n margin-bottom: 10px;\n }\n .", "-divider-inner-text {\n padding-left: 0;\n font-weight: 400;\n font-size: 14px;\n }\n .", "-divider-horizontal.", "-divider-with-text-left:before {\n display: none;\n }\n .config-form {\n padding: 0 120px;\n .form-ipt {\n width: 334px;\n }\n }\n .progress-bar {\n padding-top: 30px;\n .progress-icon {\n margin-right: 5px;\n }\n }\n"], ["\n color: rgba(0, 0, 0, 0.85);\n .import-check {\n margin-bottom: 10px;\n }\n .", "-divider-inner-text {\n padding-left: 0;\n font-weight: 400;\n font-size: 14px;\n }\n .", "-divider-horizontal.", "-divider-with-text-left:before {\n display: none;\n }\n .config-form {\n padding: 0 120px;\n .form-ipt {\n width: 334px;\n }\n }\n .progress-bar {\n padding-top: 30px;\n .progress-icon {\n margin-right: 5px;\n }\n }\n"])), prefixCls, prefixCls, prefixCls);
var StepBar = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: #333;\n display: flex;\n height: 32px;\n line-height: 32px;\n margin-bottom: 15px;\n background: linear-gradient(\n 12deg,\n rgba(83, 246, 253, 0.16),\n rgba(0, 112, 255, 0.14)\n );\n & > .left-border {\n margin-right: 8px;\n display: inline-block;\n height: 100%;\n width: 4px;\n background: linear-gradient(\n 230deg,\n rgba(83, 246, 253, 0.4),\n rgba(0, 112, 255, 0.4)\n );\n }\n"], ["\n color: #333;\n display: flex;\n height: 32px;\n line-height: 32px;\n margin-bottom: 15px;\n background: linear-gradient(\n 12deg,\n rgba(83, 246, 253, 0.16),\n rgba(0, 112, 255, 0.14)\n );\n & > .left-border {\n margin-right: 8px;\n display: inline-block;\n height: 100%;\n width: 4px;\n background: linear-gradient(\n 230deg,\n rgba(83, 246, 253, 0.4),\n rgba(0, 112, 255, 0.4)\n );\n }\n"])));
var TempSelect = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n & > .file-ipt {\n width: 400px;\n margin-right: 15px;\n }\n"], ["\n display: flex;\n align-items: center;\n & > .file-ipt {\n width: 400px;\n margin-right: 15px;\n }\n"])));
var FooterBtns = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n bottom: 24px;\n width: 100%;\n display: flex;\n justify-content: center;\n padding-top: 40px;\n & > .btn {\n width: 106px;\n margin: 0 5px;\n }\n"], ["\n position: absolute;\n bottom: 24px;\n width: 100%;\n display: flex;\n justify-content: center;\n padding-top: 40px;\n & > .btn {\n width: 106px;\n margin: 0 5px;\n }\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;