hac/src/views/system/menu.vue

<template>
    <HcCard>
        <template #header>
            <div class="w-64">
                <el-input v-model="searchForm.name" size="large" placeholder="请输入菜单名称搜索" clearable />
            </div>
            <div class="ml-3">
                <el-button type="primary" size="large" @click="getTableData">
                    <HcIcon name="search-2" />
                    <span>搜索</span>
                </el-button>
            </div>
        </template>
        <template #extra>
            <el-button v-auth-btn="['system_menu_add_btn']" type="primary" size="large" @click="addMenu">
                <HcIcon name="add" />
                <span>新增</span>
            </el-button>
            <el-button v-auth-btn="['system_menu_del_btn']" type="danger" size="large" :disabled="!tableCheckedKeys" @click="deleteClick">
                <HcIcon name="delete-bin-2" />
                <span>删除</span>
            </el-button>
        </template>
        <HcTable
            ui="no-border" border has-children="hasChildren1" :is-index="false" is-check
            :column="tableColumn" :datas="tableData" @selection-change="tableSelectionChange"
        >
            <template #name="{ row }">
                <i v-if="row.source" :class="[`ri-${row?.source}`]" class="hc-icon-i table-menu-icon" />
                <span>{{ row.name }}</span>
            </template>
            <template #category="{ row }">
                <span v-if="row.category === 1">菜单</span>
                <span v-if="row.category === 2">按钮</span>
            </template>
            <template #action="{ row }">
                <el-button v-auth-btn="['system_menu_edit_btn']" size="small" type="primary" @click="eidtMenu(row)">
                    编辑
                </el-button>
                <el-button v-auth-btn="['system_menu_add_children_btn']" size="small" type="success" @click="addChildren(row)">
                    新增子项
                </el-button>
                <el-button v-auth-btn="['system_menu_copy_btn']" size="small" type="warning" @click="copyChildren(row)">
                    复制
                </el-button>
            </template>
        </HcTable>

        <!-- 菜单新增编辑 -->
        <HcDialog
            bg-color="#ffffff" is-to-body widths="60rem" :title="isCopy ? '复制菜单数据' : formModel.id ? '编辑菜单' : '修改菜单'"
            :show="menuDataModal" @save="menuDataModalSave" @close="menuDataModalClose"
        >
            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" 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-cascader v-model="formModel.parentId" :options="tableData" :props="topMenuoptions" clearable />
                        </el-form-item>
                        <el-form-item label="菜单图标:">
                            <el-input v-model="formModel.source" placeholder="图标库为 ">
                                <template #append>
                                    <a href="https://remixicon.cn/" target="_blank">图标库</a>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="菜单排序:">
                            <el-input-number v-model="formModel.sort" :min="1" :max="10" controls-position="right" />
                        </el-form-item>
                        <el-form-item label="菜单类型:">
                            <el-radio-group v-model="formModel.category">
                                <el-radio :label="1">
                                    菜单
                                </el-radio>
                                <el-radio :label="2" class="ml-6">
                                    按钮
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </HcDialog>
    </HcCard>
</template>

<script setup>
import { onActivated, ref } from 'vue'
import mainApi from '~api/system/menu'
import { arrToId, formValidate, getArrValue } from 'js-fast-way'
import config from '~src/config/index'
import { delMessageV2 } from '~com/message/index.js'

//页面被激活时
onActivated(() => {
    getTableData()
})

//菜单数据
const searchForm = ref({ name: '', parentId: '' })
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: 240, fixed: 'right', align: 'center' },
]
const tableData = ref([])
const getTableData = async () => {
    const { error, code, data } = await mainApi.lazyList(searchForm.value)
    if (!error && code === 200) {
        tableData.value = getArrValue(data)
    } else {
        tableData.value = []
    }
}

//多选
const tableCheckedKeys = ref('')
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = arrToId(rows)
}

//删除菜单
const deleteClick = () => {
    if (tableCheckedKeys.value) {
        delMessageV2(async (action, instance, done) => {
            if (action === 'confirm') {
                instance.confirmButtonLoading = true
                deleteApi(tableCheckedKeys.value)
                instance.confirmButtonLoading = false
                done()
            } else {
                done()
            }
    })
    } else {
        window.$message.warning('请选择要删除的菜单')
    }
}
//删除请求
const deleteApi = async (ids) => {
    const { error, code, msg } = await mainApi.remove(ids)
    if (!error && code === 200) {
        window.$message.success('删除成功')
        getTableData().then()
    } else {
        window.$message.success(msg)
    }
}

//菜单数据弹窗
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 topMenuoptions = {
    checkStrictly: true,
    emitPath: false,
    value: 'id',
    label: 'name',
}

//新增菜单
const addMenu = () => {
    formModel.value = {
        sysId: config.sysId,
        isOpen: 1,
        isLayout: 1,
        category: 1,
        parentId: 0,
        sort: 1,
    }
    isCopy.value = false
    menuDataModal.value = true
}

//编辑菜单
const eidtMenu = (row) => {
    formModel.value = {
        ...row,
        children: null,
    }
    isCopy.value = false
    menuDataModal.value = true
}

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

//复制菜单
const isCopy = ref(false)
const copyChildren = (row) => {
    formModel.value = {
        ...row,
        children: null,
        id: '',
    }
    isCopy.value = true
    menuDataModal.value = true
}

//提交保存
const menuDataModalSave = async () => {
    const isForm = await formValidate(formRef.value)
    if (isForm) {
        const form = formModel.value
        const { error, code, msg } = await mainApi.submit({
            ...form,
            alias: form.code,
        })
        if (!error && code === 200) {
            window.$message.success('保存成功')
            menuDataModal.value = false
            getTableData().then()
        } else {
            window.$message.error(msg)
        }
    }
}

//弹窗关闭
const menuDataModalClose = () => {
    menuDataModal.value = false
    isCopy.value = false
    formModel.value = {}
}
</script>

<style>
.table-menu-icon {
    margin-right: 5px;
}
</style>