web-component-gallery 0.1.60 → 0.1.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/amap.umd.js +1 -1
  2. package/dist/index.umd.js +1 -1
  3. package/dist/tree.umd.js +1 -1
  4. package/lib/tree/Directory.js +9 -0
  5. package/package.json +1 -1
  6. package/plugins/lib/tree/Directory.js +9 -0
package/dist/amap.umd.js CHANGED
@@ -8945,7 +8945,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ind
8945
8945
  /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
8946
8946
 
8947
8947
  "use strict";
8948
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _utils_Tree__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../utils/Tree */ \"./plugins/utils/Tree.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/tree/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/input/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/dropdown/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/icon/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/button/index.js\");\n/* harmony import */ var _style_Directory_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style/Directory.less */ \"./plugins/lib/tree/style/Directory.less\");\n\n\n\n\n\n\n/* 明天来了做一下@快捷指向 */\n\nconst TreeNode = ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"].TreeNode;\nconst DirectoryTree = ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"].DirectoryTree;\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'DirectoryTreeMenu',\n props: {\n treeData: {\n type: Array,\n default: () => []\n },\n treeExpandKeys: {\n type: Array,\n default: () => []\n },\n treePlus: {\n type: Boolean,\n default: true\n },\n treeActions: {\n type: Array,\n default: () => []\n },\n treeActionsPlus: {\n type: Boolean,\n default: true\n },\n replaceFields: {\n type: Object,\n default: () => ({\n children: 'children',\n key: 'id',\n title: 'title'\n })\n }\n },\n data() {\n return {\n NodeSelectedKeys: [],\n NodeExpandKeys: [],\n NodeKey: [],\n NodeActions: null,\n MenuDropdown: false,\n NodeActionsStyle: {}\n };\n },\n mounted() {\n this.onInitTree();\n },\n watch: {\n treeData(newValue, oldValue) {\n this.onInitTree(!oldValue.length);\n },\n treeExpandKeys(newValue) {\n this.NodeExpandKeys = newValue;\n }\n },\n methods: {\n TreeNodeRender(node, nodeIndex, parentNode) {\n const h = this.$createElement;\n const {\n replaceFields,\n NodeActions,\n treeActions,\n NodeActionsStyle,\n NodeExpandKeys,\n NodeKey,\n treeActionsPlus,\n createTreeNode,\n handleMouseLeave,\n handleOperateClick,\n handlePlusClick\n } = this;\n const key = node[replaceFields.key];\n return h(TreeNode, {\n \"key\": key,\n \"class\": \"DirectoryTreeMenu__Node\",\n \"scopedSlots\": {\n title: props => {\n return h(\"div\", {\n \"class\": \"__Title\"\n }, [node.type != 'input' ? h(\"span\", [node[replaceFields.title]]) : h(ant_design_vue__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n \"attrs\": {\n \"placeholder\": \"请输入节点名称\",\n \"default-value\": node[replaceFields.title]\n },\n \"on\": {\n ...{\n blur: ({\n target\n }) => createTreeNode(target, node),\n pressEnter: event => event.target.blur(event, true)\n }\n },\n \"ref\": \"inputNodeRef\"\n }), NodeActions && Boolean(treeActions.length) && NodeKey.includes(props.eventKey) && node.type != 'input' && h(\"div\", {\n \"ref\": \"TreeMenuActions\",\n \"class\": \"DirectoryTreeMenu__Actions\",\n \"on\": {\n ...{\n mouseenter: event => event.stopPropagation()\n }\n }\n }, [h(ant_design_vue__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n \"attrs\": {\n \"trigger\": ['click'],\n \"overlayClassName\": \"DirectoryTreeMenu__Dropdown\"\n }\n }, [h(\"svg-icon\", {\n \"class\": \"ActionsIcons\",\n \"attrs\": {\n \"icon-class\": \"tree-more\"\n },\n \"on\": {\n ...{\n click: e => e.preventDefault()\n }\n }\n }), h(\"div\", {\n \"slot\": \"overlay\",\n \"class\": \"DirectoryTreeMenu__Dropdown__Menu\"\n }, [treeActions.map((handle, i) => {\n return h(\"span\", {\n \"key\": i,\n \"on\": {\n ...{\n // this.$emit('handleOperateClick', handle, NodeActions)\n click: () => handleOperateClick(handle, {\n ...node,\n nodeIndex\n }, parentNode)\n }\n }\n }, [h(\"svg-icon\", {\n \"attrs\": {\n \"icon-class\": handle.svg\n }\n }), \" \", handle.text]);\n })])]), treeActionsPlus && h(\"svg-icon\", {\n \"class\": \"ActionsIcons\",\n \"attrs\": {\n \"icon-class\": \"tree-plus\"\n },\n \"on\": {\n ...{\n click: () => handlePlusClick()\n }\n }\n })])]);\n }\n }\n }, [node[replaceFields.children] && node[replaceFields.children].length && node[replaceFields.children].map((childNode, childNodeIndex) => this.TreeNodeRender(childNode, childNodeIndex, node))]);\n },\n appendTreeNode() {\n this.treeData.push({\n type: 'input',\n append: true,\n [this.replaceFields.key]: new Date().getTime()\n });\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n },\n createTreeNode({\n value\n }, node) {\n this.$set(node, 'type', 'text');\n this.$emit(`handlePlus${node.append ? 'Add' : 'Update'}`, value, node.append ? node.parentOrgId : node[this.replaceFields.key]);\n const parentNodes = node.parentOrgId ? this.findItemById(this.treeData, node.parentOrgId)[this.replaceFields.children] : this.treeData;\n if (node.append) {\n const i = parentNodes.findIndex(child => child[this.replaceFields.key] == node[this.replaceFields.key]);\n parentNodes.splice(i, 1);\n }\n },\n handleOperateClick(handle, node, parentNode) {\n const key = node[this.replaceFields.key];\n let that = this;\n switch (handle.type) {\n case 'update':\n const updateNode = this.findItemById(this.treeData, key);\n this.$set(updateNode, 'type', 'input');\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n break;\n case 'copy':\n // 明天来了优化一下\n const cloneNode = parentNode ? parentNode[this.replaceFields.children] : this.treeData;\n cloneNode.splice(node.nodeIndex + 1, 0, {\n type: 'input',\n append: true,\n parentOrgId: parentNode ? parentNode[this.replaceFields.key] : null,\n [this.replaceFields.key]: new Date().getTime(),\n [this.replaceFields.title]: node[this.replaceFields.title]\n });\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n break;\n case 'delete':\n this.$confirm({\n title: '确定要删除当前节点吗?',\n okText: '确定',\n cancelText: '取消',\n onOk() {\n that.$emit('handleDeleteClick', node);\n console.log('OK');\n },\n onCancel() {\n console.log('Cancel');\n }\n });\n break;\n default:\n this.$emit('handleOperateClick', handle, node);\n break;\n }\n },\n handlePlusClick() {\n const node = this.findItemById(this.treeData, this.NodeActions.id);\n console.log(node, this.NodeActions, '--NodeActions');\n const childNode = node[this.replaceFields.children] ?? [];\n childNode.push({\n type: 'input',\n append: true,\n parentOrgId: this.NodeActions.id,\n [this.replaceFields.key]: new Date().getTime()\n });\n this.NodeExpandKeys.push(this.NodeActions.id);\n node[this.replaceFields.children] = childNode;\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n console.log(node, '--NodeActions');\n },\n findItemById(treeData, id) {\n for (let i = 0; i < treeData.length; i++) {\n if (treeData[i][this.replaceFields.key] === id) return treeData[i];\n let childNode = treeData[i][this.replaceFields.children];\n if (childNode && childNode.length > 0) {\n const foundItem = this.findItemById(treeData[i][this.replaceFields.children], id);\n if (foundItem) return foundItem;\n }\n }\n },\n onInitTree(treeExpend = true) {\n this.treeData && (this.NodeSelectedKeys = [this.treeData.at(0)?.[this.replaceFields.key]]);\n this.NodeExpandKeys = this.treeExpandKeys.length && this.treeExpandKeys || treeExpend && (0,_utils_Tree__WEBPACK_IMPORTED_MODULE_1__.getTreeKey)(this.treeData, true, this.replaceFields) || [];\n },\n onSelect(keys, {\n nativeEvent,\n node\n }) {\n this.NodeSelectedKeys = keys;\n this.NodeKey = [].concat(this.NodeSelectedKeys);\n this.$emit('onSelect', keys);\n },\n onExpand(expandedKeys, {\n expanded,\n node\n }) {\n this.NodeExpandKeys = [].concat(expandedKeys);\n console.log(expandedKeys, expanded, node, 'Trigger Expand');\n },\n getIcon(props) {\n const h = this.$createElement;\n const {\n isLeaf,\n expanded\n } = props;\n if (isLeaf) {\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n \"attrs\": {\n \"type\": \"home\"\n }\n });\n }\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n \"attrs\": {\n \"type\": expanded ? 'folder-open' : 'folder'\n }\n });\n },\n handleMouseEnter({\n event,\n node\n }) {\n this.NodeActions = {\n id: node._props.eventKey,\n title: node._props.title,\n parentOrgId: node.$parent.eventKey || null\n };\n // this.MenuDropdown = false \n this.NodeKey = [].concat(this.NodeSelectedKeys);\n this.NodeKey.push(node.eventKey);\n // console.log(node, 'handleMouseEnter')\n // 是否加个参数 判断是否处于打开状态\n },\n handleMouseLeave({\n event,\n node\n }) {\n if (this.NodeKey.includes(node.eventKey) && this.NodeSelectedKeys != node.eventKey) {\n const i = this.NodeKey.findIndex(key => key == node.eventKey);\n this.NodeKey.splice(i, 1);\n }\n // this.NodeKey = []\n },\n onDragEnter(node) {\n console.log(node, '--onDragEnter');\n // expandedKeys 需要受控时设置\n // this.expandedKeys = info.expandedKeys\n },\n onDrop(info) {\n const dragKey = info.dragNode.eventKey;\n const dropPos = info.node.pos.split(\"-\");\n // 拖动的位置\n const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\n const node = info.node; //目标节点\n const dragNode = info.dragNode; // 拖动节点\n const dropKey = node.eventKey;\n console.log(dragNode, node, '--dropToGap');\n if (dragNode.$parent?.eventKey !== node.$parent?.eventKey || !info.dropToGap) {\n // 阻止跨父级拖拽\n this.$message.warning(\"只能在同级排序\");\n return false;\n }\n const {\n key,\n children\n } = this.replaceFields;\n const loop = (data, eventKey, callback) => {\n data.forEach((node, i, array) => {\n if (node[key] === eventKey) {\n return callback(node, i, array);\n }\n if (node[children]) {\n return loop(node[children], eventKey, callback);\n }\n });\n };\n const data = [...this.treeData];\n let dragObj;\n let dragObjIndex;\n loop(data, dragKey, (node, i, array) => {\n dragObj = node;\n dragObjIndex = i;\n });\n let dropIndex;\n loop(data, dropKey, (node, i, array) => {\n dropIndex = i;\n console.log(node, i, dragObj, dragObjIndex, '--i');\n });\n this.$emit('onDrop', {\n [key]: dragObj[key],\n originalIndex: dragObjIndex,\n presentIndex: dropPosition === -1 ? dropIndex : dropIndex + 1\n });\n }\n },\n render() {\n const h = arguments[0];\n const {\n $attrs,\n treePlus,\n treeData,\n NodeSelectedKeys,\n NodeExpandKeys,\n onSelect,\n onExpand,\n handleMouseEnter,\n handleMouseLeave,\n onDragEnter,\n onDrop,\n TreeNodeRender,\n appendTreeNode,\n replaceFields\n } = this;\n return h(\"div\", {\n \"class\": \"DirectoryTreeMenu\"\n }, [h(\"div\", {\n \"class\": \"treeDirectory\"\n }, [h(\"span\", [$attrs.menuTitle || '目录']), treePlus && h(ant_design_vue__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n \"attrs\": {\n \"icon\": \"plus\",\n \"size\": \"small\"\n },\n \"on\": {\n ...{\n click: appendTreeNode\n }\n }\n })]), h(DirectoryTree, {\n \"attrs\": {\n \"draggable\": true,\n \"default-expand-all\": true,\n \"selectedKeys\": NodeSelectedKeys,\n \"expandedKeys\": NodeExpandKeys,\n \"expandAction\": \"dblclick\",\n ...$attrs,\n \"tree-node-filter-prop\": \"title\"\n },\n \"class\": \"DirectoryTreeMenu__Tree\",\n \"on\": {\n ...{\n select: onSelect,\n expand: onExpand,\n mouseenter: handleMouseEnter,\n mouseleave: handleMouseLeave,\n dragenter: onDragEnter,\n drop: onDrop\n }\n }\n }, [treeData.map((node, nodeIndex) => TreeNodeRender(node, nodeIndex))])]);\n }\n});\n\n//# sourceURL=webpack://mui/./plugins/lib/tree/Directory.js?");
8948
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _utils_Tree__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../utils/Tree */ \"./plugins/utils/Tree.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/tree/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/input/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/dropdown/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/icon/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/button/index.js\");\n/* harmony import */ var _style_Directory_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style/Directory.less */ \"./plugins/lib/tree/style/Directory.less\");\n\n\n\n\n\n\n/* 明天来了做一下@快捷指向 */\n\nconst TreeNode = ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"].TreeNode;\nconst DirectoryTree = ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"].DirectoryTree;\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'DirectoryTreeMenu',\n props: {\n treeData: {\n type: Array,\n default: () => []\n },\n treeExpandKeys: {\n type: Array,\n default: () => []\n },\n treePlus: {\n type: Boolean,\n default: true\n },\n treeActions: {\n type: Array,\n default: () => []\n },\n treeActionsPlus: {\n type: Boolean,\n default: true\n },\n replaceFields: {\n type: Object,\n default: () => ({\n children: 'children',\n key: 'id',\n title: 'title'\n })\n }\n },\n data() {\n return {\n NodeCheckedKeys: [],\n NodeSelectedKeys: [],\n NodeExpandKeys: [],\n NodeKey: [],\n NodeActions: null,\n MenuDropdown: false,\n NodeActionsStyle: {}\n };\n },\n mounted() {\n this.onInitTree();\n },\n watch: {\n treeData(newValue, oldValue) {\n this.onInitTree(!oldValue.length);\n },\n treeExpandKeys(newValue) {\n this.NodeExpandKeys = newValue;\n }\n },\n methods: {\n TreeNodeRender(node, nodeIndex, parentNode) {\n const h = this.$createElement;\n const {\n replaceFields,\n NodeActions,\n treeActions,\n NodeActionsStyle,\n NodeExpandKeys,\n NodeKey,\n treeActionsPlus,\n createTreeNode,\n handleMouseLeave,\n handleOperateClick,\n handlePlusClick\n } = this;\n const key = node[replaceFields.key];\n return h(TreeNode, {\n \"key\": key,\n \"class\": \"DirectoryTreeMenu__Node\",\n \"scopedSlots\": {\n title: props => {\n return h(\"div\", {\n \"class\": \"__Title\"\n }, [node.type != 'input' ? h(\"span\", [node[replaceFields.title]]) : h(ant_design_vue__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n \"attrs\": {\n \"placeholder\": \"请输入节点名称\",\n \"default-value\": node[replaceFields.title]\n },\n \"on\": {\n ...{\n blur: ({\n target\n }) => createTreeNode(target, node),\n pressEnter: event => event.target.blur(event, true)\n }\n },\n \"ref\": \"inputNodeRef\"\n }), NodeActions && Boolean(treeActions.length) && NodeKey.includes(props.eventKey) && node.type != 'input' && h(\"div\", {\n \"ref\": \"TreeMenuActions\",\n \"class\": \"DirectoryTreeMenu__Actions\",\n \"on\": {\n ...{\n mouseenter: event => event.stopPropagation()\n }\n }\n }, [h(ant_design_vue__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n \"attrs\": {\n \"trigger\": ['click'],\n \"overlayClassName\": \"DirectoryTreeMenu__Dropdown\"\n }\n }, [h(\"svg-icon\", {\n \"class\": \"ActionsIcons\",\n \"attrs\": {\n \"icon-class\": \"tree-more\"\n },\n \"on\": {\n ...{\n click: e => e.preventDefault()\n }\n }\n }), h(\"div\", {\n \"slot\": \"overlay\",\n \"class\": \"DirectoryTreeMenu__Dropdown__Menu\"\n }, [treeActions.map((handle, i) => {\n return h(\"span\", {\n \"key\": i,\n \"on\": {\n ...{\n // this.$emit('handleOperateClick', handle, NodeActions)\n click: () => handleOperateClick(handle, {\n ...node,\n nodeIndex\n }, parentNode)\n }\n }\n }, [h(\"svg-icon\", {\n \"attrs\": {\n \"icon-class\": handle.svg\n }\n }), \" \", handle.text]);\n })])]), treeActionsPlus && h(\"svg-icon\", {\n \"class\": \"ActionsIcons\",\n \"attrs\": {\n \"icon-class\": \"tree-plus\"\n },\n \"on\": {\n ...{\n click: () => handlePlusClick()\n }\n }\n })])]);\n }\n }\n }, [node[replaceFields.children] && node[replaceFields.children].length && node[replaceFields.children].map((childNode, childNodeIndex) => this.TreeNodeRender(childNode, childNodeIndex, node))]);\n },\n appendTreeNode() {\n this.treeData.push({\n type: 'input',\n append: true,\n [this.replaceFields.key]: new Date().getTime()\n });\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n },\n createTreeNode({\n value\n }, node) {\n this.$set(node, 'type', 'text');\n this.$emit(`handlePlus${node.append ? 'Add' : 'Update'}`, value, node.append ? node.parentOrgId : node[this.replaceFields.key]);\n const parentNodes = node.parentOrgId ? this.findItemById(this.treeData, node.parentOrgId)[this.replaceFields.children] : this.treeData;\n if (node.append) {\n const i = parentNodes.findIndex(child => child[this.replaceFields.key] == node[this.replaceFields.key]);\n parentNodes.splice(i, 1);\n }\n },\n handleOperateClick(handle, node, parentNode) {\n const key = node[this.replaceFields.key];\n let that = this;\n switch (handle.type) {\n case 'update':\n const updateNode = this.findItemById(this.treeData, key);\n this.$set(updateNode, 'type', 'input');\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n break;\n case 'copy':\n // 明天来了优化一下\n const cloneNode = parentNode ? parentNode[this.replaceFields.children] : this.treeData;\n cloneNode.splice(node.nodeIndex + 1, 0, {\n type: 'input',\n append: true,\n parentOrgId: parentNode ? parentNode[this.replaceFields.key] : null,\n [this.replaceFields.key]: new Date().getTime(),\n [this.replaceFields.title]: node[this.replaceFields.title]\n });\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n break;\n case 'delete':\n this.$confirm({\n title: '确定要删除当前节点吗?',\n okText: '确定',\n cancelText: '取消',\n onOk() {\n that.$emit('handleDeleteClick', node);\n console.log('OK');\n },\n onCancel() {\n console.log('Cancel');\n }\n });\n break;\n default:\n this.$emit('handleOperateClick', handle, node);\n break;\n }\n },\n handlePlusClick() {\n const node = this.findItemById(this.treeData, this.NodeActions.id);\n console.log(node, this.NodeActions, '--NodeActions');\n const childNode = node[this.replaceFields.children] ?? [];\n childNode.push({\n type: 'input',\n append: true,\n parentOrgId: this.NodeActions.id,\n [this.replaceFields.key]: new Date().getTime()\n });\n this.NodeExpandKeys.push(this.NodeActions.id);\n node[this.replaceFields.children] = childNode;\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n console.log(node, '--NodeActions');\n },\n findItemById(treeData, id) {\n for (let i = 0; i < treeData.length; i++) {\n if (treeData[i][this.replaceFields.key] === id) return treeData[i];\n let childNode = treeData[i][this.replaceFields.children];\n if (childNode && childNode.length > 0) {\n const foundItem = this.findItemById(treeData[i][this.replaceFields.children], id);\n if (foundItem) return foundItem;\n }\n }\n },\n onInitTree(treeExpend = true) {\n this.treeData && (this.NodeSelectedKeys = [this.treeData.at(0)?.[this.replaceFields.key]]);\n this.NodeExpandKeys = this.treeExpandKeys.length && this.treeExpandKeys || treeExpend && (0,_utils_Tree__WEBPACK_IMPORTED_MODULE_1__.getTreeKey)(this.treeData, true, this.replaceFields) || [];\n },\n onCheck(keys, {}) {\n this.NodeCheckedKeys = keys;\n this.$emit('onCheck', keys);\n },\n onSelect(keys, {\n nativeEvent,\n node\n }) {\n this.NodeSelectedKeys = keys;\n this.NodeKey = [].concat(this.NodeSelectedKeys);\n this.$emit('onSelect', keys);\n },\n onExpand(expandedKeys, {\n expanded,\n node\n }) {\n this.NodeExpandKeys = [].concat(expandedKeys);\n console.log(expandedKeys, expanded, node, 'Trigger Expand');\n },\n getIcon(props) {\n const h = this.$createElement;\n const {\n isLeaf,\n expanded\n } = props;\n if (isLeaf) {\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n \"attrs\": {\n \"type\": \"home\"\n }\n });\n }\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n \"attrs\": {\n \"type\": expanded ? 'folder-open' : 'folder'\n }\n });\n },\n handleMouseEnter({\n event,\n node\n }) {\n this.NodeActions = {\n id: node._props.eventKey,\n title: node._props.title,\n parentOrgId: node.$parent.eventKey || null\n };\n // this.MenuDropdown = false \n this.NodeKey = [].concat(this.NodeSelectedKeys);\n this.NodeKey.push(node.eventKey);\n // console.log(node, 'handleMouseEnter')\n // 是否加个参数 判断是否处于打开状态\n },\n handleMouseLeave({\n event,\n node\n }) {\n if (this.NodeKey.includes(node.eventKey) && this.NodeSelectedKeys != node.eventKey) {\n const i = this.NodeKey.findIndex(key => key == node.eventKey);\n this.NodeKey.splice(i, 1);\n }\n // this.NodeKey = []\n },\n onDragEnter(node) {\n console.log(node, '--onDragEnter');\n // expandedKeys 需要受控时设置\n // this.expandedKeys = info.expandedKeys\n },\n onDrop(info) {\n const dragKey = info.dragNode.eventKey;\n const dropPos = info.node.pos.split(\"-\");\n // 拖动的位置\n const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\n const node = info.node; //目标节点\n const dragNode = info.dragNode; // 拖动节点\n const dropKey = node.eventKey;\n console.log(dragNode, node, '--dropToGap');\n if (dragNode.$parent?.eventKey !== node.$parent?.eventKey || !info.dropToGap) {\n // 阻止跨父级拖拽\n this.$message.warning(\"只能在同级排序\");\n return false;\n }\n const {\n key,\n children\n } = this.replaceFields;\n const loop = (data, eventKey, callback) => {\n data.forEach((node, i, array) => {\n if (node[key] === eventKey) {\n return callback(node, i, array);\n }\n if (node[children]) {\n return loop(node[children], eventKey, callback);\n }\n });\n };\n const data = [...this.treeData];\n let dragObj;\n let dragObjIndex;\n loop(data, dragKey, (node, i, array) => {\n dragObj = node;\n dragObjIndex = i;\n });\n let dropIndex;\n loop(data, dropKey, (node, i, array) => {\n dropIndex = i;\n console.log(node, i, dragObj, dragObjIndex, '--i');\n });\n this.$emit('onDrop', {\n [key]: dragObj[key],\n originalIndex: dragObjIndex,\n presentIndex: dropPosition === -1 ? dropIndex : dropIndex + 1\n });\n }\n },\n render() {\n const h = arguments[0];\n const {\n $attrs,\n treePlus,\n treeData,\n NodeCheckedKeys,\n NodeSelectedKeys,\n NodeExpandKeys,\n onCheck,\n onSelect,\n onExpand,\n handleMouseEnter,\n handleMouseLeave,\n onDragEnter,\n onDrop,\n TreeNodeRender,\n appendTreeNode,\n replaceFields\n } = this;\n return h(\"div\", {\n \"class\": \"DirectoryTreeMenu\"\n }, [h(\"div\", {\n \"class\": \"treeDirectory\"\n }, [h(\"span\", [$attrs.menuTitle || '目录']), treePlus && h(ant_design_vue__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n \"attrs\": {\n \"icon\": \"plus\",\n \"size\": \"small\"\n },\n \"on\": {\n ...{\n click: appendTreeNode\n }\n }\n })]), h(DirectoryTree, {\n \"attrs\": {\n \"draggable\": true,\n \"default-expand-all\": true,\n \"checkedKeys\": NodeCheckedKeys,\n \"selectedKeys\": NodeSelectedKeys,\n \"expandedKeys\": NodeExpandKeys,\n \"expandAction\": \"dblclick\",\n ...$attrs,\n \"tree-node-filter-prop\": \"title\"\n },\n \"class\": \"DirectoryTreeMenu__Tree\",\n \"on\": {\n ...{\n check: onCheck,\n select: onSelect,\n expand: onExpand,\n mouseenter: handleMouseEnter,\n mouseleave: handleMouseLeave,\n dragenter: onDragEnter,\n drop: onDrop\n }\n }\n }, [treeData.map((node, nodeIndex) => TreeNodeRender(node, nodeIndex))])]);\n }\n});\n\n//# sourceURL=webpack://mui/./plugins/lib/tree/Directory.js?");
8949
8949
 
8950
8950
  /***/ }),
8951
8951
 
package/dist/index.umd.js CHANGED
@@ -8945,7 +8945,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ind
8945
8945
  /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
8946
8946
 
8947
8947
  "use strict";
8948
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _utils_Tree__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../utils/Tree */ \"./plugins/utils/Tree.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/tree/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/input/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/dropdown/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/icon/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/button/index.js\");\n/* harmony import */ var _style_Directory_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style/Directory.less */ \"./plugins/lib/tree/style/Directory.less\");\n\n\n\n\n\n\n/* 明天来了做一下@快捷指向 */\n\nconst TreeNode = ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"].TreeNode;\nconst DirectoryTree = ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"].DirectoryTree;\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'DirectoryTreeMenu',\n props: {\n treeData: {\n type: Array,\n default: () => []\n },\n treeExpandKeys: {\n type: Array,\n default: () => []\n },\n treePlus: {\n type: Boolean,\n default: true\n },\n treeActions: {\n type: Array,\n default: () => []\n },\n treeActionsPlus: {\n type: Boolean,\n default: true\n },\n replaceFields: {\n type: Object,\n default: () => ({\n children: 'children',\n key: 'id',\n title: 'title'\n })\n }\n },\n data() {\n return {\n NodeSelectedKeys: [],\n NodeExpandKeys: [],\n NodeKey: [],\n NodeActions: null,\n MenuDropdown: false,\n NodeActionsStyle: {}\n };\n },\n mounted() {\n this.onInitTree();\n },\n watch: {\n treeData(newValue, oldValue) {\n this.onInitTree(!oldValue.length);\n },\n treeExpandKeys(newValue) {\n this.NodeExpandKeys = newValue;\n }\n },\n methods: {\n TreeNodeRender(node, nodeIndex, parentNode) {\n const h = this.$createElement;\n const {\n replaceFields,\n NodeActions,\n treeActions,\n NodeActionsStyle,\n NodeExpandKeys,\n NodeKey,\n treeActionsPlus,\n createTreeNode,\n handleMouseLeave,\n handleOperateClick,\n handlePlusClick\n } = this;\n const key = node[replaceFields.key];\n return h(TreeNode, {\n \"key\": key,\n \"class\": \"DirectoryTreeMenu__Node\",\n \"scopedSlots\": {\n title: props => {\n return h(\"div\", {\n \"class\": \"__Title\"\n }, [node.type != 'input' ? h(\"span\", [node[replaceFields.title]]) : h(ant_design_vue__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n \"attrs\": {\n \"placeholder\": \"请输入节点名称\",\n \"default-value\": node[replaceFields.title]\n },\n \"on\": {\n ...{\n blur: ({\n target\n }) => createTreeNode(target, node),\n pressEnter: event => event.target.blur(event, true)\n }\n },\n \"ref\": \"inputNodeRef\"\n }), NodeActions && Boolean(treeActions.length) && NodeKey.includes(props.eventKey) && node.type != 'input' && h(\"div\", {\n \"ref\": \"TreeMenuActions\",\n \"class\": \"DirectoryTreeMenu__Actions\",\n \"on\": {\n ...{\n mouseenter: event => event.stopPropagation()\n }\n }\n }, [h(ant_design_vue__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n \"attrs\": {\n \"trigger\": ['click'],\n \"overlayClassName\": \"DirectoryTreeMenu__Dropdown\"\n }\n }, [h(\"svg-icon\", {\n \"class\": \"ActionsIcons\",\n \"attrs\": {\n \"icon-class\": \"tree-more\"\n },\n \"on\": {\n ...{\n click: e => e.preventDefault()\n }\n }\n }), h(\"div\", {\n \"slot\": \"overlay\",\n \"class\": \"DirectoryTreeMenu__Dropdown__Menu\"\n }, [treeActions.map((handle, i) => {\n return h(\"span\", {\n \"key\": i,\n \"on\": {\n ...{\n // this.$emit('handleOperateClick', handle, NodeActions)\n click: () => handleOperateClick(handle, {\n ...node,\n nodeIndex\n }, parentNode)\n }\n }\n }, [h(\"svg-icon\", {\n \"attrs\": {\n \"icon-class\": handle.svg\n }\n }), \" \", handle.text]);\n })])]), treeActionsPlus && h(\"svg-icon\", {\n \"class\": \"ActionsIcons\",\n \"attrs\": {\n \"icon-class\": \"tree-plus\"\n },\n \"on\": {\n ...{\n click: () => handlePlusClick()\n }\n }\n })])]);\n }\n }\n }, [node[replaceFields.children] && node[replaceFields.children].length && node[replaceFields.children].map((childNode, childNodeIndex) => this.TreeNodeRender(childNode, childNodeIndex, node))]);\n },\n appendTreeNode() {\n this.treeData.push({\n type: 'input',\n append: true,\n [this.replaceFields.key]: new Date().getTime()\n });\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n },\n createTreeNode({\n value\n }, node) {\n this.$set(node, 'type', 'text');\n this.$emit(`handlePlus${node.append ? 'Add' : 'Update'}`, value, node.append ? node.parentOrgId : node[this.replaceFields.key]);\n const parentNodes = node.parentOrgId ? this.findItemById(this.treeData, node.parentOrgId)[this.replaceFields.children] : this.treeData;\n if (node.append) {\n const i = parentNodes.findIndex(child => child[this.replaceFields.key] == node[this.replaceFields.key]);\n parentNodes.splice(i, 1);\n }\n },\n handleOperateClick(handle, node, parentNode) {\n const key = node[this.replaceFields.key];\n let that = this;\n switch (handle.type) {\n case 'update':\n const updateNode = this.findItemById(this.treeData, key);\n this.$set(updateNode, 'type', 'input');\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n break;\n case 'copy':\n // 明天来了优化一下\n const cloneNode = parentNode ? parentNode[this.replaceFields.children] : this.treeData;\n cloneNode.splice(node.nodeIndex + 1, 0, {\n type: 'input',\n append: true,\n parentOrgId: parentNode ? parentNode[this.replaceFields.key] : null,\n [this.replaceFields.key]: new Date().getTime(),\n [this.replaceFields.title]: node[this.replaceFields.title]\n });\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n break;\n case 'delete':\n this.$confirm({\n title: '确定要删除当前节点吗?',\n okText: '确定',\n cancelText: '取消',\n onOk() {\n that.$emit('handleDeleteClick', node);\n console.log('OK');\n },\n onCancel() {\n console.log('Cancel');\n }\n });\n break;\n default:\n this.$emit('handleOperateClick', handle, node);\n break;\n }\n },\n handlePlusClick() {\n const node = this.findItemById(this.treeData, this.NodeActions.id);\n console.log(node, this.NodeActions, '--NodeActions');\n const childNode = node[this.replaceFields.children] ?? [];\n childNode.push({\n type: 'input',\n append: true,\n parentOrgId: this.NodeActions.id,\n [this.replaceFields.key]: new Date().getTime()\n });\n this.NodeExpandKeys.push(this.NodeActions.id);\n node[this.replaceFields.children] = childNode;\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n console.log(node, '--NodeActions');\n },\n findItemById(treeData, id) {\n for (let i = 0; i < treeData.length; i++) {\n if (treeData[i][this.replaceFields.key] === id) return treeData[i];\n let childNode = treeData[i][this.replaceFields.children];\n if (childNode && childNode.length > 0) {\n const foundItem = this.findItemById(treeData[i][this.replaceFields.children], id);\n if (foundItem) return foundItem;\n }\n }\n },\n onInitTree(treeExpend = true) {\n this.treeData && (this.NodeSelectedKeys = [this.treeData.at(0)?.[this.replaceFields.key]]);\n this.NodeExpandKeys = this.treeExpandKeys.length && this.treeExpandKeys || treeExpend && (0,_utils_Tree__WEBPACK_IMPORTED_MODULE_1__.getTreeKey)(this.treeData, true, this.replaceFields) || [];\n },\n onSelect(keys, {\n nativeEvent,\n node\n }) {\n this.NodeSelectedKeys = keys;\n this.NodeKey = [].concat(this.NodeSelectedKeys);\n this.$emit('onSelect', keys);\n },\n onExpand(expandedKeys, {\n expanded,\n node\n }) {\n this.NodeExpandKeys = [].concat(expandedKeys);\n console.log(expandedKeys, expanded, node, 'Trigger Expand');\n },\n getIcon(props) {\n const h = this.$createElement;\n const {\n isLeaf,\n expanded\n } = props;\n if (isLeaf) {\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n \"attrs\": {\n \"type\": \"home\"\n }\n });\n }\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n \"attrs\": {\n \"type\": expanded ? 'folder-open' : 'folder'\n }\n });\n },\n handleMouseEnter({\n event,\n node\n }) {\n this.NodeActions = {\n id: node._props.eventKey,\n title: node._props.title,\n parentOrgId: node.$parent.eventKey || null\n };\n // this.MenuDropdown = false \n this.NodeKey = [].concat(this.NodeSelectedKeys);\n this.NodeKey.push(node.eventKey);\n // console.log(node, 'handleMouseEnter')\n // 是否加个参数 判断是否处于打开状态\n },\n handleMouseLeave({\n event,\n node\n }) {\n if (this.NodeKey.includes(node.eventKey) && this.NodeSelectedKeys != node.eventKey) {\n const i = this.NodeKey.findIndex(key => key == node.eventKey);\n this.NodeKey.splice(i, 1);\n }\n // this.NodeKey = []\n },\n onDragEnter(node) {\n console.log(node, '--onDragEnter');\n // expandedKeys 需要受控时设置\n // this.expandedKeys = info.expandedKeys\n },\n onDrop(info) {\n const dragKey = info.dragNode.eventKey;\n const dropPos = info.node.pos.split(\"-\");\n // 拖动的位置\n const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\n const node = info.node; //目标节点\n const dragNode = info.dragNode; // 拖动节点\n const dropKey = node.eventKey;\n console.log(dragNode, node, '--dropToGap');\n if (dragNode.$parent?.eventKey !== node.$parent?.eventKey || !info.dropToGap) {\n // 阻止跨父级拖拽\n this.$message.warning(\"只能在同级排序\");\n return false;\n }\n const {\n key,\n children\n } = this.replaceFields;\n const loop = (data, eventKey, callback) => {\n data.forEach((node, i, array) => {\n if (node[key] === eventKey) {\n return callback(node, i, array);\n }\n if (node[children]) {\n return loop(node[children], eventKey, callback);\n }\n });\n };\n const data = [...this.treeData];\n let dragObj;\n let dragObjIndex;\n loop(data, dragKey, (node, i, array) => {\n dragObj = node;\n dragObjIndex = i;\n });\n let dropIndex;\n loop(data, dropKey, (node, i, array) => {\n dropIndex = i;\n console.log(node, i, dragObj, dragObjIndex, '--i');\n });\n this.$emit('onDrop', {\n [key]: dragObj[key],\n originalIndex: dragObjIndex,\n presentIndex: dropPosition === -1 ? dropIndex : dropIndex + 1\n });\n }\n },\n render() {\n const h = arguments[0];\n const {\n $attrs,\n treePlus,\n treeData,\n NodeSelectedKeys,\n NodeExpandKeys,\n onSelect,\n onExpand,\n handleMouseEnter,\n handleMouseLeave,\n onDragEnter,\n onDrop,\n TreeNodeRender,\n appendTreeNode,\n replaceFields\n } = this;\n return h(\"div\", {\n \"class\": \"DirectoryTreeMenu\"\n }, [h(\"div\", {\n \"class\": \"treeDirectory\"\n }, [h(\"span\", [$attrs.menuTitle || '目录']), treePlus && h(ant_design_vue__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n \"attrs\": {\n \"icon\": \"plus\",\n \"size\": \"small\"\n },\n \"on\": {\n ...{\n click: appendTreeNode\n }\n }\n })]), h(DirectoryTree, {\n \"attrs\": {\n \"draggable\": true,\n \"default-expand-all\": true,\n \"selectedKeys\": NodeSelectedKeys,\n \"expandedKeys\": NodeExpandKeys,\n \"expandAction\": \"dblclick\",\n ...$attrs,\n \"tree-node-filter-prop\": \"title\"\n },\n \"class\": \"DirectoryTreeMenu__Tree\",\n \"on\": {\n ...{\n select: onSelect,\n expand: onExpand,\n mouseenter: handleMouseEnter,\n mouseleave: handleMouseLeave,\n dragenter: onDragEnter,\n drop: onDrop\n }\n }\n }, [treeData.map((node, nodeIndex) => TreeNodeRender(node, nodeIndex))])]);\n }\n});\n\n//# sourceURL=webpack://mui/./plugins/lib/tree/Directory.js?");
8948
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _utils_Tree__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../utils/Tree */ \"./plugins/utils/Tree.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/tree/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/input/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/dropdown/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/icon/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/button/index.js\");\n/* harmony import */ var _style_Directory_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style/Directory.less */ \"./plugins/lib/tree/style/Directory.less\");\n\n\n\n\n\n\n/* 明天来了做一下@快捷指向 */\n\nconst TreeNode = ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"].TreeNode;\nconst DirectoryTree = ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"].DirectoryTree;\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'DirectoryTreeMenu',\n props: {\n treeData: {\n type: Array,\n default: () => []\n },\n treeExpandKeys: {\n type: Array,\n default: () => []\n },\n treePlus: {\n type: Boolean,\n default: true\n },\n treeActions: {\n type: Array,\n default: () => []\n },\n treeActionsPlus: {\n type: Boolean,\n default: true\n },\n replaceFields: {\n type: Object,\n default: () => ({\n children: 'children',\n key: 'id',\n title: 'title'\n })\n }\n },\n data() {\n return {\n NodeCheckedKeys: [],\n NodeSelectedKeys: [],\n NodeExpandKeys: [],\n NodeKey: [],\n NodeActions: null,\n MenuDropdown: false,\n NodeActionsStyle: {}\n };\n },\n mounted() {\n this.onInitTree();\n },\n watch: {\n treeData(newValue, oldValue) {\n this.onInitTree(!oldValue.length);\n },\n treeExpandKeys(newValue) {\n this.NodeExpandKeys = newValue;\n }\n },\n methods: {\n TreeNodeRender(node, nodeIndex, parentNode) {\n const h = this.$createElement;\n const {\n replaceFields,\n NodeActions,\n treeActions,\n NodeActionsStyle,\n NodeExpandKeys,\n NodeKey,\n treeActionsPlus,\n createTreeNode,\n handleMouseLeave,\n handleOperateClick,\n handlePlusClick\n } = this;\n const key = node[replaceFields.key];\n return h(TreeNode, {\n \"key\": key,\n \"class\": \"DirectoryTreeMenu__Node\",\n \"scopedSlots\": {\n title: props => {\n return h(\"div\", {\n \"class\": \"__Title\"\n }, [node.type != 'input' ? h(\"span\", [node[replaceFields.title]]) : h(ant_design_vue__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n \"attrs\": {\n \"placeholder\": \"请输入节点名称\",\n \"default-value\": node[replaceFields.title]\n },\n \"on\": {\n ...{\n blur: ({\n target\n }) => createTreeNode(target, node),\n pressEnter: event => event.target.blur(event, true)\n }\n },\n \"ref\": \"inputNodeRef\"\n }), NodeActions && Boolean(treeActions.length) && NodeKey.includes(props.eventKey) && node.type != 'input' && h(\"div\", {\n \"ref\": \"TreeMenuActions\",\n \"class\": \"DirectoryTreeMenu__Actions\",\n \"on\": {\n ...{\n mouseenter: event => event.stopPropagation()\n }\n }\n }, [h(ant_design_vue__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n \"attrs\": {\n \"trigger\": ['click'],\n \"overlayClassName\": \"DirectoryTreeMenu__Dropdown\"\n }\n }, [h(\"svg-icon\", {\n \"class\": \"ActionsIcons\",\n \"attrs\": {\n \"icon-class\": \"tree-more\"\n },\n \"on\": {\n ...{\n click: e => e.preventDefault()\n }\n }\n }), h(\"div\", {\n \"slot\": \"overlay\",\n \"class\": \"DirectoryTreeMenu__Dropdown__Menu\"\n }, [treeActions.map((handle, i) => {\n return h(\"span\", {\n \"key\": i,\n \"on\": {\n ...{\n // this.$emit('handleOperateClick', handle, NodeActions)\n click: () => handleOperateClick(handle, {\n ...node,\n nodeIndex\n }, parentNode)\n }\n }\n }, [h(\"svg-icon\", {\n \"attrs\": {\n \"icon-class\": handle.svg\n }\n }), \" \", handle.text]);\n })])]), treeActionsPlus && h(\"svg-icon\", {\n \"class\": \"ActionsIcons\",\n \"attrs\": {\n \"icon-class\": \"tree-plus\"\n },\n \"on\": {\n ...{\n click: () => handlePlusClick()\n }\n }\n })])]);\n }\n }\n }, [node[replaceFields.children] && node[replaceFields.children].length && node[replaceFields.children].map((childNode, childNodeIndex) => this.TreeNodeRender(childNode, childNodeIndex, node))]);\n },\n appendTreeNode() {\n this.treeData.push({\n type: 'input',\n append: true,\n [this.replaceFields.key]: new Date().getTime()\n });\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n },\n createTreeNode({\n value\n }, node) {\n this.$set(node, 'type', 'text');\n this.$emit(`handlePlus${node.append ? 'Add' : 'Update'}`, value, node.append ? node.parentOrgId : node[this.replaceFields.key]);\n const parentNodes = node.parentOrgId ? this.findItemById(this.treeData, node.parentOrgId)[this.replaceFields.children] : this.treeData;\n if (node.append) {\n const i = parentNodes.findIndex(child => child[this.replaceFields.key] == node[this.replaceFields.key]);\n parentNodes.splice(i, 1);\n }\n },\n handleOperateClick(handle, node, parentNode) {\n const key = node[this.replaceFields.key];\n let that = this;\n switch (handle.type) {\n case 'update':\n const updateNode = this.findItemById(this.treeData, key);\n this.$set(updateNode, 'type', 'input');\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n break;\n case 'copy':\n // 明天来了优化一下\n const cloneNode = parentNode ? parentNode[this.replaceFields.children] : this.treeData;\n cloneNode.splice(node.nodeIndex + 1, 0, {\n type: 'input',\n append: true,\n parentOrgId: parentNode ? parentNode[this.replaceFields.key] : null,\n [this.replaceFields.key]: new Date().getTime(),\n [this.replaceFields.title]: node[this.replaceFields.title]\n });\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n break;\n case 'delete':\n this.$confirm({\n title: '确定要删除当前节点吗?',\n okText: '确定',\n cancelText: '取消',\n onOk() {\n that.$emit('handleDeleteClick', node);\n console.log('OK');\n },\n onCancel() {\n console.log('Cancel');\n }\n });\n break;\n default:\n this.$emit('handleOperateClick', handle, node);\n break;\n }\n },\n handlePlusClick() {\n const node = this.findItemById(this.treeData, this.NodeActions.id);\n console.log(node, this.NodeActions, '--NodeActions');\n const childNode = node[this.replaceFields.children] ?? [];\n childNode.push({\n type: 'input',\n append: true,\n parentOrgId: this.NodeActions.id,\n [this.replaceFields.key]: new Date().getTime()\n });\n this.NodeExpandKeys.push(this.NodeActions.id);\n node[this.replaceFields.children] = childNode;\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n console.log(node, '--NodeActions');\n },\n findItemById(treeData, id) {\n for (let i = 0; i < treeData.length; i++) {\n if (treeData[i][this.replaceFields.key] === id) return treeData[i];\n let childNode = treeData[i][this.replaceFields.children];\n if (childNode && childNode.length > 0) {\n const foundItem = this.findItemById(treeData[i][this.replaceFields.children], id);\n if (foundItem) return foundItem;\n }\n }\n },\n onInitTree(treeExpend = true) {\n this.treeData && (this.NodeSelectedKeys = [this.treeData.at(0)?.[this.replaceFields.key]]);\n this.NodeExpandKeys = this.treeExpandKeys.length && this.treeExpandKeys || treeExpend && (0,_utils_Tree__WEBPACK_IMPORTED_MODULE_1__.getTreeKey)(this.treeData, true, this.replaceFields) || [];\n },\n onCheck(keys, {}) {\n this.NodeCheckedKeys = keys;\n this.$emit('onCheck', keys);\n },\n onSelect(keys, {\n nativeEvent,\n node\n }) {\n this.NodeSelectedKeys = keys;\n this.NodeKey = [].concat(this.NodeSelectedKeys);\n this.$emit('onSelect', keys);\n },\n onExpand(expandedKeys, {\n expanded,\n node\n }) {\n this.NodeExpandKeys = [].concat(expandedKeys);\n console.log(expandedKeys, expanded, node, 'Trigger Expand');\n },\n getIcon(props) {\n const h = this.$createElement;\n const {\n isLeaf,\n expanded\n } = props;\n if (isLeaf) {\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n \"attrs\": {\n \"type\": \"home\"\n }\n });\n }\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n \"attrs\": {\n \"type\": expanded ? 'folder-open' : 'folder'\n }\n });\n },\n handleMouseEnter({\n event,\n node\n }) {\n this.NodeActions = {\n id: node._props.eventKey,\n title: node._props.title,\n parentOrgId: node.$parent.eventKey || null\n };\n // this.MenuDropdown = false \n this.NodeKey = [].concat(this.NodeSelectedKeys);\n this.NodeKey.push(node.eventKey);\n // console.log(node, 'handleMouseEnter')\n // 是否加个参数 判断是否处于打开状态\n },\n handleMouseLeave({\n event,\n node\n }) {\n if (this.NodeKey.includes(node.eventKey) && this.NodeSelectedKeys != node.eventKey) {\n const i = this.NodeKey.findIndex(key => key == node.eventKey);\n this.NodeKey.splice(i, 1);\n }\n // this.NodeKey = []\n },\n onDragEnter(node) {\n console.log(node, '--onDragEnter');\n // expandedKeys 需要受控时设置\n // this.expandedKeys = info.expandedKeys\n },\n onDrop(info) {\n const dragKey = info.dragNode.eventKey;\n const dropPos = info.node.pos.split(\"-\");\n // 拖动的位置\n const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\n const node = info.node; //目标节点\n const dragNode = info.dragNode; // 拖动节点\n const dropKey = node.eventKey;\n console.log(dragNode, node, '--dropToGap');\n if (dragNode.$parent?.eventKey !== node.$parent?.eventKey || !info.dropToGap) {\n // 阻止跨父级拖拽\n this.$message.warning(\"只能在同级排序\");\n return false;\n }\n const {\n key,\n children\n } = this.replaceFields;\n const loop = (data, eventKey, callback) => {\n data.forEach((node, i, array) => {\n if (node[key] === eventKey) {\n return callback(node, i, array);\n }\n if (node[children]) {\n return loop(node[children], eventKey, callback);\n }\n });\n };\n const data = [...this.treeData];\n let dragObj;\n let dragObjIndex;\n loop(data, dragKey, (node, i, array) => {\n dragObj = node;\n dragObjIndex = i;\n });\n let dropIndex;\n loop(data, dropKey, (node, i, array) => {\n dropIndex = i;\n console.log(node, i, dragObj, dragObjIndex, '--i');\n });\n this.$emit('onDrop', {\n [key]: dragObj[key],\n originalIndex: dragObjIndex,\n presentIndex: dropPosition === -1 ? dropIndex : dropIndex + 1\n });\n }\n },\n render() {\n const h = arguments[0];\n const {\n $attrs,\n treePlus,\n treeData,\n NodeCheckedKeys,\n NodeSelectedKeys,\n NodeExpandKeys,\n onCheck,\n onSelect,\n onExpand,\n handleMouseEnter,\n handleMouseLeave,\n onDragEnter,\n onDrop,\n TreeNodeRender,\n appendTreeNode,\n replaceFields\n } = this;\n return h(\"div\", {\n \"class\": \"DirectoryTreeMenu\"\n }, [h(\"div\", {\n \"class\": \"treeDirectory\"\n }, [h(\"span\", [$attrs.menuTitle || '目录']), treePlus && h(ant_design_vue__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n \"attrs\": {\n \"icon\": \"plus\",\n \"size\": \"small\"\n },\n \"on\": {\n ...{\n click: appendTreeNode\n }\n }\n })]), h(DirectoryTree, {\n \"attrs\": {\n \"draggable\": true,\n \"default-expand-all\": true,\n \"checkedKeys\": NodeCheckedKeys,\n \"selectedKeys\": NodeSelectedKeys,\n \"expandedKeys\": NodeExpandKeys,\n \"expandAction\": \"dblclick\",\n ...$attrs,\n \"tree-node-filter-prop\": \"title\"\n },\n \"class\": \"DirectoryTreeMenu__Tree\",\n \"on\": {\n ...{\n check: onCheck,\n select: onSelect,\n expand: onExpand,\n mouseenter: handleMouseEnter,\n mouseleave: handleMouseLeave,\n dragenter: onDragEnter,\n drop: onDrop\n }\n }\n }, [treeData.map((node, nodeIndex) => TreeNodeRender(node, nodeIndex))])]);\n }\n});\n\n//# sourceURL=webpack://mui/./plugins/lib/tree/Directory.js?");
8949
8949
 
8950
8950
  /***/ }),
8951
8951
 
package/dist/tree.umd.js CHANGED
@@ -3346,7 +3346,7 @@ eval("/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source cod
3346
3346
  /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
3347
3347
 
3348
3348
  "use strict";
3349
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _utils_Tree__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../utils/Tree */ \"./plugins/utils/Tree.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/tree/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/input/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/dropdown/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/icon/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/button/index.js\");\n/* harmony import */ var _style_Directory_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style/Directory.less */ \"./plugins/lib/tree/style/Directory.less\");\n\n\n\n\n\n\n/* 明天来了做一下@快捷指向 */\n\nconst TreeNode = ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"].TreeNode;\nconst DirectoryTree = ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"].DirectoryTree;\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'DirectoryTreeMenu',\n props: {\n treeData: {\n type: Array,\n default: () => []\n },\n treeExpandKeys: {\n type: Array,\n default: () => []\n },\n treePlus: {\n type: Boolean,\n default: true\n },\n treeActions: {\n type: Array,\n default: () => []\n },\n treeActionsPlus: {\n type: Boolean,\n default: true\n },\n replaceFields: {\n type: Object,\n default: () => ({\n children: 'children',\n key: 'id',\n title: 'title'\n })\n }\n },\n data() {\n return {\n NodeSelectedKeys: [],\n NodeExpandKeys: [],\n NodeKey: [],\n NodeActions: null,\n MenuDropdown: false,\n NodeActionsStyle: {}\n };\n },\n mounted() {\n this.onInitTree();\n },\n watch: {\n treeData(newValue, oldValue) {\n this.onInitTree(!oldValue.length);\n },\n treeExpandKeys(newValue) {\n this.NodeExpandKeys = newValue;\n }\n },\n methods: {\n TreeNodeRender(node, nodeIndex, parentNode) {\n const h = this.$createElement;\n const {\n replaceFields,\n NodeActions,\n treeActions,\n NodeActionsStyle,\n NodeExpandKeys,\n NodeKey,\n treeActionsPlus,\n createTreeNode,\n handleMouseLeave,\n handleOperateClick,\n handlePlusClick\n } = this;\n const key = node[replaceFields.key];\n return h(TreeNode, {\n \"key\": key,\n \"class\": \"DirectoryTreeMenu__Node\",\n \"scopedSlots\": {\n title: props => {\n return h(\"div\", {\n \"class\": \"__Title\"\n }, [node.type != 'input' ? h(\"span\", [node[replaceFields.title]]) : h(ant_design_vue__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n \"attrs\": {\n \"placeholder\": \"请输入节点名称\",\n \"default-value\": node[replaceFields.title]\n },\n \"on\": {\n ...{\n blur: ({\n target\n }) => createTreeNode(target, node),\n pressEnter: event => event.target.blur(event, true)\n }\n },\n \"ref\": \"inputNodeRef\"\n }), NodeActions && Boolean(treeActions.length) && NodeKey.includes(props.eventKey) && node.type != 'input' && h(\"div\", {\n \"ref\": \"TreeMenuActions\",\n \"class\": \"DirectoryTreeMenu__Actions\",\n \"on\": {\n ...{\n mouseenter: event => event.stopPropagation()\n }\n }\n }, [h(ant_design_vue__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n \"attrs\": {\n \"trigger\": ['click'],\n \"overlayClassName\": \"DirectoryTreeMenu__Dropdown\"\n }\n }, [h(\"svg-icon\", {\n \"class\": \"ActionsIcons\",\n \"attrs\": {\n \"icon-class\": \"tree-more\"\n },\n \"on\": {\n ...{\n click: e => e.preventDefault()\n }\n }\n }), h(\"div\", {\n \"slot\": \"overlay\",\n \"class\": \"DirectoryTreeMenu__Dropdown__Menu\"\n }, [treeActions.map((handle, i) => {\n return h(\"span\", {\n \"key\": i,\n \"on\": {\n ...{\n // this.$emit('handleOperateClick', handle, NodeActions)\n click: () => handleOperateClick(handle, {\n ...node,\n nodeIndex\n }, parentNode)\n }\n }\n }, [h(\"svg-icon\", {\n \"attrs\": {\n \"icon-class\": handle.svg\n }\n }), \" \", handle.text]);\n })])]), treeActionsPlus && h(\"svg-icon\", {\n \"class\": \"ActionsIcons\",\n \"attrs\": {\n \"icon-class\": \"tree-plus\"\n },\n \"on\": {\n ...{\n click: () => handlePlusClick()\n }\n }\n })])]);\n }\n }\n }, [node[replaceFields.children] && node[replaceFields.children].length && node[replaceFields.children].map((childNode, childNodeIndex) => this.TreeNodeRender(childNode, childNodeIndex, node))]);\n },\n appendTreeNode() {\n this.treeData.push({\n type: 'input',\n append: true,\n [this.replaceFields.key]: new Date().getTime()\n });\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n },\n createTreeNode({\n value\n }, node) {\n this.$set(node, 'type', 'text');\n this.$emit(`handlePlus${node.append ? 'Add' : 'Update'}`, value, node.append ? node.parentOrgId : node[this.replaceFields.key]);\n const parentNodes = node.parentOrgId ? this.findItemById(this.treeData, node.parentOrgId)[this.replaceFields.children] : this.treeData;\n if (node.append) {\n const i = parentNodes.findIndex(child => child[this.replaceFields.key] == node[this.replaceFields.key]);\n parentNodes.splice(i, 1);\n }\n },\n handleOperateClick(handle, node, parentNode) {\n const key = node[this.replaceFields.key];\n let that = this;\n switch (handle.type) {\n case 'update':\n const updateNode = this.findItemById(this.treeData, key);\n this.$set(updateNode, 'type', 'input');\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n break;\n case 'copy':\n // 明天来了优化一下\n const cloneNode = parentNode ? parentNode[this.replaceFields.children] : this.treeData;\n cloneNode.splice(node.nodeIndex + 1, 0, {\n type: 'input',\n append: true,\n parentOrgId: parentNode ? parentNode[this.replaceFields.key] : null,\n [this.replaceFields.key]: new Date().getTime(),\n [this.replaceFields.title]: node[this.replaceFields.title]\n });\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n break;\n case 'delete':\n this.$confirm({\n title: '确定要删除当前节点吗?',\n okText: '确定',\n cancelText: '取消',\n onOk() {\n that.$emit('handleDeleteClick', node);\n console.log('OK');\n },\n onCancel() {\n console.log('Cancel');\n }\n });\n break;\n default:\n this.$emit('handleOperateClick', handle, node);\n break;\n }\n },\n handlePlusClick() {\n const node = this.findItemById(this.treeData, this.NodeActions.id);\n console.log(node, this.NodeActions, '--NodeActions');\n const childNode = node[this.replaceFields.children] ?? [];\n childNode.push({\n type: 'input',\n append: true,\n parentOrgId: this.NodeActions.id,\n [this.replaceFields.key]: new Date().getTime()\n });\n this.NodeExpandKeys.push(this.NodeActions.id);\n node[this.replaceFields.children] = childNode;\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n console.log(node, '--NodeActions');\n },\n findItemById(treeData, id) {\n for (let i = 0; i < treeData.length; i++) {\n if (treeData[i][this.replaceFields.key] === id) return treeData[i];\n let childNode = treeData[i][this.replaceFields.children];\n if (childNode && childNode.length > 0) {\n const foundItem = this.findItemById(treeData[i][this.replaceFields.children], id);\n if (foundItem) return foundItem;\n }\n }\n },\n onInitTree(treeExpend = true) {\n this.treeData && (this.NodeSelectedKeys = [this.treeData.at(0)?.[this.replaceFields.key]]);\n this.NodeExpandKeys = this.treeExpandKeys.length && this.treeExpandKeys || treeExpend && (0,_utils_Tree__WEBPACK_IMPORTED_MODULE_1__.getTreeKey)(this.treeData, true, this.replaceFields) || [];\n },\n onSelect(keys, {\n nativeEvent,\n node\n }) {\n this.NodeSelectedKeys = keys;\n this.NodeKey = [].concat(this.NodeSelectedKeys);\n this.$emit('onSelect', keys);\n },\n onExpand(expandedKeys, {\n expanded,\n node\n }) {\n this.NodeExpandKeys = [].concat(expandedKeys);\n console.log(expandedKeys, expanded, node, 'Trigger Expand');\n },\n getIcon(props) {\n const h = this.$createElement;\n const {\n isLeaf,\n expanded\n } = props;\n if (isLeaf) {\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n \"attrs\": {\n \"type\": \"home\"\n }\n });\n }\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n \"attrs\": {\n \"type\": expanded ? 'folder-open' : 'folder'\n }\n });\n },\n handleMouseEnter({\n event,\n node\n }) {\n this.NodeActions = {\n id: node._props.eventKey,\n title: node._props.title,\n parentOrgId: node.$parent.eventKey || null\n };\n // this.MenuDropdown = false \n this.NodeKey = [].concat(this.NodeSelectedKeys);\n this.NodeKey.push(node.eventKey);\n // console.log(node, 'handleMouseEnter')\n // 是否加个参数 判断是否处于打开状态\n },\n handleMouseLeave({\n event,\n node\n }) {\n if (this.NodeKey.includes(node.eventKey) && this.NodeSelectedKeys != node.eventKey) {\n const i = this.NodeKey.findIndex(key => key == node.eventKey);\n this.NodeKey.splice(i, 1);\n }\n // this.NodeKey = []\n },\n onDragEnter(node) {\n console.log(node, '--onDragEnter');\n // expandedKeys 需要受控时设置\n // this.expandedKeys = info.expandedKeys\n },\n onDrop(info) {\n const dragKey = info.dragNode.eventKey;\n const dropPos = info.node.pos.split(\"-\");\n // 拖动的位置\n const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\n const node = info.node; //目标节点\n const dragNode = info.dragNode; // 拖动节点\n const dropKey = node.eventKey;\n console.log(dragNode, node, '--dropToGap');\n if (dragNode.$parent?.eventKey !== node.$parent?.eventKey || !info.dropToGap) {\n // 阻止跨父级拖拽\n this.$message.warning(\"只能在同级排序\");\n return false;\n }\n const {\n key,\n children\n } = this.replaceFields;\n const loop = (data, eventKey, callback) => {\n data.forEach((node, i, array) => {\n if (node[key] === eventKey) {\n return callback(node, i, array);\n }\n if (node[children]) {\n return loop(node[children], eventKey, callback);\n }\n });\n };\n const data = [...this.treeData];\n let dragObj;\n let dragObjIndex;\n loop(data, dragKey, (node, i, array) => {\n dragObj = node;\n dragObjIndex = i;\n });\n let dropIndex;\n loop(data, dropKey, (node, i, array) => {\n dropIndex = i;\n console.log(node, i, dragObj, dragObjIndex, '--i');\n });\n this.$emit('onDrop', {\n [key]: dragObj[key],\n originalIndex: dragObjIndex,\n presentIndex: dropPosition === -1 ? dropIndex : dropIndex + 1\n });\n }\n },\n render() {\n const h = arguments[0];\n const {\n $attrs,\n treePlus,\n treeData,\n NodeSelectedKeys,\n NodeExpandKeys,\n onSelect,\n onExpand,\n handleMouseEnter,\n handleMouseLeave,\n onDragEnter,\n onDrop,\n TreeNodeRender,\n appendTreeNode,\n replaceFields\n } = this;\n return h(\"div\", {\n \"class\": \"DirectoryTreeMenu\"\n }, [h(\"div\", {\n \"class\": \"treeDirectory\"\n }, [h(\"span\", [$attrs.menuTitle || '目录']), treePlus && h(ant_design_vue__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n \"attrs\": {\n \"icon\": \"plus\",\n \"size\": \"small\"\n },\n \"on\": {\n ...{\n click: appendTreeNode\n }\n }\n })]), h(DirectoryTree, {\n \"attrs\": {\n \"draggable\": true,\n \"default-expand-all\": true,\n \"selectedKeys\": NodeSelectedKeys,\n \"expandedKeys\": NodeExpandKeys,\n \"expandAction\": \"dblclick\",\n ...$attrs,\n \"tree-node-filter-prop\": \"title\"\n },\n \"class\": \"DirectoryTreeMenu__Tree\",\n \"on\": {\n ...{\n select: onSelect,\n expand: onExpand,\n mouseenter: handleMouseEnter,\n mouseleave: handleMouseLeave,\n dragenter: onDragEnter,\n drop: onDrop\n }\n }\n }, [treeData.map((node, nodeIndex) => TreeNodeRender(node, nodeIndex))])]);\n }\n});\n\n//# sourceURL=webpack://mui/./plugins/lib/tree/Directory.js?");
3349
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _utils_Tree__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../utils/Tree */ \"./plugins/utils/Tree.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/tree/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/input/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/dropdown/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/icon/index.js\");\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/button/index.js\");\n/* harmony import */ var _style_Directory_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style/Directory.less */ \"./plugins/lib/tree/style/Directory.less\");\n\n\n\n\n\n\n/* 明天来了做一下@快捷指向 */\n\nconst TreeNode = ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"].TreeNode;\nconst DirectoryTree = ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"].DirectoryTree;\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'DirectoryTreeMenu',\n props: {\n treeData: {\n type: Array,\n default: () => []\n },\n treeExpandKeys: {\n type: Array,\n default: () => []\n },\n treePlus: {\n type: Boolean,\n default: true\n },\n treeActions: {\n type: Array,\n default: () => []\n },\n treeActionsPlus: {\n type: Boolean,\n default: true\n },\n replaceFields: {\n type: Object,\n default: () => ({\n children: 'children',\n key: 'id',\n title: 'title'\n })\n }\n },\n data() {\n return {\n NodeCheckedKeys: [],\n NodeSelectedKeys: [],\n NodeExpandKeys: [],\n NodeKey: [],\n NodeActions: null,\n MenuDropdown: false,\n NodeActionsStyle: {}\n };\n },\n mounted() {\n this.onInitTree();\n },\n watch: {\n treeData(newValue, oldValue) {\n this.onInitTree(!oldValue.length);\n },\n treeExpandKeys(newValue) {\n this.NodeExpandKeys = newValue;\n }\n },\n methods: {\n TreeNodeRender(node, nodeIndex, parentNode) {\n const h = this.$createElement;\n const {\n replaceFields,\n NodeActions,\n treeActions,\n NodeActionsStyle,\n NodeExpandKeys,\n NodeKey,\n treeActionsPlus,\n createTreeNode,\n handleMouseLeave,\n handleOperateClick,\n handlePlusClick\n } = this;\n const key = node[replaceFields.key];\n return h(TreeNode, {\n \"key\": key,\n \"class\": \"DirectoryTreeMenu__Node\",\n \"scopedSlots\": {\n title: props => {\n return h(\"div\", {\n \"class\": \"__Title\"\n }, [node.type != 'input' ? h(\"span\", [node[replaceFields.title]]) : h(ant_design_vue__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n \"attrs\": {\n \"placeholder\": \"请输入节点名称\",\n \"default-value\": node[replaceFields.title]\n },\n \"on\": {\n ...{\n blur: ({\n target\n }) => createTreeNode(target, node),\n pressEnter: event => event.target.blur(event, true)\n }\n },\n \"ref\": \"inputNodeRef\"\n }), NodeActions && Boolean(treeActions.length) && NodeKey.includes(props.eventKey) && node.type != 'input' && h(\"div\", {\n \"ref\": \"TreeMenuActions\",\n \"class\": \"DirectoryTreeMenu__Actions\",\n \"on\": {\n ...{\n mouseenter: event => event.stopPropagation()\n }\n }\n }, [h(ant_design_vue__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n \"attrs\": {\n \"trigger\": ['click'],\n \"overlayClassName\": \"DirectoryTreeMenu__Dropdown\"\n }\n }, [h(\"svg-icon\", {\n \"class\": \"ActionsIcons\",\n \"attrs\": {\n \"icon-class\": \"tree-more\"\n },\n \"on\": {\n ...{\n click: e => e.preventDefault()\n }\n }\n }), h(\"div\", {\n \"slot\": \"overlay\",\n \"class\": \"DirectoryTreeMenu__Dropdown__Menu\"\n }, [treeActions.map((handle, i) => {\n return h(\"span\", {\n \"key\": i,\n \"on\": {\n ...{\n // this.$emit('handleOperateClick', handle, NodeActions)\n click: () => handleOperateClick(handle, {\n ...node,\n nodeIndex\n }, parentNode)\n }\n }\n }, [h(\"svg-icon\", {\n \"attrs\": {\n \"icon-class\": handle.svg\n }\n }), \" \", handle.text]);\n })])]), treeActionsPlus && h(\"svg-icon\", {\n \"class\": \"ActionsIcons\",\n \"attrs\": {\n \"icon-class\": \"tree-plus\"\n },\n \"on\": {\n ...{\n click: () => handlePlusClick()\n }\n }\n })])]);\n }\n }\n }, [node[replaceFields.children] && node[replaceFields.children].length && node[replaceFields.children].map((childNode, childNodeIndex) => this.TreeNodeRender(childNode, childNodeIndex, node))]);\n },\n appendTreeNode() {\n this.treeData.push({\n type: 'input',\n append: true,\n [this.replaceFields.key]: new Date().getTime()\n });\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n },\n createTreeNode({\n value\n }, node) {\n this.$set(node, 'type', 'text');\n this.$emit(`handlePlus${node.append ? 'Add' : 'Update'}`, value, node.append ? node.parentOrgId : node[this.replaceFields.key]);\n const parentNodes = node.parentOrgId ? this.findItemById(this.treeData, node.parentOrgId)[this.replaceFields.children] : this.treeData;\n if (node.append) {\n const i = parentNodes.findIndex(child => child[this.replaceFields.key] == node[this.replaceFields.key]);\n parentNodes.splice(i, 1);\n }\n },\n handleOperateClick(handle, node, parentNode) {\n const key = node[this.replaceFields.key];\n let that = this;\n switch (handle.type) {\n case 'update':\n const updateNode = this.findItemById(this.treeData, key);\n this.$set(updateNode, 'type', 'input');\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n break;\n case 'copy':\n // 明天来了优化一下\n const cloneNode = parentNode ? parentNode[this.replaceFields.children] : this.treeData;\n cloneNode.splice(node.nodeIndex + 1, 0, {\n type: 'input',\n append: true,\n parentOrgId: parentNode ? parentNode[this.replaceFields.key] : null,\n [this.replaceFields.key]: new Date().getTime(),\n [this.replaceFields.title]: node[this.replaceFields.title]\n });\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n break;\n case 'delete':\n this.$confirm({\n title: '确定要删除当前节点吗?',\n okText: '确定',\n cancelText: '取消',\n onOk() {\n that.$emit('handleDeleteClick', node);\n console.log('OK');\n },\n onCancel() {\n console.log('Cancel');\n }\n });\n break;\n default:\n this.$emit('handleOperateClick', handle, node);\n break;\n }\n },\n handlePlusClick() {\n const node = this.findItemById(this.treeData, this.NodeActions.id);\n console.log(node, this.NodeActions, '--NodeActions');\n const childNode = node[this.replaceFields.children] ?? [];\n childNode.push({\n type: 'input',\n append: true,\n parentOrgId: this.NodeActions.id,\n [this.replaceFields.key]: new Date().getTime()\n });\n this.NodeExpandKeys.push(this.NodeActions.id);\n node[this.replaceFields.children] = childNode;\n this.$nextTick(() => this.$refs.inputNodeRef.focus());\n console.log(node, '--NodeActions');\n },\n findItemById(treeData, id) {\n for (let i = 0; i < treeData.length; i++) {\n if (treeData[i][this.replaceFields.key] === id) return treeData[i];\n let childNode = treeData[i][this.replaceFields.children];\n if (childNode && childNode.length > 0) {\n const foundItem = this.findItemById(treeData[i][this.replaceFields.children], id);\n if (foundItem) return foundItem;\n }\n }\n },\n onInitTree(treeExpend = true) {\n this.treeData && (this.NodeSelectedKeys = [this.treeData.at(0)?.[this.replaceFields.key]]);\n this.NodeExpandKeys = this.treeExpandKeys.length && this.treeExpandKeys || treeExpend && (0,_utils_Tree__WEBPACK_IMPORTED_MODULE_1__.getTreeKey)(this.treeData, true, this.replaceFields) || [];\n },\n onCheck(keys, {}) {\n this.NodeCheckedKeys = keys;\n this.$emit('onCheck', keys);\n },\n onSelect(keys, {\n nativeEvent,\n node\n }) {\n this.NodeSelectedKeys = keys;\n this.NodeKey = [].concat(this.NodeSelectedKeys);\n this.$emit('onSelect', keys);\n },\n onExpand(expandedKeys, {\n expanded,\n node\n }) {\n this.NodeExpandKeys = [].concat(expandedKeys);\n console.log(expandedKeys, expanded, node, 'Trigger Expand');\n },\n getIcon(props) {\n const h = this.$createElement;\n const {\n isLeaf,\n expanded\n } = props;\n if (isLeaf) {\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n \"attrs\": {\n \"type\": \"home\"\n }\n });\n }\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n \"attrs\": {\n \"type\": expanded ? 'folder-open' : 'folder'\n }\n });\n },\n handleMouseEnter({\n event,\n node\n }) {\n this.NodeActions = {\n id: node._props.eventKey,\n title: node._props.title,\n parentOrgId: node.$parent.eventKey || null\n };\n // this.MenuDropdown = false \n this.NodeKey = [].concat(this.NodeSelectedKeys);\n this.NodeKey.push(node.eventKey);\n // console.log(node, 'handleMouseEnter')\n // 是否加个参数 判断是否处于打开状态\n },\n handleMouseLeave({\n event,\n node\n }) {\n if (this.NodeKey.includes(node.eventKey) && this.NodeSelectedKeys != node.eventKey) {\n const i = this.NodeKey.findIndex(key => key == node.eventKey);\n this.NodeKey.splice(i, 1);\n }\n // this.NodeKey = []\n },\n onDragEnter(node) {\n console.log(node, '--onDragEnter');\n // expandedKeys 需要受控时设置\n // this.expandedKeys = info.expandedKeys\n },\n onDrop(info) {\n const dragKey = info.dragNode.eventKey;\n const dropPos = info.node.pos.split(\"-\");\n // 拖动的位置\n const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\n const node = info.node; //目标节点\n const dragNode = info.dragNode; // 拖动节点\n const dropKey = node.eventKey;\n console.log(dragNode, node, '--dropToGap');\n if (dragNode.$parent?.eventKey !== node.$parent?.eventKey || !info.dropToGap) {\n // 阻止跨父级拖拽\n this.$message.warning(\"只能在同级排序\");\n return false;\n }\n const {\n key,\n children\n } = this.replaceFields;\n const loop = (data, eventKey, callback) => {\n data.forEach((node, i, array) => {\n if (node[key] === eventKey) {\n return callback(node, i, array);\n }\n if (node[children]) {\n return loop(node[children], eventKey, callback);\n }\n });\n };\n const data = [...this.treeData];\n let dragObj;\n let dragObjIndex;\n loop(data, dragKey, (node, i, array) => {\n dragObj = node;\n dragObjIndex = i;\n });\n let dropIndex;\n loop(data, dropKey, (node, i, array) => {\n dropIndex = i;\n console.log(node, i, dragObj, dragObjIndex, '--i');\n });\n this.$emit('onDrop', {\n [key]: dragObj[key],\n originalIndex: dragObjIndex,\n presentIndex: dropPosition === -1 ? dropIndex : dropIndex + 1\n });\n }\n },\n render() {\n const h = arguments[0];\n const {\n $attrs,\n treePlus,\n treeData,\n NodeCheckedKeys,\n NodeSelectedKeys,\n NodeExpandKeys,\n onCheck,\n onSelect,\n onExpand,\n handleMouseEnter,\n handleMouseLeave,\n onDragEnter,\n onDrop,\n TreeNodeRender,\n appendTreeNode,\n replaceFields\n } = this;\n return h(\"div\", {\n \"class\": \"DirectoryTreeMenu\"\n }, [h(\"div\", {\n \"class\": \"treeDirectory\"\n }, [h(\"span\", [$attrs.menuTitle || '目录']), treePlus && h(ant_design_vue__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n \"attrs\": {\n \"icon\": \"plus\",\n \"size\": \"small\"\n },\n \"on\": {\n ...{\n click: appendTreeNode\n }\n }\n })]), h(DirectoryTree, {\n \"attrs\": {\n \"draggable\": true,\n \"default-expand-all\": true,\n \"checkedKeys\": NodeCheckedKeys,\n \"selectedKeys\": NodeSelectedKeys,\n \"expandedKeys\": NodeExpandKeys,\n \"expandAction\": \"dblclick\",\n ...$attrs,\n \"tree-node-filter-prop\": \"title\"\n },\n \"class\": \"DirectoryTreeMenu__Tree\",\n \"on\": {\n ...{\n check: onCheck,\n select: onSelect,\n expand: onExpand,\n mouseenter: handleMouseEnter,\n mouseleave: handleMouseLeave,\n dragenter: onDragEnter,\n drop: onDrop\n }\n }\n }, [treeData.map((node, nodeIndex) => TreeNodeRender(node, nodeIndex))])]);\n }\n});\n\n//# sourceURL=webpack://mui/./plugins/lib/tree/Directory.js?");
3350
3350
 
3351
3351
  /***/ }),
3352
3352
 
package/lib/tree/Directory.js CHANGED
@@ -42,6 +42,7 @@ export default {
42
42
  },
43
43
  data() {
44
44
  return {
45
+ NodeCheckedKeys: [],
45
46
  NodeSelectedKeys: [],
46
47
  NodeExpandKeys: [],
47
48
  NodeKey: [],
@@ -258,6 +259,10 @@ export default {
258
259
  this.treeData && (this.NodeSelectedKeys = [this.treeData.at(0)?.[this.replaceFields.key]])
259
260
  this.NodeExpandKeys = ( this.treeExpandKeys.length && this.treeExpandKeys ) || ( treeExpend && getTreeKey(this.treeData, true, this.replaceFields) ) || []
260
261
  },
262
+ onCheck(keys, {}) {
263
+ this.NodeCheckedKeys = keys
264
+ this.$emit('onCheck', keys)
265
+ },
261
266
  onSelect(keys, { nativeEvent, node }) {
262
267
  this.NodeSelectedKeys = keys
263
268
  this.NodeKey = [].concat(this.NodeSelectedKeys)
@@ -360,8 +365,10 @@ export default {
360
365
  $attrs,
361
366
  treePlus,
362
367
  treeData,
368
+ NodeCheckedKeys,
363
369
  NodeSelectedKeys,
364
370
  NodeExpandKeys,
371
+ onCheck,
365
372
  onSelect,
366
373
  onExpand,
367
374
  handleMouseEnter,
@@ -382,11 +389,13 @@ export default {
382
389
  draggable
383
390
  class="DirectoryTreeMenu__Tree"
384
391
  default-expand-all
392
+ checkedKeys={NodeCheckedKeys}
385
393
  selectedKeys={NodeSelectedKeys}
386
394
  expandedKeys={NodeExpandKeys}
387
395
  expandAction="dblclick"
388
396
  {...{
389
397
  on: {
398
+ check: onCheck,
390
399
  select: onSelect,
391
400
  expand: onExpand,
392
401
  mouseenter: handleMouseEnter,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "web-component-gallery",
3
- "version": "0.1.60",
3
+ "version": "0.1.61",
4
4
  "description": "vue-library-ui组件库",
5
5
  "main": "dist/index.umd.js",
6
6
  "files": [
package/plugins/lib/tree/Directory.js CHANGED
@@ -42,6 +42,7 @@ export default {
42
42
  },
43
43
  data() {
44
44
  return {
45
+ NodeCheckedKeys: [],
45
46
  NodeSelectedKeys: [],
46
47
  NodeExpandKeys: [],
47
48
  NodeKey: [],
@@ -258,6 +259,10 @@ export default {
258
259
  this.treeData && (this.NodeSelectedKeys = [this.treeData.at(0)?.[this.replaceFields.key]])
259
260
  this.NodeExpandKeys = ( this.treeExpandKeys.length && this.treeExpandKeys ) || ( treeExpend && getTreeKey(this.treeData, true, this.replaceFields) ) || []
260
261
  },
262
+ onCheck(keys, {}) {
263
+ this.NodeCheckedKeys = keys
264
+ this.$emit('onCheck', keys)
265
+ },
261
266
  onSelect(keys, { nativeEvent, node }) {
262
267
  this.NodeSelectedKeys = keys
263
268
  this.NodeKey = [].concat(this.NodeSelectedKeys)
@@ -360,8 +365,10 @@ export default {
360
365
  $attrs,
361
366
  treePlus,
362
367
  treeData,
368
+ NodeCheckedKeys,
363
369
  NodeSelectedKeys,
364
370
  NodeExpandKeys,
371
+ onCheck,
365
372
  onSelect,
366
373
  onExpand,
367
374
  handleMouseEnter,
@@ -382,11 +389,13 @@ export default {
382
389
  draggable
383
390
  class="DirectoryTreeMenu__Tree"
384
391
  default-expand-all
392
+ checkedKeys={NodeCheckedKeys}
385
393
  selectedKeys={NodeSelectedKeys}
386
394
  expandedKeys={NodeExpandKeys}
387
395
  expandAction="dblclick"
388
396
  {...{
389
397
  on: {
398
+ check: onCheck,
390
399
  select: onSelect,
391
400
  expand: onExpand,
392
401
  mouseenter: handleMouseEnter,