analysis/src/views/system/menu.vue

<!--  -->
<template>
    <div class="hc-layout-box menu-page">
        <hc-card :scrollbar="false" action-size="lg">
            <template #extra>
                <el-button color="#20C98B" type="primary" @click="addMenu">
                    <hc-icon class="text-white" name="add" />
                    <span class="text-white">新增</span>
                </el-button>
                <el-button :disabled="tableCheckedKeys.length <= 0" color="#FF6C6C" @click="rowDelClick">
                    <hc-icon class="text-white" name="delete-bin-2" />
                    <span class="text-white">删除</span>
                </el-button>
            </template>
            <template #header>
                <div class="relative w-[300px]">
                    <hc-search-input v-model="searchForm.name" color="#151921" text="搜索" @search="searchClick" />
                </div>
            </template>
            <hc-table
                :check-style="{ fixed: true, width: 29 }" :column="tableColumn" :datas="tableData"
                :index-style="{ fixed: true, width: 60 }" :is-index="true" ui="no-border"
                class="menu-page-table" is-check lazy border :load="tableLoad"
                @selection-change="tableSelectionChange"
            >
                <template #category="{ row }">
                    <span v-if="row.category === 1">菜单</span>
                    <span v-if="row.category === 2">按钮</span>
                </template>
                <template #action="{ row }">
                    <el-link type="success" @click="eidtMenu(row)">
                        <hc-icon name="edit" /> 编辑
                    </el-link>
                    <el-link type="success" @click="addChildren(row)">
                        <hc-icon name="edit" /> 新增子项
                    </el-link>
                    <el-link type="success" @click="copyChildren(row)">
                        <hc-icon name="file-copy" /> 复制
                    </el-link>
                </template>
            </hc-table>
        </hc-card>
    </div>
    <!-- 菜单新增编辑 -->
    <hc-dialog v-model="menuDataModal" :title="isCopy ? '复制菜单数据' : formModel.id ? '编辑菜单' : '修改菜单'" widths="46rem" @close="menuDataModalClose" @save="menuDataModalSave">
        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto" size="large">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="菜单名称:" prop="name">
                        <el-input v-model="formModel.name" placeholder="六字以内的名称" />
                    </el-form-item>
                    <el-form-item label="路由地址:" prop="path">
                        <el-input v-model="formModel.path" placeholder="url上显示的地址" />
                    </el-form-item>
                    <el-form-item label="菜单编号:" prop="code">
                        <el-input v-model="formModel.code" placeholder="路由中的跳转name" />
                    </el-form-item>
                    <el-form-item label="菜单备注:">
                        <el-input v-model="formModel.remark" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上级菜单:">
                        <el-tree-select
                            v-model="formModel.parentId" placeholder="选择上级菜单"
                            :data="levelMenu" :props="levelMenuProps" clearable filterable check-strictly block :render-after-expand="false"
                        />
                    </el-form-item>
                    <el-form-item label="菜单图标:">
                        <el-input v-model="formModel.source" clearable>
                            <template #append>
                                <el-button @click="isIconShow = true">选择图标</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="菜单排序:">
                        <el-input-number v-model="formModel.sort" :min="1" block controls-position="right" />
                    </el-form-item>
                    <el-form-item label="菜单类型:">
                        <el-radio-group v-model="formModel.category">
                            <el-radio :value="1">菜单</el-radio>
                            <el-radio :value="2" class="ml-6">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </hc-dialog>
    <!-- 图标选择 -->
    <hc-menu-icon v-model="isIconShow" @finish="menuIconFinish" />
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { HcDelMsg } from 'hc-vue3-ui'
import mainApi from '~api/system/menu'
import { getArrValue } from 'js-fast-way'

onMounted(() => {
    getTableData()
    getLevelMenuData()
})

//搜索表单
const searchForm = ref({ name: null })
const searchClick = ()=>{
    getTableData()
}

const tableColumn = [
    { key: 'name', name: '菜单名称', minWidth: 260 },
    { key: 'code', name: '菜单编号', width: 240 },
    { key: 'path', name: '路由地址', minWidth: 220 },
    { key: 'category', name: '菜单类型', width: 90, align: 'center' },
    { key: 'sort', name: '排序', width: 80, align: 'center' },
    { key: 'remark', name: '备注', minWidth: 200 },
    { key: 'action', name: '操作', width: 180, fixed: 'right', align: 'center' },
]
const tableData = ref([])

//获取菜单数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableData.value = []
    tableLoading.value = true
    const { data } = await mainApi.getLazyList({
        ...searchForm.value,
        parentId: 0,
    })
    tableData.value = getArrValue(data)
    tableLoading.value = false
}

//懒加载表格
const tableLoad = async (row, node, resolve) => {
    const { data } = await mainApi.getLazyList({
        ...searchForm.value,
        parentId: row.id,
    })
    resolve(getArrValue(data))
}

//多选事件
const tableCheckedKeys = ref([])
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows
}

//上级
const levelMenuProps = {
    label: 'title',
}

const levelMenu = ref([])
const getLevelMenuData = async () => {
    const { data } = await mainApi.getMenuTree()
    levelMenu.value = getArrValue(data)
}

//菜单数据弹窗
const isCopy = ref(false)
const menuDataModal = ref(false)
const formRef = ref(null)
const formModel = ref({ category: 1 })
const formRules = {
    name: { required: true, trigger: 'blur', message: '请输入菜单名称' },
    path: { required: true, trigger: 'blur', message: '请输入路由地址' },
    code: { required: true, trigger: 'blur', message: '请输入菜单编号' },
}

//编辑菜单
const eidtMenu = (row) => {
    formModel.value = {
        ...row,
        children: null,
    }
    isCopy.value = false
    menuDataModal.value = true
}
//新增菜单
const addMenu = () => {
    formModel.value = {
        category: 1,
        parentId: 0,
        sort: 1,
    }
    isCopy.value = false
    menuDataModal.value = true
}
const copyChildren = (row) => {
    formModel.value = {
        ...row,
        children: null,
        id: '',
    }
    isCopy.value = true
    menuDataModal.value = true
}

//删除菜单
const rowDelClick = () => {
    HcDelMsg(async (resolve) => {
        // await removeContractTreeNode()
        resolve() //关闭弹窗的回调
    })
}

//新增子级菜单
const addChildren = (row) => {
    formModel.value = {
        category: 1,
        parentId: row.id,
        sort: 1,
    }
    isCopy.value = false
    menuDataModal.value = true
}
const menuDataModalSave = () => {

}

const menuDataModalClose = () => {
    menuDataModal.value = false
}

//图标选择
const isIconShow = ref(false)
const menuIconFinish = (icon) => {
    formModel.value.source = icon
    isIconShow.value = false
}
</script>

<style lang='scss' scoped>
.hc-layout-box {
    position: relative;
    height: 100%;
    width: 100%;
}
</style>