更新

resources/admin/src/pages/auth/roles/components/CopyDialog.vue

@@ -0,0 +1,125 @@
+<template>
+	<a-modal :title="title" :open="visible" :width="500" :destroy-on-close="true" @cancel="handleCancel">
+		<a-form :model="form" :rules="rules" ref="dialogForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
+			<a-form-item label="角色名称" name="name">
+				<a-input v-model:value="form.name" placeholder="请输入新角色名称" allow-clear />
+			</a-form-item>
+			<a-form-item label="角色编码" name="code">
+				<a-input v-model:value="form.code" placeholder="请输入新角色编码" allow-clear />
+			</a-form-item>
+		</a-form>
+		<template #footer>
+			<a-space>
+				<a-button @click="handleCancel">取 消</a-button>
+				<a-button type="primary" :loading="loading" @click="handleOk">确 定</a-button>
+			</a-space>
+		</template>
+	</a-modal>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue'
+import { message } from 'ant-design-vue'
+import authApi from '@/api/auth'
+
+const emit = defineEmits(['success', 'closed'])
+
+const visible = ref(false)
+const loading = ref(false)
+const sourceId = ref(null)
+const sourceName = ref('')
+const sourceCode = ref('')
+
+// 表单数据
+const form = reactive({
+	name: '',
+	code: ''
+})
+
+// 标题
+const title = computed(() => sourceId.value ? '复制角色' : '批量复制')
+
+// 表单引用
+const dialogForm = ref()
+
+// 验证规则
+const rules = {
+	name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
+	code: [
+		{ required: true, message: '请输入角色编码', trigger: 'blur' },
+		{ pattern: /^[a-zA-Z0-9_]+$/, message: '角色编码只能包含字母、数字和下划线', trigger: 'blur' }
+	]
+}
+
+// 打开对话框
+const open = (data = null) => {
+	if (data && data.id) {
+		// 单个复制
+		sourceId.value = data.id
+		sourceName.value = data.name
+		sourceCode.value = data.code
+		form.name = `${data.name}_副本`
+		form.code = `${data.code}_copy`
+	} else {
+		// 批量复制（暂不支持自定义名称，直接在后端处理）
+		sourceId.value = null
+		sourceName.value = ''
+		sourceCode.value = ''
+		form.name = ''
+		form.code = ''
+	}
+	visible.value = true
+	return {
+		open,
+		close
+	}
+}
+
+// 关闭对话框
+const close = () => {
+	visible.value = false
+}
+
+// 处理取消
+const handleCancel = () => {
+	emit('closed')
+	visible.value = false
+}
+
+// 处理确定
+const handleOk = async () => {
+	try {
+		if (sourceId.value) {
+			// 单个复制
+			await dialogForm.value.validate()
+			loading.value = true
+			const res = await authApi.roles.copy.post(sourceId.value, {
+				name: form.name,
+				code: form.code
+			})
+			loading.value = false
+
+			if (res.code === 200) {
+				emit('success')
+				visible.value = false
+				message.success('复制成功')
+			} else {
+				message.error(res.message || '复制失败')
+			}
+		} else {
+			// 批量复制（通过外部传入的 ids）
+			emit('success')
+			visible.value = false
+		}
+	} catch (error) {
+		console.error('复制失败:', error)
+		loading.value = false
+	}
+}
+
+// 暴露方法给父组件
+defineExpose({
+	open,
+	close
+})
+</script>

resources/admin/src/pages/auth/roles/components/PermissionDialog.vue

@@ -1,5 +1,5 @@
 <template>
-	<a-modal title="角色权限设置" :open="visible" :width="600" :destroy-on-close="true" :footer="null" @cancel="handleCancel">
+	<a-modal title="角色权限设置" :open="visible" :width="600" :destroy-on-close="true" @cancel="handleCancel">
 		<div class="permission-content">
 			<div class="permission-tree">
 				<a-tree ref="menuTreeRef" v-model:checkedKeys="checkedPermissionIds" :tree-data="permissionTree"
@@ -12,8 +12,10 @@
 			</div>
 		</div>
 		<template #footer>
-			<a-button @click="handleCancel">取 消</a-button>
-			<a-button type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
+			<a-space>
+				<a-button @click="handleCancel">取 消</a-button>
+				<a-button type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
+			</a-space>
 		</template>
 	</a-modal>
 </template>

resources/admin/src/pages/auth/roles/components/SaveDialog.vue

@@ -1,6 +1,5 @@
 <template>
-	<a-modal :title="titleMap[mode]" :open="visible" :width="500" :destroy-on-close="true" :footer="null"
-		@cancel="handleCancel">
+	<a-modal :title="titleMap[mode]" :open="visible" :width="500" :destroy-on-close="true" @cancel="handleCancel">
 		<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
 			:wrapper-col="{ span: 18 }">
 			<a-form-item label="角色名称" name="name">
@@ -20,8 +19,10 @@
 			</a-form-item>
 		</a-form>
 		<template #footer>
-			<a-button @click="handleCancel">取 消</a-button>
-			<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
+			<a-space>
+				<a-button @click="handleCancel">取 消</a-button>
+				<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
+			</a-space>
 		</template>
 	</a-modal>
 </template>

resources/admin/src/pages/auth/roles/index.vue

@@ -72,13 +72,28 @@
 				</template>
 				<template #action="{ record }">
 					<a-space>
-						<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
 						<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
-						<a-button type="link" size="small" @click="handlePermission(record)">权限</a-button>
 						<a-button type="link" size="small" @click="handleCopy(record)">复制</a-button>
-						<a-popconfirm title="确定删除该角色吗？" @confirm="handleDelete(record)">
-							<a-button type="link" size="small" danger>删除</a-button>
-						</a-popconfirm>
+						<a-dropdown>
+							<a-button type="link" size="small">
+								更多
+								<DownOutlined />
+							</a-button>
+							<template #overlay>
+								<a-menu>
+									<a-menu-item @click="handleView(record)">
+										<SearchOutlined />查看
+									</a-menu-item>
+									<a-menu-item @click="handlePermission(record)">
+										<ImportOutlined />权限
+									</a-menu-item>
+									<a-menu-divider />
+									<a-menu-item @click="handleDelete(record)" danger>
+										<DeleteOutlined />删除
+									</a-menu-item>
+								</a-menu>
+							</template>
+						</a-dropdown>
 					</a-space>
 				</template>
 			</scTable>
@@ -100,6 +115,9 @@
 	<sc-export v-model:open="dialog.export" title="导出角色" :api="handleExportApi"
 		:default-filename="`角色列表_${Date.now()}`" :show-options="false" tip="导出当前选中或所有角色数据"
 		@success="handleExportSuccess" />
+
+	<!-- 复制角色弹窗 -->
+	<copy-dialog v-if="dialog.copy" ref="copyDialogRef" @success="handleCopySuccess" @closed="dialog.copy = false" />
 </template>
 
 <script setup>
@@ -122,6 +140,7 @@ import scImport from '@/components/scImport/index.vue'
 import scExport from '@/components/scExport/index.vue'
 import saveDialog from './components/SaveDialog.vue'
 import permissionDialog from './components/PermissionDialog.vue'
+import copyDialog from './components/CopyDialog.vue'
 import authApi from '@/api/auth'
 import { useTable } from '@/hooks/useTable'
 
@@ -160,12 +179,14 @@ const dialog = reactive({
 	save: false,
 	permission: false,
 	import: false,
-	export: false
+	export: false,
+	copy: false
 })
 
 // 弹窗引用
 const saveDialogRef = ref(null)
 const permissionDialogRef = ref(null)
+const copyDialogRef = ref(null)
 
 // 行key
 const rowKey = 'id'
@@ -178,7 +199,7 @@ const columns = [
 	{ title: '描述', dataIndex: 'description', key: 'description', ellipsis: true },
 	{ title: '排序', dataIndex: 'sort', key: 'sort', width: 100, align: 'center' },
 	{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center', slot: 'status' },
-	{ title: '操作', dataIndex: 'action', key: 'action', width: 260, align: 'center', slot: 'action', fixed: 'right' }
+	{ title: '操作', dataIndex: 'action', key: 'action', width: 180, align: 'center', slot: 'action', fixed: 'right' }
 ]
 
 
@@ -207,19 +228,28 @@ const handleEdit = (record) => {
 }
 
 // 删除角色
-const handleDelete = async (record) => {
-	try {
-		const res = await authApi.roles.delete.delete(record.id)
-		if (res.code === 200) {
-			message.success('删除成功')
-			refreshTable()
-		} else {
-			message.error(res.message || '删除失败')
+const handleDelete = (record) => {
+	Modal.confirm({
+		title: '确认删除',
+		content: '确定删除该角色吗？',
+		okText: '确定',
+		cancelText: '取消',
+		okType: 'danger',
+		onOk: async () => {
+			try {
+				const res = await authApi.roles.delete.delete(record.id)
+				if (res.code === 200) {
+					message.success('删除成功')
+					refreshTable()
+				} else {
+					message.error(res.message || '删除失败')
+				}
+			} catch (error) {
+				console.error('删除角色失败:', error)
+				message.error('删除失败')
+			}
 		}
-	} catch (error) {
-		console.error('删除角色失败:', error)
-		message.error('删除失败')
-	}
+	})
 }
 
 // 批量删除
@@ -288,8 +318,10 @@ const handleBatchStatus = () => {
 
 // 复制角色
 const handleCopy = (record) => {
-	// TODO: 实现复制角色弹窗
-	message.info('复制角色功能开发中...')
+	dialog.copy = true
+	setTimeout(() => {
+		copyDialogRef.value?.open(record)
+	}, 0)
 }
 
 // 批量复制角色
@@ -298,8 +330,34 @@ const handleBatchCopy = () => {
 		message.warning('请选择要复制的角色')
 		return
 	}
-	// TODO: 实现批量复制角色弹窗
-	message.info('批量复制角色功能开发中...')
+
+	Modal.confirm({
+		title: '确认批量复制',
+		content: `确定复制选中的 ${selectedRows.value.length} 个角色吗？`,
+		okText: '确定',
+		cancelText: '取消',
+		onOk: async () => {
+			try {
+				const ids = selectedRows.value.map(item => item.id)
+				const res = await authApi.roles.batchCopy.post({ ids })
+				if (res.code === 200) {
+					message.success('批量复制成功')
+					selectedRows.value = []
+					refreshTable()
+				} else {
+					message.error(res.message || '批量复制失败')
+				}
+			} catch (error) {
+				console.error('批量复制角色失败:', error)
+				message.error('批量复制失败')
+			}
+		}
+	})
+}
+
+// 复制成功回调
+const handleCopySuccess = () => {
+	refreshTable()
 }
 
 // 权限设置