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

<template>
    <div>
        <el-card class="tjm_card_style_custom">
            <div class="tjm_card_title">查询表格</div>
            <div class="tjm_card_select">
                <div class="tjm_card_select_left">
                <el-form
                    :inline="true"
                    :model="formInline"
                    label-width="80px"
                    :label-position="'left'"
                >
                    <el-form-item label="菜单名称">
                    <el-input
                        style="width: 100%"
                        v-model="formInline.name"
                        placeholder="请输入"
                        clearable
                    />
                    </el-form-item>
                    <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="formInline.date"
                        type="daterange"
                        placeholder="Pick a date"
                        clearable
                    />
                    </el-form-item>
                    <el-form-item label="菜单状态">
                    <el-select
                        v-model="formInline.status"
                        clearable
                        placeholder="请选择"
                    >
                        <el-option label="启用" value="1" />
                        <el-option label="禁用" value="2" />
                    </el-select>
                    </el-form-item>
                    <el-form-item>
                    <el-button type="primary">
                        <el-icon class="tjm_btn_icon_right">
                        <tjm-icon-ep-Plus />
                        </el-icon>
                        搜索
                    </el-button>
                    <el-button>
                        <el-icon class="tjm_btn_icon_right">
                        <tjm-icon-ep-RefreshRight />
                        </el-icon>
                        重置
                    </el-button>
                    </el-form-item>
                </el-form>
                </div>
            </div>
            <el-divider />

            <div class="tjm_card_table">
                <el-table
                    header-cell-class-name="tjm_card_table_header"
                    :data="tableData"
                    v-loading="loading"
                    border
                    style="width: 100%"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                    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>
    </div>
</template>

<script setup>
import { getMenuTree, addMenu, modMenu, delMenu } from '@/api/system/menu.js'
import { watch } from 'vue'

const { proxy } = getCurrentInstance()
import { ClickOutside as vClickOutside } from 'element-plus'

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 => {
                    console.log(res)
                    if (res.code == 200) {
                        ElMessage({
                            message: res.msg,
                            type: 'success'
                        })
                        getMenuTreeList()
                        open.value = false
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: warning
                        })
                    }
                })
            } else {
                addMenu(form.value).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        getMenuTreeList()
                        open.value = false
                        ElMessage({
                            message: res.msg,
                            type: 'success'
                        })
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: warning
                        })
                    }
                })
            }
        } else {
            console.log('检验不通过')
        }
    })
}

function cancel() {
    open.value = false
}

//
onMounted(() => {
})

function getMenuTreeList() {
    getMenuTree(10001).then(res => {
        console.log("获取的菜单", res)
        if (res.code === 200) {
            if (res.data.length && res.data[0].children) {
                // const array = []
                // res.data[0].children.forEach((item) => {
                //   if (item.menuType === 3) {
                //     array.push(item)
                //   }
                // })
                tableData.value = res.data
            } else {
                tableData.value = res.data
            }
        }
    })
}

//处理添加菜单时选择父级 当选择父级拥有按钮子级时候不可同时作为按钮与菜单的父级
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
    }
    console.log(form.value)
    open.value = true
    title.value = '修改菜单'
}

//删除
function handleDelete(row) {
    ElMessageBox.confirm('是否确认删除"' + row.name + '"?', '删除警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        delMenu({ id: row.id }).then(res => {
            console.log(res)
            if (res.code == 200) {
                getMenuTreeList()
                ElMessage({
                    message: res.msg,
                    type: 'success'
                })
            } else {
                ElMessage({
                    message: res.msg,
                    type: warning
                })
            }
        })
    })
}

getMenuTreeList()
</script>

<style lang="scss" scoped></style>