feat: add business line permissions and Wayne namespace mapping
This commit is contained in:
mac
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<section class="page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2>业务线分配</h2>
|
||||
<p>{{ currentName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isCurrentBusinessLineAdmin" class="assignment-panel">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="用户">
|
||||
<el-select v-model="grantForm.target_user_id" filterable placeholder="选择用户">
|
||||
<el-option v-for="user in users" :key="user.uid" :label="user.username" :value="user.uid" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务线">
|
||||
<el-select v-model="grantForm.target_business_line_id" filterable placeholder="选择业务线">
|
||||
<el-option v-for="item in businessLineStore.items" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限">
|
||||
<el-segmented v-model="grantForm.permission" :options="permissionOptions" />
|
||||
</el-form-item>
|
||||
<el-button type="primary" :loading="granting" @click="grantPermission">保存分配</el-button>
|
||||
</el-form>
|
||||
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="Wayne namespace">
|
||||
<el-select
|
||||
v-model="selectedWayneNamespaceIds"
|
||||
multiple
|
||||
filterable
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
:loading="loadingWayneNamespaces"
|
||||
placeholder="选择 Wayne namespace"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in wayneNamespaces"
|
||||
:key="item.id"
|
||||
:label="`${item.name} / ${item.kubeNamespace}`"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-button type="primary" :loading="savingWayneNamespaces" @click="saveWayneNamespaceMapping">保存 Wayne namespace 映射</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-else class="empty-state">需要当前业务线管理员权限</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { businessLineApi, type WayneNamespace } from '@/api/businessLine'
|
||||
import { userApi, type UserOption } from '@/api/user'
|
||||
import { useBusinessLineStore } from '@/stores/businessLine'
|
||||
|
||||
const businessLineStore = useBusinessLineStore()
|
||||
const isCurrentBusinessLineAdmin = computed(() => businessLineStore.isCurrentAdmin)
|
||||
const currentName = computed(() => businessLineStore.current?.name || '未选择业务线')
|
||||
const users = ref<UserOption[]>([])
|
||||
const wayneNamespaces = ref<WayneNamespace[]>([])
|
||||
const selectedWayneNamespaceIds = ref<number[]>([])
|
||||
const granting = ref(false)
|
||||
const loadingWayneNamespaces = ref(false)
|
||||
const savingWayneNamespaces = ref(false)
|
||||
const grantForm = reactive<{
|
||||
target_user_id: number | null
|
||||
target_business_line_id: number | null
|
||||
permission: 0 | 1
|
||||
}>({
|
||||
target_user_id: null,
|
||||
target_business_line_id: null,
|
||||
permission: 1,
|
||||
})
|
||||
|
||||
const permissionOptions = [
|
||||
{ label: '管理员', value: 0 },
|
||||
{ label: '普通用户', value: 1 },
|
||||
]
|
||||
|
||||
watch(
|
||||
() => businessLineStore.current?.id,
|
||||
(id) => {
|
||||
if (id && !grantForm.target_business_line_id) {
|
||||
grantForm.target_business_line_id = id
|
||||
}
|
||||
if (id && isCurrentBusinessLineAdmin.value) {
|
||||
loadWayneNamespaceMapping(id)
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
isCurrentBusinessLineAdmin,
|
||||
async (admin) => {
|
||||
if (admin && !users.value.length) {
|
||||
users.value = await userApi.list()
|
||||
}
|
||||
if (admin) {
|
||||
await loadWayneNamespaces()
|
||||
const businessLineID = businessLineStore.current?.id
|
||||
if (businessLineID) {
|
||||
await loadWayneNamespaceMapping(businessLineID)
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
if (isCurrentBusinessLineAdmin.value && !users.value.length) {
|
||||
users.value = await userApi.list()
|
||||
}
|
||||
if (isCurrentBusinessLineAdmin.value) {
|
||||
await loadWayneNamespaces()
|
||||
const businessLineID = businessLineStore.current?.id
|
||||
if (businessLineID) {
|
||||
await loadWayneNamespaceMapping(businessLineID)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
async function grantPermission() {
|
||||
const businessLineID = businessLineStore.current?.id
|
||||
if (!businessLineID || !grantForm.target_user_id || !grantForm.target_business_line_id) {
|
||||
ElMessage.warning('请选择用户和业务线')
|
||||
return
|
||||
}
|
||||
granting.value = true
|
||||
try {
|
||||
await businessLineApi.grant({
|
||||
business_line_id: businessLineID,
|
||||
target_user_id: grantForm.target_user_id,
|
||||
target_business_line_id: grantForm.target_business_line_id,
|
||||
permission: grantForm.permission,
|
||||
})
|
||||
ElMessage.success('已保存业务线分配')
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '保存业务线分配失败')
|
||||
} finally {
|
||||
granting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadWayneNamespaces() {
|
||||
if (wayneNamespaces.value.length) {
|
||||
return
|
||||
}
|
||||
loadingWayneNamespaces.value = true
|
||||
try {
|
||||
wayneNamespaces.value = await businessLineApi.listWayneNamespaces()
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '查询 Wayne namespace 失败')
|
||||
} finally {
|
||||
loadingWayneNamespaces.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadWayneNamespaceMapping(businessLineID: number) {
|
||||
loadingWayneNamespaces.value = true
|
||||
try {
|
||||
const mapped = await businessLineApi.listMappedWayneNamespaces(businessLineID)
|
||||
selectedWayneNamespaceIds.value = mapped.map((item) => item.id)
|
||||
} catch (error) {
|
||||
selectedWayneNamespaceIds.value = []
|
||||
ElMessage.error(error instanceof Error ? error.message : '查询 Wayne namespace 映射失败')
|
||||
} finally {
|
||||
loadingWayneNamespaces.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveWayneNamespaceMapping() {
|
||||
const businessLineID = businessLineStore.current?.id
|
||||
if (!businessLineID) {
|
||||
ElMessage.warning('请选择当前业务线')
|
||||
return
|
||||
}
|
||||
const selected = wayneNamespaces.value.filter((item) => selectedWayneNamespaceIds.value.includes(item.id))
|
||||
savingWayneNamespaces.value = true
|
||||
try {
|
||||
await businessLineApi.replaceMappedWayneNamespaces(businessLineID, selected)
|
||||
ElMessage.success('已保存 Wayne namespace 映射')
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '保存 Wayne namespace 映射失败')
|
||||
} finally {
|
||||
savingWayneNamespaces.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.assignment-panel {
|
||||
max-width: 520px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
border-top: 1px solid var(--line);
|
||||
margin: 22px 0 18px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 28px 0;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<section class="page">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h2>业务线管理</h2>
|
||||
<p>平台管理员维护全局业务线</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="isPlatformAdmin">
|
||||
<div class="toolbar">
|
||||
<el-input v-model="newName" class="name-input" placeholder="业务线名称" @keyup.enter="createBusinessLine" />
|
||||
<el-button type="primary" :icon="Plus" :loading="savingLine" @click="createBusinessLine">新增</el-button>
|
||||
<el-button :loading="loadingLines" @click="loadAllBusinessLines">刷新</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="allBusinessLines" v-loading="loadingLines" class="data-table" empty-text="没有业务线数据">
|
||||
<el-table-column prop="id" label="ID" width="90" />
|
||||
<el-table-column label="名称" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<el-input v-if="editingId === row.id" v-model="editingName" size="small" @keyup.enter="saveBusinessLine(row.id)" />
|
||||
<span v-else>{{ row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updated_at" label="更新时间" min-width="210" />
|
||||
<el-table-column label="操作" width="190" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<template v-if="editingId === row.id">
|
||||
<el-button size="small" type="primary" @click="saveBusinessLine(row.id)">保存</el-button>
|
||||
<el-button size="small" @click="cancelEdit">取消</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button size="small" :icon="Edit" @click="startEdit(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" :icon="Delete" @click="deleteBusinessLine(row)">删除</el-button>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
<div v-else class="empty-state">需要平台管理员权限</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
|
||||
import { businessLineApi, type BusinessLine } from '@/api/businessLine'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useBusinessLineStore } from '@/stores/businessLine'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const businessLineStore = useBusinessLineStore()
|
||||
const isPlatformAdmin = computed(() => authStore.user?.is_admin === true)
|
||||
|
||||
const allBusinessLines = ref<BusinessLine[]>([])
|
||||
const loadingLines = ref(false)
|
||||
const savingLine = ref(false)
|
||||
const newName = ref('')
|
||||
const editingId = ref<number | null>(null)
|
||||
const editingName = ref('')
|
||||
|
||||
watch(
|
||||
isPlatformAdmin,
|
||||
async (admin) => {
|
||||
if (admin) {
|
||||
await loadAllBusinessLines()
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await authStore.refreshUser()
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
if (isPlatformAdmin.value) {
|
||||
await loadAllBusinessLines()
|
||||
}
|
||||
})
|
||||
|
||||
async function loadAllBusinessLines() {
|
||||
loadingLines.value = true
|
||||
try {
|
||||
allBusinessLines.value = await businessLineApi.listAll()
|
||||
} catch (error) {
|
||||
allBusinessLines.value = []
|
||||
ElMessage.error(error instanceof Error ? error.message : '查询业务线失败')
|
||||
} finally {
|
||||
loadingLines.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function createBusinessLine() {
|
||||
const name = newName.value.trim()
|
||||
if (!name) {
|
||||
ElMessage.warning('请输入业务线名称')
|
||||
return
|
||||
}
|
||||
savingLine.value = true
|
||||
try {
|
||||
await businessLineApi.create(name)
|
||||
newName.value = ''
|
||||
await loadAllBusinessLines()
|
||||
await businessLineStore.loadMine()
|
||||
ElMessage.success('已新增业务线')
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '新增业务线失败')
|
||||
} finally {
|
||||
savingLine.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function startEdit(row: BusinessLine) {
|
||||
editingId.value = row.id
|
||||
editingName.value = row.name
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editingId.value = null
|
||||
editingName.value = ''
|
||||
}
|
||||
|
||||
async function saveBusinessLine(id: number) {
|
||||
const name = editingName.value.trim()
|
||||
if (!name) {
|
||||
ElMessage.warning('请输入业务线名称')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await businessLineApi.update(id, name)
|
||||
cancelEdit()
|
||||
await loadAllBusinessLines()
|
||||
await businessLineStore.loadMine()
|
||||
ElMessage.success('已更新业务线')
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '更新业务线失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteBusinessLine(row: BusinessLine) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认删除业务线 ${row.name}？`, '删除业务线', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
await businessLineApi.remove(row.id)
|
||||
await loadAllBusinessLines()
|
||||
await businessLineStore.loadMine()
|
||||
ElMessage.success('已删除业务线')
|
||||
} catch (error) {
|
||||
if (error !== 'cancel' && error !== 'close') {
|
||||
ElMessage.error(error instanceof Error ? error.message : '删除业务线失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 18px 0 14px;
|
||||
}
|
||||
|
||||
.name-input {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 28px 0;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -69,8 +69,6 @@
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { subsystemApi, type Subsystem } from '@/api/subsystem'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { redirectToSSO } from '@/utils/sso'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
|
||||
Reference in New Issue
Block a user