admin/src/views/system/menu.vue

<template>
    <hc-new-card>
        <template #header>
            <div class="w-40">
                <el-select v-model="searchForm.sysId" filterable clearable block placeholder="选择所属系统">
                    <el-option v-for="item in clinets" :key="item.id" :label="item.clientId" :value="item.id" />
                </el-select>
            </div>
            <div class="ml-3 w-60">
                <hc-search-input v-model="searchForm.name" placeholder="请输入菜单名称" @search="searchClick" />
            </div>
        </template>
        <template #extra>
            <el-button hc-btn type="primary">新增</el-button>
            <el-button hc-btn type="danger">删除</el-button>
        </template>
        <hc-table
            ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading"
            :is-index="false" is-new is-check :check-style="{ width: 29 }" lazy :load="tableLoad"
            @selection-change="tableCheckChange"
        >
            <template #sysId="{ row }">
                {{ getSystemNmae(row.sysId) }}
            </template>
            <template #category="{ row }">
                {{ row.category === 1 ? '菜单' : '按钮' }}
            </template>
            <template #action="{ row }">
                <el-link type="warning">修改</el-link>
                <el-link type="success">新增子项</el-link>
                <el-link type="primary">复制</el-link>
                <el-link type="danger">删除</el-link>
            </template>
        </hc-table>
    </hc-new-card>
</template>

<script setup>
import { onActivated, ref } from 'vue'
import mainApi from '~api/system/menu'
import { getArrValue } from 'js-fast-way'
import { getClinetAll } from '~api/other'

//激活
onActivated(() => {
    getClinetAllApi()
    getTableData()
})

//获取所有系统
const clinets = ref([])
const getClinetAllApi = async () => {
    const { data } = await getClinetAll()
    clinets.value = getArrValue(data)
}

//获取系统名称
const getSystemNmae = (id) => {
    const item = clinets.value.find((item) => item.id === id)
    return item ? item.clientId : ''
}

//搜索表单
const searchForm = ref({
    sysId: null, name: null,
})

//搜索
const searchClick = () => {
    getTableData()
}

//表格数据
const tableRef = ref(null)
const tableColumn = ref([
    { key: 'name', name: '菜单名称' },
    { key: 'sysId', name: '所属系统' },
    { key: 'path', name: '路由地址' },
    { key: 'code', name: '菜单编号' },
    { key: 'category', name: '菜单类型', width: 90, align: 'center' },
    { key: 'sort', name: '排序', width: 80, align: 'center' },
    { key: 'action', name: '操作', width: 200, align: 'center' },
])

//获取表格数据
const tableLoading = ref(false)
const tableData = ref([{}])
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 tableCheckChange = () => {

}
</script>

<style scoped lang="scss">

</style>