前端代码
This commit is contained in:
@@ -0,0 +1,884 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="kra-search-box">
|
||||
<el-form ref="searchForm" :inline="true" :model="searchInfo">
|
||||
<el-form-item label="路径">
|
||||
<el-input v-model="searchInfo.path" placeholder="路径" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="searchInfo.description" placeholder="描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="API分组">
|
||||
<el-select
|
||||
v-model="searchInfo.apiGroup"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in apiGroupOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求">
|
||||
<el-select v-model="searchInfo.method" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in methodOptions"
|
||||
:key="item.value"
|
||||
:label="`${item.label}(${item.value})`"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="search" @click="onSubmit">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button icon="refresh" @click="onReset"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="kra-table-box">
|
||||
<div class="kra-btn-list">
|
||||
<el-button type="primary" icon="plus" @click="openDialog('addApi')">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button icon="delete" :disabled="!apis.length" @click="onDelete">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button icon="Refresh" @click="onFresh"> 刷新缓存 </el-button>
|
||||
<el-button icon="Compass" @click="onSync"> 同步API </el-button>
|
||||
<ExportTemplate template-id="api" />
|
||||
<ExportExcel template-id="api" :limit="9999" />
|
||||
<ImportExcel template-id="api" @on-success="getTableData" />
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
@sort-change="sortChange"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="ID"
|
||||
min-width="60"
|
||||
prop="ID"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API路径"
|
||||
min-width="150"
|
||||
prop="path"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API分组"
|
||||
min-width="150"
|
||||
prop="apiGroup"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API简介"
|
||||
min-width="150"
|
||||
prop="description"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="请求"
|
||||
min-width="150"
|
||||
prop="method"
|
||||
sortable="custom"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{ scope.row.method }} / {{ methodFilter(scope.row.method) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="left" fixed="right" label="操作" :min-width="appStore.operateMinWith">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="edit"
|
||||
type="primary"
|
||||
link
|
||||
@click="editApiFunc(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="user"
|
||||
type="primary"
|
||||
link
|
||||
@click="openAssignRoleDrawer(scope.row)"
|
||||
>
|
||||
分配角色
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="delete"
|
||||
type="primary"
|
||||
link
|
||||
@click="deleteApiFunc(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="kra-pagination">
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 30, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-drawer
|
||||
v-model="syncApiFlag"
|
||||
:size="appStore.drawerSize"
|
||||
:before-close="closeSyncDialog"
|
||||
:show-close="false"
|
||||
>
|
||||
<warning-bar
|
||||
title="同步API，不输入路由分组将不会被自动同步，如果api不需要参与鉴权，可以按忽略按钮进行忽略。"
|
||||
/>
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-base">同步路由</span>
|
||||
<div>
|
||||
<el-button @click="closeSyncDialog">
|
||||
取 消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="syncing"
|
||||
@click="enterSyncDialog"
|
||||
>
|
||||
确 定
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<h4>
|
||||
新增路由
|
||||
<span class="text-xs text-gray-500 mx-2 font-normal"
|
||||
>存在于当前路由中，但是不存在于api表</span
|
||||
>
|
||||
</h4>
|
||||
<el-table
|
||||
v-loading="syncing"
|
||||
:data="syncApiData.newApis"
|
||||
>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API路径"
|
||||
min-width="150"
|
||||
prop="path"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API分组"
|
||||
min-width="150"
|
||||
prop="apiGroup"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-select
|
||||
v-model="row.apiGroup"
|
||||
placeholder="请选择或新增"
|
||||
allow-create
|
||||
filterable
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in apiGroupOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API简介"
|
||||
min-width="150"
|
||||
prop="description"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.description" autocomplete="off" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="请求"
|
||||
min-width="150"
|
||||
prop="method"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{ scope.row.method }} / {{ methodFilter(scope.row.method) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button icon="plus" type="primary" link @click="addApiFunc(row)">
|
||||
单条新增
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="sunrise"
|
||||
type="primary"
|
||||
link
|
||||
@click="ignoreApiFunc(row, true)"
|
||||
>
|
||||
忽略
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<h4>
|
||||
已删除路由
|
||||
<span class="text-xs text-gray-500 ml-2 font-normal"
|
||||
>已经不存在于当前项目的路由中，确定同步后会自动从apis表删除</span
|
||||
>
|
||||
</h4>
|
||||
<el-table :data="syncApiData.deleteApis">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API路径"
|
||||
min-width="150"
|
||||
prop="path"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API分组"
|
||||
min-width="150"
|
||||
prop="apiGroup"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API简介"
|
||||
min-width="150"
|
||||
prop="description"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="请求"
|
||||
min-width="150"
|
||||
prop="method"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{ scope.row.method }} / {{ methodFilter(scope.row.method) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<h4>
|
||||
忽略路由
|
||||
<span class="text-xs text-gray-500 ml-2 font-normal"
|
||||
>忽略路由不参与api同步，常见为不需要进行鉴权行为的路由</span
|
||||
>
|
||||
</h4>
|
||||
<el-table :data="syncApiData.ignoreApis">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API路径"
|
||||
min-width="150"
|
||||
prop="path"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API分组"
|
||||
min-width="150"
|
||||
prop="apiGroup"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API简介"
|
||||
min-width="150"
|
||||
prop="description"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="请求"
|
||||
min-width="150"
|
||||
prop="method"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{ scope.row.method }} / {{ methodFilter(scope.row.method) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
icon="sunny"
|
||||
type="primary"
|
||||
link
|
||||
@click="ignoreApiFunc(row, false)"
|
||||
>
|
||||
取消忽略
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-drawer>
|
||||
|
||||
<el-drawer
|
||||
v-model="dialogFormVisible"
|
||||
:size="appStore.drawerSize"
|
||||
:before-close="closeDialog"
|
||||
:show-close="false"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-base">{{ dialogTitle }}</span>
|
||||
<div>
|
||||
<el-button @click="closeDialog"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="enterDialog"> 确 定 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<warning-bar title="新增API，需要在角色管理内配置权限才可使用" />
|
||||
<el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="路径" prop="path">
|
||||
<el-input v-model="form.path" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="请求" prop="method">
|
||||
<el-select
|
||||
v-model="form.method"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in methodOptions"
|
||||
:key="item.value"
|
||||
:label="`${item.label}(${item.value})`"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="api分组" prop="apiGroup">
|
||||
<el-select
|
||||
v-model="form.apiGroup"
|
||||
placeholder="请选择或新增"
|
||||
allow-create
|
||||
filterable
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in apiGroupOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="api简介" prop="description">
|
||||
<el-input v-model="form.description" autocomplete="off" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 分配给角色抽屉 -->
|
||||
<el-drawer
|
||||
v-model="assignRoleDrawerVisible"
|
||||
:size="appStore.drawerSize"
|
||||
:show-close="false"
|
||||
destroy-on-close
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-base">分配角色 - {{ assignApiRow.description }}</span>
|
||||
<div>
|
||||
<el-button @click="assignRoleDrawerVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="assignRoleSubmitting" @click="confirmAssignRole">确 定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<warning-bar title="注：保存时将全量覆盖该API的角色关联关系，并自动刷新Casbin缓存" />
|
||||
<el-tree
|
||||
ref="roleTreeRef"
|
||||
v-loading="assignRoleLoading"
|
||||
:data="authorityTreeData"
|
||||
:props="{ label: 'authorityName', children: 'children' }"
|
||||
node-key="authorityId"
|
||||
show-checkbox
|
||||
check-strictly
|
||||
default-expand-all
|
||||
/>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getApiById,
|
||||
getApiList,
|
||||
createApi,
|
||||
updateApi,
|
||||
deleteApi,
|
||||
deleteApisByIds,
|
||||
freshCasbin,
|
||||
syncApi,
|
||||
getApiGroups,
|
||||
ignoreApi,
|
||||
enterSyncApi,
|
||||
getApiRoles,
|
||||
setApiRoles,
|
||||
} from '@/api/api'
|
||||
import { getAuthorityList } from '@/api/authority'
|
||||
import { toSQLLine } from '@/utils/stringFun'
|
||||
import WarningBar from '@/components/warningBar/warningBar.vue'
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import ExportExcel from '@/components/exportExcel/exportExcel.vue'
|
||||
import ExportTemplate from '@/components/exportExcel/exportTemplate.vue'
|
||||
import ImportExcel from '@/components/exportExcel/importExcel.vue'
|
||||
import { useAppStore } from "@/pinia";
|
||||
|
||||
defineOptions({
|
||||
name: 'Api'
|
||||
})
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
const methodFilter = (value) => {
|
||||
const target = methodOptions.value.filter((item) => item.value === value)[0]
|
||||
return target && `${target.label}`
|
||||
}
|
||||
|
||||
const apis = ref([])
|
||||
const form = ref({
|
||||
path: '',
|
||||
apiGroup: '',
|
||||
method: '',
|
||||
description: ''
|
||||
})
|
||||
const methodOptions = ref([
|
||||
{
|
||||
value: 'POST',
|
||||
label: '创建',
|
||||
type: 'success'
|
||||
},
|
||||
{
|
||||
value: 'GET',
|
||||
label: '查看',
|
||||
type: ''
|
||||
},
|
||||
{
|
||||
value: 'PUT',
|
||||
label: '更新',
|
||||
type: 'warning'
|
||||
},
|
||||
{
|
||||
value: 'DELETE',
|
||||
label: '删除',
|
||||
type: 'danger'
|
||||
},
|
||||
{
|
||||
value: 'PATCH',
|
||||
label: '修改',
|
||||
type: 'warning'
|
||||
}
|
||||
])
|
||||
|
||||
const type = ref('')
|
||||
const rules = ref({
|
||||
path: [{ required: true, message: '请输入api路径', trigger: 'blur' }],
|
||||
apiGroup: [{ required: true, message: '请输入组名称', trigger: 'blur' }],
|
||||
method: [{ required: true, message: '请选择请求方式', trigger: 'blur' }],
|
||||
description: [{ required: true, message: '请输入api介绍', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
const page = ref(1)
|
||||
const total = ref(0)
|
||||
const pageSize = ref(10)
|
||||
const tableData = ref([])
|
||||
const searchInfo = ref({})
|
||||
const apiGroupOptions = ref([])
|
||||
const apiGroupMap = ref({})
|
||||
|
||||
const getGroup = async () => {
|
||||
const res = await getApiGroups()
|
||||
if (res.code === 0) {
|
||||
const groups = res.data.groups
|
||||
apiGroupOptions.value = groups.map((item) => ({
|
||||
label: item,
|
||||
value: item
|
||||
}))
|
||||
apiGroupMap.value = res.data.apiGroupMap
|
||||
}
|
||||
}
|
||||
|
||||
const ignoreApiFunc = async (row, flag) => {
|
||||
const res = await ignoreApi({ path: row.path, method: row.method, flag })
|
||||
if (res.code === 0) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: res.msg
|
||||
})
|
||||
if (flag) {
|
||||
syncApiData.value.newApis = syncApiData.value.newApis.filter(
|
||||
(item) => !(item.path === row.path && item.method === row.method)
|
||||
)
|
||||
syncApiData.value.ignoreApis.push(row)
|
||||
return
|
||||
}
|
||||
syncApiData.value.ignoreApis = syncApiData.value.ignoreApis.filter(
|
||||
(item) => !(item.path === row.path && item.method === row.method)
|
||||
)
|
||||
syncApiData.value.newApis.push(row)
|
||||
}
|
||||
}
|
||||
|
||||
const addApiFunc = async (row) => {
|
||||
if (!row.apiGroup) {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: '请先选择API分组'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!row.description) {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: '请先填写API描述'
|
||||
})
|
||||
return
|
||||
}
|
||||
const res = await createApi(row)
|
||||
if (res.code === 0) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '添加成功，请到角色管理页面分配权限',
|
||||
showClose: true
|
||||
})
|
||||
syncApiData.value.newApis = syncApiData.value.newApis.filter(
|
||||
(item) => !(item.path === row.path && item.method === row.method)
|
||||
)
|
||||
}
|
||||
getTableData()
|
||||
getGroup()
|
||||
}
|
||||
|
||||
const closeSyncDialog = () => {
|
||||
syncApiFlag.value = false
|
||||
}
|
||||
|
||||
const syncing = ref(false)
|
||||
|
||||
const enterSyncDialog = async () => {
|
||||
if (
|
||||
syncApiData.value.newApis.some(
|
||||
(item) => !item.apiGroup || !item.description
|
||||
)
|
||||
) {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: '存在API未分组或未填写描述'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
syncing.value = true
|
||||
const res = await enterSyncApi(syncApiData.value)
|
||||
syncing.value = false
|
||||
if (res.code === 0) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: res.msg
|
||||
})
|
||||
syncApiFlag.value = false
|
||||
getTableData()
|
||||
}
|
||||
}
|
||||
|
||||
const onReset = () => {
|
||||
searchInfo.value = {}
|
||||
getTableData()
|
||||
}
|
||||
// 搜索
|
||||
|
||||
const onSubmit = () => {
|
||||
page.value = 1
|
||||
getTableData()
|
||||
}
|
||||
|
||||
// 分页
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val
|
||||
getTableData()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
page.value = val
|
||||
getTableData()
|
||||
}
|
||||
|
||||
// 排序
|
||||
const sortChange = ({ prop, order }) => {
|
||||
if (prop) {
|
||||
if (prop === 'ID') {
|
||||
prop = 'id'
|
||||
}
|
||||
searchInfo.value.orderKey = toSQLLine(prop)
|
||||
searchInfo.value.desc = order === 'descending'
|
||||
}
|
||||
getTableData()
|
||||
}
|
||||
|
||||
// 查询
|
||||
const getTableData = async () => {
|
||||
const table = await getApiList({
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
...searchInfo.value
|
||||
})
|
||||
if (table.code === 0) {
|
||||
tableData.value = table.data.list
|
||||
total.value = table.data.total
|
||||
page.value = table.data.page
|
||||
pageSize.value = table.data.pageSize
|
||||
}
|
||||
}
|
||||
|
||||
getTableData()
|
||||
getGroup()
|
||||
// 批量操作
|
||||
const handleSelectionChange = (val) => {
|
||||
apis.value = val
|
||||
}
|
||||
|
||||
const onDelete = async () => {
|
||||
ElMessageBox.confirm('确定要删除吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
const ids = apis.value.map((item) => item.ID)
|
||||
const res = await deleteApisByIds({ ids })
|
||||
if (res.code === 0) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: res.msg
|
||||
})
|
||||
if (tableData.value.length === ids.length && page.value > 1) {
|
||||
page.value--
|
||||
}
|
||||
getTableData()
|
||||
}
|
||||
})
|
||||
}
|
||||
const onFresh = async () => {
|
||||
ElMessageBox.confirm('确定要刷新缓存吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
const res = await freshCasbin()
|
||||
if (res.code === 0) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: res.msg
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const syncApiData = ref({
|
||||
newApis: [],
|
||||
deleteApis: [],
|
||||
ignoreApis: []
|
||||
})
|
||||
|
||||
const syncApiFlag = ref(false)
|
||||
|
||||
const onSync = async () => {
|
||||
const res = await syncApi()
|
||||
if (res.code === 0) {
|
||||
res.data.newApis.forEach((item) => {
|
||||
item.apiGroup = apiGroupMap.value[item.path.split('/')[1]]
|
||||
})
|
||||
|
||||
syncApiData.value = res.data
|
||||
syncApiFlag.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗相关
|
||||
const apiForm = ref(null)
|
||||
const initForm = () => {
|
||||
apiForm.value.resetFields()
|
||||
form.value = {
|
||||
path: '',
|
||||
apiGroup: '',
|
||||
method: '',
|
||||
description: ''
|
||||
}
|
||||
}
|
||||
|
||||
const dialogTitle = ref('新增Api')
|
||||
const dialogFormVisible = ref(false)
|
||||
const openDialog = (key) => {
|
||||
switch (key) {
|
||||
case 'addApi':
|
||||
dialogTitle.value = '新增Api'
|
||||
break
|
||||
case 'edit':
|
||||
dialogTitle.value = '编辑Api'
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
type.value = key
|
||||
dialogFormVisible.value = true
|
||||
}
|
||||
const closeDialog = () => {
|
||||
initForm()
|
||||
dialogFormVisible.value = false
|
||||
}
|
||||
|
||||
const editApiFunc = async (row) => {
|
||||
const res = await getApiById({ id: row.ID })
|
||||
form.value = res.data.api
|
||||
openDialog('edit')
|
||||
}
|
||||
|
||||
const enterDialog = async () => {
|
||||
apiForm.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
switch (type.value) {
|
||||
case 'addApi':
|
||||
{
|
||||
const res = await createApi(form.value)
|
||||
if (res.code === 0) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '添加成功',
|
||||
showClose: true
|
||||
})
|
||||
}
|
||||
getTableData()
|
||||
getGroup()
|
||||
closeDialog()
|
||||
}
|
||||
|
||||
break
|
||||
case 'edit':
|
||||
{
|
||||
const res = await updateApi(form.value)
|
||||
if (res.code === 0) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '编辑成功',
|
||||
showClose: true
|
||||
})
|
||||
}
|
||||
getTableData()
|
||||
closeDialog()
|
||||
}
|
||||
break
|
||||
default:
|
||||
{
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: '未知操作',
|
||||
showClose: true
|
||||
})
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const deleteApiFunc = async (row) => {
|
||||
ElMessageBox.confirm('此操作将永久删除所有角色下该api, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
const res = await deleteApi(row)
|
||||
if (res.code === 0) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
})
|
||||
if (tableData.value.length === 1 && page.value > 1) {
|
||||
page.value--
|
||||
}
|
||||
getTableData()
|
||||
getGroup()
|
||||
}
|
||||
})
|
||||
}
|
||||
// 分配给角色
|
||||
const assignRoleDrawerVisible = ref(false)
|
||||
const assignApiRow = ref({})
|
||||
const authorityTreeData = ref([])
|
||||
const assignRoleLoading = ref(false)
|
||||
const assignRoleSubmitting = ref(false)
|
||||
const roleTreeRef = ref(null)
|
||||
|
||||
const openAssignRoleDrawer = async (row) => {
|
||||
assignApiRow.value = row
|
||||
assignRoleDrawerVisible.value = true
|
||||
assignRoleLoading.value = true
|
||||
const [authRes, rolesRes] = await Promise.all([
|
||||
getAuthorityList(),
|
||||
getApiRoles(row.path, row.method)
|
||||
])
|
||||
if (authRes.code === 0) {
|
||||
authorityTreeData.value = authRes.data
|
||||
}
|
||||
if (rolesRes.code === 0 && rolesRes.data) {
|
||||
nextTick(() => {
|
||||
roleTreeRef.value?.setCheckedKeys(rolesRes.data)
|
||||
})
|
||||
}
|
||||
assignRoleLoading.value = false
|
||||
}
|
||||
|
||||
const confirmAssignRole = async () => {
|
||||
assignRoleSubmitting.value = true
|
||||
try {
|
||||
const checkedKeys = roleTreeRef.value?.getCheckedKeys(false) || []
|
||||
const res = await setApiRoles({
|
||||
path: assignApiRow.value.path,
|
||||
method: assignApiRow.value.method,
|
||||
authorityIds: checkedKeys
|
||||
})
|
||||
if (res.code === 0) {
|
||||
ElMessage({ type: 'success', message: '分配成功!' })
|
||||
assignRoleDrawerVisible.value = false
|
||||
}
|
||||
} catch {
|
||||
ElMessage({ type: 'error', message: '分配失败，请重试' })
|
||||
}
|
||||
assignRoleSubmitting.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warning {
|
||||
color: #dc143c;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user