map/ui/dasadmin/src/views/backend/auth/menuManagement/index.vue

<template>
    <div class="ba-input-item-wrapper">
        <el-container class="defaultContainer">
            <el-aside class="defaultAside">
                <!-- <el-header class="treeHeader"> -->
                <!-- <el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" /> -->
                <!-- </el-header> -->
                <el-main class="treeMain">
                    <el-tree
                        style="max-width: 600px; margin-top: 2.2%"
                        :data="menuData"
                        :props="defaultProps"
                        node-key="id"
                        :load="loadNode"
                        lazy
                        @node-click="handleNodeClick"
                    />
                </el-main>
            </el-aside>
            <el-container class="defaultMainContainer">
                <el-header class="defaultHeader">
                    <div class="searchPart">
                        <el-input v-model="input2" class="searchInput"></el-input>
                        <el-button @click="clickQuery" type="primary" :icon="Search" class="defaultBtn">查询</el-button>
                    </div>
                    <el-button type="primary" :icon="Plus" class="defaultBtn" @click="fromAdd">新增</el-button>
                </el-header>
                <el-main class="defaultMain">
                    <el-table :data="tableData" class="tablePart">
                        <el-table-column prop="menuName" label="菜单名称" />
                        <el-table-column prop="funParam" label="菜单路径" />
                        <el-table-column prop="menuOrder" label="菜单排序" />
                        <el-table-column prop="menuIcon" label="图标" />
                        <!-- <el-table-column prop="name" label="状态" width="180">
                                <el-switch v-model="switchValue" />
                            </el-table-column> -->
                        <el-table-column label="操作">
                            <template #default="scope">
                                <span style="color: #0064aa; cursor: pointer" @click="menuEdit(scope)">编辑</span>
                                |
                                <span style="color: #0064aa; cursor: pointer" @click="fromDelete(scope)">删除</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
            </el-container>
            <!-- 编辑弹框 -->
            <el-dialog v-model="visible" title="编辑菜单" width="500" :before-close="handleClose">
                <el-form
                    ref="formRef"
                    :inline="true"
                    :model="fromUpDate"
                    :rules="rules"
                    style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
                >
                    <!-- <el-form-item label="菜单路径:" prop="funParam">
                    <el-input v-model="fromUpDate.funParam" placeholder="" clearable />
                </el-form-item> -->

                    <el-form-item label="菜单名称:" prop="menuName">
                        <el-input v-model="fromUpDate.menuName" placeholder="" clearable />
                    </el-form-item>

                    <el-form-item label="&nbsp;&nbsp;菜单图标:">
                        <BaInput type="icon" v-model="fromUpDate.menuIcon" />
                    </el-form-item>

                    <el-form-item label="&nbsp;&nbsp;菜单顺序:">
                        <el-input-number :min="0" v-model="fromUpDate.menuOrder" placeholder="" />
                    </el-form-item>

                    <el-form-item label="&nbsp;&nbsp;菜单动作:">
                        <el-radio-group v-model="fromUpDate.funType" size="large">
                            <el-radio-button label="原页面" value="1" />
                            <el-radio-button label="新窗口" value="2" />
                            <el-radio-button label="编辑页面" value="3" />
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="&nbsp;&nbsp;动作参数:">
                        <el-input v-model="fromUpDate.funParam"> </el-input>
                    </el-form-item>

                    <el-form-item label="&nbsp;&nbsp;菜单权限:">
                        <el-select v-model="fromUpDate.authorityId" placeholder="选择菜单权限" multiple style="width: 240px">
                            <el-option v-for="item in allPermissionData" :key="item.id" :label="item.authorityName" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="visible = false"> 取消 </el-button>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                    </div>
                </template>
            </el-dialog>
            <!-- 新增弹框 -->
            <el-dialog v-model="visibleAdd" title="新增菜单" width="500" :before-close="handleCloseAdd">
                <el-form
                    ref="formRef"
                    :inline="true"
                    :model="formInlineAdd"
                    :rules="rules"
                    style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
                >
                    <!-- <el-form-item label="菜单路径:" prop="funParam">
                    <el-input v-model="formInlineAdd.funParam" placeholder="" clearable />
                </el-form-item> -->

                    <el-form-item label="菜单名称:" prop="menuName">
                        <el-input v-model="formInlineAdd.menuName" placeholder="" clearable />
                    </el-form-item>

                    <el-form-item label="&nbsp;&nbsp;菜单图标:">
                        <BaInput type="icon" v-model="formInlineAdd.menuIcon" />
                    </el-form-item>

                    <el-form-item label="&nbsp;&nbsp;菜单顺序:">
                        <el-input-number :min="0" v-model="formInlineAdd.menuOrder" placeholder="" />
                    </el-form-item>

                    <el-form-item label="&nbsp;&nbsp;菜单动作:">
                        <el-radio-group v-model="formInlineAdd.funType" size="large">
                            <el-radio-button label="原页面" value="1" />
                            <el-radio-button label="新窗口" value="2" />
                            <el-radio-button label="编辑页面" value="3" />
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="&nbsp;&nbsp;动作参数:">
                        <el-input v-model="formInlineAdd.funParam"> </el-input>
                    </el-form-item>

                    <el-form-item label="&nbsp;&nbsp;菜单权限:">
                        <el-select v-model="formInlineAdd.authorityId" placeholder="选择菜单权限" multiple style="width: 240px">
                            <el-option v-for="item in allPermissionData" :key="item.id" :label="item.authorityName" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="visibleAdd = false"> 取消 </el-button>
                        <el-button type="primary" @click="addOnSubmit">提交</el-button>
                    </div>
                </template>
            </el-dialog>
            <!-- 删除确认弹框 -->
            <el-dialog v-model="dialogVisibleDelete" title="操作提示" width="500" :before-close="handleCloseDelete">
                <span>确定是否删除?</span>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisibleDelete = false">取消</el-button>
                        <el-button type="primary" @click="dialogVisibleDelete1"> 确定 </el-button>
                    </div>
                </template>
            </el-dialog>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Search, CirclePlusFilled, Plus } from '@element-plus/icons-vue'
import { useAdminInfo } from '/@/stores/adminInfo'
import { menusQuery, menusUpdate, menuDelete, menuAdd, menusTree, allPermissionQuery } from '/@/api/backend'
import { ElMessage, ElMessageBox, FormRules } from 'element-plus'
import BaInput from '/@/components/baInput/index.vue'
import type Node from 'element-plus/es/components/tree/src/model/node'

const adminInfo = useAdminInfo()
console.log(adminInfo, 'adminInfo')

// 树查询
const menuData = ref()
const fromParameter = {
    parentMenuId: '',
}
interface menusTree {
    rows?: any[]
}
const RyMenusTreeQuery = (data: any) => {
    menusTree(data).then((res) => {
        if (res.code == 200) {
            console.log(res, 'res111')
            menuData.value = res.data
        } else {
            ElMessage.error({
                message: res.msg,
                type: 'error',
            })
        }
    })
}
onMounted(() => {
    RyMenusTreeQuery(fromParameter), allPermission()
})

interface Tree {
    name: string
    leaf?: boolean
}

const props = {
    label: 'name',
    children: 'zones',
    isLeaf: 'leaf',
}

const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
    if (node.level === 0) {
        return resolve([])
    }
    const fromParameter = {
        parentMenuId: node.data.id,
    }
    menusTree(fromParameter)
        .then((res: any) => {
            return resolve(res.data)
        })
        .catch((err) => {
            console.log(err)
        })
}
// 菜单查询
const switchValue = ref(true)
interface Tree {
    authorityId: string
    funParam: string
    funType: number
    id: number
    menuIcon: string
    menuName: string
    menuOrder: number
    parentMenuId: number
    revision: number
}
const fromDataId = ref()
const tableData = ref()
const handleNodeClick = (data: Tree) => {
    console.log(data, '1111')
    fromDataId.value = data.id
    const queryData = {
        parentMenuId: data.id,
    }
    console.log(queryData, 'queryData')

    queryMenuMethod(queryData)
}

// 菜单搜索查询
const input2 = ref('')
const queryListData = {
    menuName: '',
    parentMenuId: '',
}
const clickQuery = () => {
    queryListData.menuName = input2.value
    queryListData.parentMenuId = fromDataId.value
    console.log(queryListData, 'queryListDataqueryListData')

    queryMenuMethod(queryListData)
}

// 查询接口
const queryMenuMethod = (data: any) => {
    menusQuery(data).then((res) => {
        console.log(res, 888)

        if (res.code == 200) {
            console.log(res.rows, '菜单页面')
            tableData.value = res.rows
        } else {
            ElMessage.error({
                message: res.msg,
                type: 'error',
            })
        }
    })
}

const defaultProps = {
    children: 'children',
    label: 'menuName',
}

// 菜单
const visible = ref(false)
const menuEdit = (data: any) => {
    console.log(data.row, 'data1111111')
    visible.value = true
    fromUpDate.id = data.row.id
    fromUpDate.revision = data.row.revision
    fromUpDate.menuName = data.row.menuName
    fromUpDate.menuOrder = data.row.menuOrder
    fromUpDate.menuIcon = data.row.menuIcon
    fromUpDate.funType = data.row.funType
    fromUpDate.funParam = data.row.funParam
    fromUpDate.authorityId = data.row.authorityId
}

const handleClose = (done: () => void) => {
    visible.value = false
}

const handleCloseAdd = () => {
    visibleAdd.value = false
}

interface RuleForm {
    menuName: string | undefined
    menuOrder: number
    menuIcon: string
    funType: number
    funParam: string | undefined
    authorityId: string
    parentMenuId: string
    revision: number
    createdBy: string
    createdTime: number
    updatedBy: string
    updatedTime: number
}

// const formInline = reactive<RuleForm>({
//     menuName: undefined,
//     menuOrder: 0,
//     menuIcon: '',
//     funType: 1,
//     funParam: undefined,
//     authorityId: '',
//     parentMenuId: '',
//     revision: 1,
//     createdBy: 'aaa',
//     createdTime: 123456,
//     updatedBy: 'aaa',
//     updatedTime: 12345,
// })

const formRef = ref()
const formActionRef = ref()

const rules = reactive<FormRules<RuleForm>>({
    funParam: [
        {
            required: true,
            message: '菜单路径不能为空',
            trigger: 'blur',
        },
    ],
    menuName: [
        {
            required: true,
            message: '菜单名称不能为空',
            trigger: 'blur',
        },
    ],
})

// 动作参数
interface RyReplaceFields {
    children: string
    title: string
    key: string
    value: string
}

// 菜单修改
const fromUpDate = reactive({
    id: '',
    menuName: '',
    menuOrder: 0,
    menuIcon: '',
    funType: 0,
    funParam: '',
    authorityId: '',
    parentMenuId: '',
    revision: 1,
})

interface menusUpdate {
    // rows?: any[]
}
const onSubmit = () => {
    console.log(fromUpDate, 'fromUpDate')
    formRef.value.validate((valid: any) => {
        if (valid) {
            menusUpdate(fromUpDate).then((res) => {
                console.log(res, '更新')
                if (res.code == 200) {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    const queryData2 = {
                        parentMenuId: fromDataId.value,
                    }
                    queryMenuMethod(queryData2)
                    RyMenusTreeQuery(fromParameter)
                } else {
                    ElMessage.error({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
            visible.value = false
        }
    })
}

// 菜单权限
const allPermissionData = ref()
// 菜单权限
const allPermission = () => {
    allPermissionQuery().then((res) => {
        console.log(res.data, 'resdata')

        allPermissionData.value = res.data
    })
}

// 删除
const fromDeleteData = reactive({
    id: '',
})
interface fromDelete {
    row?: any[]
}
// interface menuDelete {
//     rows?: any[]
// }
const fromDelete = (data: any) => {
    dialogVisibleDelete.value = true
    fromDeleteData.id = data.row.id
}

// 删除提示弹框
const dialogVisibleDelete = ref(false)

const handleCloseDelete = (done: () => void) => {
    dialogVisibleDelete.value = false
}
const dialogVisibleDelete1 = (done: () => void) => {
    dialogVisibleDelete.value = false
    menuDelete(fromDeleteData).then((res) => {
        console.log(res, '删除')
        if (res.code == 200) {
            setTimeout(() => {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
            }, 1000)
            const queryData2 = {
                parentMenuId: fromDataId.value,
            }
            queryMenuMethod(queryData2)
            RyMenusTreeQuery(fromParameter)
        } else {
            ElMessage.error({
                message: res.msg,
                type: 'error',
            })
        }
    })
}

// 菜单新增
const visibleAdd = ref(false)

const formInlineAdd = reactive<RuleForm>({
    menuName: '',
    menuOrder: 0,
    menuIcon: '',
    funType: 1,
    funParam: '',
    authorityId: '',
    parentMenuId: '',
    revision: 1,
    createdBy: 'aaa',
    createdTime: 123456,
    updatedBy: 'aaa',
    updatedTime: 12345,
})

// interface menuAdd {
//     res?: any[]
// }
const fromAdd = () => {
    visibleAdd.value = true
    formInlineAdd.menuName = ''
    formInlineAdd.menuOrder = 0
    formInlineAdd.menuIcon = ''
    formInlineAdd.funType = 1
    formInlineAdd.funParam = ''
    formInlineAdd.authorityId = ''
    formInlineAdd.parentMenuId = ''
    formInlineAdd.revision = 1
    formInlineAdd.createdBy = 'aaa'
    formInlineAdd.createdTime = 123456
    formInlineAdd.updatedBy = 'aaa'
    formInlineAdd.updatedTime = 12345
}
const addOnSubmit = () => {
    console.log(formInlineAdd, 'formInlineAdd')
    formRef.value.validate((valid: any) => {
        if (valid) {
            alert(1)
            formInlineAdd.parentMenuId = fromDataId.value
            menuAdd(formInlineAdd).then((res: any) => {
                console.log(res, '增加')
                if (res.code == 200) {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    const queryData = {
                        parentMenuId: fromDataId.value,
                    }
                    console.log(queryData, 666)

                    queryMenuMethod(queryData)
                    RyMenusTreeQuery(fromParameter)
                } else {
                    ElMessage.error({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })

            visibleAdd.value = false
        }
    })
}

// 分页
const currentPage4 = ref(4)
const pageSize4 = ref(100)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
</script>

<style scoped lang="scss">
.el-row {
    margin-bottom: 20px;
    width: 99%;
    height: 823px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    // border-radius: 4px;
    background-color: #fff;
}
#el-id-6028-4 {
    position: absolute;
    top: 500px;
}
.menu_popover {
    z-index: 2009;
    position: absolute;
    left: 500px;
    top: 600px;
    display: none;
}
.el-input-group__append {
    cursor: pointer;
}
@mixin searchInput($value) {
    margin-right: $value;
    width: 220px;
    height: 40px;
}
$defaultHeaderHeight: 60px;
$defaultMainHeight: calc(100% - 60px);
$paginationHeight: 32px;
.ba-input-item-wrapper {
    width: 100%;
    height: 100%;
    // background-color: #fff;
    .defaultContainer {
        height: 100%;
        .defaultAside {
            width: 260px;
            height: 100%;
            border-right: 1px solid #eaebed;
            .treeHeader {
                display: flex;
                align-items: center;
                justify-content: center;
                height: $defaultHeaderHeight;
                .searchInput {
                    @include searchInput(0);
                }
            }
            .treeMain {
                height: $defaultMainHeight;
                .treePart {
                    height: 100%;
                }
            }
        }
        .defaultMainContainer {
            height: 100%;
            .defaultHeader {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: $defaultHeaderHeight;
                .searchPart {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .defaultBtn {
                    width: 88px;
                    height: 40px;
                }
                .searchInput {
                    @include searchInput(10px);
                }
            }
            .defaultMain {
                height: $defaultMainHeight;
                .tablePart {
                    height: calc(100% - $paginationHeight);
                }
                .tableOperate {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    a {
                        margin: 5px;
                        color: #0064aa;
                        font-weight: 600;
                        &:hover {
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
</style>