cyber-web-ui
Version:
spring-cyber前端ui框架
297 lines (295 loc) • 12.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _icon = _interopRequireDefault(require("../icon"));
var _antDesignVue = require("ant-design-vue");
var _vueRouter = require("vue-router");
var _store = require("../_utils/store");
var _config = require("../_utils/config");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var SubMenu = (0, _vue.defineComponent)({
name: 'SubMenu',
props: {
menuItem: {
type: Object,
default: function _default() {}
}
},
setup: function setup(props, _ref) {
var attrs = _ref.attrs,
slots = _ref.slots,
emit = _ref.emit,
expose = _ref.expose;
var isSubMenu = (0, _vue.computed)(function () {
var _props$menuItem, _props$menuItem2, _props$menuItem3;
return !((_props$menuItem = props.menuItem) !== null && _props$menuItem !== void 0 && _props$menuItem.component) || ((_props$menuItem2 = props.menuItem) === null || _props$menuItem2 === void 0 || (_props$menuItem2 = _props$menuItem2.children) === null || _props$menuItem2 === void 0 ? void 0 : _props$menuItem2.length) > 0 && (((_props$menuItem3 = props.menuItem) === null || _props$menuItem3 === void 0 ? void 0 : _props$menuItem3.children) || []).some(function (item) {
return item.visible === 0;
});
});
return function () {
if (props.menuItem.visible === 1) return;
function iconSlot() {
var _props$menuItem4, _props$menuItem5;
if (!((_props$menuItem4 = props.menuItem) !== null && _props$menuItem4 !== void 0 && _props$menuItem4.icon)) return;
return (0, _vue.createVNode)(_icon.default, {
"icon": (_props$menuItem5 = props.menuItem) === null || _props$menuItem5 === void 0 ? void 0 : _props$menuItem5.icon,
"size": "16"
}, null);
}
function subMenuSlot() {
var _props$menuItem8;
var subMenuSlot = {
icon: iconSlot,
expandIcon: function expandIcon() {
return (0, _vue.createVNode)(_icon.default, {
"icon": "cyber-drop-down",
"size": "20",
"class": "expand-icon"
}, null);
},
title: function title() {
var _props$menuItem6;
return (0, _vue.createVNode)("span", null, [(_props$menuItem6 = props.menuItem) === null || _props$menuItem6 === void 0 ? void 0 : _props$menuItem6.name]);
},
default: function _default() {
var _props$menuItem7;
return (((_props$menuItem7 = props.menuItem) === null || _props$menuItem7 === void 0 ? void 0 : _props$menuItem7.children) || []).map(function (item) {
return (0, _vue.createVNode)(SubMenu, {
"menu-item": item
}, null);
});
}
};
return (0, _vue.createVNode)(_antDesignVue.SubMenu, {
"key": (_props$menuItem8 = props.menuItem) === null || _props$menuItem8 === void 0 ? void 0 : _props$menuItem8.id
}, subMenuSlot);
}
function menuItemSlot() {
var _props$menuItem12;
var itemSlots = {
icon: iconSlot,
default: function _default() {
var _props$menuItem9, _props$menuItem10, _props$menuItem11;
var name = (_props$menuItem9 = props.menuItem) === null || _props$menuItem9 === void 0 ? void 0 : _props$menuItem9.name;
// 外链地址
if (props.menuItem.isFrame == '0') {
return (0, _vue.createVNode)("a", {
"href": props.menuItem.path,
"target": "_blank"
}, [name]);
}
var product = ((_props$menuItem10 = props.menuItem) === null || _props$menuItem10 === void 0 ? void 0 : _props$menuItem10.productInfo) || {};
var path = ((_props$menuItem11 = props.menuItem) === null || _props$menuItem11 === void 0 ? void 0 : _props$menuItem11.path) || '';
var isCurrentProduct = _config.PRODUCT_CODE == product.code;
if (!isCurrentProduct) {
path = "".concat((product.portalAdd || '').replace(/\/$/, ''), "/").concat(path.replace(/^\//, ''));
}
return isCurrentProduct ? (0, _vue.createVNode)(_vueRouter.RouterLink, {
"to": path
}, {
default: function _default() {
return [name];
}
}) : (0, _vue.createVNode)("a", {
"href": path,
"target": "_self"
}, [name]);
}
};
return (0, _vue.createVNode)(_antDesignVue.MenuItem, {
"key": (_props$menuItem12 = props.menuItem) === null || _props$menuItem12 === void 0 ? void 0 : _props$menuItem12.id
}, itemSlots);
}
return isSubMenu.value ? subMenuSlot() : menuItemSlot();
};
}
});
// 转换路径，将自定义变量转为值
var transformSidebar = function transformSidebar(target) {
if (Array.isArray(target)) return target.map(function (item) {
return transformSidebar(item);
});
if (Array.isArray(target.children)) target.children = transformSidebar(target.children);
if (/\$\$.+\$\$/.test(target.path)) {
target.path = target.path.split('$$').map(function (value, index) {
if (index % 2 === 0) return value;
return (0, _store.maintainStore)()[value] || "$$".concat(value, "$$");
}).join('');
}
return target;
};
var LayoutSiderbar = (0, _vue.defineComponent)({
name: 'CLayoutSiderbar',
props: {},
setup: function setup(props, _ref2) {
var attrs = _ref2.attrs,
slots = _ref2.slots,
emit = _ref2.emit,
expose = _ref2.expose;
var $useRoute = (0, _vueRouter.useRoute)();
var $permissionStore = (0, _store.permissionStore)();
var sidebarState = (0, _vue.reactive)({
search: undefined,
openKeys: [],
selectedKeys: [],
highlight: []
});
var sidebarRoutes = (0, _vue.computed)(function () {
return JSON.parse(JSON.stringify($permissionStore.sidebarRoutes || [])).filter(function (item) {
return item.type != 'product' || item.isFavorite;
}).map(function (item) {
if (item.code !== _config.PRODUCT_CODE) return item;
return transformSidebar(item);
});
});
// 菜单展开事件
function onOpenChange(openKeys) {
var _sidebarState$openKey;
if (openKeys.length > ((_sidebarState$openKey = sidebarState.openKeys) === null || _sidebarState$openKey === void 0 ? void 0 : _sidebarState$openKey.length)) {
var lastOpenKey = openKeys[openKeys.length - 1];
var reg = new RegExp("\"id\":\"".concat(lastOpenKey, "\""));
var route = sidebarRoutes.value.find(function (item) {
return reg.test(JSON.stringify(item));
});
if (route) {
var select = [];
getSelect(route, 'id', lastOpenKey, select);
sidebarState.openKeys = select;
}
} else {
sidebarState.openKeys = openKeys;
}
}
// 更新选择
function updateSelected(path) {
var route = sidebarRoutes.value.find(function (item) {
return _config.PRODUCT_CODE == item.code;
});
if (route) {
var select = [];
getSelect(route, 'path', path, select);
sidebarState.selectedKeys = select.slice(0, 1);
sidebarState.openKeys = select;
}
}
// 获取选择
function getSelect(route) {
var _route$children;
var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'path';
var value = arguments.length > 2 ? arguments[2] : undefined;
var list = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
if (route[key]) {
var reg = key == 'path' ? new RegExp("^/?".concat(route[key].replace(/^\//, '').replace(/:[^\/]+|\$\$[^\/]+\$\$/g, '[^\/]+'), "$")) : new RegExp("^".concat(route[key], "$"));
if (reg.test(value)) {
if (route.visible === 0 || route.type == 'product') list.push(route.id);
return true;
}
}
if ((_route$children = route.children) !== null && _route$children !== void 0 && _route$children.length) {
var find = route.children.find(function (item) {
return getSelect(item, key, value, list);
});
if (!find) return false;
list.push(route.id);
return true;
}
}
// 显示收藏
function showCollections(event) {
event.stopPropagation();
event.preventDefault();
emit('showCollections');
}
function searchProduct(event) {
var value = event.target.value;
sidebarState.highlight = [];
sidebarState.openKeys = [];
if (!value) return;
var reg = new RegExp(value);
sidebarRoutes.value.forEach(function (item) {
if (reg.test(item.name)) sidebarState.highlight.push(item.id);
});
sidebarState.openKeys = _toConsumableArray(sidebarState.highlight);
}
(0, _vue.watch)(function () {
return $useRoute.path;
}, function (path) {
updateSelected(path);
}, {
immediate: true,
deep: true
});
return function () {
function searchSlot() {
return (0, _vue.createVNode)("div", {
"class": "cyber-layout-sidebar-search-block"
}, [(0, _vue.createVNode)(_antDesignVue.Input, {
"value": sidebarState.search,
"onUpdate:value": function onUpdateValue($event) {
return sidebarState.search = $event;
},
"placeholder": "\u8F93\u5165\u5E94\u7528\u540D\u79F0\u641C\u7D22...",
"class": "cyber-layout-menu-search",
"onChange": searchProduct
}, {
prefix: function prefix() {
return (0, _vue.createVNode)(_icon.default, {
"isSvg": true,
"icon": "cyber-sousuo",
"size": "16",
"class": "cyber-layout-menu-search-icon"
}, null);
},
suffix: function suffix() {
return (0, _vue.createVNode)(_icon.default, {
"isSvg": true,
"size": "16",
"icon": "cyber-peizhixiang1",
"style": "cursor: pointer",
"onClick": showCollections
}, null);
}
})]);
}
function menuSlot() {
return (0, _vue.createVNode)(_antDesignVue.Menu, {
"mode": "inline",
"theme": "light",
"class": "cyber-layout-menu-ul",
"multiple": true,
"openKeys": sidebarState.openKeys,
"selectedKeys": sidebarState.selectedKeys,
"onOpenChange": onOpenChange
}, {
default: function _default() {
return [sidebarRoutes.value.map(function (item) {
return (0, _vue.createVNode)(SubMenu, {
"menu-item": item,
"class": {
'cyber-menu-submenu-selected': sidebarState.highlight.some(function (citem) {
return citem == item.id;
})
}
}, null);
})];
}
});
}
return (0, _vue.createVNode)("div", {
"class": "cyber-layout-sidebar"
}, [(0, _vue.createVNode)("div", {
"class": "cyber-layout-sidebar-container"
}, [searchSlot(), menuSlot()])]);
};
}
});
var _default2 = exports.default = LayoutSiderbar;