easydo-zcgx-web/src/views/system/menu.vue

<template>
    <el-card class="tjm_card_style_custom">
        <div class="tjm_card_title">条件检索</div>
        <div class="tjm_card_select">
            <el-scrollbar>
                <el-form class="tjm_card_select_left" :model="params" label-width="80px" label-position="left">
                    <el-row :gutter="15">
                        <el-col :lg="8" :md="12" :xs="24">
                            <el-form-item label="菜单名称">
                                <el-input v-model="formInline.name" clearable placeholder="请输入菜单名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :lg="8" :md="12" :xs="24">
                            <el-form-item label="创建时间">
                                <el-date-picker v-model="formInline.date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                            </el-form-item>
                        </el-col> -->
                        <el-col :lg="8" :md="12" :xs="24">
                            <el-form-item label="菜单状态">
                                <el-select v-model="formInline.state" clearable placeholder="请选择菜单状态">
                                    <el-option label="启用" value="0" />
                                    <el-option label="禁用" value="1" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>            
                </el-form>
                <div class="tjm_card_select_right">
                    <el-button type="primary" icon="search" @click="searchMenuListBtn">搜索</el-button>
                    <el-button icon="refresh-right" @click="resetParamsBtn">重置</el-button>
                </div>
            </el-scrollbar>
        </div>
        <el-divider></el-divider>

        <div class="tjm_card_table">
            <el-table
                header-cell-class-name="tjm_card_table_header"
                :data="tableData"
                v-loading="loading"
                border
                :tree-props="{ children: 'children' }"
                row-key="id"
                :expand-row-keys="expandKeys"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="菜单名称" width="180" />
                <el-table-column prop="path" label="菜单路由" />
                <el-table-column prop="type" label="类型" width="120">
                    <template #default="scope">
                        <el-button :type="scope.row.type == 1 ? 'primary' : 'success'" text>
                            {{ scope.row.type == 1 ? "菜单" : "按钮" }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="设备" width="120">
                    <template #default="scope">
                        <el-button :type="scope.row.menuType != 2 ? 'primary' : 'success'" text>
                            {{ scope.row.menuType == 1 ? "Cloud端" : scope.row.menuType == 2 ? "APP端" : "Boot端" }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="icon" label="图标" width="150">
                    <!-- <template #default="scope">
                        <el-icon size="18">
                            <component :is="scope.row.icon" />
                        </el-icon>
                    </template> -->
                </el-table-column>
                <el-table-column prop="sort" label="排序" width="150" />
                <el-table-column prop="ope" label="操作" width="220">
                    <template #default="scope">
                        <el-button
                            link
                            type="primary"
                            icon="Edit"
                            @click="handleUpdate(scope.row)"
                        >修改</el-button>
                        <el-button
                            link
                            type="primary"
                            icon="Plus"
                            @click="handleAdd(scope.row)"
                        >新增</el-button>
                        <el-button
                            link
                            type="primary"
                            icon="Delete"
                            @click="handleDelete(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>

    <!-- 编辑 -->
    <el-dialog :title="title" v-model="open" width="680px" append-to-body>
        <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="上级菜单" prop="parentId">
                        <el-tree-select
                            style="width: 100%"
                            v-model="form.parentId"
                            :data="selectTableData"
                            :props="{ value: 'id', label: 'name', children: 'children' }"
                            value-key="id"
                            placeholder="选择上级菜单"
                            check-strictly
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input
                            v-model="form.name"
                            placeholder="请输入菜单名称"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="菜单代码" prop="code">
                        <el-input
                            v-model="form.code"
                            placeholder="请输入菜单代码"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="菜单图标">
                        <el-popover
                            placement="bottom-start"
                            :width="540"
                            v-model:visible="showChooseIcon"
                            trigger="click"
                            @show="showSelectIcon"
                        >
                            <template #reference>
                                <el-input
                                    v-model="form.icon"
                                    placeholder="点击选择图标"
                                    @blur="showSelectIcon"
                                    v-click-outside="hideSelectIcon"
                                    readonly
                                >
                                    <template #prefix v-if="form.icon">
                                        <el-icon size="16" class="el-input__icon">
                                            <component v-if="form.icon.indexOf('ep') !== -1" :is="form.icon.slice(2)" />
                                            <svg-icon v-if="form.icon.indexOf('tjm') !== -1" :icon-class="form.icon.slice(4)" />
                                        </el-icon>
                                    </template>
                                </el-input>
                            </template>
                            <icon-select
                                ref="iconSelectRef"
                                @selected="selected"
                                :active-icon="form.icon"
                            />
                        </el-popover>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="菜单描述">
                        <el-input
                            v-model="form.description"
                            placeholder="请输入菜单描述"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="菜单状态">
                        <el-radio-group v-model="form.state" @change="changeType">
                            <el-radio :label="0">启用</el-radio>
                            <el-radio :label="1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单路径" prop="path">
                        <el-input
                            v-model="form.path"
                            placeholder="菜单路径(需要与资源路径一致)"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="组件路径">
                        <el-input v-model="form.path" disabled clearable />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="菜单类型">
                        <el-radio-group v-model="form.type" @change="changeType">
                            <el-radio :label="1">菜单</el-radio>
                            <el-radio :label="2">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备类型">
                        <el-radio-group v-model="form.menuType" @change="changeType">
                            <!-- <el-radio :label="1">Cloud端</el-radio> -->
                            <el-radio :label="3">Boot端</el-radio>
                            <el-radio :label="2">APP端</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="系统选择">
                        <el-input
                            v-model="form.systemCode"
                            disabled
                            placeholder="请选择系统"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单排序">
                        <el-input
                            v-model="form.sort"
                            placeholder="请输入菜单排序"
                            clearable
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { getMenuTree, addMenu, modMenu, delMenu } from "@/api/system/menu.js"
import API from "@/api/system/log";

const { proxy } = getCurrentInstance()
const loading = ref(false) //加载
const expandKeys = reactive(["1", "1762659463383281665"]) //展开
const tableData = ref([])
const selectTableData = ref([])
const formInline = ref({})

//弹出框
const open = ref(false)
const title = ref("")
const data = reactive({
    form: {
        parentId: "1",
        type: 1,
        state: 0,
        menuType: 3,
        systemCode: 10001,
        sort: 0
    },
    rules: {
        id: [{ required: true, message: "上级菜单不能为空", trigger: "blur" }],
        name: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
        code: [{ required: true, message: "菜单代码不能为空", trigger: "blur" }],
        path: [{ required: true, message: "菜单路径不能为空", trigger: "blur" }]
    }
})

function reset() {
    form.value = {
        parentId: "1",
        type: 1,
        state: 0,
        menuType: 3,
        systemCode: 10001,
        sort: 0
    }
    if (proxy.$refs["menuRef"]) {
        proxy.$refs["menuRef"].resetFields()
    }
}

const { form, rules } = toRefs(data)

function submitForm() {
    proxy.$refs["menuRef"].validate(valid => {
        if (valid) {
            if (form.value.id != undefined) {
                modMenu(form.value).then(res => {
                    API.add("修改", "system_menu");
                    open.value = false
                    ElMessage.success(res.msg)
                    getMenuTreeList()
                })
            } else {
                addMenu(form.value).then(res => {
                    API.add("新增", "system_menu");
                    open.value = false
                    ElMessage.success(res.msg)
                    getMenuTreeList()
                })
            }
        } else {
            return false
        }
    })
}

function cancel() {
    open.value = false
}

function searchMenuListBtn() {
    getMenuTreeList()
}

function resetParamsBtn() {
    formInline.value = {}
    getMenuTreeList()
}

function getMenuTreeList() {
    getMenuTree(10001).then(res => tableData.value = formatMenuList(res.data))
}

function formatMenuList(array) {
    let list = [];

    for (const arr of array) {
        if (!arr.children || !arr.children.length) {
            if (formatQuery(arr)) list.push(arr);
        } else {
            arr.children = formatMenuList(arr.children);
            if (formatMenuList(arr.children).length) list.push(arr);
        }
    }
    
    return list
}

function formatQuery(data) {
    let isAccord = true;
    for (const key in formInline.value) {
        if (formInline.value[key] && (data[key] + "") && !(data[key] + "").includes(formInline.value[key])) {
            isAccord = false;
            break;
        }
    }
    return isAccord
}

//处理添加菜单时选择父级 当选择父级拥有按钮子级时候不可同时作为按钮与菜单的父级
watch(tableData, () => {
    selectTableData.value = JSON.parse(JSON.stringify(tableData.value))
    dealTreeRemBtn(selectTableData.value, true)
    form.value.type = 1
})

function dealTreeRemBtn(arr, disabled = false) {
    arr.forEach(item => {
        if (item.type == 2) {
            item.disabled = true
        } else if (
            item.children &&
            item.children.length > 0 &&
            item.children[0].type == 2
        ) {
            item.disabled = disabled
            dealTreeRemBtn(item.children, disabled)
        } else {
            dealTreeRemBtn(item.children, disabled)
        }
    })
}

//类型更改
function changeType(e) {
    if (e == 1) {
        dealTreeRemBtn(selectTableData.value, true)
    } else {
        dealTreeRemBtn(selectTableData.value, false)
    }
}

//icon
const showChooseIcon = ref(false)
const iconSelectRef = ref(null)

// 展示下拉图标
function showSelectIcon() {
    iconSelectRef.value.reset()
    showChooseIcon.value = true
}

// 选择图标
function selected(name) {
    form.value.icon = name
    showChooseIcon.value = false
}

// 图标外层点击隐藏下拉列表
function hideSelectIcon(event) {
    var elem =
        event.relatedTarget ||
        event.srcElement ||
        event.target ||
        event.currentTarget
    var className = elem.className
    if (className !== "el-input__inner") {
        showChooseIcon.value = false
    }
}

//新增
function handleAdd(row) {
    reset()
    if (row != null && row.id) {
        form.value.parentId = row.id
    } else {
        form.value.parentId = "1"
    }
    open.value = true
    title.value = "添加菜单"
}

//修改
async function handleUpdate(row) {
    reset()
    let {
        code,
        description,
        icon,
        id,
        menuType,
        name,
        parentId,
        path,
        sort,
        state,
        type
    } = row
    form.value = {
        code,
        description,
        icon,
        id,
        menuType,
        name,
        parentId: parentId.toString(),
        path,
        sort,
        state,
        type
    }
    open.value = true
    title.value = "修改菜单"
}

//删除
function handleDelete(row) {
    ElMessageBox.confirm(`是否确认删除"${row.name}"?`, "删除警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        delMenu({ id: row.id }).then(res => {
            API.add("删除", "system_menu");
            ElMessage.success(res.msg)
            getMenuTreeList()
        })
    })
}

getMenuTreeList()
</script>