commit

src/main/resources/views/platform/sys/menu/basicForm.js

@@ -150,6 +150,28 @@ const SYS_MENU_BASIC_FORM_COMPONENT = {
                 this.detail(id)
             }
         },
+        addChildMenu(data, platform) {
+            this.visibleDialog = true
+            this.platform = platform
+            this.formData = {
+                moduleId: data.moduleId,
+                buttons: []
+            }
+
+            this.$axios.post("/platform/sys/menu/editMenu/" + data.id).then((res) => {
+                if (res.code === 0) {
+                    if (res.data.parentIds && res.data.parentIds.length > 0) {
+                        this.parentMenu = res.data.parentIds
+                    } else {
+                        this.parentMenu = []
+                    }
+                    this.parentMenu.push(data.id)
+                }
+            })
+
+            this.listFullTree()
+            this.listModule()
+        },
         listFullTree() {
             this.$axios.post(loc() + "/fullTree", { platform: this.platform }).then((res) => {
                 this.menuOptions = res.data

src/main/resources/views/platform/sys/menu/index.html

@@ -1,6 +1,27 @@
 <!--#
 layout("/layouts/platform.html"){
 #-->
+<style>
+	.context-menu {
+		position: fixed;
+		background: #fff;
+		border: 1px solid #dcdfe6;
+		border-radius: 4px;
+		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+		z-index: 3000;
+		list-style: none;
+		padding: 5px 0;
+		margin: 0;
+		font-size: 14px;
+	}
+	.context-menu li {
+		padding: 7px 20px;
+		cursor: pointer;
+	}
+	.context-menu li:hover {
+		background: #f2f6fc;
+	}
+</style>
 <div id="app" v-cloak>
     <el-card shadow="never">
         <search @search="doSearch">
@@ -32,6 +53,7 @@ layout("/layouts/platform.html"){
             :highlight-current-row="true"
             :key="tableKey"
             :load="loadChild"
+            @row-contextmenu="openMenu"
             :expand-row-keys="expandedRowKeysRenew"
             @expand-change="handleExpandChange"
             ref="tableData"
@@ -98,8 +120,18 @@ layout("/layouts/platform.html"){
                 </template>
             </el-table-column>
         </el-table>
+	    
+	    <!-- 右键菜单 -->
+	    <ul v-show="menuVisible" class="context-menu" :style="{left: menuLeft + 'px', top: menuTop + 'px'}">
+		    <li @click="handleAddMenu(currentRow)">新建菜单</li>
+		    <li v-if="showAddMenu" @click="handleAddChildMenu(currentRow)">添加子菜单</li>
+		    <li @click="handleEdit(currentRow)">编辑</li>
+		    <li @click="handleDelete(currentRow)">删除</li>
+	    </ul>
+	    
     </el-card>
-
+	
+	
     <basic-form ref="basicFormRef" @refresh="loadChildByExpandedKeys"></basic-form>
     <permission-form ref="permissionFormRef" @load-child="loadChildByExpandedKeys"></permission-form>
     <sort ref="sortRef" @refresh="doSearch"></sort>
@@ -128,10 +160,67 @@ layout("/layouts/platform.html"){
                 moduleOptions: [],
                 // 保存展开状态的数组
                 expandedRowKeysRenew: [],
-                tableTreeRefreshTool: []
+                tableTreeRefreshTool: [],
+	            
+	            // 右键打开菜单相关
+	            currentRow: null,
+	            menuVisible: false,
+	            menuLeft: 0,
+	            menuTop: 0,
+	            showAddMenu: false,
             }
         },
         methods: {
+	        /* 右键行 */
+	        openMenu(row, column, event) {
+		        this.showAddMenu = row.type === 'menu';
+		        // 阻止浏览器默认菜单
+		        event.preventDefault();
+		        this.currentRow = row;
+		        
+		        this.menuVisible = true;
+		        this.$nextTick(() => {
+			        const menu = this.$el.querySelector('.context-menu');
+			        const h = menu.offsetHeight || 100;
+			        const sh = document.documentElement.clientHeight;
+			        let top = event.clientY;
+			        if (top + h > sh) top -= h;
+			        this.menuLeft = event.clientX;
+			        this.menuTop  = top;
+		        });
+	        },
+	        // 新建菜单
+	        handleAddMenu(row) {
+		        console.log(row)
+		        this.$refs.basicFormRef.onOpen(null, this.pageForm.platform)
+	        },
+	        handleAddChildMenu(row) {
+		        this.$refs.basicFormRef.addChildMenu(row, this.pageForm.platform)
+	        },
+	        handleEdit(row) {
+		        // 判断子菜单的type是权限还是菜单
+		        if (row.type === 'menu') {
+			        this.$refs.basicFormRef.onOpen(row.id, this.pageForm.platform)
+		        } else {
+			        this.$refs.permissionFormRef.onOpen(row.id)
+		        }
+	        },
+	        handleDelete(row) {
+		        // 删除逻辑
+		        console.log(row)
+		        this.$confirm("此操作将删除 " + row.name, "提示", {
+			        confirmButtonText: "确定",
+			        cancelButtonText: "取消",
+			        type: "warning"
+		        }).then(() => {
+			        this.$axios.post("/platform/sys/menu/delete/" + row.id).then((res) => {
+				        if (res.code === 0) {
+					        this.$message.success(res.msg)
+					        this.loadChildByExpandedKeys()
+				        }
+			        })
+		        })
+	        },
             doSearch() {
                 this.initTreeTable()
             },
@@ -235,6 +324,13 @@ layout("/layouts/platform.html"){
                 })
             }
         },
+	    mounted() {
+		    // 点击任意处关闭菜单
+		    document.addEventListener('click', () => (this.menuVisible = false));
+	    },
+	    beforeDestroy() {
+		    document.removeEventListener('click', () => (this.menuVisible = false));
+	    },
         created() {
             setTimeout(() => {
                 if (this.dict.type.SYS_MENU_PLATFORM) {