fastlion-amis
Version:
一种MIS页面生成工具
308 lines (307 loc) • 16.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var components_1 = require("../../../components");
var antd_1 = require("antd");
var DragModal_1 = (0, tslib_1.__importDefault)(require("../../../components/DragModal"));
require("./index.scss");
var lodash_1 = require("lodash");
var SqlOptimize = function (props) {
var _a;
var action = props.action, selectedList = props.selectedList, sqlStr = props.sqlStr, env = props.env, store = props.store;
var _b = (0, react_1.useState)(false), visible = _b[0], setVisible = _b[1];
/** 生成语句后的数据源 */
var _c = (0, react_1.useState)({}), sqlData = _c[0], setSqlData = _c[1];
/** 表名列表 */
var _d = (0, react_1.useState)([]), tableList = _d[0], setTableList = _d[1];
/** 表名数据 */
var _e = (0, react_1.useState)(), tableName = _e[0], setTableName = _e[1];
/** 所有表 */
var _f = (0, react_1.useState)([]), allTable = _f[0], setAllTable = _f[1];
/** 主键对应的columns */
var _g = (0, react_1.useState)([]), primaryKeyColumns = _g[0], setPrimaryKeyColumns = _g[1];
/** 更新字段对应的columns */
var _h = (0, react_1.useState)([]), updateKeyColumns = _h[0], setUpdateKeyColumns = _h[1];
/** 生成语句的loading */
var _j = (0, react_1.useState)(false), genLoading = _j[0], setGenLoading = _j[1];
var mainTabRef = (0, react_1.useRef)(null);
var reqMap = {
tableList: {
data: {
sql: "${sql}"
},
method: 'post',
url: '/api/v1/db/tool/info'
},
updateSql: {
data: {
columns: "${columns}",
wheres: "${wheres}",
tableName: "${tableName}",
data: "${data}"
},
method: 'post',
url: '/api/v1/db/tool/script'
}
};
var columnsMap = {
primaryKey: primaryKeyColumns,
updateKey: updateKeyColumns
};
var updateColumnsMap = {
primaryKey: setPrimaryKeyColumns,
updateKey: setUpdateKeyColumns
};
(0, react_1.useEffect)(function () {
if (visible) {
handleGetTableNameList();
}
}, [visible]);
/** 获取表名列表 */
var handleGetTableNameList = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var params, res, tableNames;
var _a;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
params = { sql: sqlStr };
return [4 /*yield*/, env.fetcher(reqMap['tableList'], params)];
case 1:
res = _b.sent();
if (res.ok && res.data) {
tableNames = res.data.map(function (item) { return ({ label: item.tableName, value: item.tableName }); }).filter(Boolean);
setAllTable(res.data);
/** 配置表名列表与默认表名 */
setTableName((_a = tableNames[0]) === null || _a === void 0 ? void 0 : _a['value']);
setTableList(tableNames);
/** 初始化第一个表名 */
handleGenColumns(res.data[0]);
}
return [2 /*return*/];
}
});
}); };
var handleToggleTable = function (tableName) {
var targetItem = allTable.find(function (item) { return item.tableName === tableName; });
if (targetItem) {
setTableName(tableName);
handleGenColumns(targetItem);
}
};
/** 初始化字段 */
var handleGenColumns = function (data) {
var columns = data.columns, _a = data.primaryKey, primaryKey = _a === void 0 ? '' : _a;
/** 配置主键列表 */
var pKeyColumns = columns.map(function (item) { return ({ label: item, value: item, type: 'primaryKey', checked: primaryKey.includes(item) }); });
var updateKeyColumns = columns.map(function (item) { return ({ label: item, value: item, type: 'updateKey' }); });
setPrimaryKeyColumns(pKeyColumns);
setUpdateKeyColumns(updateKeyColumns);
};
/** 选中 主键/更新字段 */
var handleColumnChange = function (column, e) {
var type = column.type, value = column.value;
var checked = e.target.checked;
if (type === 'primaryKey') {
setPrimaryKeyColumns(function (cols) {
if (cols === void 0) { cols = []; }
var newCols = cols.map(function (item) { return item.value === value ? ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { checked: checked })) : item; });
return newCols;
});
}
else {
setUpdateKeyColumns(function (cols) {
if (cols === void 0) { cols = []; }
var newCols = cols.map(function (item) { return item.value === value ? ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { checked: checked })) : item; });
return newCols;
});
}
};
/** 获取主键 */
var handleGetPrimeKey = function () {
var targetItem = allTable.find(function (item) { return item.tableName === tableName; });
if (targetItem) {
var primaryKey = targetItem.primaryKey;
// setPrimaryKeyColumns((cols) => {
// const newCols = cols.map((item) => ({ ...item, checked: item.value === primaryKey }))
// return newCols;
// });
var key = Array.isArray(primaryKey) ? primaryKey[0] : primaryKey;
debounceFilter(key, 'primaryKey', true);
}
};
/** 生成语句 */
var handleGenerateSql = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var updateColumns, primaryKeys, params, res;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, , 2, 3]);
setGenLoading(true);
updateColumns = updateKeyColumns.map(function (item) { return item.checked ? item.value : undefined; }).filter(Boolean);
primaryKeys = primaryKeyColumns.map(function (item) { return item.checked ? item.value : undefined; }).filter(Boolean);
params = {
tableName: tableName,
columns: updateColumns,
wheres: primaryKeys,
data: selectedList
};
return [4 /*yield*/, env.fetcher(reqMap['updateSql'], params)];
case 1:
res = _a.sent();
if (res.ok && res.data) {
antd_1.message.success('已生成语句');
setSqlData(res.data);
}
else {
antd_1.message.error(res.msg);
}
return [3 /*break*/, 3];
case 2:
setGenLoading(false);
return [7 /*endfinally*/];
case 3: return [2 /*return*/];
}
});
}); };
/** 执行过滤 */
var handleFilter = function (searchValue, type, forceCheck) {
if (searchValue === void 0) { searchValue = ''; }
var sortColumns = columnsMap[type];
var updateColumns = updateColumnsMap[type];
var trimVal = searchValue.trim();
//匹配规则，1.全匹配 2.以关键字开头匹配 3.模糊匹配
var target = sortColumns.find(function (item) { return item.label === trimVal; });
!target && (target = sortColumns.find(function (item) { var _a; return trimVal.length && ((_a = item.label) === null || _a === void 0 ? void 0 : _a.startsWith(trimVal)); }));
!target && (target = sortColumns.find(function (item) { var _a; return trimVal.length && ((_a = item.label) === null || _a === void 0 ? void 0 : _a.includes(trimVal)); }));
var value = (target !== null && target !== void 0 ? target : {}).value;
updateColumns(function (columns) {
var newColumns = columns.map(function (item) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { match: item.value === value,
// 如果是获取主键，则默认只勾选默认主键
checked: forceCheck ? item.value === value : item.checked });
});
return newColumns;
});
if (target) {
setTimeout(function () {
requestAnimationFrame(function () {
var _a;
var boxDom = (_a = mainTabRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".columns-box." + type);
var matchItem = boxDom === null || boxDom === void 0 ? void 0 : boxDom.querySelector('.column-item.match');
matchItem === null || matchItem === void 0 ? void 0 : matchItem.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
}, 100);
}
};
/** 关键词过滤时触发 */
var debounceFilter = (0, lodash_1.debounce)(handleFilter, 300);
/** 切换选值 */
var columnCheck = function (checkType, columnType) {
var _a;
var columnsMap = {
'primaryKey': setPrimaryKeyColumns,
'updateKey': setUpdateKeyColumns
};
(_a = columnsMap[columnType]) === null || _a === void 0 ? void 0 : _a.call(columnsMap, function (cols) {
var newColumns = cols;
switch (checkType) {
/** 全选 */
case 'all':
newColumns = cols.map(function (item) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { checked: true, match: false })); });
break;
/** 反选 */
case 'rebellion':
newColumns = cols.map(function (item) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { checked: !item.checked, match: false })); });
break;
/** 不选 */
case 'clear':
newColumns = cols.map(function (item) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { checked: false, match: false })); });
break;
}
return newColumns;
});
};
/** 渲染主键/更新字段 */
var columnTogglerRender = function () {
var configs = [
{
label: '主键',
type: 'primaryKey'
},
{
label: '更新字段',
type: 'updateKey'
}
];
var render = configs.map(function (item) {
var type = item.type, label = item.label;
return (react_1.default.createElement("div", { className: "tab-item " + type, key: type },
react_1.default.createElement("div", { className: "title-box" },
react_1.default.createElement("div", { className: "l" }, label),
react_1.default.createElement("div", { className: "r" },
react_1.default.createElement(antd_1.Button, { type: "link", size: "small", onClick: function () { return columnCheck('all', type); } }, "\u5168\u9009"),
react_1.default.createElement(antd_1.Button, { type: "link", size: "small", onClick: function () { return columnCheck('rebellion', type); } }, "\u53CD\u9009"),
react_1.default.createElement(antd_1.Button, { type: "link", size: "small", onClick: function () { return columnCheck('clear', type); } }, "\u4E0D\u9009"))),
react_1.default.createElement("div", { className: "filter-box" },
react_1.default.createElement(antd_1.Input, { className: "filter-inp", placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD", onChange: function (e) { return debounceFilter(e.target.value, type); }, allowClear: true })),
react_1.default.createElement("div", { className: "content columns-box " + type }, (columnsMap[type]).map(function (column) { return (react_1.default.createElement("div", { className: "column-item " + (column.match ? 'match' : ''), key: column.label },
react_1.default.createElement(antd_1.Checkbox, { key: column.label, checked: column.checked, onChange: function (e) { return handleColumnChange(column, e); } }, column.label))); }))));
});
return render;
};
/** 主选项渲染 */
var mainTabRenderer = function () {
return (react_1.default.createElement("div", { className: "main-tab", ref: mainTabRef },
react_1.default.createElement("div", { className: "tab-item" },
react_1.default.createElement("div", { className: "title-box" },
react_1.default.createElement("div", { className: "l" }, "\u8868\u540D"),
react_1.default.createElement("div", { className: "r" })),
react_1.default.createElement("div", { className: "content" },
react_1.default.createElement(antd_1.Select, { className: "table-select", placeholder: "\u8BF7\u9009\u62E9\u8868\u540D", value: tableName, options: tableList, onChange: function (e) { return handleToggleTable(e); } }),
react_1.default.createElement(antd_1.Button, { block: true, type: "primary", onClick: handleGetPrimeKey }, "\u83B7\u53D6\u4E3B\u952E"),
react_1.default.createElement(antd_1.Button, { block: true, onClick: handleGenerateSql, loading: genLoading }, "\u751F\u6210\u8BED\u53E5"))),
columnTogglerRender()));
};
/** 新增/修改/删除 语句 */
var updateSqlRenderer = function (value) {
if (value === void 0) { value = []; }
var newStr = value.join('\n');
return (react_1.default.createElement("div", { className: "update-tab" },
react_1.default.createElement(antd_1.Input.TextArea, { value: newStr, autoSize: { minRows: 6, maxRows: 22 } })));
};
var handleResetData = function () {
setTableName(undefined);
setPrimaryKeyColumns([]);
setUpdateKeyColumns([]);
setVisible(false);
};
var tabs = [
{
label: '选项',
key: 'main-tab',
children: mainTabRenderer()
},
{
label: '新增语句',
key: 'insert-tab',
children: updateSqlRenderer(sqlData['insertSql'])
},
{
label: '修改语句',
key: 'update-tab',
children: updateSqlRenderer(sqlData['updateSql'])
},
{
label: '删除语句',
key: 'del-tab',
children: updateSqlRenderer(sqlData['deleteSql'])
},
];
return (react_1.default.createElement("div", { className: "sql-optimize-container" },
react_1.default.createElement(components_1.Button, { onClick: function () { return setVisible(true); }, className: "open-btn" }, action === null || action === void 0 ? void 0 : action.label),
visible && react_1.default.createElement(DragModal_1.default, { className: "sql-optimize-dialog common-modal-component", width: 710, title: "\u751F\u6210\u8BED\u53E5", dialogVisible: visible, setFixRight: false, resizeable: false, canClickBelowDom: true, mask: false, bounds: "window", centered: true, setMaxSize: false, footer: false, getContainer: ((_a = env.container) !== null && _a !== void 0 ? _a : env.getModalContainer), onCancel: function () { return handleResetData(); } },
react_1.default.createElement(antd_1.Tabs, { defaultActiveKey: "main", type: "card", items: tabs }))));
};
exports.default = SqlOptimize;
//# sourceMappingURL=./renderers/Table/SqlOptimize/index.js.map