easydo-mes-web/src/views/system/menu/index.vue

<template>
	<el-container class="is-vertical">
        <sc-page-header @add="table_add()"></sc-page-header>

        <el-container class="menu-container">
            <el-aside width="310px">
                <el-header>
                    <el-input v-model="filterText" clearable placeholder="输入关键字进行过滤"></el-input>
                </el-header>

                <el-main class="nopadding">
                    <el-scrollbar>
                        <el-tree ref="treeRef" node-key="id" :data="menuTree" :current-node-key="currentId" highlight-current :expand-on-click-node="false" check-strictly :filter-node-method="filterNode" @node-click="data => nodeClick(data)">
                            <template #default="{ data }">
                                <span :id="data.id" :title="data.title" class="custom-tree-node">
                                    <vxe-text-ellipsis :content="data.title"></vxe-text-ellipsis>
                                    <el-button-group class="do">
                                        <el-button icon="el-icon-plus" size="small" @click.stop="table_add(data)"></el-button>
                                        <el-button icon="el-icon-delete" size="small" @click.stop="table_del(data)"></el-button>
                                    </el-button-group>
                                </span>
                            </template>
                        </el-tree>
                    </el-scrollbar>
                </el-main>
            </el-aside>

            <el-main class="nopadding">
                <template v-if="!dialog">
                    <el-empty class="do" description="请选择左侧菜单/按钮后操作" :image-size="100"></el-empty>
                    <el-empty class="media-do" description="请选择上侧菜单/按钮后操作" :image-size="100"></el-empty>
                </template>
                
                <menu-form v-else ref="menuFormRef" :menuTree="menuTree" @success="menuSuccess"></menu-form>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import XEUtils from "xe-utils";

import API from "@/api";
import menuForm from "./detail";

const filterText = ref("");
const menuTree = ref([]);
const currentId = ref(null);

const treeRef = ref();

watch(() => filterText.value, value => treeRef.value.filter(value));
const filterNode = (value, data) => {
    if (!value) return true;
    return data.title.includes(value);
}

const dialog = ref(false);
const menuFormRef = ref();

const nodeClick = data => {
    currentId.value = data.id;

    dialog.value = true;
    nextTick(() => menuFormRef.value?.setData(data, "edit"));
}

const table_add = (data = {}) => {
    dialog.value = true;
    nextTick(() => menuFormRef.value?.setData(data));
}

const table_del = ({ id }) => {
    ElMessageBox.confirm("是否确认删除该菜单?", "删除警告", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        API.system.menu.del({ id }).then(() => {
            ElMessage.success("操作成功");
            if (currentId.value == id) {
                currentId.value = null;
                dialog.value = false;
            }
            fetchMenu();
        });
    }).catch(() => {});
}

const menuSuccess = id => {
    currentId.value = id;
    fetchMenu();
}

const fetchMenu = () => API.system.menu.get({ orderBy: "menuSort_asc" }).then(res => {
    menuTree.value = XEUtils.toArrayTree(res, { parentKey: "pid" });
    currentId.value && document.querySelector(".el-tree-node.is-current")?.scrollIntoView({ block: "center" });
}).catch(() => menuTree.value = []);

fetchMenu();
</script>

<style lang="scss" scoped>
.menu-container {border-top: 1px solid var(--el-border-color-light);}
.menu-container .el-aside {display: flex;flex-direction: column;}
.menu-container .el-aside .el-main {padding-top: 15px;padding-left: 15px;}
.menu-container .el-tree .custom-tree-node .do {display: none;}
.menu-container .el-tree :deep(.el-tree-node__content):hover .do {display: flex;}
.menu-container .media-do {display: none;}

@media (max-width: 992px) {
    .aminui-main > .el-container > .el-container.menu-container {display: block;margin-top: 0;border: none;}
    .menu-container .el-aside {width: 100%;}
    .menu-container .el-aside .el-main {padding-bottom: 15px;}
    .menu-container .el-aside + .el-main {margin-top: 15px;}
    .menu-container .media-do {display: flex;}
    .menu-container .do {display: none;}
}
</style>