ze-react-component-library
Version:
ZeroETP React Component Library
923 lines (805 loc) • 26.6 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("antd/lib/space/style");
var _space = _interopRequireDefault(require("antd/lib/space"));
require("antd/lib/drawer/style");
var _drawer = _interopRequireDefault(require("antd/lib/drawer"));
require("antd/lib/message/style");
var _message2 = _interopRequireDefault(require("antd/lib/message"));
require("antd/lib/popconfirm/style");
var _popconfirm = _interopRequireDefault(require("antd/lib/popconfirm"));
require("antd/lib/button/style");
var _button = _interopRequireDefault(require("antd/lib/button"));
var _react = _interopRequireWildcard(require("react"));
var _hooks = require("@umijs/hooks");
var _underscore = _interopRequireDefault(require("underscore"));
var _flat = _interopRequireDefault(require("flat"));
var _proProvider = _interopRequireDefault(require("@ant-design/pro-provider"));
var _proTable = require("@ant-design/pro-table");
var _proForm = require("@ant-design/pro-form");
var _zeroetpApiSdk = require("zeroetp-api-sdk");
var _TsEditor = _interopRequireDefault(require("../components/TsEditor"));
var _JsonEditor = _interopRequireDefault(require("./JsonEditor"));
var _util = require("../util");
var _apis = require("./apis");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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 = void 0 && (void 0).__generator || function (thisArg, body) {
var _ = {
label: 0,
sent: function sent() {
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 = void 0 && (void 0).__spreadArray || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
to[j] = from[i];
}
return to;
};
var tsCodeRenderer = {
render: function render(v, props) {
return (props === null || props === void 0 ? void 0 : props.value) ? /*#__PURE__*/_react.default.createElement(_TsEditor.default, __assign({}, props, {
readOnly: true,
height: "100px",
width: "100%"
})) : "-";
},
renderFormItem: function renderFormItem(props) {
return /*#__PURE__*/_react.default.createElement(_TsEditor.default, __assign({}, props === null || props === void 0 ? void 0 : props.fieldProps, {
height: "100px",
width: "100%"
}));
}
};
var optionsOfTypeColumn = __spreadArray(__spreadArray([], _util.typePropertyOfSchema.constraints.enum), ["report"]).map(function (d) {
return {
label: _util.typePropertyOfSchema.constraints.enumText[d] || d,
value: d
};
});
var MeasurementEditor = function MeasurementEditor() {
var _a = (0, _react.useState)(false),
drawerVisible = _a[0],
setDrawerVisible = _a[1];
var _b = (0, _react.useState)(),
editingRecord = _b[0],
setEditingRecord = _b[1];
var _c = (0, _react.useState)(false),
saveLoading = _c[0],
setSaveLoading = _c[1];
var editorRef = (0, _react.useRef)();
var values = (0, _react.useContext)(_proProvider.default); // 用来自定义ValueType
// EditableProTable
var _d = (0, _react.useState)([]),
editableKeys = _d[0],
setEditableRowKeys = _d[1];
var _e = (0, _react.useState)({}),
codeEditorType = _e[0],
setCodeEditorType = _e[1];
var _f = (0, _react.useState)(),
codeEditorId = _f[0],
setCodeEditorId = _f[1];
var _g = (0, _react.useState)([]),
data = _g[0],
setData = _g[1];
var codeValuesRef = (0, _react.useRef)({});
var formRef = (0, _react.useRef)();
var _h = (0, _hooks.useRequest)(_apis.getMeasurements, {
formatResult: function formatResult(res) {
var v = _underscore.default.sortBy((res === null || res === void 0 ? void 0 : res.data) || [], "schema");
setData(v.map(function (d) {
return (0, _flat.default)(d, {
safe: true
});
}));
return v;
}
}),
loading = _h.loading,
originalData = _h.data,
reloadData = _h.run;
var _j = (0, _hooks.useRequest)(_zeroetpApiSdk.getSchemas, {
formatResult: function formatResult(res) {
return (res === null || res === void 0 ? void 0 : res.schemas) || [];
}
}),
_k = _j.data,
schemas = _k === void 0 ? [] : _k,
schemasLoading = _j.loading;
var codeColumns = [{
dataIndex: "codeEditorType",
title: "类型",
valueEnum: {
sql: {
text: "sql"
},
js: {
text: "js"
}
},
hideInPayload: true
}, {
dataIndex: "run",
title: "run函数",
valueType: "code",
hideInForm: codeEditorType[codeEditorId] !== "js",
renderFormItem: tsCodeRenderer.renderFormItem
}, {
dataIndex: "shouldSplitGroupby",
title: "shouldSplitGroupby函数",
valueType: "code",
hideInForm: codeEditorType[codeEditorId] !== "js",
renderFormItem: tsCodeRenderer.renderFormItem
}, {
dataIndex: "sql",
title: "sql",
valueType: "code",
hideInForm: codeEditorType[codeEditorId] !== "sql"
}, {
dataIndex: "sqlLeftJoinClause",
title: "sqlLeftJoinClause",
valueType: "code",
hideInForm: codeEditorType[codeEditorId] !== "sql"
}];
var getCodeType = function getCodeType(record) {
var values = __assign(__assign({}, record), codeValuesRef.current[record._id]);
var codeIsJs = values.run || values.shouldSplitGroupby;
return codeIsJs ? "js" : "sql";
};
var onCodeCancel = function onCodeCancel(record) {
var _a;
codeValuesRef.current[record._id] = {};
var type = getCodeType(record);
setCodeEditorType(function (p) {
var _a;
return __assign(__assign({}, p), (_a = {}, _a[record._id] = type, _a));
});
(_a = formRef.current) === null || _a === void 0 ? void 0 : _a.setFieldsValue({
codeEditorType: type
});
};
var columns = [{
title: "Schema",
dataIndex: "schema",
valueType: "select",
fixed: "left",
fieldProps: {
dropdownMatchSelectWidth: false,
options: schemas === null || schemas === void 0 ? void 0 : schemas.map(function (d) {
return {
label: d.name + "\uFF08" + d._id + "\uFF09",
value: d._id
};
})
},
formItemProps: {
rules: [{
required: true,
message: "必填项"
}]
},
width: 160
}, {
title: "指标名",
dataIndex: "name",
valueType: "text",
fixed: "left",
width: 120
}, {
title: "同义词",
dataIndex: "syno",
valueType: "tag",
hideInSearch: true,
width: 200
}, {
title: "类型",
dataIndex: "type",
valueType: "select",
hideInSearch: true,
width: 120,
fieldProps: {
options: optionsOfTypeColumn
},
formItemProps: {
rules: [{
required: true,
message: "必填项"
}]
}
}, {
title: "是否可加？",
dataIndex: "is_additive",
valueType: "radio",
hideInSearch: true,
width: 120,
fieldProps: {
options: [{
label: "是",
value: true
}, {
label: "否",
value: false
}]
}
}, {
title: "代码",
hideInSearch: true,
hideInPayload: true,
width: 120,
render: function render(item, record) {
var codeIsJs = record.run || record.shouldSplitGroupby;
return /*#__PURE__*/_react.default.createElement(_proForm.BetaSchemaForm, {
layoutType: "ModalForm",
title: "\u4EE3\u7801\u8BE6\u60C5",
initialValues: record,
trigger: /*#__PURE__*/_react.default.createElement(_button.default, {
type: "link",
style: {
padding: 0
}
}, "\u70B9\u51FB\u67E5\u770B"),
modalProps: {
width: "80%",
centered: true
},
columns: [{
dataIndex: "run",
title: "run函数",
valueType: "code",
readonly: true,
hideInDescriptions: !codeIsJs,
render: tsCodeRenderer.render
}, {
dataIndex: "shouldSplitGroupby",
title: "shouldSplitGroupby函数",
valueType: "code",
readonly: true,
hideInDescriptions: !codeIsJs,
render: tsCodeRenderer.render
}, {
dataIndex: "sql",
title: "sql",
valueType: "code",
readonly: true,
hideInDescriptions: codeIsJs,
fieldProps: {
style: {
width: "100%",
overflow: "auto"
}
}
}, {
dataIndex: "sqlLeftJoinClause",
title: "sqlLeftJoinClause",
valueType: "code",
readonly: true,
hideInDescriptions: codeIsJs,
fieldProps: {
style: {
width: "100%",
overflow: "auto"
}
}
}].filter(function (d) {
return !d.hideInDescriptions;
}),
submitter: false
});
},
renderFormItem: function renderFormItem(item, _a) {
var record = _a.record;
var type = codeEditorType[record._id] || getCodeType(record);
return /*#__PURE__*/_react.default.createElement(_proForm.BetaSchemaForm, {
layoutType: "ModalForm",
title: "\u4EE3\u7801\u7F16\u8F91",
formRef: formRef,
initialValues: __assign(__assign(__assign({}, record), codeValuesRef.current[record._id]), {
codeEditorType: type
}),
trigger: /*#__PURE__*/_react.default.createElement(_button.default, {
type: "link",
style: {
padding: 0
},
onClick: function onClick() {
setCodeEditorId(record._id);
setCodeEditorType(function (p) {
var _a;
return __assign(__assign({}, p), (_a = {}, _a[record._id] = type, _a));
});
}
}, "\u70B9\u51FB\u4FEE\u6539"),
columns: codeColumns.map(function (d) {
if (d.dataIndex === "codeEditorType") {
return __assign(__assign({}, d), {
fieldProps: {
onChange: function onChange(v) {
var _a;
var values = ((_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getFieldsValue()) || {};
codeValuesRef.current[record._id] = __assign(__assign({}, codeValuesRef.current[record._id] || {}), values);
setCodeEditorType(function (p) {
var _a;
return __assign(__assign({}, p), (_a = {}, _a[record._id] = v, _a));
});
}
}
});
}
return d;
}),
modalProps: {
width: "80%",
centered: true,
onCancel: function onCancel() {
onCodeCancel(record);
}
},
onFinish: function onFinish(values) {
return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
if (values.codeEditorType === "js") {
codeValuesRef.current[record._id] = __assign(__assign({}, values), {
sql: undefined,
sqlLeftJoinClause: undefined
});
} else {
codeValuesRef.current[record._id] = __assign(__assign({}, values), {
run: undefined,
shouldSplitGroupby: undefined
});
}
return [2
/*return*/
, true];
});
});
}
});
}
}, {
title: "基础指标",
width: 120,
dataIndex: "basePred",
hideInSearch: true,
valueType: "string",
tooltip: "【专家选项】指定此公式在智能归因功能中的结构分析所用的基础聚合指标。例：毛利率的基础聚合指标为销售额，那么毛利率公式的basePred就填销售额。"
}, {
title: "目标",
width: 120,
dataIndex: "target",
hideInSearch: true,
valueType: "number",
render: function render(v, record) {
if (typeof record.target !== "number") {
return "-";
}
return (0, _util.formatWithProperty)({
type: record.type,
primal_type: record.primal_type
}, record.target);
}
}, {
title: "单位",
dataIndex: "unit",
width: 120,
tooltip: "例如: (元)。此字段会显示在问答的结果旁边。"
}, {
title: "数字格式",
dataIndex: "ui.formatter",
width: 120,
tooltip: "例如: 0,0.0A。格式配置详情请见使用文档"
}, {
title: "图表格式",
dataIndex: "ui.representation",
width: 120,
valueType: "select",
fieldProps: {
options: [{
label: "柱状图",
value: "column"
}, {
label: "横向柱状图",
value: "bar"
}, {
label: "折线图",
value: "line"
}, {
label: "面积图",
value: "area"
}, {
label: "饼图",
value: "pie"
}]
}
}, {
title: "说明",
dataIndex: "description",
hideInSearch: true,
width: 200
}, {
title: "操作",
width: 160,
valueType: "option",
hideInSearch: true,
hideInPayload: true,
fixed: "right",
render: function render(_text, record, _index, action) {
return [/*#__PURE__*/_react.default.createElement("a", {
key: "editable",
onClick: function onClick() {
var _a;
(_a = action === null || action === void 0 ? void 0 : action.startEditable) === null || _a === void 0 ? void 0 : _a.call(action, record._id);
}
}, "\u7F16\u8F91"), /*#__PURE__*/_react.default.createElement("a", {
key: "expert",
onClick: function onClick() {
setDrawerVisible(true);
setEditingRecord(record);
}
}, "\u4E13\u5BB6"), /*#__PURE__*/_react.default.createElement(_popconfirm.default, {
title: "\u662F\u5426\u786E\u5B9A\u5220\u9664",
key: "delete",
onConfirm: function onConfirm() {
return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
return [4
/*yield*/
, (0, _apis.deleteMeasurementsByName)(record)];
case 1:
_a.sent();
reloadData();
return [2
/*return*/
];
}
});
});
}
}, /*#__PURE__*/_react.default.createElement(_button.default, {
type: "link",
danger: true,
style: {
padding: 0
}
}, "\u5220\u9664"))];
}
}];
var onExpertCancel = function onExpertCancel() {
setDrawerVisible(false);
};
var getPayload = function getPayload(record) {
if (!record) {
return {};
}
var payload = {};
Object.keys(record).forEach(function (k) {
var _a;
var v = (_a = record[k]) !== null && _a !== void 0 ? _a : "";
payload[k] = ("" + v).trim() === "" ? undefined : v;
});
var finalPayload = _flat.default.unflatten(payload);
if ("index" in finalPayload) {
delete finalPayload._id;
delete finalPayload[finalPayload.index];
delete finalPayload.index;
}
return finalPayload;
};
var onSave = function onSave(rowKey, d) {
return __awaiter(void 0, void 0, void 0, function () {
var target, record, payload;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
setSaveLoading(true);
target = data.find(function (d) {
return d._id === rowKey;
});
if (!target) return [3
/*break*/
, 2];
return [4
/*yield*/
, (0, _apis.deleteMeasurementsByName)(target)];
case 1:
_a.sent();
_a.label = 2;
case 2:
record = __assign(__assign({}, (0, _flat.default)(d, {
safe: true
})), codeValuesRef.current[rowKey]);
payload = getPayload(record);
return [2
/*return*/
, (0, _apis.postMeasurements)(payload).then(function () {
_message2.default.success("保存成功");
reloadData();
return true;
}).catch(function (e) {
_message2.default.error("" + e.message); // 如果是edit模式，那么因为之前delete掉了，所以存回来
if (target) {
return (0, _apis.postMeasurements)(target);
}
return Promise.reject(e);
}).finally(function () {
setSaveLoading(false);
})];
}
});
});
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_proProvider.default.Provider, {
value: __assign(__assign({}, values), {
valueTypeMap: (0, _util.customValueTypes)({
name: "schema",
properties: columns.map(function (d) {
return {
name: d.dataIndex,
type: d.valueType,
primal_type: d.valueType
};
}),
type: "entity",
_id: "schema"
})
})
}, /*#__PURE__*/_react.default.createElement(_proTable.EditableProTable, {
rowKey: "_id",
scroll: {
x: columns.reduce(function (p, c) {
return p + Number(c.width);
}, 0)
},
recordCreatorProps: {
position: "bottom",
record: function record() {
return {
_id: (Math.random() * 1000000).toFixed(0)
};
}
},
loading: loading || schemasLoading,
search: {
labelWidth: "auto"
},
onReset: function onReset() {
setData(originalData);
},
onSubmit: function onSubmit(filters) {
setData(_underscore.default.filter(originalData, function (item) {
var keys = Object.keys(filters);
var res = true;
keys.forEach(function (k) {
var _a;
res = res && ((_a = item[k]) === null || _a === void 0 ? void 0 : _a.includes(filters[k]));
});
return res;
}));
},
columns: columns,
value: data,
editable: {
type: "multiple",
editableKeys: editableKeys,
onCancel: function onCancel(rowKey, d, record) {
return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
onCodeCancel(record);
return [2
/*return*/
, true];
});
});
},
onSave: onSave,
onChange: setEditableRowKeys
}
})), /*#__PURE__*/_react.default.createElement(_drawer.default, {
open: drawerVisible,
width: "90%",
maskClosable: false,
onClose: function onClose(e) {
// 取消按esc退出弹窗
if (e.type === "keydown") {
return;
}
onExpertCancel();
},
title: "\u6307\u6807\u7F16\u8F91-" + (editingRecord === null || editingRecord === void 0 ? void 0 : editingRecord.name),
destroyOnClose: true,
footer: /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "row-reverse"
}
}, /*#__PURE__*/_react.default.createElement(_space.default, null, /*#__PURE__*/_react.default.createElement(_button.default, {
onClick: function onClick() {
onExpertCancel();
}
}, "\u53D6\u6D88"), /*#__PURE__*/_react.default.createElement(_button.default, {
type: "primary",
onClick: function onClick() {
return __awaiter(void 0, void 0, void 0, function () {
var errors, record, codeIsJs, codeIsSql;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!editorRef.current) return [3
/*break*/
, 3];
return [4
/*yield*/
, editorRef.current.validate()];
case 1:
errors = _a.sent();
if (errors && errors.length > 0) {
_message2.default.error("校验不通过，请检查！");
return [2
/*return*/
];
}
record = editorRef.current.get();
codeIsJs = record.run || record.shouldSplitGroupby;
codeIsSql = record.sql || record.sqlLeftJoinClause;
if (codeIsJs && codeIsSql) {
_message2.default.error("js\u76F8\u5173\u5B57\u6BB5\uFF08run\u3001shouldSplitGroupby\uFF09\u6216sql\u76F8\u5173\u5B57\u6BB5\uFF08sql\u3001sqlLeftJoinClause\uFF09\n \u4E24\u7EC4\u5B57\u6BB5\u4E0D\u80FD\u540C\u65F6\u5B58\u5728\uFF0C\u8BF7\u68C0\u67E5\uFF01");
return [2
/*return*/
];
}
return [4
/*yield*/
, onSave(editingRecord._id, record)];
case 2:
_a.sent();
setDrawerVisible(false);
_a.label = 3;
case 3:
return [2
/*return*/
];
}
});
});
},
loading: saveLoading
}, "\u786E\u5B9A")))
}, /*#__PURE__*/_react.default.createElement(_JsonEditor.default, {
value: getPayload(editingRecord),
editorRef: editorRef,
editable: true,
isCreate: editingRecord === null
})));
};
var _default = MeasurementEditor;
exports.default = _default;