124 lines
4.4 KiB
Vue
124 lines
4.4 KiB
Vue
<template>
|
|
<el-card>
|
|
<template #header>
|
|
<div class='flex justify-between items-center'>
|
|
<span class='font-700'>权限管理</span>
|
|
<el-button v-if='hasPermission("platform.permissions.manage")' type='primary' @click='openCreate'>新增权限</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<el-table :data='rows' v-loading='loading'>
|
|
<el-table-column prop='id' label='ID' width='80' sortable />
|
|
<el-table-column prop='name' label='权限标识' min-width='220' sortable />
|
|
<el-table-column prop='category' label='分类' width='150' sortable />
|
|
<el-table-column prop='description' label='描述' min-width='220' sortable />
|
|
<el-table-column v-if='hasPermission("platform.permissions.manage")' label='操作' width='180'>
|
|
<template #default='{ row }'>
|
|
<div class='btn-gap-8 btn-gap-8--nowrap'>
|
|
<el-button size='small' @click='openEdit(row)'>编辑</el-button>
|
|
<el-button size='small' type='danger' @click='removeRow(row)'>删除</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-dialog v-model='dialogVisible' :title='editingId ? "编辑权限" : "新增权限"' width='560px'>
|
|
<el-form :model='form' label-width='95px'>
|
|
<el-form-item label='权限标识'><el-input v-model='form.name' /></el-form-item>
|
|
<el-form-item label='权限分类'>
|
|
<el-select
|
|
v-model='form.category'
|
|
filterable
|
|
allow-create
|
|
default-first-option
|
|
clearable
|
|
placeholder='请选择或输入分类'
|
|
class='w-full'
|
|
>
|
|
<el-option v-for='item in categoryOptions' :key='item' :label='item' :value='item' />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label='描述'><el-input v-model='form.description' type='textarea' :rows='3' /></el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click='dialogVisible = false'>取消</el-button>
|
|
<el-button type='primary' :loading='saving' @click='submit'>提交</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { computed, onMounted, reactive, ref } from 'vue'
|
|
import { permissionsApi } from '@/api/permissions'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
const authStore = useAuthStore()
|
|
const { hasPermission } = authStore
|
|
const loading = ref(false)
|
|
const saving = ref(false)
|
|
const dialogVisible = ref(false)
|
|
const editingId = ref<number | null>(null)
|
|
const rows = ref<any[]>([])
|
|
const form = reactive({ name: '', category: 'general', description: '', guard_name: 'api' })
|
|
const categoryOptions = computed<string[]>(() => {
|
|
const categories = rows.value
|
|
.map((item: any) => String(item.category || '').trim())
|
|
.filter((item: string) => item.length > 0)
|
|
|
|
return [...new Set(categories)]
|
|
})
|
|
|
|
async function fetchList(): Promise<void> {
|
|
loading.value = true
|
|
try {
|
|
const response: any = await permissionsApi.list({ per_page: 200 })
|
|
rows.value = response.data.data || []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function openCreate(): void {
|
|
editingId.value = null
|
|
Object.assign(form, { name: '', category: 'general', description: '', guard_name: 'api' })
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
function openEdit(row: any): void {
|
|
editingId.value = row.id
|
|
Object.assign(form, { name: row.name, category: row.category || 'general', description: row.description || '', guard_name: 'api' })
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
async function submit(): Promise<void> {
|
|
saving.value = true
|
|
try {
|
|
if (editingId.value) {
|
|
await permissionsApi.update(editingId.value, form)
|
|
ElMessage.success('更新成功')
|
|
} else {
|
|
await permissionsApi.create(form)
|
|
ElMessage.success('创建成功')
|
|
}
|
|
dialogVisible.value = false
|
|
await fetchList()
|
|
} catch (error: any) {
|
|
const first = error?.errors ? (Object.values(error.errors)[0] as string[])?.[0] : null
|
|
ElMessage.error(first || error?.message || '提交失败')
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
async function removeRow(row: any): Promise<void> {
|
|
await ElMessageBox.confirm(`确认删除权限 ${row.name} 吗？`, '提示', { type: 'warning' })
|
|
await permissionsApi.remove(row.id)
|
|
ElMessage.success('删除成功')
|
|
await fetchList()
|
|
}
|
|
|
|
onMounted(fetchList)
|
|
</script>
|