@bos-alpha/data
Version:
数据管理
400 lines (399 loc) • 24.4 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 };
}
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Form, Input, Select, Button, List, message } from 'antd';
import styled from '@emotion/styled';
import { useEffect, useRef, useState } from 'react';
import { uuid, Icon, prefixCls, Modal } from '@bos-alpha/common';
import * as api from '@bos-alpha/common/lib/services';
import store from '../../store';
import { ModalTitle, FormBox, FooterButtons, exitConfirm } from '../import-steps';
import { JoinsList } from './joins-list';
var Item = Form.Item;
/**
* 导入任务临时数据源（数据视图）
*/
export var StepFour = function () {
// 左侧视图列表
var _a = useState([]), viewList = _a[0], setViewList = _a[1];
var viewListRef = useRef([]);
// 当前选中数据源
var _b = useState(''), currentKey = _b[0], setCurrentKey = _b[1];
// 当前任务可用的api数据源列表
var _c = useState([]), apiList = _c[0], setApiList = _c[1];
// 主数据信息
var _d = useState({}), mainInfo = _d[0], setMainInfo = _d[1];
// 主数据源列表暂存
var mainApiList = useRef([]);
// api校验中 有时比较慢
var _e = useState(false), loading = _e[0], setLoading = _e[1];
// 从连接（关联数据） 可多个
var _f = useState([]), joinList = _f[0], setJoinList = _f[1];
var form = Form.useForm()[0];
var _g = store(), taskId = _g.taskId, preStep = _g.preStep, nextStep = _g.nextStep, setVisible = _g.setVisible;
useEffect(function () {
// 获取可用api
getApiList();
}, []); // eslint-disable-line
// ref同步
useEffect(function () {
viewListRef.current = viewList;
}, [viewList]); // eslint-disable-line
// 获取可用的api
var getApiList = function () { return __awaiter(void 0, void 0, void 0, function () {
var res, taskApiList, taskViewList;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, api.getDataImportDatasets({
params: {
taskId: taskId
}
})];
case 1:
res = _a.sent();
taskApiList = res
.filter(function (item) { return item.type === 'API'; })
.map(function (item) { return (__assign(__assign({}, item), { value: item.id, label: item.name })); });
taskViewList = res
.filter(function (item) { return item.type === 'VIEW'; })
.map(function (item) { return (__assign(__assign({}, item), { uid: item.id })); });
setApiList(taskApiList);
mainApiList.current = taskApiList;
if (taskViewList.length > 0) {
setViewList(taskViewList);
parseJson2Form(taskViewList[0]);
}
else {
addNewView(true);
}
return [2 /*return*/];
}
});
}); };
// 创建新视图
var addNewView = function (isInit) {
var uid = uuid();
var newList = __spreadArray(__spreadArray([], (isInit ? [] : viewListRef.current), true), [
{
name: '临时数据源名称',
uid: uid,
joins: []
}
], false);
setViewList(newList);
setCurrentKey(uid);
parseJson2Form({
uid: uid,
main: '',
name: ''
});
setJoinList([
{
uid: uuid(),
type: 'left join'
}
]);
setMainInfo({});
};
// 接口视图数据转为form数据
var parseJson2Form = function (params) {
console.log('parse', params);
setCurrentKey(params.uid);
form.setFieldsValue({
name: params.name,
main: params.main
});
setMainInfo(mainApiList.current.find(function (item) { return item.id === params.main; }));
setJoinList(params.joins || []);
};
// 左侧切换临时数据源
var onViewSwitch = function (item) { return __awaiter(void 0, void 0, void 0, function () {
var curView;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
curView = viewList.find(function (item) { return item.uid === currentKey; });
if (!(curView && !curView.id)) return [3 /*break*/, 2];
return [4 /*yield*/, onSave('save')];
case 1:
_a.sent();
_a.label = 2;
case 2:
parseJson2Form(item);
return [2 /*return*/];
}
});
}); };
// 右侧切换主数据源 需清除连接查询
var onMainApiChange = function (_, option) {
setMainInfo(option || {});
setViewList(viewList.map(function (item) {
if (item.uid === currentKey) {
item.joins = [];
}
return item;
}));
setJoinList([
{
uid: uuid(),
type: 'left join'
}
]);
};
// 视图名称编辑
var onNameInput = function (e) {
setViewList(viewList.map(function (item) {
if (item.uid === currentKey) {
item.name = e.target.value || '临时数据源名称';
}
return item;
}));
};
var onExit = function (type) {
exitConfirm(__assign(__assign({}, (type === 'preStep'
? {
title: '返回上一步',
content: '未保存的配置将会丢失，确定返回上一步？'
}
: {})), { onOk: function () {
if (type === 'preStep') {
preStep();
}
else {
setVisible(false);
}
} }));
};
// 移除临时数据源
var onRemove = function (item) {
if (viewList.length <= 1)
return message.warning('必须保留一项');
Modal.confirm({
title: '删除数据源',
content: "\u5C06\u8981\u5220\u9664\u6570\u636E\u6E90\u201C".concat(item.name, "\u201D\uFF0C\u662F\u5426\u786E\u5B9A\uFF1F"),
centered: true,
onOk: function () { return __awaiter(void 0, void 0, void 0, function () {
var newList;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!item.id) return [3 /*break*/, 2];
return [4 /*yield*/, api.deleteEntity('importViews', item.id, {
params: {
delRelation: true
}
})];
case 1:
_a.sent();
_a.label = 2;
case 2:
newList = viewList.filter(function (el) { return el.uid !== item.uid; });
setViewList(newList);
// 删除即当前选中
if (item.uid === currentKey) {
parseJson2Form(newList[0]);
}
return [2 /*return*/, Promise.resolve()];
}
});
}); }
});
};
// 校验并新增/编辑一条api数据源
var saveApiViews = function (curApiViewId, item) {
return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
var checkRes, err_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
// 校验临时数据源
if (loading)
return [2 /*return*/];
setLoading(true);
return [4 /*yield*/, api.postDataImportViewTest({
data: __assign(__assign({}, item), (curApiViewId
? {
id: curApiViewId
}
: {})),
params: {
taskId: taskId,
save: true
}
})];
case 1:
checkRes = _a.sent();
setLoading(false);
console.log('checkRes: ', checkRes);
if ((!checkRes.data && checkRes.message) || !checkRes.fields) {
Modal.error({
title: '连接查询配置错误，请检查后重试',
content: checkRes.message
});
return [2 /*return*/];
}
resolve(curApiViewId || checkRes.id);
return [3 /*break*/, 3];
case 2:
err_1 = _a.sent();
setLoading(false);
reject(err_1);
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); });
};
// save.仅保存
// add.创建新行 须保存
// next.保存并下一步
var onSave = function (type) {
return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
var vals, joins, itemConfig_1, curViewId, importViewsId_1, newList, err_2;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 3, , 4]);
return [4 /*yield*/, form.validateFields()];
case 1:
vals = _a.sent();
joins = joinList
.map(function (item) {
if (item.conditions) {
var availableConds = item.conditions.filter(function (item) { return item.field && item.joinField; });
return __assign(__assign({}, item), (availableConds.length > 0
? {
conditions: availableConds
}
: {
conditions: undefined
}));
}
return item;
})
.filter(function (item) { return !!item.conditions; });
// 有配置连接条件的连接查询
if (joins.length === 0) {
reject();
return [2 /*return*/, message.error('请配置连接条件')];
}
itemConfig_1 = {
name: vals.name,
main: vals.main,
joins: joins
};
curViewId = viewList.find(function (item) { return item.uid === currentKey; }).id ||
'';
return [4 /*yield*/, saveApiViews(curViewId, itemConfig_1)];
case 2:
importViewsId_1 = _a.sent();
newList = viewList.map(function (item) {
if (item.uid === currentKey) {
// 保存视图id 每一个视图配置
return __assign(__assign(__assign({}, item), { id: importViewsId_1 }), itemConfig_1);
}
return item;
});
viewListRef.current = newList;
setViewList(newList);
if (type === 'add') {
// 注意setViewList异步更新问题
addNewView();
}
else if (type === 'next') {
nextStep();
}
if (type === 'save')
message.success('保存成功');
resolve();
return [3 /*break*/, 4];
case 3:
err_2 = _a.sent();
console.log(4, err_2);
if (err_2 && err_2.errorFields) {
message.error('信息输入不完整！');
}
reject();
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
}); });
};
return (_jsxs("div", { children: [_jsx(ModalTitle, __assign({ current: 3, onClose: function () { return onExit('close'); } }, { children: "\u521B\u5EFA\u4E34\u65F6\u6570\u636E\u6E90\uFF08\u6570\u636E\u89C6\u56FE\uFF09" }), void 0), _jsxs(Container, { children: [_jsx("div", __assign({ className: "page-left" }, { children: _jsx(FormBox, __assign({ offset: "false" }, { children: _jsxs(List, __assign({ header: "\u4E34\u65F6\u6570\u636E\u6E90\uFF08\u6570\u636E\u89C6\u56FE\uFF09" }, { children: [viewList.map(function (item, index) { return (_jsxs(List.Item, __assign({ className: "list-item ".concat(item.uid === currentKey ? 'active' : '') }, { children: [_jsx("div", __assign({ className: "view-name ellipsis", onClick: function () { return onViewSwitch(item); } }, { children: item.name }), void 0), _jsx(Icon, { className: "icon", type: "iconicon_subtracting", onClick: function () { return onRemove(item); } }, void 0)] }), item.uid)); }), _jsxs("div", __assign({ className: "add-btn", onClick: function () { return onSave('add'); } }, { children: [_jsx(Icon, { className: "icon", type: "iconicon_addto" }, void 0), _jsx("span", { children: "\u6DFB\u52A0\u65B0\u4E34\u65F6\u6570\u636E\u6E90" }, void 0)] }), void 0)] }), void 0) }), void 0) }), void 0), _jsx("div", __assign({ className: "page-right" }, { children: _jsx(FormBox, { children: _jsxs(Form, __assign({ form: form, labelCol: { span: 5 }, wrapperCol: { span: 19 }, labelAlign: "left" }, { children: [_jsx("div", __assign({ className: "title" }, { children: "\u57FA\u672C\u4FE1\u606F" }), void 0), _jsx(Item, __assign({ name: "name", label: "\u6570\u636E\u6E90\u540D\u79F0", required: true, rules: [
{
validator: function (rule, val) {
if (!val || val.trim() === '') {
return Promise.reject('请输入临时数据源名称');
}
return Promise.resolve();
}
}
] }, { children: _jsx(Input, { placeholder: "\u8BF7\u8F93\u5165\u4E34\u65F6\u6570\u636E\u540D\u79F0", onInput: onNameInput, maxLength: 50 }, void 0) }), void 0), _jsx(Item, __assign({ name: "main", label: "\u4E3B\u6570\u636E\u6E90", rules: [
{
required: true,
message: '请选择主数据源'
}
] }, { children: _jsx(Select, { allowClear: true, options: apiList, placeholder: "\u8BF7\u9009\u62E9\u4E3B\u6570\u636E\u6E90", onChange: onMainApiChange }, void 0) }), void 0), _jsx("div", __assign({ className: "title" }, { children: "\u8FDE\u63A5\u67E5\u8BE2" }), void 0), _jsx(JoinsList, { joinList: joinList, apiList: apiList, mainInfo: mainInfo, onCheckForm: function () { return form.validateFields(); }, setJoinList: setJoinList }, void 0)] }), void 0) }, void 0) }), void 0), _jsxs(FooterButtons, { children: [_jsx(Button, __assign({ type: "default", className: "pre-step", shape: "round", onClick: function () { return onExit('preStep'); } }, { children: "\u4E0A\u4E00\u6B65" }), void 0), _jsx(Button, __assign({ type: "primary", shape: "round", ghost: true, loading: loading, onClick: function () { return onSave('save'); } }, { children: "\u4FDD\u5B58" }), void 0), _jsx(Button, __assign({ type: "primary", shape: "round", loading: loading, onClick: function () { return onSave('next'); } }, { children: "\u4FDD\u5B58\u5E76\u4E0B\u4E00\u6B65" }), void 0), _jsx(Button, __assign({ type: "primary", shape: "round", ghost: true, loading: loading, onClick: function () { return nextStep(); } }, { children: "\u8DF3\u8FC7" }), void 0)] }, void 0)] }, void 0)] }, void 0));
};
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n border: 1px solid #dfdfdf;\n & > .page-left {\n width: 240px;\n .", "-list-split .", "-list-header {\n font-size: 14px;\n font-weight: 500;\n padding: 10px 16px;\n }\n .list-item {\n padding: 9px 16px;\n &.active {\n background: rgba(40, 120, 255, 0.1);\n }\n .view-name {\n cursor: pointer;\n }\n .ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n .icon {\n color: #ff0000;\n font-size: 16px;\n cursor: pointer;\n }\n }\n .add-btn {\n padding: 9px 16px;\n color: #2878ff;\n cursor: pointer;\n & > .icon {\n margin-right: 4px;\n }\n }\n }\n & > .page-right {\n flex: 1;\n padding-left: 20px;\n overflow: hidden;\n border-left: 1px solid #dedede;\n .title {\n font-size: 14px;\n font-weight: 500;\n padding: 10px 0;\n }\n .from-add-btn {\n padding: 0 0 20px;\n & > .", "-btn {\n width: 76px;\n border-color: #2878ff;\n color: #2878ff;\n border-radius: 4px;\n font-size: 12px;\n height: 28px;\n }\n }\n }\n"], ["\n display: flex;\n border: 1px solid #dfdfdf;\n & > .page-left {\n width: 240px;\n .", "-list-split .", "-list-header {\n font-size: 14px;\n font-weight: 500;\n padding: 10px 16px;\n }\n .list-item {\n padding: 9px 16px;\n &.active {\n background: rgba(40, 120, 255, 0.1);\n }\n .view-name {\n cursor: pointer;\n }\n .ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n .icon {\n color: #ff0000;\n font-size: 16px;\n cursor: pointer;\n }\n }\n .add-btn {\n padding: 9px 16px;\n color: #2878ff;\n cursor: pointer;\n & > .icon {\n margin-right: 4px;\n }\n }\n }\n & > .page-right {\n flex: 1;\n padding-left: 20px;\n overflow: hidden;\n border-left: 1px solid #dedede;\n .title {\n font-size: 14px;\n font-weight: 500;\n padding: 10px 0;\n }\n .from-add-btn {\n padding: 0 0 20px;\n & > .", "-btn {\n width: 76px;\n border-color: #2878ff;\n color: #2878ff;\n border-radius: 4px;\n font-size: 12px;\n height: 28px;\n }\n }\n }\n"])), prefixCls, prefixCls, prefixCls);
var templateObject_1;