admin/src/views/authority/api.vue

<template>
    <hc-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.name" :value="item.id" />
                </el-select>
            </div>
            <div class="ml-3 w-60">
                <hc-search-input v-model="searchForm.name" placeholder="请输入菜单名称" @search="searchClick" />
            </div>
        </template>
        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" :is-index="false"  lazy :load="tableLoad">
            <template #sysId="{ row }">{{ getSystemNmae(row.sysId) }}</template>
            <template #action="{ row }">
                <el-link type="primary" @click="authRowClick(row)">权限配置</el-link>
            </template>
        </hc-table>

        <!-- 权限配置 -->
        <HcApiAuth v-model="isDataAuthShow" :mid="rowAuthInfo.id" :title="rowAuthInfo.name" @close="dataAuthClose" />
    </hc-card>
</template>

<script setup>
import { nextTick, onActivated, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getArrValue, getObjValue } from 'js-fast-way'
import HcApiAuth from './modules/api/auth.vue'
import { getClinetAll } from '~api/other'
import menuApi from '~api/system/menu'

//初始组合式
const router = useRouter()
const useRoutes = useRoute()

defineOptions({
    name: 'ApiScope',
})

//激活
onActivated(() => {
//获取参数
    const { sysId, name } = getObjValue(useRoutes.query)
    searchForm.value = { sysId: sysId, name: name }
    //获取数据
    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.name : ''
}

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

//搜索
const searchClick = () => {
    router.push({
        name: 'api_scope',
        query: searchForm.value,
    })
    getTableData()
}

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

//获取表格数据
const tableLoading = ref(true)
const getTableData = async () => {
    tableData.value = []
    tableLoading.value = true
    tableData.value = await getLazyList(0)
    tableLoading.value = false
}

//懒加载表格
const tableLoad = async (row, node, resolve) => {
    resolve(await getLazyList(row.id))
}

//获取表格数据
const getLazyList = async (id) => {
    let newArr = []
    const { data } = await menuApi.getLazyList({
        ...searchForm.value,
        parentId: id,
    })
    //处理数据
    const res = getArrValue(data)
    for (let i = 0; i < res.length; i++) {
        if (res[i].category === 1) {
            newArr.push(res[i])
        }
    }
    return newArr
}

//数据权限配置
const isDataAuthShow = ref(false)
const rowAuthInfo = ref({})
const authRowClick = (row) => {
    rowAuthInfo.value = row
    nextTick(() => {
        isDataAuthShow.value = true
    })
}

//关闭权限配置弹窗
const dataAuthClose = () => {
    isDataAuthShow.value = false
    rowAuthInfo.value = {}
}
</script>