fastlion-amis
Version:
一种MIS页面生成工具
436 lines (435 loc) • 29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var icons_1 = require("@ant-design/icons");
var antd_1 = require("antd");
var lodash_1 = require("lodash");
var react_1 = tslib_1.__importStar(require("react"));
var icons_2 = require("../components/icons");
var factory_1 = require("../factory");
var helper_1 = require("../utils/helper");
var utils_1 = require("../utils/utils");
var font_1 = (0, tslib_1.__importDefault)(require("../icons/font"));
var Button_1 = (0, tslib_1.__importDefault)(require("../components/Button"));
var launchDataMap = new Map();
var QuickLaunch = function (props) {
var _a, _b;
var env = props.env, launchDataApi = props.launchDataApi, launchAddApi = props.launchAddApi, launchListApi = props.launchListApi, launchTreeApi = props.launchTreeApi, launchDeleteApi = props.launchDeleteApi, cx = props.classnames, _c = props.title, title = _c === void 0 ? '快速发起' : _c;
var _d = (0, react_1.useState)([]), launchList = _d[0], setLaunchList = _d[1];
var _e = (0, react_1.useState)(false), visible = _e[0], setVisible = _e[1];
var _f = (0, react_1.useState)([]), appList = _f[0], setAppList = _f[1];
var _g = (0, react_1.useState)(''), selectedId = _g[0], setSelectedId = _g[1];
var _h = (0, react_1.useState)([]), launchGroup = _h[0], setLaunchGroup = _h[1];
var _j = (0, react_1.useState)(), searchRes = _j[0], setSearchRes = _j[1];
var _k = (0, react_1.useState)(0), tempNum = _k[0], setTempNum = _k[1];
var _l = (0, react_1.useState)([]), selectList = _l[0], setSelectList = _l[1];
var _m = (0, react_1.useState)(['0']), expandedKeys = _m[0], setExpandedKeys = _m[1];
var _o = (0, react_1.useState)(['0']), selectedKeys = _o[0], setSelectedKeys = _o[1];
var _p = (0, react_1.useState)(false), editing = _p[0], setEditing = _p[1];
var bodyRef = (0, react_1.useRef)(null);
var pageBodyRef = (0, react_1.useRef)(null);
var defaultValue = (0, react_1.useRef)('');
(0, react_1.useEffect)(function () {
//计算缺少的占位元素数量
if (bodyRef.current) {
var colNum = Math.floor((bodyRef.current.clientWidth - 32) / (70 + 8)); //列数
var restNum = launchList.length % colNum; //最后一行数量
var num = colNum - restNum - 1;
num > 0 && setTempNum(num);
}
}, [launchList]);
(0, react_1.useEffect)(function () {
var list = launchList.map(function (item) {
if (item.firstPage) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { menuId: item.launchId, menuPath: item.menuPath, menuName: item.launchName, launchPath: undefined, menuType: item.launchType, menuIcon: item.launchIcon });
}
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { secMenuId: item.launchId, menuPath: item.menuPath, secMenuName: item.launchName, launchPath: undefined, menuType: item.launchType, menuIcon: item.launchIcon });
});
setSelectList(list);
}, [launchList]);
var initLaunchData = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var _a, data, ok, msg;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, env.fetcher(launchDataApi)];
case 1:
_a = _b.sent(), data = _a.data, ok = _a.ok, msg = _a.msg;
if (ok) {
setLaunchList((0, lodash_1.isArray)(data) ? data.map(function (item) {
var hashNum = (0, utils_1.getHashCode)(item.launchName + item.launchPath) % 54 || 0;
var targetIcon = font_1.default[hashNum];
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { launchIcon: (item.launchIcon || targetIcon.icon) });
}) : []);
}
else {
antd_1.message.error(msg);
}
return [2 /*return*/];
}
});
}); };
var initLaunchTreeData = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var _a, data, ok, msg, rootNode, id, treeList;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, env.fetcher(launchTreeApi)];
case 1:
_a = _b.sent(), data = _a.data, ok = _a.ok, msg = _a.msg;
if (ok) {
if ((0, lodash_1.isArray)(data)) {
rootNode = data;
id = rootNode[0].appId;
treeList = rootNode.map(function (item, index) {
var children = item.firstMenuList.map(function (info, childIndex) { return ({
title: info.menuName,
key: index + "-" + childIndex,
icon: react_1.default.createElement(icons_2.Icon, { icon: '#' + info.menuIcon }),
appId: item.appId,
menuId: info.menuId
}); });
return { title: item.appName, appId: item.appId, key: String(index), icon: '', children: children };
});
setSelectedId(id);
setAppList(treeList);
initLaunchGroup(id);
}
else {
setAppList([data[0]]);
}
}
else {
antd_1.message.error(msg);
}
return [2 /*return*/];
}
});
}); };
var initLaunchGroup = function (applicationId) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var _a, data, ok, msg, list;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, env.fetcher(launchListApi, { appId: applicationId })];
case 1:
_a = _b.sent(), data = _a.data, ok = _a.ok, msg = _a.msg;
if (ok) {
if ((0, lodash_1.isArray)(data) && data.length > 0) {
list = data.map(function (item) {
if (item === null || item === void 0 ? void 0 : item.seconds) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { seconds: item.seconds.map(function (info) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, info), { secondList: info.secondList.map(function (node) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, node), { appId: applicationId })); }) })); }) });
}
else {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { appId: applicationId });
}
});
!launchDataMap.has(applicationId) && launchDataMap.set(applicationId, list);
setLaunchGroup(list);
}
else {
setLaunchGroup([]);
}
}
else {
antd_1.message.error(msg);
}
return [2 /*return*/];
}
});
}); };
var onSearch = function (e) {
(0, lodash_1.debounce)(handleSearch, 500)(e.target.value);
};
//搜索
var handleSearch = function (value) {
defaultValue.current = value;
if (!value) {
setSearchRes(undefined);
return;
}
var list = [];
launchGroup.forEach(function (item) {
if (item.seconds) {
item.seconds.forEach(function (node) {
var _a;
(_a = node.secondList) === null || _a === void 0 ? void 0 : _a.forEach(function (info) {
info.secMenuName.includes(value) && list.push(info);
});
});
}
else {
item.menuName.includes(value) && list.push(item);
}
});
setSearchRes(list);
};
var onExpand = function (expandedKeys, info) {
setExpandedKeys(expandedKeys);
};
var onSelect = function (selectedKeys, info) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var dom;
var _a;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
if (!(selectedId !== info.node.appId)) return [3 /*break*/, 3];
setSelectedId(info.node.appId);
if (!launchDataMap.has(info.node.appId)) return [3 /*break*/, 1];
setLaunchGroup(launchDataMap.get(info.node.appId));
return [3 /*break*/, 3];
case 1: return [4 /*yield*/, initLaunchGroup(info.node.appId)];
case 2:
_b.sent();
_b.label = 3;
case 3:
setSelectedKeys(selectedKeys);
dom = (_a = pageBodyRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('#' + info.node.menuId);
if (dom) {
dom.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
return [2 /*return*/];
}
});
}); };
var handleClick = function (node) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var _a, ok, msg, id;
var _b;
return (0, tslib_1.__generator)(this, function (_c) {
switch (_c.label) {
case 0:
if (!editing) return [3 /*break*/, 2];
return [4 /*yield*/, env.fetcher(launchDeleteApi, { launchId: node.launchId, firstPage: node.firstPage })];
case 1:
_a = _c.sent(), ok = _a.ok, msg = _a.msg;
if (ok) {
setLaunchList(launchList.filter(function (item) { return item.launchId !== node.launchId; }));
}
else {
antd_1.message.error(msg);
}
return [3 /*break*/, 3];
case 2:
if (node.launchPath) {
id = 'Matrix' + (0, utils_1.getHashCode)(node.launchPath).toString();
(_b = env.onPageLink) === null || _b === void 0 ? void 0 : _b.call(env, id, id, node.launchName, node.launchPath, undefined);
}
_c.label = 3;
case 3: return [2 /*return*/];
}
});
}); };
//标记是否有操作，没操作点完成不需要提交请求
var shouldFetch = (0, react_1.useRef)(false);
var handleSelect = function (node) {
shouldFetch.current = true;
//判断是选中还是取消选中
var isSelected = selectList.find(function (item) {
if (node.secMenuId)
return item.secMenuId === node.secMenuId;
if (node.menuId)
return item.menuId === node.menuId;
return false;
});
if (isSelected) {
setSelectList(selectList.filter(function (item) {
if (node.secMenuId)
return item.secMenuId !== node.secMenuId;
if (node.menuId)
return item.menuId !== node.menuId;
return true;
}));
}
else {
setSelectList((0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], selectList, true), [node], false));
}
};
var handleOk = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var _a, msg, ok;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
if (!shouldFetch.current) return [3 /*break*/, 4];
if (!selectList.length) return [3 /*break*/, 2];
return [4 /*yield*/, env.fetcher(launchAddApi, { launchParam: selectList.map(function (item) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { launchId: item.secMenuId || item.menuId })); }) })];
case 1:
_a = _b.sent(), msg = _a.msg, ok = _a.ok;
if (ok) {
setVisible(false);
initLaunchData();
antd_1.message.info('更新成功');
}
else {
antd_1.message.error(msg);
}
return [3 /*break*/, 3];
case 2:
antd_1.message.info('请勾选要添加的菜单');
_b.label = 3;
case 3: return [3 /*break*/, 5];
case 4:
setVisible(false);
_b.label = 5;
case 5:
shouldFetch.current = false;
return [2 /*return*/];
}
});
}); };
var handleChange = function (value, option) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
setSelectedId(value);
if (!launchDataMap.has(value)) return [3 /*break*/, 1];
setLaunchGroup(launchDataMap.get(value));
return [3 /*break*/, 3];
case 1: return [4 /*yield*/, initLaunchGroup(value)];
case 2:
_a.sent();
_a.label = 3;
case 3: return [2 /*return*/];
}
});
}); };
(0, react_1.useEffect)(function () {
initLaunchData();
initLaunchTreeData();
}, []);
(0, react_1.useEffect)(function () {
if (visible && !launchGroup.length) {
initLaunchGroup(selectedId);
}
}, [visible]);
var selectedFields = (0, react_1.useMemo)(function () {
return "\u5DF2\u9009\uFF08" + selectList.length + "\uFF09\uFF1A" + selectList.map(function (item) { return item.secMenuName || item.menuName; }).join('、');
}, [selectList]);
var renderFooter = function () {
return react_1.default.createElement("div", { className: 'quick-launch-modal-footer' },
react_1.default.createElement("div", { className: 'quick-launch-modal-footer-left' }, selectedFields),
react_1.default.createElement("div", { className: 'quick-launch-modal-footer-right' },
react_1.default.createElement(Button_1.default, { onClick: function () { return setVisible(false); } }, "\u53D6\u6D88"),
react_1.default.createElement(Button_1.default, { level: 'primary', onClick: handleOk }, "\u786E\u5B9A")));
};
var renderFlattenItem = function (item, index) {
var k = index + "-" + (item.secMenuId || item.menuId);
var hashNum = (0, utils_1.getHashCode)(k) % 54 || 0;
var targetIcon = font_1.default[hashNum];
return react_1.default.createElement("div", { key: k, id: (searchRes === null || searchRes === void 0 ? void 0 : searchRes.length) ? '' : item.menuId, className: "quick-launch-modal-body-group-item", onClick: function () { return handleSelect(item); } },
react_1.default.createElement("div", { className: 'quick-launch-modal-body-group-item-icon-box' },
react_1.default.createElement("div", { className: 'quick-launch-modal-body-group-item-icon' },
react_1.default.createElement(icons_2.Icon, { icon: '#' + (item.menuIcon || targetIcon.icon) }))),
react_1.default.createElement("div", { className: 'quick-launch-modal-body-group-item-name' }, item.secMenuName || item.menuName),
selectList.find(function (node) { return node.secMenuId ? node.secMenuId === item.secMenuId
: node.menuId === item.menuId; }) ?
react_1.default.createElement(icons_1.CheckCircleFilled, { className: 'quick-launch-modal-body-group-item-sel', style: { fontSize: '18px' } })
: react_1.default.createElement("div", { className: 'quick-launch-modal-body-group-item-unsel' }));
};
var renderItem = function () {
if (searchRes) {
return react_1.default.createElement("div", { className: 'quick-launch-modal-body-search-list' }, searchRes.map(function (item, index) { return renderFlattenItem(item, index); }));
}
return launchGroup.map(function (item, index) {
if (item.seconds) {
if (item.seconds.length) {
return react_1.default.createElement("div", { id: item.menuId, key: item.menuId + index }, item.seconds.map(function (node, nodeIndex) {
var _a, _b;
return react_1.default.createElement("div", { key: (_a = node.groupName) !== null && _a !== void 0 ? _a : '' + index + '-' + nodeIndex, className: "quick-launch-modal-body-group" },
react_1.default.createElement("div", { className: "quick-launch-modal-body-group-title" }, node.groupName),
react_1.default.createElement("div", { className: "quick-launch-modal-body-group-body" },
react_1.default.createElement("div", { className: "quick-launch-modal-body-group-body-container" }, (_b = node.secondList) === null || _b === void 0 ? void 0 : _b.map(function (info, secIndex) {
var hashNum = (0, utils_1.getHashCode)(info.secMenuName + info.menuPath) % 54 || 0;
var targetIcon = font_1.default[hashNum];
return react_1.default.createElement("div", { onClick: function () { return handleSelect(info); }, key: index + '-' + nodeIndex + '-' + secIndex + info.secMenuName + info.secMenuId, className: "quick-launch-modal-body-group-item" },
react_1.default.createElement("div", { className: 'quick-launch-modal-body-group-item-icon-box' },
react_1.default.createElement("div", { className: 'quick-launch-modal-body-group-item-icon' },
react_1.default.createElement(icons_2.Icon, { icon: '#' + (info.menuIcon || targetIcon.icon) }))),
react_1.default.createElement("div", { className: 'quick-launch-modal-body-group-item-name' }, info.secMenuName),
selectList.find(function (node) { return node.secMenuId === info.secMenuId; }) ?
react_1.default.createElement(icons_1.CheckCircleFilled, { className: 'quick-launch-modal-body-group-item-sel', style: { fontSize: '18px' } })
: react_1.default.createElement("div", { className: 'quick-launch-modal-body-group-item-unsel' }));
}))));
}));
}
return null;
}
return renderFlattenItem(item, index);
});
};
return (react_1.default.createElement("div", { className: cx('Quick-launch') },
react_1.default.createElement("div", { className: cx('Quick-launch-header') },
react_1.default.createElement("h3", { className: cx('Quick-launch-header-title') }, title),
react_1.default.createElement("div", null,
react_1.default.createElement(antd_1.Button, { size: 'small', type: 'link', onClick: function () { return setEditing(!editing); } }, editing ? '保存' : '编辑'))),
react_1.default.createElement("div", { className: cx('Quick-launch-body'), ref: bodyRef },
react_1.default.createElement("div", { className: cx('Quick-launch-body-wrapper') },
launchList.map(function (item) { return (react_1.default.createElement("div", { className: cx('Quick-launch-body-wrapper-item'), key: item.launchId, onClick: function () { return handleClick(item); } },
react_1.default.createElement("div", { className: cx('Quick-launch-body-wrapper-item-icon') },
react_1.default.createElement("div", { className: cx('Quick-launch-body-wrapper-item-icon-box') }, item.launchIcon.includes('fa-') ? react_1.default.createElement("i", { className: item.launchIcon })
: react_1.default.createElement("div", { className: 'saas-icon-box' },
react_1.default.createElement(icons_2.Icon, { icon: '#' + item.launchIcon, className: "icon" })))),
react_1.default.createElement("div", { className: cx('Quick-launch-body-wrapper-item-name') }, item.launchName),
editing && react_1.default.createElement(icons_1.MinusCircleOutlined, { className: cx('Quick-launch-body-wrapper-item-close') }))); }),
react_1.default.createElement("div", { className: cx('Quick-launch-body-wrapper-item', 'add-item'), key: 'plus', onClick: function () { return setVisible(true); } },
react_1.default.createElement("div", { className: cx('Quick-launch-body-wrapper-item-icon') },
react_1.default.createElement(icons_2.Icon, { icon: "plus", className: "icon", style: { fontSize: 32 } })),
react_1.default.createElement("div", null)),
tempNum > 0 ? Array.from({ length: tempNum }, function (_, i) { return (react_1.default.createElement("div", { className: cx('Quick-launch-body-wrapper-item placeholder-item'), style: { height: 0 }, key: i })); }) : null)),
visible && !(0, helper_1.isMobile)() && react_1.default.createElement(antd_1.Modal, { open: visible, title: react_1.default.createElement("div", { className: 'dialog-title' },
react_1.default.createElement("div", { className: 'disabled-move-title' }, "\u5FEB\u901F\u53D1\u8D77\u7BA1\u7406")), width: 780, centered: true, className: 'quick-launch-modal common-modal-component', getContainer: function () { return document.getElementById('amis-modal-container') || document.body; }, footer: renderFooter(), onCancel: function () { return setVisible(false); } },
react_1.default.createElement("div", { className: 'quick-launch-modal-body' },
react_1.default.createElement("div", { className: 'quick-launch-modal-body-left' },
react_1.default.createElement("div", { className: 'quick-launch-modal-body-left-title' }, "\u7CFB\u7EDF\u83DC\u5355"),
react_1.default.createElement("div", { className: 'quick-launch-modal-body-left-search' },
react_1.default.createElement(antd_1.Input, { placeholder: '\u641C\u7D22\u540D\u79F0', onChange: onSearch, defaultValue: defaultValue.current })),
react_1.default.createElement("div", { className: 'quick-launch-modal-body-left-tree' },
react_1.default.createElement(antd_1.Tree, { showIcon: true, expandedKeys: expandedKeys, onExpand: onExpand, selectedKeys: selectedKeys, onSelect: onSelect, treeData: appList }))),
react_1.default.createElement("div", { className: 'quick-launch-modal-body-right', ref: pageBodyRef }, renderItem()))),
visible && (0, helper_1.isMobile)() && react_1.default.createElement(antd_1.Drawer, { open: visible, width: '100%', onClose: function () {
setVisible(false);
shouldFetch.current = false;
}, getContainer: function () { return document.getElementById('amis-modal-container') || document.body; }, className: "quick-launch-modal" },
react_1.default.createElement("div", { className: 'quick-launch-drawer' },
react_1.default.createElement("div", { className: 'quick-launch-drawer-header' },
react_1.default.createElement("div", { className: 'quick-launch-drawer-header-close', onClick: function () {
setVisible(false);
shouldFetch.current = false;
} },
react_1.default.createElement(icons_2.Icon, { icon: "title-left", style: { width: '16px', height: '16px' } })),
react_1.default.createElement("div", { className: 'quick-launch-drawer-header-title' }, title)),
react_1.default.createElement("div", { className: 'quick-launch-drawer-body' },
react_1.default.createElement("div", { className: 'quick-launch-drawer-body-top' }, props.render('select', {
"clearable": true,
"searchable": true,
"selectMode": "select",
"options": appList.map(function (item) { return ({ value: item.appId, label: item.title }); }),
"type": "select",
"name": "appName",
"label": "应用名称",
"size": "sm",
value: selectedId
}, { vallue: selectedId, onChange: handleChange })),
react_1.default.createElement("div", { className: 'quick-launch-drawer-body-top-block' }),
react_1.default.createElement("div", { className: 'quick-launch-drawer-header-search' },
react_1.default.createElement(antd_1.Input, { placeholder: '\u641C\u7D22\u540D\u79F0', onChange: onSearch, defaultValue: defaultValue.current })),
react_1.default.createElement("div", { className: 'quick-launch-drawer-body-bot' },
react_1.default.createElement("div", { className: 'quick-launch-drawer-body-left' },
react_1.default.createElement("div", { className: 'quick-launch-drawer-body-left-list' }, (_b = (_a = appList.find(function (node) { return node.appId === selectedId; })) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.map(function (item) { return react_1.default.createElement("div", { key: item.key, className: "quick-launch-drawer-body-left-list-item " + (selectedKeys.includes(item.key) ? 'active-item' : ''), onClick: function () {
var _a;
setSelectedKeys([item.key]);
var dom = (_a = pageBodyRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('#' + item.menuId);
if (dom) {
dom.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
} }, item.title); }))),
react_1.default.createElement("div", { className: 'quick-launch-drawer-body-right' },
react_1.default.createElement("div", { className: 'quick-launch-drawer-body-right-content', ref: pageBodyRef }, renderItem()))),
react_1.default.createElement("div", { className: 'quick-launch-drawer-body-footer' },
react_1.default.createElement("div", null,
"\u5DF2\u9009\u62E9\uFF1A",
selectList.length,
"\u4E2A\u8282\u70B9"),
react_1.default.createElement(antd_1.Button, { type: 'primary', onClick: handleOk }, "\u5B8C\u6210")))))));
};
// 将组件注册到 amis 渲染器中
exports.default = (0, factory_1.Renderer)({
type: 'quick-launch'
})(QuickLaunch);
//# sourceMappingURL=./renderers/QuickLaunch.js.map