vueadmin/src/pages/auth/role/permission.vue

<template>
	<a-modal title="角色权限设置" :open="visible" :width="600" :destroy-on-close="true" :footer="null" @cancel="handleCancel">
		<a-tabs tab-position="top">
			<a-tab-pane key="menu" tab="菜单权限">
				<div class="treeMain">
					<a-tree ref="menuTreeRef" v-model:checkedKeys="menu.checked" :tree-data="menu.list"
						:field-names="menu.fieldNames" :checkable="true" :default-expand-all="true"
						:check-strictly="true" :selectable="false">
						<template #title="{ title }">
							{{ title }}
						</template>
					</a-tree>
				</div>
			</a-tab-pane>
			<a-tab-pane key="data" tab="数据权限">
				<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
					<a-form-item label="数据权限">
						<a-select v-model:value="form.data_range" placeholder="请选择数据权限" style="width: 100%">
							<a-select-option value="0">全部数据权限</a-select-option>
							<a-select-option value="1">本部门及以下数据</a-select-option>
							<a-select-option value="2">本部门数据权限</a-select-option>
							<a-select-option value="3">仅本人数据权限</a-select-option>
							<a-select-option value="4">自定义数据权限</a-select-option>
						</a-select>
					</a-form-item>
				</a-form>
			</a-tab-pane>
			<a-tab-pane key="dashboard" tab="控制台">
				<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
					<a-form-item label="控制台视图">
						<a-select v-model:value="form.dashboard" placeholder="请选择" style="width: 100%">
							<a-select-option value="0">
								<div style="display: flex; justify-content: space-between">
									<span>数据统计</span>
									<span style="color: #8492a6; font-size: 12px">stats</span>
								</div>
							</a-select-option>
							<a-select-option value="1">
								<div style="display: flex; justify-content: space-between">
									<span>工作台</span>
									<span style="color: #8492a6; font-size: 12px">work</span>
								</div>
							</a-select-option>
						</a-select>
						<div class="ant-form-item-explain">用于控制角色登录后控制台的视图</div>
					</a-form-item>
				</a-form>
			</a-tab-pane>
		</a-tabs>
		<template #footer>
			<a-button @click="handleCancel">取 消</a-button>
			<a-button type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
		</template>
	</a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import authApi from '@/api/auth'

const emit = defineEmits(['success', 'closed'])

const visible = ref(false)
const isSaveing = ref(false)
const menuTreeRef = ref()

const menu = reactive({
	list: [],
	checked: [],
	fieldNames: {
		title: 'title',
		key: 'id',
		children: 'children'
	}
})

const form = reactive({
	role_id: 0,
	permissions: [],
	data_range: '',
	dashboard: '1'
})

// 打开对话框
const open = () => {
	visible.value = true
	return {
		open,
		setData,
		close
	}
}

// 关闭对话框
const close = () => {
	visible.value = false
}

// 处理取消
const handleCancel = () => {
	emit('closed')
	visible.value = false
}

// 提交保存
const submit = async () => {
	try {
		isSaveing.value = true

		// 获取选中的菜单权限 ID
		form.permissions = menu.checked || []
		form.role_id = form.id

		const res = await authApi.role.auth.post(form)

		isSaveing.value = false
		if (res.code === 1) {
			emit('success', form)
			visible.value = false
			message.success('操作成功')
		} else {
			message.error(res.message)
		}
	} catch (error) {
		console.error('保存权限失败:', error)
		isSaveing.value = false
		message.error('操作失败')
	}
}

// 获取菜单列表
const getMenu = async () => {
	try {
		const res = await authApi.menu.list.get({ is_tree: 1 })
		menu.list = res.data || []
	} catch (error) {
		console.error('获取菜单列表失败:', error)
		message.error('获取菜单列表失败')
	}
}

// 设置数据
const setData = (data) => {
	form.id = data.id
	form.data_range = data.data_range || ''
	form.dashboard = data.dashboard || '1'

	// 设置选中的菜单权限
	if (data.permissions && data.permissions.length > 0) {
		menu.checked = data.permissions.map(item => item.id)
	}
}

// 组件挂载时加载数据
getMenu()

// 暴露方法给父组件
defineExpose({
	open,
	setData,
	close
})
</script>

<style scoped>
.treeMain {
	height: 280px;
	overflow: auto;
	border: 1px solid #dcdfe6;
	margin-bottom: 10px;
	padding: 8px;
}

.ant-form-item-explain {
	color: rgba(0, 0, 0, 0.45);
	font-size: 12px;
	line-height: 1.5;
	margin-top: 4px;
}
</style>