路由更新
This commit is contained in:
123
schoolNewsWeb/src/views/admin/manage/ai/AIConfigView.vue
Normal file
123
schoolNewsWeb/src/views/admin/manage/ai/AIConfigView.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="ai-config">
|
||||
<el-form :model="configForm" label-width="150px" class="config-form">
|
||||
<el-divider content-position="left">模型配置</el-divider>
|
||||
|
||||
<el-form-item label="AI模型">
|
||||
<el-select v-model="configForm.model" placeholder="选择AI模型">
|
||||
<el-option label="GPT-3.5" value="gpt-3.5" />
|
||||
<el-option label="GPT-4" value="gpt-4" />
|
||||
<el-option label="Claude" value="claude" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="API Key">
|
||||
<el-input v-model="configForm.apiKey" type="password" show-password />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="API地址">
|
||||
<el-input v-model="configForm.apiUrl" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">对话配置</el-divider>
|
||||
|
||||
<el-form-item label="温度值">
|
||||
<el-slider v-model="configForm.temperature" :min="0" :max="2" :step="0.1" show-input />
|
||||
<span class="help-text">控制回答的随机性，值越大回答越随机</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="最大token数">
|
||||
<el-input-number v-model="configForm.maxTokens" :min="100" :max="4000" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="历史对话轮数">
|
||||
<el-input-number v-model="configForm.historyTurns" :min="1" :max="20" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">功能配置</el-divider>
|
||||
|
||||
<el-form-item label="启用流式输出">
|
||||
<el-switch v-model="configForm.enableStreaming" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="启用文件解读">
|
||||
<el-switch v-model="configForm.enableFileInterpretation" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="启用知识库检索">
|
||||
<el-switch v-model="configForm.enableKnowledgeRetrieval" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="系统提示词">
|
||||
<el-input
|
||||
v-model="configForm.systemPrompt"
|
||||
type="textarea"
|
||||
:rows="6"
|
||||
placeholder="设置AI助手的角色和行为..."
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSave">保存配置</el-button>
|
||||
<el-button @click="handleTest">测试连接</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElForm, ElFormItem, ElSelect, ElOption, ElInput, ElSlider, ElInputNumber, ElSwitch, ElButton, ElDivider, ElMessage } from 'element-plus';
|
||||
|
||||
const configForm = ref({
|
||||
model: 'gpt-3.5',
|
||||
apiKey: '',
|
||||
apiUrl: '',
|
||||
temperature: 0.7,
|
||||
maxTokens: 2000,
|
||||
historyTurns: 5,
|
||||
enableStreaming: true,
|
||||
enableFileInterpretation: true,
|
||||
enableKnowledgeRetrieval: true,
|
||||
systemPrompt: ''
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadConfig();
|
||||
});
|
||||
|
||||
function loadConfig() {
|
||||
// TODO: 加载AI配置
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
// TODO: 保存配置
|
||||
ElMessage.success('配置保存成功');
|
||||
}
|
||||
|
||||
function handleTest() {
|
||||
// TODO: 测试API连接
|
||||
ElMessage.info('正在测试连接...');
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
// TODO: 重置配置
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-config {
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.config-form {
|
||||
.help-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
37
schoolNewsWeb/src/views/admin/manage/ai/AIManagementView.vue
Normal file
37
schoolNewsWeb/src/views/admin/manage/ai/AIManagementView.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="ai-management">
|
||||
<h1 class="page-title">智能体管理</h1>
|
||||
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="基础配置" name="config">
|
||||
<AIConfig />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="知识库管理" name="knowledge">
|
||||
<KnowledgeManagement />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ElTabs, ElTabPane } from 'element-plus';
|
||||
import AIConfig from './components/AIConfig.vue';
|
||||
import KnowledgeManagement from './components/KnowledgeManagement.vue';
|
||||
|
||||
const activeTab = ref('config');
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="knowledge-management">
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="showCreateDialog">+ 新增知识</el-button>
|
||||
<el-button @click="handleImport">批量导入</el-button>
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索知识..."
|
||||
style="width: 300px"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-table :data="knowledgeList" style="width: 100%">
|
||||
<el-table-column prop="title" label="标题" min-width="200" />
|
||||
<el-table-column prop="category" label="分类" width="120" />
|
||||
<el-table-column prop="tags" label="标签" width="200">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="tag in row.tags" :key="tag" size="small" style="margin-right: 4px;">
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-model="row.status"
|
||||
@change="toggleStatus(row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updateDate" label="更新时间" width="150" />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="editKnowledge(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteKnowledge(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElButton, ElInput, ElTable, ElTableColumn, ElTag, ElSwitch, ElPagination, ElMessage } from 'element-plus';
|
||||
|
||||
const searchKeyword = ref('');
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const knowledgeList = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
loadKnowledge();
|
||||
});
|
||||
|
||||
function loadKnowledge() {
|
||||
// TODO: 加载知识库数据
|
||||
}
|
||||
|
||||
function showCreateDialog() {
|
||||
// TODO: 显示创建知识对话框
|
||||
}
|
||||
|
||||
function handleImport() {
|
||||
// TODO: 批量导入
|
||||
ElMessage.info('批量导入功能开发中');
|
||||
}
|
||||
|
||||
function editKnowledge(row: any) {
|
||||
// TODO: 编辑知识
|
||||
}
|
||||
|
||||
function deleteKnowledge(row: any) {
|
||||
// TODO: 删除知识
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
|
||||
function toggleStatus(row: any) {
|
||||
// TODO: 切换状态
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
pageSize.value = val;
|
||||
loadKnowledge();
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
currentPage.value = val;
|
||||
loadKnowledge();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.knowledge-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="banner-management">
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="showCreateDialog">+ 新增Banner</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="banners" style="width: 100%">
|
||||
<el-table-column label="预览" width="200">
|
||||
<template #default="{ row }">
|
||||
<img :src="row.image" class="banner-preview" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="150" />
|
||||
<el-table-column prop="linkUrl" label="链接地址" min-width="200" />
|
||||
<el-table-column prop="sort" label="排序" width="80" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-model="row.status"
|
||||
@change="toggleStatus(row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="editBanner(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteBanner(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElButton, ElTable, ElTableColumn, ElSwitch, ElMessage } from 'element-plus';
|
||||
|
||||
const banners = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
loadBanners();
|
||||
});
|
||||
|
||||
function loadBanners() {
|
||||
// TODO: 加载Banner数据
|
||||
}
|
||||
|
||||
function showCreateDialog() {
|
||||
// TODO: 显示创建Banner对话框
|
||||
}
|
||||
|
||||
function editBanner(row: any) {
|
||||
// TODO: 编辑Banner
|
||||
}
|
||||
|
||||
function deleteBanner(row: any) {
|
||||
// TODO: 删除Banner
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
|
||||
function toggleStatus(row: any) {
|
||||
// TODO: 切换Banner状态
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.banner-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.banner-preview {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="column-management">
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="showCreateDialog">+ 新增栏目</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="columns" style="width: 100%" row-key="id" :tree-props="{children: 'children'}">
|
||||
<el-table-column prop="name" label="栏目名称" min-width="200" />
|
||||
<el-table-column prop="code" label="栏目编码" width="150" />
|
||||
<el-table-column prop="sort" label="排序" width="80" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status ? 'success' : 'info'">
|
||||
{{ row.status ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="editColumn(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteColumn(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElButton, ElTable, ElTableColumn, ElTag, ElMessage } from 'element-plus';
|
||||
|
||||
const columns = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
loadColumns();
|
||||
});
|
||||
|
||||
function loadColumns() {
|
||||
// TODO: 加载栏目数据
|
||||
}
|
||||
|
||||
function showCreateDialog() {
|
||||
// TODO: 显示创建栏目对话框
|
||||
}
|
||||
|
||||
function editColumn(row: any) {
|
||||
// TODO: 编辑栏目
|
||||
}
|
||||
|
||||
function deleteColumn(row: any) {
|
||||
// TODO: 删除栏目
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.column-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="language-management">
|
||||
<h1 class="page-title">语言管理</h1>
|
||||
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="Banner管理" name="banner">
|
||||
<BannerManagement />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="资源栏目管理" name="column">
|
||||
<ColumnManagement />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="标签管理" name="tag">
|
||||
<TagManagement />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ElTabs, ElTabPane } from 'element-plus';
|
||||
import BannerManagement from './components/BannerManagement.vue';
|
||||
import ColumnManagement from './components/ColumnManagement.vue';
|
||||
import TagManagement from './components/TagManagement.vue';
|
||||
|
||||
const activeTab = ref('banner');
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.language-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="tag-management">
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="showCreateDialog">+ 新增标签</el-button>
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索标签..."
|
||||
style="width: 300px"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-table :data="tags" style="width: 100%">
|
||||
<el-table-column prop="name" label="标签名称" min-width="150" />
|
||||
<el-table-column prop="category" label="标签分类" width="120" />
|
||||
<el-table-column prop="color" label="颜色" width="100">
|
||||
<template #default="{ row }">
|
||||
<div class="color-preview" :style="{ background: row.color }"></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="usageCount" label="使用次数" width="100" />
|
||||
<el-table-column prop="createDate" label="创建时间" width="150" />
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="editTag(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTag(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElButton, ElInput, ElTable, ElTableColumn, ElMessage } from 'element-plus';
|
||||
|
||||
const searchKeyword = ref('');
|
||||
const tags = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
loadTags();
|
||||
});
|
||||
|
||||
function loadTags() {
|
||||
// TODO: 加载标签数据
|
||||
}
|
||||
|
||||
function showCreateDialog() {
|
||||
// TODO: 显示创建标签对话框
|
||||
}
|
||||
|
||||
function editTag(row: any) {
|
||||
// TODO: 编辑标签
|
||||
}
|
||||
|
||||
function deleteTag(row: any) {
|
||||
// TODO: 删除标签
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tag-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-preview {
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
</style>
|
||||
|
||||
123
schoolNewsWeb/src/views/admin/manage/logs/LoginLogsView.vue
Normal file
123
schoolNewsWeb/src/views/admin/manage/logs/LoginLogsView.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="login-logs">
|
||||
<div class="filter-bar">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索用户名..."
|
||||
style="width: 200px"
|
||||
clearable
|
||||
/>
|
||||
<el-select v-model="loginStatus" placeholder="登录状态" style="width: 150px" clearable>
|
||||
<el-option label="成功" value="success" />
|
||||
<el-option label="失败" value="failed" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleExport">导出</el-button>
|
||||
<el-button type="danger" @click="handleClear">清空日志</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="logs" style="width: 100%">
|
||||
<el-table-column prop="username" label="用户名" width="120" />
|
||||
<el-table-column prop="ipAddress" label="IP地址" width="140" />
|
||||
<el-table-column prop="location" label="登录地点" width="150" />
|
||||
<el-table-column prop="browser" label="浏览器" width="120" />
|
||||
<el-table-column prop="os" label="操作系统" width="120" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 'success' ? 'success' : 'danger'">
|
||||
{{ row.status === 'success' ? '成功' : '失败' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="message" label="信息" min-width="150" />
|
||||
<el-table-column prop="loginTime" label="登录时间" width="180" />
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElTable, ElTableColumn, ElTag, ElPagination, ElMessage, ElMessageBox } from 'element-plus';
|
||||
|
||||
const searchKeyword = ref('');
|
||||
const loginStatus = ref('');
|
||||
const dateRange = ref<[Date, Date] | null>(null);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const logs = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
loadLogs();
|
||||
});
|
||||
|
||||
function loadLogs() {
|
||||
// TODO: 加载登录日志
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
currentPage.value = 1;
|
||||
loadLogs();
|
||||
}
|
||||
|
||||
function handleExport() {
|
||||
// TODO: 导出日志
|
||||
ElMessage.info('导出功能开发中');
|
||||
}
|
||||
|
||||
async function handleClear() {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要清空所有登录日志吗？此操作不可恢复！', '警告', {
|
||||
type: 'warning'
|
||||
});
|
||||
// TODO: 清空日志
|
||||
ElMessage.success('日志已清空');
|
||||
} catch {
|
||||
// 取消操作
|
||||
}
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
pageSize.value = val;
|
||||
loadLogs();
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
currentPage.value = val;
|
||||
loadLogs();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-logs {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
147
schoolNewsWeb/src/views/admin/manage/logs/OperationLogsView.vue
Normal file
147
schoolNewsWeb/src/views/admin/manage/logs/OperationLogsView.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="operation-logs">
|
||||
<div class="filter-bar">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索用户名或操作..."
|
||||
style="width: 250px"
|
||||
clearable
|
||||
/>
|
||||
<el-select v-model="operationType" placeholder="操作类型" style="width: 150px" clearable>
|
||||
<el-option label="新增" value="create" />
|
||||
<el-option label="修改" value="update" />
|
||||
<el-option label="删除" value="delete" />
|
||||
<el-option label="查询" value="read" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleExport">导出</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="logs" style="width: 100%">
|
||||
<el-table-column prop="username" label="操作人" width="120" />
|
||||
<el-table-column prop="module" label="操作模块" width="120" />
|
||||
<el-table-column prop="operation" label="操作类型" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getOperationType(row.operation)">
|
||||
{{ getOperationText(row.operation) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="操作描述" min-width="200" />
|
||||
<el-table-column prop="ipAddress" label="IP地址" width="140" />
|
||||
<el-table-column prop="duration" label="耗时(ms)" width="100" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 'success' ? 'success' : 'danger'">
|
||||
{{ row.status === 'success' ? '成功' : '失败' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operationTime" label="操作时间" width="180" />
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="viewDetail(row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElTable, ElTableColumn, ElTag, ElPagination, ElMessage } from 'element-plus';
|
||||
|
||||
const searchKeyword = ref('');
|
||||
const operationType = ref('');
|
||||
const dateRange = ref<[Date, Date] | null>(null);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const logs = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
loadLogs();
|
||||
});
|
||||
|
||||
function loadLogs() {
|
||||
// TODO: 加载操作日志
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
currentPage.value = 1;
|
||||
loadLogs();
|
||||
}
|
||||
|
||||
function handleExport() {
|
||||
// TODO: 导出日志
|
||||
ElMessage.info('导出功能开发中');
|
||||
}
|
||||
|
||||
function getOperationType(type: string) {
|
||||
const typeMap: Record<string, any> = {
|
||||
'create': 'success',
|
||||
'update': 'warning',
|
||||
'delete': 'danger',
|
||||
'read': 'info'
|
||||
};
|
||||
return typeMap[type] || 'info';
|
||||
}
|
||||
|
||||
function getOperationText(type: string) {
|
||||
const textMap: Record<string, string> = {
|
||||
'create': '新增',
|
||||
'update': '修改',
|
||||
'delete': '删除',
|
||||
'read': '查询'
|
||||
};
|
||||
return textMap[type] || type;
|
||||
}
|
||||
|
||||
function viewDetail(row: any) {
|
||||
// TODO: 查看操作详情
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
pageSize.value = val;
|
||||
loadLogs();
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
currentPage.value = val;
|
||||
loadLogs();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.operation-logs {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
190
schoolNewsWeb/src/views/admin/manage/logs/SystemConfigView.vue
Normal file
190
schoolNewsWeb/src/views/admin/manage/logs/SystemConfigView.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div class="system-config">
|
||||
<el-form :model="configForm" label-width="150px" class="config-form">
|
||||
<el-divider content-position="left">基本设置</el-divider>
|
||||
|
||||
<el-form-item label="系统名称">
|
||||
<el-input v-model="configForm.systemName" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="系统Logo">
|
||||
<el-upload
|
||||
class="logo-uploader"
|
||||
action="#"
|
||||
:show-file-list="false"
|
||||
:before-upload="beforeLogoUpload"
|
||||
>
|
||||
<img v-if="configForm.logo" :src="configForm.logo" class="logo-preview" />
|
||||
<el-icon v-else class="logo-uploader-icon">+</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="版权信息">
|
||||
<el-input v-model="configForm.copyright" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">安全设置</el-divider>
|
||||
|
||||
<el-form-item label="启用验证码">
|
||||
<el-switch v-model="configForm.enableCaptcha" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="密码最小长度">
|
||||
<el-input-number v-model="configForm.minPasswordLength" :min="6" :max="20" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="会话超时(分钟)">
|
||||
<el-input-number v-model="configForm.sessionTimeout" :min="5" :max="1440" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="登录失败锁定">
|
||||
<el-switch v-model="configForm.enableLoginLock" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="锁定阈值(次)" v-if="configForm.enableLoginLock">
|
||||
<el-input-number v-model="configForm.loginLockThreshold" :min="3" :max="10" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">功能设置</el-divider>
|
||||
|
||||
<el-form-item label="启用用户注册">
|
||||
<el-switch v-model="configForm.enableRegister" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="启用评论功能">
|
||||
<el-switch v-model="configForm.enableComment" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="启用文件上传">
|
||||
<el-switch v-model="configForm.enableFileUpload" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="文件上传大小限制(MB)">
|
||||
<el-input-number v-model="configForm.maxFileSize" :min="1" :max="100" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">邮件设置</el-divider>
|
||||
|
||||
<el-form-item label="启用邮件通知">
|
||||
<el-switch v-model="configForm.enableEmail" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="SMTP服务器" v-if="configForm.enableEmail">
|
||||
<el-input v-model="configForm.smtpHost" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="SMTP端口" v-if="configForm.enableEmail">
|
||||
<el-input-number v-model="configForm.smtpPort" :min="1" :max="65535" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="发件人邮箱" v-if="configForm.enableEmail">
|
||||
<el-input v-model="configForm.senderEmail" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSave">保存配置</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElForm, ElFormItem, ElInput, ElInputNumber, ElSwitch, ElButton, ElDivider, ElUpload, ElIcon, ElMessage } from 'element-plus';
|
||||
|
||||
const configForm = ref({
|
||||
systemName: '红色思政学习平台',
|
||||
logo: '',
|
||||
copyright: 'Copyright ©红色思政智能体平台',
|
||||
enableCaptcha: false,
|
||||
minPasswordLength: 6,
|
||||
sessionTimeout: 30,
|
||||
enableLoginLock: true,
|
||||
loginLockThreshold: 5,
|
||||
enableRegister: true,
|
||||
enableComment: true,
|
||||
enableFileUpload: true,
|
||||
maxFileSize: 10,
|
||||
enableEmail: false,
|
||||
smtpHost: '',
|
||||
smtpPort: 587,
|
||||
senderEmail: ''
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadConfig();
|
||||
});
|
||||
|
||||
function loadConfig() {
|
||||
// TODO: 加载系统配置
|
||||
}
|
||||
|
||||
function beforeLogoUpload(file: File) {
|
||||
const isImage = file.type.startsWith('image/');
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isImage) {
|
||||
ElMessage.error('只能上传图片文件');
|
||||
return false;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
ElMessage.error('图片大小不能超过 2MB');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
// TODO: 保存配置
|
||||
ElMessage.success('配置保存成功');
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
// TODO: 重置配置
|
||||
loadConfig();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.system-config {
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.config-form {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.logo-uploader {
|
||||
:deep(.el-upload) {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #C62828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-preview {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
text-align: center;
|
||||
line-height: 178px;
|
||||
}
|
||||
</style>
|
||||
|
||||
41
schoolNewsWeb/src/views/admin/manage/logs/SystemLogsView.vue
Normal file
41
schoolNewsWeb/src/views/admin/manage/logs/SystemLogsView.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="system-logs">
|
||||
<h1 class="page-title">系统日志</h1>
|
||||
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="登录日志" name="login">
|
||||
<LoginLogs />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="操作日志" name="operation">
|
||||
<OperationLogs />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="系统配置" name="config">
|
||||
<SystemConfig />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ElTabs, ElTabPane } from 'element-plus';
|
||||
import LoginLogs from './components/LoginLogs.vue';
|
||||
import OperationLogs from './components/OperationLogs.vue';
|
||||
import SystemConfig from './components/SystemConfig.vue';
|
||||
|
||||
const activeTab = ref('login');
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.system-logs {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="article-management">
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="showCreateDialog">+ 新增文章</el-button>
|
||||
<el-button @click="handleDataCollection">数据采集</el-button>
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索文章..."
|
||||
style="width: 300px"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-table :data="articles" style="width: 100%">
|
||||
<el-table-column prop="title" label="文章标题" min-width="200" />
|
||||
<el-table-column prop="category" label="分类" width="120" />
|
||||
<el-table-column prop="author" label="作者" width="120" />
|
||||
<el-table-column prop="publishDate" label="发布日期" width="120" />
|
||||
<el-table-column prop="views" label="阅读量" width="100" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.status)">
|
||||
{{ getStatusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="editArticle(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteArticle(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElButton, ElInput, ElTable, ElTableColumn, ElTag, ElPagination, ElMessage } from 'element-plus';
|
||||
|
||||
const searchKeyword = ref('');
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const articles = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
loadArticles();
|
||||
});
|
||||
|
||||
function loadArticles() {
|
||||
// TODO: 加载文章数据
|
||||
}
|
||||
|
||||
function showCreateDialog() {
|
||||
// TODO: 显示创建文章对话框
|
||||
}
|
||||
|
||||
function handleDataCollection() {
|
||||
// TODO: 数据采集功能
|
||||
ElMessage.info('数据采集功能开发中');
|
||||
}
|
||||
|
||||
function editArticle(row: any) {
|
||||
// TODO: 编辑文章
|
||||
}
|
||||
|
||||
function deleteArticle(row: any) {
|
||||
// TODO: 删除文章
|
||||
}
|
||||
|
||||
function getStatusType(status: string) {
|
||||
const typeMap: Record<string, any> = {
|
||||
'published': 'success',
|
||||
'draft': 'info',
|
||||
'pending': 'warning'
|
||||
};
|
||||
return typeMap[status] || 'info';
|
||||
}
|
||||
|
||||
function getStatusText(status: string) {
|
||||
const textMap: Record<string, string> = {
|
||||
'published': '已发布',
|
||||
'draft': '草稿',
|
||||
'pending': '待审核'
|
||||
};
|
||||
return textMap[status] || status;
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
pageSize.value = val;
|
||||
loadArticles();
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
currentPage.value = val;
|
||||
loadArticles();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="data-records">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="菜单管理" name="menu">
|
||||
<!-- 菜单管理已在manage/system中实现，这里可以引用或重新实现 -->
|
||||
<div class="redirect-info">
|
||||
<p>菜单管理功能已在系统管理模块中实现</p>
|
||||
<el-button type="primary" @click="goToMenuManage">前往菜单管理</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElTabs, ElTabPane, ElButton } from 'element-plus';
|
||||
|
||||
const router = useRouter();
|
||||
const activeTab = ref('menu');
|
||||
|
||||
function goToMenuManage() {
|
||||
router.push('/admin/system/menu');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.data-records {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.redirect-info {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="resource-management">
|
||||
<h1 class="page-title">资源管理</h1>
|
||||
|
||||
<el-tabs v-model="activeTab" class="resource-tabs">
|
||||
<el-tab-pane label="文章储备" name="articles">
|
||||
<ArticleManagement />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="数据记录" name="data">
|
||||
<DataRecords />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ElTabs, ElTabPane } from 'element-plus';
|
||||
import ArticleManagement from './components/ArticleManagement.vue';
|
||||
import DataRecords from './components/DataRecords.vue';
|
||||
|
||||
const activeTab = ref('articles');
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.resource-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="study-management">
|
||||
<h1 class="page-title">学习管理</h1>
|
||||
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="学习任务发布" name="task-publish">
|
||||
<TaskPublish />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="学习记录" name="task-records">
|
||||
<StudyRecords />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ElTabs, ElTabPane } from 'element-plus';
|
||||
import TaskPublish from './components/TaskPublish.vue';
|
||||
import StudyRecords from './components/StudyRecords.vue';
|
||||
|
||||
const activeTab = ref('task-publish');
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.study-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
149
schoolNewsWeb/src/views/admin/manage/study/StudyRecordsView.vue
Normal file
149
schoolNewsWeb/src/views/admin/manage/study/StudyRecordsView.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="study-records">
|
||||
<div class="filter-bar">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索用户..."
|
||||
style="width: 200px"
|
||||
clearable
|
||||
/>
|
||||
<el-select v-model="selectedTask" placeholder="选择任务" style="width: 200px" clearable>
|
||||
<el-option
|
||||
v-for="task in tasks"
|
||||
:key="task.id"
|
||||
:label="task.name"
|
||||
:value="task.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleExport">导出</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="records" style="width: 100%">
|
||||
<el-table-column prop="userName" label="用户" width="120" />
|
||||
<el-table-column prop="taskName" label="任务名称" min-width="180" />
|
||||
<el-table-column prop="progress" label="完成进度" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-progress :percentage="row.progress" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="duration" label="学习时长" width="120" />
|
||||
<el-table-column prop="startDate" label="开始时间" width="150" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.status)">
|
||||
{{ getStatusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="viewDetail(row)">查看详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElTable, ElTableColumn, ElTag, ElProgress, ElPagination, ElMessage } from 'element-plus';
|
||||
|
||||
const searchKeyword = ref('');
|
||||
const selectedTask = ref('');
|
||||
const dateRange = ref<[Date, Date] | null>(null);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const records = ref<any[]>([]);
|
||||
const tasks = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
loadTasks();
|
||||
loadRecords();
|
||||
});
|
||||
|
||||
function loadTasks() {
|
||||
// TODO: 加载任务列表
|
||||
}
|
||||
|
||||
function loadRecords() {
|
||||
// TODO: 加载学习记录
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
currentPage.value = 1;
|
||||
loadRecords();
|
||||
}
|
||||
|
||||
function handleExport() {
|
||||
// TODO: 导出学习记录
|
||||
ElMessage.info('导出功能开发中');
|
||||
}
|
||||
|
||||
function getStatusType(status: string) {
|
||||
const typeMap: Record<string, any> = {
|
||||
'completed': 'success',
|
||||
'in-progress': 'warning',
|
||||
'not-started': 'info'
|
||||
};
|
||||
return typeMap[status] || 'info';
|
||||
}
|
||||
|
||||
function getStatusText(status: string) {
|
||||
const textMap: Record<string, string> = {
|
||||
'completed': '已完成',
|
||||
'in-progress': '进行中',
|
||||
'not-started': '未开始'
|
||||
};
|
||||
return textMap[status] || status;
|
||||
}
|
||||
|
||||
function viewDetail(row: any) {
|
||||
// TODO: 查看学习记录详情
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
pageSize.value = val;
|
||||
loadRecords();
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
currentPage.value = val;
|
||||
loadRecords();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.study-records {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
135
schoolNewsWeb/src/views/admin/manage/study/TaskPublishView.vue
Normal file
135
schoolNewsWeb/src/views/admin/manage/study/TaskPublishView.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="task-publish">
|
||||
<el-form :model="taskForm" :rules="taskRules" ref="taskFormRef" label-width="120px">
|
||||
<el-form-item label="任务名称" prop="name">
|
||||
<el-input v-model="taskForm.name" placeholder="请输入任务名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="任务描述" prop="description">
|
||||
<el-input
|
||||
v-model="taskForm.description"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="请输入任务描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="任务周期" prop="period">
|
||||
<el-date-picker
|
||||
v-model="taskForm.period"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="关联资源" prop="resources">
|
||||
<el-button @click="showResourceSelector">选择资源</el-button>
|
||||
<div class="selected-resources" v-if="taskForm.resources.length">
|
||||
<el-tag
|
||||
v-for="resource in taskForm.resources"
|
||||
:key="resource.id"
|
||||
closable
|
||||
@close="removeResource(resource)"
|
||||
>
|
||||
{{ resource.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="任务接受对象" prop="targets">
|
||||
<el-radio-group v-model="taskForm.targetType">
|
||||
<el-radio label="dept">按部门</el-radio>
|
||||
<el-radio label="role">按权限</el-radio>
|
||||
<el-radio label="user">选人员</el-radio>
|
||||
</el-radio-group>
|
||||
<el-button @click="showTargetSelector" style="margin-left: 16px;">
|
||||
选择对象
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlePublish">发布任务</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ElForm, ElFormItem, ElInput, ElDatePicker, ElButton, ElRadioGroup, ElRadio, ElTag, ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||
|
||||
const taskFormRef = ref<FormInstance>();
|
||||
|
||||
const taskForm = ref({
|
||||
name: '',
|
||||
description: '',
|
||||
period: null as [Date, Date] | null,
|
||||
resources: [] as any[],
|
||||
targetType: 'dept',
|
||||
targets: [] as any[]
|
||||
});
|
||||
|
||||
const taskRules: FormRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入任务名称', trigger: 'blur' }
|
||||
],
|
||||
description: [
|
||||
{ required: true, message: '请输入任务描述', trigger: 'blur' }
|
||||
],
|
||||
period: [
|
||||
{ required: true, message: '请选择任务周期', trigger: 'change' }
|
||||
]
|
||||
};
|
||||
|
||||
function showResourceSelector() {
|
||||
// TODO: 显示资源选择器
|
||||
}
|
||||
|
||||
function removeResource(resource: any) {
|
||||
const index = taskForm.value.resources.indexOf(resource);
|
||||
if (index > -1) {
|
||||
taskForm.value.resources.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function showTargetSelector() {
|
||||
// TODO: 显示对象选择器
|
||||
}
|
||||
|
||||
async function handlePublish() {
|
||||
if (!taskFormRef.value) return;
|
||||
|
||||
try {
|
||||
await taskFormRef.value.validate();
|
||||
// TODO: 调用发布任务API
|
||||
ElMessage.success('任务发布成功');
|
||||
handleReset();
|
||||
} catch (error) {
|
||||
console.error('表单验证失败', error);
|
||||
}
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
taskFormRef.value?.resetFields();
|
||||
taskForm.value.resources = [];
|
||||
taskForm.value.targets = [];
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.task-publish {
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.selected-resources {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
816
schoolNewsWeb/src/views/admin/manage/system/DeptManageView.vue
Normal file
816
schoolNewsWeb/src/views/admin/manage/system/DeptManageView.vue
Normal file
@@ -0,0 +1,816 @@
|
||||
<template>
|
||||
<div class="dept-manage">
|
||||
<div class="header">
|
||||
<h2>部门管理</h2>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增部门
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="tree-container">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
v-loading="loading"
|
||||
:data="deptList"
|
||||
:props="treeProps"
|
||||
node-key="deptID"
|
||||
:default-expand-all="true"
|
||||
:expand-on-click-node="false"
|
||||
:check-on-click-node="false"
|
||||
draggable
|
||||
:allow-drop="allowDrop"
|
||||
@node-drop="handleNodeDrop"
|
||||
class="dept-tree"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
<div class="custom-tree-node">
|
||||
<div class="node-label">
|
||||
<el-icon class="node-icon">
|
||||
<OfficeBuilding />
|
||||
</el-icon>
|
||||
<span class="node-name">{{ data.name }}</span>
|
||||
</div>
|
||||
<div class="node-info">
|
||||
<span class="info-item">ID: {{ data.deptID }}</span>
|
||||
<span class="info-item" v-if="data.description">{{ data.description }}</span>
|
||||
<span class="info-item" v-if="data.creatorName">创建人: {{ data.creatorName }}</span>
|
||||
</div>
|
||||
<div class="node-actions">
|
||||
<el-button size="small" type="primary" @click.stop="handleAddChild(data)">
|
||||
子部门
|
||||
</el-button>
|
||||
<el-button size="small" type="success" @click.stop="handleEdit(data)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="small" type="warning" @click.stop="handleBindRole(data)">
|
||||
角色
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click.stop="handleDelete(data)">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑部门' : '新增部门'"
|
||||
width="600px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="父部门" prop="parentID">
|
||||
<el-cascader
|
||||
v-model="formData.parentID"
|
||||
:options="parentDeptOptions"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择父部门"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入部门描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
:loading="submitting"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 绑定角色对话框 -->
|
||||
<el-dialog v-model="bindRoleDialogVisible" title="绑定角色" width="800px" @close="resetBindList">
|
||||
<div class="role-binding-container">
|
||||
<!-- 部门信息显示 -->
|
||||
<div class="dept-info" v-if="currentDept">
|
||||
<h4>部门信息：{{ currentDept.name }}</h4>
|
||||
<p>部门ID：{{ currentDept.deptID }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 角色绑定状态表格 -->
|
||||
<el-table :data="roleList" style="width: 100%" border stripe>
|
||||
<el-table-column width="80" label="绑定状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="isRoleSelected(row.roleID) ? 'success' : 'info'"
|
||||
size="small"
|
||||
>
|
||||
{{ isRoleSelected(row.roleID) ? '已绑定' : '未绑定' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="角色名称" min-width="150" />
|
||||
<el-table-column prop="roleID" label="角色ID" min-width="120" />
|
||||
<el-table-column prop="description" label="角色描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
:type="isRoleSelected(row.roleID) ? 'danger' : 'primary'"
|
||||
size="small"
|
||||
@click="toggleRoleSelection(row)"
|
||||
>
|
||||
{{ isRoleSelected(row.roleID) ? '解绑' : '绑定' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="binding-stats">
|
||||
<el-alert
|
||||
:title="`已绑定 ${selectedRoles.length} 个角色，未绑定 ${roleList.length - selectedRoles.length} 个角色`"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="bindRoleDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveRoleBinding" :loading="submitting">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { deptApi } from '@/apis/system/dept';
|
||||
import { roleApi } from '@/apis/system/role';
|
||||
import { SysDept, SysRole } from '@/types';
|
||||
import { ref, onMounted, reactive, computed } from 'vue';
|
||||
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
|
||||
import { Plus, OfficeBuilding } from '@element-plus/icons-vue';
|
||||
|
||||
// 数据状态
|
||||
const deptList = ref<SysDept[]>([]);
|
||||
const loading = ref(false);
|
||||
const submitting = ref(false);
|
||||
const treeRef = ref();
|
||||
|
||||
// 角色绑定相关数据
|
||||
const roleList = ref<SysRole[]>([]);
|
||||
const selectedRoles = ref<string[]>([]);
|
||||
const currentDept = ref<SysDept | null>(null);
|
||||
const bindList = ref<{ roles: SysRole[] }>({
|
||||
roles: []
|
||||
});
|
||||
|
||||
// 对话框状态
|
||||
const dialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
const bindRoleDialogVisible = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive<SysDept>({
|
||||
name: '',
|
||||
description: '',
|
||||
parentID: undefined
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const formRules: FormRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入部门名称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '部门名称长度在 2 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
description: [
|
||||
{ max: 200, message: '部门描述不能超过 200 个字符', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 级联选择器配置
|
||||
const cascaderProps = {
|
||||
value: 'value',
|
||||
label: 'label',
|
||||
children: 'children',
|
||||
checkStrictly: true
|
||||
};
|
||||
|
||||
// 树形组件配置
|
||||
const treeProps = {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
};
|
||||
|
||||
// 父部门选项
|
||||
const parentDeptOptions = computed(() => {
|
||||
return buildParentDeptOptions(deptList.value);
|
||||
});
|
||||
|
||||
// 构建父部门选项
|
||||
function buildParentDeptOptions(depts: SysDept[]): any[] {
|
||||
const result: any[] = [];
|
||||
|
||||
function processNode(dept: SysDept): any {
|
||||
const option = {
|
||||
value: dept.deptID,
|
||||
label: dept.name,
|
||||
children: dept.children && dept.children.length > 0
|
||||
? dept.children.map(processNode)
|
||||
: undefined
|
||||
};
|
||||
return option;
|
||||
}
|
||||
|
||||
depts.forEach(dept => {
|
||||
result.push(processNode(dept));
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// 加载部门列表
|
||||
async function loadDeptList() {
|
||||
try {
|
||||
loading.value = true;
|
||||
const result = await deptApi.getAllDepts();
|
||||
const rawData = result.dataList || [];
|
||||
console.log('原始部门数据:', rawData);
|
||||
// 将扁平数据转换为树形结构
|
||||
deptList.value = buildTree(rawData);
|
||||
console.log('转换后的树形数据:', deptList.value);
|
||||
} catch (error) {
|
||||
console.error('加载部门列表失败:', error);
|
||||
ElMessage.error('加载部门列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 将扁平数据转换为树形结构
|
||||
function buildTree(flatData: SysDept[]): SysDept[] {
|
||||
if (!flatData || flatData.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const tree: SysDept[] = [];
|
||||
const map = new Map<string, SysDept>();
|
||||
const maxDepth = flatData.length; // 最多遍历len层
|
||||
|
||||
// 初始化所有节点
|
||||
flatData.forEach(item => {
|
||||
if (item.deptID) {
|
||||
map.set(item.deptID, { ...item, children: [] });
|
||||
}
|
||||
});
|
||||
|
||||
// 循环构建树结构，最多遍历maxDepth次
|
||||
for (let depth = 0; depth < maxDepth; depth++) {
|
||||
let hasChanges = false;
|
||||
|
||||
flatData.forEach(item => {
|
||||
if (!item.deptID) return;
|
||||
|
||||
const node = map.get(item.deptID);
|
||||
if (!node) return;
|
||||
|
||||
// 如果节点已经在树中，跳过
|
||||
if (isNodeInTree(node, tree)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!item.parentID || item.parentID === '0' || item.parentID === '') {
|
||||
// 根节点
|
||||
if (!isNodeInTree(node, tree)) {
|
||||
tree.push(node);
|
||||
hasChanges = true;
|
||||
}
|
||||
} else {
|
||||
// 查找父节点
|
||||
const parent = map.get(item.parentID);
|
||||
if (parent && isNodeInTree(parent, tree)) {
|
||||
if (!parent.children) {
|
||||
parent.children = [];
|
||||
}
|
||||
if (!parent.children.includes(node)) {
|
||||
parent.children.push(node);
|
||||
hasChanges = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 如果没有变化，说明树构建完成
|
||||
if (!hasChanges) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 清理空的children数组
|
||||
function cleanEmptyChildren(nodes: SysDept[]) {
|
||||
nodes.forEach(node => {
|
||||
if (node.children && node.children.length === 0) {
|
||||
delete node.children;
|
||||
} else if (node.children && node.children.length > 0) {
|
||||
cleanEmptyChildren(node.children);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cleanEmptyChildren(tree);
|
||||
return tree;
|
||||
}
|
||||
|
||||
// 检查节点是否已经在树中
|
||||
function isNodeInTree(node: SysDept, tree: SysDept[]): boolean {
|
||||
for (const treeNode of tree) {
|
||||
if (treeNode.deptID === node.deptID) {
|
||||
return true;
|
||||
}
|
||||
if (treeNode.children && isNodeInTree(node, treeNode.children)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 新增部门
|
||||
function handleAdd() {
|
||||
isEdit.value = false;
|
||||
formData.parentID = undefined;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 新增子部门
|
||||
function handleAddChild(row: SysDept) {
|
||||
isEdit.value = false;
|
||||
formData.parentID = row.deptID;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 编辑部门
|
||||
function handleEdit(row: SysDept) {
|
||||
isEdit.value = true;
|
||||
Object.assign(formData, row);
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 删除部门
|
||||
async function handleDelete(row: SysDept) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除部门 "${row.name}" 吗？`,
|
||||
'删除确认',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
);
|
||||
|
||||
await deptApi.deleteDept(row);
|
||||
ElMessage.success('删除成功');
|
||||
await loadDeptList();
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除部门失败:', error);
|
||||
ElMessage.error('删除部门失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return;
|
||||
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
submitting.value = true;
|
||||
|
||||
if (isEdit.value) {
|
||||
await deptApi.updateDept(formData);
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
await deptApi.createDept(formData);
|
||||
ElMessage.success('新增成功');
|
||||
}
|
||||
|
||||
dialogVisible.value = false;
|
||||
await loadDeptList();
|
||||
} catch (error) {
|
||||
if (error !== false) { // 表单验证失败时error为false
|
||||
console.error('提交失败:', error);
|
||||
ElMessage.error(isEdit.value ? '更新失败' : '新增失败');
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
function resetForm() {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
Object.assign(formData, {
|
||||
name: '',
|
||||
description: '',
|
||||
parentID: undefined
|
||||
});
|
||||
}
|
||||
|
||||
// 查看绑定角色
|
||||
async function handleBindRole(row: SysDept) {
|
||||
currentDept.value = row;
|
||||
|
||||
try {
|
||||
// 获取所有角色
|
||||
const roleResult = await roleApi.getAllRoles();
|
||||
roleList.value = roleResult.dataList || [];
|
||||
|
||||
// 获取已绑定的角色
|
||||
const bindingResult = await deptApi.getDeptByRole(row);
|
||||
bindList.value.roles = bindingResult.dataList || [];
|
||||
|
||||
// 设置已选中的角色
|
||||
selectedRoles.value = bindList.value.roles.map(role => role.roleID).filter((id): id is string => !!id);
|
||||
|
||||
console.log('已绑定的角色:', bindList.value.roles);
|
||||
console.log('所有角色:', roleList.value);
|
||||
bindRoleDialogVisible.value = true;
|
||||
} catch (error) {
|
||||
console.error('获取角色绑定信息失败:', error);
|
||||
ElMessage.error('获取角色绑定信息失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 重置绑定列表
|
||||
function resetBindList() {
|
||||
bindList.value = {
|
||||
roles: []
|
||||
};
|
||||
selectedRoles.value = [];
|
||||
currentDept.value = null;
|
||||
}
|
||||
|
||||
// 检查角色是否已选中
|
||||
function isRoleSelected(roleID: string | undefined): boolean {
|
||||
return roleID ? selectedRoles.value.includes(roleID) : false;
|
||||
}
|
||||
|
||||
// 切换角色选择状态
|
||||
function toggleRoleSelection(role: SysRole) {
|
||||
if (!role.roleID) return;
|
||||
|
||||
const index = selectedRoles.value.indexOf(role.roleID);
|
||||
if (index > -1) {
|
||||
selectedRoles.value.splice(index, 1);
|
||||
} else {
|
||||
selectedRoles.value.push(role.roleID);
|
||||
}
|
||||
}
|
||||
|
||||
// 保存角色绑定
|
||||
async function saveRoleBinding() {
|
||||
if (!currentDept.value || !currentDept.value.deptID) {
|
||||
ElMessage.error('部门信息不完整');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
submitting.value = true;
|
||||
|
||||
// 获取当前已绑定的角色ID
|
||||
const currentBoundRoles = (bindList.value.roles || []).map(role => role.roleID).filter((id): id is string => !!id);
|
||||
|
||||
// 找出需要绑定的角色（新增的）
|
||||
const rolesToBind = selectedRoles.value.filter(roleID => !currentBoundRoles.includes(roleID));
|
||||
|
||||
// 找出需要解绑的角色（移除的）
|
||||
const rolesToUnbind = currentBoundRoles.filter(roleID => !selectedRoles.value.includes(roleID));
|
||||
|
||||
// 构建需要绑定的角色对象数组
|
||||
if (rolesToBind.length > 0) {
|
||||
const rolesToBindObjects = rolesToBind.map(roleID => {
|
||||
const role = roleList.value.find(r => r.roleID === roleID);
|
||||
return role || { roleID: roleID };
|
||||
});
|
||||
|
||||
const bindDept = {
|
||||
dept: currentDept.value,
|
||||
depts: [{deptID: currentDept.value.deptID}],
|
||||
roles: rolesToBindObjects,
|
||||
};
|
||||
await deptApi.bindDeptRole(bindDept);
|
||||
}
|
||||
|
||||
// 构建需要解绑的角色对象数组
|
||||
if (rolesToUnbind.length > 0) {
|
||||
const rolesToUnbindObjects = rolesToUnbind.map(roleID => {
|
||||
const role = roleList.value.find(r => r.roleID === roleID);
|
||||
return role || { roleID: roleID };
|
||||
});
|
||||
|
||||
const unbindDept = {
|
||||
dept: currentDept.value,
|
||||
roles: rolesToUnbindObjects,
|
||||
depts: [{deptID: currentDept.value.deptID}]
|
||||
};
|
||||
await deptApi.unbindDeptRole(unbindDept);
|
||||
}
|
||||
|
||||
ElMessage.success('角色绑定保存成功');
|
||||
bindRoleDialogVisible.value = false;
|
||||
|
||||
// 刷新部门列表
|
||||
await loadDeptList();
|
||||
} catch (error) {
|
||||
console.error('保存角色绑定失败:', error);
|
||||
ElMessage.error('保存角色绑定失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时获取部门列表
|
||||
onMounted(() => {
|
||||
loadDeptList();
|
||||
});
|
||||
|
||||
// 节点拖拽逻辑
|
||||
function allowDrop(draggingNode: any, dropNode: any) {
|
||||
// 禁止拖拽到自己或子节点
|
||||
return !isDescendant(draggingNode.data, dropNode.data);
|
||||
}
|
||||
|
||||
// 判断是否是后代节点
|
||||
function isDescendant(ancestor: SysDept, node: SysDept): boolean {
|
||||
if (ancestor.deptID === node.deptID) return true;
|
||||
if (node.children) {
|
||||
return node.children.some(child => isDescendant(ancestor, child));
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 处理节点拖拽
|
||||
async function handleNodeDrop(draggingNode: any, dropNode: any, dropType: string) {
|
||||
try {
|
||||
const dragData = draggingNode.data as SysDept;
|
||||
const dropData = dropNode.data as SysDept;
|
||||
|
||||
// 更新被拖拽节点的父ID
|
||||
if (dropType === 'inner') {
|
||||
dragData.parentID = dropData.deptID;
|
||||
} else {
|
||||
dragData.parentID = dropData.parentID;
|
||||
}
|
||||
|
||||
// 更新到后端
|
||||
await deptApi.updateDept(dragData);
|
||||
ElMessage.success('部门移动成功');
|
||||
|
||||
// 重新加载部门列表以确保数据一致性
|
||||
await loadDeptList();
|
||||
} catch (error) {
|
||||
console.error('移动部门失败:', error);
|
||||
ElMessage.error('移动部门失败');
|
||||
// 重新加载部门列表以恢复原始状态
|
||||
await loadDeptList();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dept-manage {
|
||||
padding: 20px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
|
||||
.dept-tree {
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.node-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
|
||||
.node-icon {
|
||||
margin-right: 8px;
|
||||
color: #67C23A;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.node-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
margin: 0 20px;
|
||||
|
||||
.info-item {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
background: #f4f4f5;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.node-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
.el-button {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
|
||||
.node-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Element Plus Tree 组件样式覆盖
|
||||
:deep(.el-tree-node__content) {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__expand-icon) {
|
||||
padding: 6px;
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node) {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__children) {
|
||||
padding-left: 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框样式优化
|
||||
:deep(.el-dialog) {
|
||||
.el-dialog__header {
|
||||
padding: 20px 20px 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 10px 20px 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式优化
|
||||
:deep(.el-form) {
|
||||
.el-form-item__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮样式优化
|
||||
:deep(.el-button) {
|
||||
&.is-link {
|
||||
padding: 0;
|
||||
margin-right: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 角色绑定容器样式
|
||||
.role-binding-container {
|
||||
.dept-info {
|
||||
background: #f5f7fa;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #303133;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.binding-stats {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
907
schoolNewsWeb/src/views/admin/manage/system/MenuManageView.vue
Normal file
907
schoolNewsWeb/src/views/admin/manage/system/MenuManageView.vue
Normal file
@@ -0,0 +1,907 @@
|
||||
<template>
|
||||
<div class="menu-manage">
|
||||
<div class="header">
|
||||
<h2>菜单管理</h2>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增菜单
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="tree-container">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
v-loading="loading"
|
||||
:data="menuList"
|
||||
:props="treeProps"
|
||||
node-key="menuID"
|
||||
:default-expand-all="true"
|
||||
:expand-on-click-node="false"
|
||||
:check-on-click-node="false"
|
||||
draggable
|
||||
:allow-drop="allowDrop"
|
||||
@node-drop="handleNodeDrop"
|
||||
class="menu-tree"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
<div class="custom-tree-node">
|
||||
<div class="node-label">
|
||||
<el-icon v-if="data.icon" class="node-icon">
|
||||
<component :is="data.icon" />
|
||||
</el-icon>
|
||||
<span class="node-name">{{ data.name }}</span>
|
||||
<el-tag
|
||||
:type="getMenuTypeTagType(data.type)"
|
||||
size="small"
|
||||
>
|
||||
{{ getMenuTypeText(data.type) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="node-info">
|
||||
<span class="info-item">ID: {{ data.menuID }}</span>
|
||||
<span class="info-item" v-if="data.url">{{ data.url }}</span>
|
||||
<span class="info-item" v-if="data.component">{{ data.component }}</span>
|
||||
<span class="info-item">排序: {{ data.orderNum || 0 }}</span>
|
||||
</div>
|
||||
<div class="node-actions">
|
||||
<el-button size="small" type="primary" @click.stop="handleAddChild(data)">
|
||||
子菜单
|
||||
</el-button>
|
||||
<el-button size="small" type="success" @click.stop="handleEdit(data)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="small" type="warning" @click.stop="handleBindPermission(data)">
|
||||
权限
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click.stop="handleDelete(data)">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑菜单' : '新增菜单'"
|
||||
width="600px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="父菜单" prop="parentID">
|
||||
<el-cascader
|
||||
v-model="formData.parentID"
|
||||
:options="parentMenuOptions"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择父菜单"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
placeholder="请输入菜单名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入菜单描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单路径" prop="url">
|
||||
<el-input
|
||||
v-model="formData.url"
|
||||
placeholder="请输入菜单路径"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单组件" prop="component">
|
||||
<el-input
|
||||
v-model="formData.component"
|
||||
placeholder="请输入菜单组件"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单图标" prop="icon">
|
||||
<el-input
|
||||
v-model="formData.icon"
|
||||
placeholder="请输入菜单图标"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单类型" prop="type">
|
||||
<el-select v-model="formData.type" placeholder="请选择菜单类型" style="width: 100%">
|
||||
<el-option label="侧边栏" :value="0" />
|
||||
<el-option label="导航栏" :value="1" />
|
||||
<el-option label="按钮" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="orderNum">
|
||||
<el-input-number
|
||||
v-model="formData.orderNum"
|
||||
:min="0"
|
||||
:max="999"
|
||||
placeholder="请输入排序"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
:loading="submitting"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 绑定权限对话框 -->
|
||||
<el-dialog v-model="bindPermissionDialogVisible" title="绑定权限" width="800px" @close="resetBindList">
|
||||
<div class="permission-binding-container">
|
||||
<!-- 菜单信息显示 -->
|
||||
<div class="menu-info" v-if="currentMenu">
|
||||
<h4>菜单信息：{{ currentMenu.name }}</h4>
|
||||
<p>菜单ID：{{ currentMenu.menuID }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 权限绑定状态表格 -->
|
||||
<el-table :data="permissionList" style="width: 100%" border stripe>
|
||||
<el-table-column width="80" label="绑定状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="isPermissionSelected(row.permissionID) ? 'success' : 'info'"
|
||||
size="small"
|
||||
>
|
||||
{{ isPermissionSelected(row.permissionID) ? '已绑定' : '未绑定' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="权限名称" min-width="150" />
|
||||
<el-table-column prop="permissionID" label="权限ID" min-width="120" />
|
||||
<el-table-column prop="code" label="权限编码" min-width="150" />
|
||||
<el-table-column prop="description" label="权限描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
:type="isPermissionSelected(row.permissionID) ? 'danger' : 'primary'"
|
||||
size="small"
|
||||
@click="togglePermissionSelection(row)"
|
||||
>
|
||||
{{ isPermissionSelected(row.permissionID) ? '解绑' : '绑定' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="binding-stats">
|
||||
<el-alert
|
||||
:title="`已绑定 ${selectedPermissions.length} 个权限，未绑定 ${permissionList.length - selectedPermissions.length} 个权限`"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="bindPermissionDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="savePermissionBinding" :loading="submitting">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { menuApi } from '@/apis/system/menu';
|
||||
import { permissionApi } from '@/apis/system/permission';
|
||||
import { SysMenu, SysPermission } from '@/types';
|
||||
import { ref, onMounted, reactive, computed } from 'vue';
|
||||
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
// 数据状态
|
||||
const menuList = ref<SysMenu[]>([]);
|
||||
const loading = ref(false);
|
||||
const submitting = ref(false);
|
||||
const treeRef = ref();
|
||||
|
||||
// 权限绑定相关数据
|
||||
const permissionList = ref<SysPermission[]>([]);
|
||||
const selectedPermissions = ref<string[]>([]);
|
||||
const currentMenu = ref<SysMenu | null>(null);
|
||||
const bindList = ref<{ permissions: SysPermission[] }>({
|
||||
permissions: []
|
||||
});
|
||||
|
||||
// 对话框状态
|
||||
const dialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
const bindPermissionDialogVisible = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive<SysMenu>({
|
||||
name: '',
|
||||
description: '',
|
||||
url: '',
|
||||
component: '',
|
||||
icon: '',
|
||||
type: 0,
|
||||
orderNum: 0,
|
||||
parentID: undefined
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const formRules: FormRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入菜单名称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '菜单名称长度在 2 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
url: [
|
||||
{ max: 200, message: '菜单路径不能超过 200 个字符', trigger: 'blur' }
|
||||
],
|
||||
component: [
|
||||
{ max: 200, message: '菜单组件不能超过 200 个字符', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择菜单类型', trigger: 'change' }
|
||||
]
|
||||
};
|
||||
|
||||
// 级联选择器配置
|
||||
const cascaderProps = {
|
||||
value: 'value',
|
||||
label: 'label',
|
||||
children: 'children',
|
||||
checkStrictly: true
|
||||
};
|
||||
|
||||
// 树形组件配置
|
||||
const treeProps = {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
};
|
||||
|
||||
// 父菜单选项
|
||||
const parentMenuOptions = computed(() => {
|
||||
return buildParentMenuOptions(menuList.value);
|
||||
});
|
||||
|
||||
// 构建父菜单选项
|
||||
function buildParentMenuOptions(menus: SysMenu[]): any[] {
|
||||
const result: any[] = [];
|
||||
|
||||
function processNode(menu: SysMenu): any {
|
||||
const option = {
|
||||
value: menu.menuID,
|
||||
label: menu.name,
|
||||
children: menu.children && menu.children.length > 0
|
||||
? menu.children.map(processNode)
|
||||
: undefined
|
||||
};
|
||||
return option;
|
||||
}
|
||||
|
||||
menus.forEach(menu => {
|
||||
result.push(processNode(menu));
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// 获取菜单类型标签类型
|
||||
function getMenuTypeTagType(type: number | undefined): string {
|
||||
switch (type) {
|
||||
case 0: return 'primary';
|
||||
case 1: return 'success';
|
||||
case 2: return 'warning';
|
||||
default: return 'info';
|
||||
}
|
||||
}
|
||||
|
||||
// 获取菜单类型文本
|
||||
function getMenuTypeText(type: number | undefined): string {
|
||||
switch (type) {
|
||||
case 0: return '侧边栏';
|
||||
case 1: return '导航栏';
|
||||
case 2: return '按钮';
|
||||
default: return '未知';
|
||||
}
|
||||
}
|
||||
|
||||
// 加载菜单列表
|
||||
async function loadMenuList() {
|
||||
try {
|
||||
loading.value = true;
|
||||
const result = await menuApi.getAllMenuList();
|
||||
const rawData = result.dataList || [];
|
||||
console.log('原始菜单数据:', rawData);
|
||||
// 将扁平数据转换为树形结构
|
||||
menuList.value = buildTree(rawData);
|
||||
console.log('转换后的树形数据:', menuList.value);
|
||||
} catch (error) {
|
||||
console.error('加载菜单列表失败:', error);
|
||||
ElMessage.error('加载菜单列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 将扁平数据转换为树形结构
|
||||
function buildTree(flatData: SysMenu[]): SysMenu[] {
|
||||
if (!flatData || flatData.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const tree: SysMenu[] = [];
|
||||
const map = new Map<string, SysMenu>();
|
||||
const maxDepth = flatData.length; // 最多遍历len层
|
||||
|
||||
// 初始化所有节点
|
||||
flatData.forEach(item => {
|
||||
if (item.menuID) {
|
||||
map.set(item.menuID, { ...item, children: [] });
|
||||
}
|
||||
});
|
||||
|
||||
// 循环构建树结构，最多遍历maxDepth次
|
||||
for (let depth = 0; depth < maxDepth; depth++) {
|
||||
let hasChanges = false;
|
||||
|
||||
flatData.forEach(item => {
|
||||
if (!item.menuID) return;
|
||||
|
||||
const node = map.get(item.menuID);
|
||||
if (!node) return;
|
||||
|
||||
// 如果节点已经在树中，跳过
|
||||
if (isNodeInTree(node, tree)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!item.parentID || item.parentID === '0' || item.parentID === '') {
|
||||
// 根节点
|
||||
if (!isNodeInTree(node, tree)) {
|
||||
tree.push(node);
|
||||
hasChanges = true;
|
||||
}
|
||||
} else {
|
||||
// 查找父节点
|
||||
const parent = map.get(item.parentID);
|
||||
if (parent && isNodeInTree(parent, tree)) {
|
||||
if (!parent.children) {
|
||||
parent.children = [];
|
||||
}
|
||||
if (!parent.children.includes(node)) {
|
||||
parent.children.push(node);
|
||||
hasChanges = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 如果没有变化，说明树构建完成
|
||||
if (!hasChanges) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 清理空的children数组
|
||||
function cleanEmptyChildren(nodes: SysMenu[]) {
|
||||
nodes.forEach(node => {
|
||||
if (node.children && node.children.length === 0) {
|
||||
delete node.children;
|
||||
} else if (node.children && node.children.length > 0) {
|
||||
cleanEmptyChildren(node.children);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cleanEmptyChildren(tree);
|
||||
return tree;
|
||||
}
|
||||
|
||||
// 检查节点是否已经在树中
|
||||
function isNodeInTree(node: SysMenu, tree: SysMenu[]): boolean {
|
||||
for (const treeNode of tree) {
|
||||
if (treeNode.menuID === node.menuID) {
|
||||
return true;
|
||||
}
|
||||
if (treeNode.children && isNodeInTree(node, treeNode.children)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 新增菜单
|
||||
function handleAdd() {
|
||||
isEdit.value = false;
|
||||
formData.parentID = undefined;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 新增子菜单
|
||||
function handleAddChild(row: SysMenu) {
|
||||
isEdit.value = false;
|
||||
formData.parentID = row.menuID;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 编辑菜单
|
||||
function handleEdit(row: SysMenu) {
|
||||
isEdit.value = true;
|
||||
Object.assign(formData, row);
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 删除菜单
|
||||
async function handleDelete(row: SysMenu) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除菜单 "${row.name}" 吗？`,
|
||||
'删除确认',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
);
|
||||
|
||||
await menuApi.deleteMenu(row.menuID!);
|
||||
ElMessage.success('删除成功');
|
||||
await loadMenuList();
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除菜单失败:', error);
|
||||
ElMessage.error('删除菜单失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return;
|
||||
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
submitting.value = true;
|
||||
|
||||
if (isEdit.value) {
|
||||
await menuApi.updateMenu(formData);
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
await menuApi.createMenu(formData);
|
||||
ElMessage.success('新增成功');
|
||||
}
|
||||
|
||||
dialogVisible.value = false;
|
||||
await loadMenuList();
|
||||
} catch (error) {
|
||||
if (error !== false) { // 表单验证失败时error为false
|
||||
console.error('提交失败:', error);
|
||||
ElMessage.error(isEdit.value ? '更新失败' : '新增失败');
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
function resetForm() {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
Object.assign(formData, {
|
||||
name: '',
|
||||
description: '',
|
||||
url: '',
|
||||
component: '',
|
||||
icon: '',
|
||||
type: 0,
|
||||
orderNum: 0,
|
||||
parentID: undefined
|
||||
});
|
||||
}
|
||||
|
||||
// 查看绑定权限
|
||||
async function handleBindPermission(row: SysMenu) {
|
||||
currentMenu.value = row;
|
||||
|
||||
try {
|
||||
// 获取所有权限
|
||||
let permission:SysPermission = {
|
||||
permissionID: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
description: undefined,
|
||||
};
|
||||
const permissionResult = await permissionApi.getPermissionList(permission);
|
||||
permissionList.value = permissionResult.dataList || [];
|
||||
|
||||
// 获取已绑定的权限
|
||||
const bindingResult = await menuApi.getMenuPermission(row.menuID!);
|
||||
bindList.value.permissions = bindingResult.dataList || [];
|
||||
|
||||
// 设置已选中的权限
|
||||
selectedPermissions.value = bindList.value.permissions.map(permission => permission.permissionID).filter((id): id is string => !!id);
|
||||
|
||||
console.log('已绑定的权限:', bindList.value.permissions);
|
||||
console.log('所有权限:', permissionList.value);
|
||||
bindPermissionDialogVisible.value = true;
|
||||
} catch (error) {
|
||||
console.error('获取权限绑定信息失败:', error);
|
||||
ElMessage.error('获取权限绑定信息失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 重置绑定列表
|
||||
function resetBindList() {
|
||||
bindList.value = {
|
||||
permissions: []
|
||||
};
|
||||
selectedPermissions.value = [];
|
||||
currentMenu.value = null;
|
||||
}
|
||||
|
||||
// 检查权限是否已选中
|
||||
function isPermissionSelected(permissionID: string | undefined): boolean {
|
||||
return permissionID ? selectedPermissions.value.includes(permissionID) : false;
|
||||
}
|
||||
|
||||
// 切换权限选择状态
|
||||
function togglePermissionSelection(permission: SysPermission) {
|
||||
if (!permission.permissionID) return;
|
||||
|
||||
const index = selectedPermissions.value.indexOf(permission.permissionID);
|
||||
if (index > -1) {
|
||||
selectedPermissions.value.splice(index, 1);
|
||||
} else {
|
||||
selectedPermissions.value.push(permission.permissionID);
|
||||
}
|
||||
}
|
||||
|
||||
// 保存权限绑定
|
||||
async function savePermissionBinding() {
|
||||
if (!currentMenu.value || !currentMenu.value.menuID) {
|
||||
ElMessage.error('菜单信息不完整');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
submitting.value = true;
|
||||
|
||||
// 获取当前已绑定的权限ID
|
||||
const currentBoundPermissions = (bindList.value.permissions || []).map(permission => permission.permissionID).filter((id): id is string => !!id);
|
||||
|
||||
// 找出需要绑定的权限（新增的）
|
||||
const permissionsToBind = selectedPermissions.value.filter(permissionID => !currentBoundPermissions.includes(permissionID));
|
||||
|
||||
// 找出需要解绑的权限（移除的）
|
||||
const permissionsToUnbind = currentBoundPermissions.filter(permissionID => !selectedPermissions.value.includes(permissionID));
|
||||
|
||||
// 构建需要绑定的权限对象数组
|
||||
if (permissionsToBind.length > 0) {
|
||||
const permissionsToBindObjects = permissionsToBind.map(permissionID => {
|
||||
const permission = permissionList.value.find(p => p.permissionID === permissionID);
|
||||
return permission || { permissionID: permissionID };
|
||||
});
|
||||
|
||||
const bindMenu = {
|
||||
...currentMenu.value,
|
||||
permissions: permissionsToBindObjects,
|
||||
menus: [{menuID: currentMenu.value.menuID}]
|
||||
};
|
||||
await permissionApi.bindMenu(bindMenu);
|
||||
}
|
||||
|
||||
// 构建需要解绑的权限对象数组
|
||||
if (permissionsToUnbind.length > 0) {
|
||||
const permissionsToUnbindObjects = permissionsToUnbind.map(permissionID => {
|
||||
const permission = permissionList.value.find(p => p.permissionID === permissionID);
|
||||
return permission || { permissionID: permissionID };
|
||||
});
|
||||
|
||||
const unbindMenu = {
|
||||
...currentMenu.value,
|
||||
permissions: permissionsToUnbindObjects,
|
||||
menus: [{menuID: currentMenu.value.menuID}]
|
||||
};
|
||||
await permissionApi.unbindMenu(unbindMenu);
|
||||
}
|
||||
|
||||
ElMessage.success('权限绑定保存成功');
|
||||
bindPermissionDialogVisible.value = false;
|
||||
|
||||
// 刷新菜单列表
|
||||
await loadMenuList();
|
||||
} catch (error) {
|
||||
console.error('保存权限绑定失败:', error);
|
||||
ElMessage.error('保存权限绑定失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时获取菜单列表
|
||||
onMounted(() => {
|
||||
loadMenuList();
|
||||
});
|
||||
|
||||
// 节点拖拽逻辑
|
||||
function allowDrop(draggingNode: any, dropNode: any) {
|
||||
// 禁止拖拽到自己或子节点
|
||||
return !isDescendant(draggingNode.data, dropNode.data);
|
||||
}
|
||||
|
||||
// 判断是否是后代节点
|
||||
function isDescendant(ancestor: SysMenu, node: SysMenu): boolean {
|
||||
if (ancestor.menuID === node.menuID) return true;
|
||||
if (node.children) {
|
||||
return node.children.some(child => isDescendant(ancestor, child));
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 处理节点拖拽
|
||||
async function handleNodeDrop(draggingNode: any, dropNode: any, dropType: string) {
|
||||
try {
|
||||
const dragData = draggingNode.data as SysMenu;
|
||||
const dropData = dropNode.data as SysMenu;
|
||||
|
||||
// 更新被拖拽节点的父ID
|
||||
if (dropType === 'inner') {
|
||||
dragData.parentID = dropData.menuID;
|
||||
} else {
|
||||
dragData.parentID = dropData.parentID;
|
||||
}
|
||||
|
||||
// 更新到后端
|
||||
await menuApi.updateMenu(dragData);
|
||||
ElMessage.success('菜单移动成功');
|
||||
|
||||
// 重新加载菜单列表以确保数据一致性
|
||||
await loadMenuList();
|
||||
} catch (error) {
|
||||
console.error('移动菜单失败:', error);
|
||||
ElMessage.error('移动菜单失败');
|
||||
// 重新加载菜单列表以恢复原始状态
|
||||
await loadMenuList();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.menu-manage {
|
||||
padding: 20px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
|
||||
.menu-tree {
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.node-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
|
||||
.node-icon {
|
||||
margin-right: 8px;
|
||||
color: #409EFF;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.node-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
margin: 0 20px;
|
||||
|
||||
.info-item {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
background: #f4f4f5;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.node-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
.el-button {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
|
||||
.node-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Element Plus Tree 组件样式覆盖
|
||||
:deep(.el-tree-node__content) {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__expand-icon) {
|
||||
padding: 6px;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node) {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__children) {
|
||||
padding-left: 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框样式优化
|
||||
:deep(.el-dialog) {
|
||||
.el-dialog__header {
|
||||
padding: 20px 20px 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 10px 20px 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式优化
|
||||
:deep(.el-form) {
|
||||
.el-form-item__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮样式优化
|
||||
:deep(.el-button) {
|
||||
&.is-link {
|
||||
padding: 0;
|
||||
margin-right: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 权限绑定容器样式
|
||||
.permission-binding-container {
|
||||
.menu-info {
|
||||
background: #f5f7fa;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #303133;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.binding-stats {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,721 @@
|
||||
<template>
|
||||
<div class="permission-manage">
|
||||
<div class="header">
|
||||
<h2>权限管理</h2>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增权限
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="permissionList"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
border
|
||||
stripe
|
||||
>
|
||||
<el-table-column prop="name" label="权限名称" min-width="150" />
|
||||
<el-table-column prop="code" label="权限编码" min-width="200" />
|
||||
<el-table-column prop="description" label="权限描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="creatorName" label="创建人" width="120" />
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" />
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleEdit(row)"
|
||||
link
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleBindMenu(row)"
|
||||
link
|
||||
>
|
||||
绑定菜单
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleBindRole(row)"
|
||||
link
|
||||
>
|
||||
绑定角色
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleDelete(row)"
|
||||
link
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑权限' : '新增权限'"
|
||||
width="500px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="权限名称" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
placeholder="请输入权限名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限编码" prop="code">
|
||||
<el-input
|
||||
v-model="formData.code"
|
||||
placeholder="请输入权限编码"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入权限描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
:loading="submitting"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 绑定菜单对话框 -->
|
||||
<el-dialog v-model="bindMenuDialogVisible" title="绑定菜单" width="800px" @close="resetBindList">
|
||||
<div class="menu-binding-container">
|
||||
<!-- 权限信息显示 -->
|
||||
<div class="permission-info" v-if="currentPermission">
|
||||
<h4>权限信息：{{ currentPermission.name }}</h4>
|
||||
<p>权限编码：{{ currentPermission.code }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 菜单绑定状态表格 -->
|
||||
<el-table :data="menuList" style="width: 100%" border stripe>
|
||||
<el-table-column width="80" label="绑定状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="isMenuSelected(row.menuID) ? 'success' : 'info'"
|
||||
size="small"
|
||||
>
|
||||
{{ isMenuSelected(row.menuID) ? '已绑定' : '未绑定' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="菜单名称" min-width="150" />
|
||||
<el-table-column prop="menuID" label="菜单ID" min-width="120" />
|
||||
<el-table-column prop="url" label="菜单路径" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="component" label="菜单组件" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
:type="isMenuSelected(row.menuID) ? 'danger' : 'primary'"
|
||||
size="small"
|
||||
@click="toggleMenuSelection(row)"
|
||||
>
|
||||
{{ isMenuSelected(row.menuID) ? '解绑' : '绑定' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="binding-stats">
|
||||
<el-alert
|
||||
:title="`已绑定 ${selectedMenus.length} 个菜单，未绑定 ${menuList.length - selectedMenus.length} 个菜单`"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="bindMenuDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveMenuBinding" :loading="submitting">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 绑定角色对话框 -->
|
||||
<el-dialog v-model="bindRoleDialogVisible" title="绑定角色" width="800px" @close="resetBindList">
|
||||
<div class="role-binding-container">
|
||||
<!-- 权限信息显示 -->
|
||||
<div class="permission-info" v-if="currentPermission">
|
||||
<h4>权限信息：{{ currentPermission.name }}</h4>
|
||||
<p>权限编码：{{ currentPermission.code }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 角色绑定状态表格 -->
|
||||
<el-table :data="roleList" style="width: 100%" border stripe>
|
||||
<el-table-column width="80" label="绑定状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="isRoleSelected(row.id) ? 'success' : 'info'"
|
||||
size="small"
|
||||
>
|
||||
{{ isRoleSelected(row.id) ? '已绑定' : '未绑定' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="角色名称" min-width="150" />
|
||||
<el-table-column prop="id" label="角色ID" min-width="120" />
|
||||
<el-table-column prop="description" label="角色描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
:type="isRoleSelected(row.id) ? 'danger' : 'primary'"
|
||||
size="small"
|
||||
@click="toggleRoleSelection(row)"
|
||||
>
|
||||
{{ isRoleSelected(row.id) ? '解绑' : '绑定' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="binding-stats">
|
||||
<el-alert
|
||||
:title="`已绑定 ${selectedRoles.length} 个角色，未绑定 ${roleList.length - selectedRoles.length} 个角色`"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="bindRoleDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveRoleBinding" :loading="submitting">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { permissionApi } from '@/apis/system/permission';
|
||||
import { roleApi } from '@/apis/system/role';
|
||||
import { menuApi } from '@/apis/system/menu';
|
||||
import { SysPermission, SysRole, SysMenu } from '@/types';
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
// 数据状态
|
||||
const permissionList = ref<SysPermission[]>([]);
|
||||
const loading = ref(false);
|
||||
const submitting = ref(false);
|
||||
const bindList = ref<SysPermission>({
|
||||
menus: [],
|
||||
roles: []
|
||||
});
|
||||
const roleList = ref<SysRole[]>([]);
|
||||
const menuList = ref<SysMenu[]>([]);
|
||||
const selectedMenus = ref<string[]>([]);
|
||||
const selectedRoles = ref<string[]>([]);
|
||||
const currentPermission = ref<SysPermission | null>(null);
|
||||
// 对话框状态
|
||||
const dialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
const bindMenuDialogVisible = ref(false);
|
||||
const bindRoleDialogVisible = ref(false);
|
||||
|
||||
const queryFilter = ref<SysPermission>({
|
||||
name: '',
|
||||
code: '',
|
||||
description: ''
|
||||
});
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive<SysPermission>({
|
||||
name: '',
|
||||
code: '',
|
||||
description: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const formRules: FormRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入权限名称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '权限名称长度在 2 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入权限编码', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[a-zA-Z][a-zA-Z0-9:_-]*$/,
|
||||
message: '权限编码只能包含字母、数字、冒号、下划线和横线，且必须以字母开头',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{ min: 2, max: 100, message: '权限编码长度在 2 到 100 个字符', trigger: 'blur' }
|
||||
],
|
||||
description: [
|
||||
{ max: 200, message: '权限描述不能超过 200 个字符', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 加载权限列表
|
||||
async function loadPermissionList() {
|
||||
try {
|
||||
loading.value = true;
|
||||
const result = await permissionApi.getPermissionList(queryFilter.value);
|
||||
permissionList.value = result.dataList || [];
|
||||
} catch (error) {
|
||||
console.error('加载权限列表失败:', error);
|
||||
ElMessage.error('加载权限列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 新增权限
|
||||
function handleAdd() {
|
||||
isEdit.value = false;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 编辑权限
|
||||
function handleEdit(row: SysPermission) {
|
||||
isEdit.value = true;
|
||||
Object.assign(formData, row);
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 查看绑定菜单
|
||||
async function handleBindMenu(row: SysPermission) {
|
||||
currentPermission.value = row;
|
||||
row.bindType = "menu";
|
||||
|
||||
try {
|
||||
// 获取已绑定的菜单
|
||||
const bindingResult = await permissionApi.getPermissionBindingList(row);
|
||||
bindList.value.menus = bindingResult.data?.menus || [];
|
||||
|
||||
// 获取所有菜单
|
||||
const menuResult = await menuApi.getAllMenuList();
|
||||
menuList.value = menuResult.dataList || [];
|
||||
|
||||
// 设置已选中的菜单
|
||||
selectedMenus.value = bindList.value.menus.map(menu => menu.menuID).filter((id): id is string => !!id);
|
||||
|
||||
console.log('已绑定的菜单:', bindList.value.menus);
|
||||
console.log('所有菜单:', menuList.value);
|
||||
bindMenuDialogVisible.value = true;
|
||||
} catch (error) {
|
||||
console.error('获取菜单绑定信息失败:', error);
|
||||
ElMessage.error('获取菜单绑定信息失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 查看绑定角色
|
||||
async function handleBindRole(row: SysPermission) {
|
||||
currentPermission.value = row;
|
||||
row.bindType = "role";
|
||||
|
||||
try {
|
||||
// 获取已绑定的角色
|
||||
const bindingResult = await permissionApi.getPermissionBindingList(row);
|
||||
bindList.value.roles = bindingResult.data?.roles || [];
|
||||
|
||||
// 获取所有角色
|
||||
const roleResult = await roleApi.getAllRoles();
|
||||
roleList.value = roleResult.dataList || [];
|
||||
|
||||
// 设置已选中的角色
|
||||
selectedRoles.value = bindList.value.roles.map(role => role.id).filter((id): id is string => !!id);
|
||||
|
||||
console.log('已绑定的角色:', bindList.value.roles);
|
||||
console.log('所有角色:', roleList.value);
|
||||
bindRoleDialogVisible.value = true;
|
||||
} catch (error) {
|
||||
console.error('获取角色绑定信息失败:', error);
|
||||
ElMessage.error('获取角色绑定信息失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 删除权限
|
||||
async function handleDelete(row: SysPermission) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除权限 "${row.name}" 吗？`,
|
||||
'删除确认',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
);
|
||||
|
||||
await permissionApi.deletePermission(row);
|
||||
ElMessage.success('删除成功');
|
||||
await loadPermissionList();
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除权限失败:', error);
|
||||
ElMessage.error('删除权限失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 重置绑定列表
|
||||
function resetBindList() {
|
||||
bindList.value = {
|
||||
menus: [],
|
||||
roles: []
|
||||
};
|
||||
selectedMenus.value = [];
|
||||
selectedRoles.value = [];
|
||||
currentPermission.value = null;
|
||||
}
|
||||
|
||||
// 检查菜单是否已选中
|
||||
function isMenuSelected(menuID: string | undefined): boolean {
|
||||
return menuID ? selectedMenus.value.includes(menuID) : false;
|
||||
}
|
||||
|
||||
// 切换菜单选择状态
|
||||
function toggleMenuSelection(menu: SysMenu) {
|
||||
if (!menu.menuID) return;
|
||||
|
||||
const index = selectedMenus.value.indexOf(menu.menuID);
|
||||
if (index > -1) {
|
||||
selectedMenus.value.splice(index, 1);
|
||||
} else {
|
||||
selectedMenus.value.push(menu.menuID);
|
||||
}
|
||||
}
|
||||
|
||||
// 保存菜单绑定
|
||||
async function saveMenuBinding() {
|
||||
if (!currentPermission.value || !currentPermission.value.permissionID) {
|
||||
ElMessage.error('权限信息不完整');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
submitting.value = true;
|
||||
|
||||
// 获取当前已绑定的菜单ID
|
||||
const currentBoundMenus = (bindList.value.menus || []).map(menu => menu.menuID).filter((id): id is string => !!id);
|
||||
|
||||
// 找出需要绑定的菜单（新增的）
|
||||
const menusToBind = selectedMenus.value.filter(menuID => !currentBoundMenus.includes(menuID));
|
||||
|
||||
// 找出需要解绑的菜单（移除的）
|
||||
const menusToUnbind = currentBoundMenus.filter(menuID => !selectedMenus.value.includes(menuID));
|
||||
|
||||
// 构建需要绑定的菜单对象数组
|
||||
if (menusToBind.length > 0) {
|
||||
const menusToBindObjects = menusToBind.map(menuID => {
|
||||
const menu = menuList.value.find(m => m.menuID === menuID);
|
||||
return menu || { menuID: menuID };
|
||||
});
|
||||
|
||||
const bindPermission = {
|
||||
...currentPermission.value,
|
||||
menus: menusToBindObjects,
|
||||
permissions: [{permissionID: currentPermission.value.permissionID}]
|
||||
};
|
||||
await permissionApi.bindMenu(bindPermission);
|
||||
}
|
||||
|
||||
// 构建需要解绑的菜单对象数组
|
||||
if (menusToUnbind.length > 0) {
|
||||
const menusToUnbindObjects = menusToUnbind.map(menuID => {
|
||||
const menu = menuList.value.find(m => m.menuID === menuID);
|
||||
return menu || { menuID: menuID };
|
||||
});
|
||||
|
||||
const unbindPermission = {
|
||||
...currentPermission.value,
|
||||
menus: menusToUnbindObjects,
|
||||
permissions: [{permissionID: currentPermission.value.permissionID}]
|
||||
};
|
||||
await permissionApi.unbindMenu(unbindPermission);
|
||||
}
|
||||
|
||||
ElMessage.success('菜单绑定保存成功');
|
||||
bindMenuDialogVisible.value = false;
|
||||
|
||||
// 刷新权限列表
|
||||
await loadPermissionList();
|
||||
} catch (error) {
|
||||
console.error('保存菜单绑定失败:', error);
|
||||
ElMessage.error('保存菜单绑定失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 检查角色是否已选中
|
||||
function isRoleSelected(roleID: string | undefined): boolean {
|
||||
return roleID ? selectedRoles.value.includes(roleID) : false;
|
||||
}
|
||||
|
||||
// 切换角色选择状态
|
||||
function toggleRoleSelection(role: SysRole) {
|
||||
if (!role.id) return;
|
||||
|
||||
const index = selectedRoles.value.indexOf(role.id);
|
||||
if (index > -1) {
|
||||
selectedRoles.value.splice(index, 1);
|
||||
} else {
|
||||
selectedRoles.value.push(role.id);
|
||||
}
|
||||
}
|
||||
|
||||
// 保存角色绑定
|
||||
async function saveRoleBinding() {
|
||||
if (!currentPermission.value || !currentPermission.value.permissionID) {
|
||||
ElMessage.error('权限信息不完整');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
submitting.value = true;
|
||||
|
||||
// 获取当前已绑定的角色ID
|
||||
const currentBoundRoles = (bindList.value.roles || []).map(role => role.id).filter((id): id is string => !!id);
|
||||
|
||||
// 找出需要绑定的角色（新增的）
|
||||
const rolesToBind = selectedRoles.value.filter(roleID => !currentBoundRoles.includes(roleID));
|
||||
|
||||
// 找出需要解绑的角色（移除的）
|
||||
const rolesToUnbind = currentBoundRoles.filter(roleID => !selectedRoles.value.includes(roleID));
|
||||
|
||||
// 构建需要绑定的角色对象数组
|
||||
if (rolesToBind.length > 0) {
|
||||
const rolesToBindObjects = rolesToBind.map(roleID => {
|
||||
const role = roleList.value.find(r => r.id === roleID);
|
||||
return role || { id: roleID };
|
||||
});
|
||||
|
||||
const bindPermission = {
|
||||
...currentPermission.value,
|
||||
roles: rolesToBindObjects,
|
||||
permissions: [{permissionID: currentPermission.value.permissionID}]
|
||||
};
|
||||
await permissionApi.bindRole(bindPermission);
|
||||
}
|
||||
|
||||
// 构建需要解绑的角色对象数组
|
||||
if (rolesToUnbind.length > 0) {
|
||||
const rolesToUnbindObjects = rolesToUnbind.map(roleID => {
|
||||
const role = roleList.value.find(r => r.id === roleID);
|
||||
return role || { id: roleID };
|
||||
});
|
||||
|
||||
const unbindPermission = {
|
||||
...currentPermission.value,
|
||||
roles: rolesToUnbindObjects,
|
||||
permissions: [{permissionID: currentPermission.value.permissionID}]
|
||||
};
|
||||
await permissionApi.unbindRole(unbindPermission);
|
||||
}
|
||||
|
||||
ElMessage.success('角色绑定保存成功');
|
||||
bindRoleDialogVisible.value = false;
|
||||
|
||||
// 刷新权限列表
|
||||
await loadPermissionList();
|
||||
} catch (error) {
|
||||
console.error('保存角色绑定失败:', error);
|
||||
ElMessage.error('保存角色绑定失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return;
|
||||
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
submitting.value = true;
|
||||
|
||||
if (isEdit.value) {
|
||||
await permissionApi.updatePermission(formData);
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
await permissionApi.addPermission(formData);
|
||||
ElMessage.success('新增成功');
|
||||
}
|
||||
|
||||
dialogVisible.value = false;
|
||||
await loadPermissionList();
|
||||
} catch (error) {
|
||||
if (error !== false) { // 表单验证失败时error为false
|
||||
console.error('提交失败:', error);
|
||||
ElMessage.error(isEdit.value ? '更新失败' : '新增失败');
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
function resetForm() {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
Object.assign(formData, {
|
||||
name: '',
|
||||
code: '',
|
||||
description: ''
|
||||
});
|
||||
}
|
||||
|
||||
// 页面加载时获取权限列表
|
||||
onMounted(() => {
|
||||
loadPermissionList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.permission-manage {
|
||||
padding: 20px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框样式优化
|
||||
:deep(.el-dialog) {
|
||||
.el-dialog__header {
|
||||
padding: 20px 20px 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 10px 20px 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式优化
|
||||
:deep(.el-form) {
|
||||
.el-form-item__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮样式优化
|
||||
:deep(.el-button) {
|
||||
&.is-link {
|
||||
padding: 0;
|
||||
margin-right: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-binding-container,
|
||||
.role-binding-container {
|
||||
.permission-info {
|
||||
background: #f5f7fa;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #303133;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.binding-stats {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
532
schoolNewsWeb/src/views/admin/manage/system/RoleManageView.vue
Normal file
532
schoolNewsWeb/src/views/admin/manage/system/RoleManageView.vue
Normal file
@@ -0,0 +1,532 @@
|
||||
<template>
|
||||
<div class="role-manage">
|
||||
<div class="header">
|
||||
<h2>角色管理</h2>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增角色
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="roleList"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
border
|
||||
stripe
|
||||
>
|
||||
<el-table-column prop="name" label="角色名称" min-width="200" />
|
||||
<el-table-column prop="roleID" label="角色ID" min-width="150" />
|
||||
<el-table-column prop="description" label="角色描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="creatorName" label="创建人" width="120" />
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" />
|
||||
<el-table-column label="操作" width="280" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleEdit(row)"
|
||||
link
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleBindPermission(row)"
|
||||
link
|
||||
>
|
||||
绑定权限
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleDelete(row)"
|
||||
link
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑角色' : '新增角色'"
|
||||
width="600px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入角色描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
:loading="submitting"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 绑定权限对话框 -->
|
||||
<el-dialog v-model="bindPermissionDialogVisible" title="绑定权限" width="800px" @close="resetBindList">
|
||||
<div class="permission-binding-container">
|
||||
<!-- 角色信息显示 -->
|
||||
<div class="role-info" v-if="currentRole">
|
||||
<h4>角色信息：{{ currentRole.name }}</h4>
|
||||
<p>角色ID：{{ currentRole.roleID }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 权限绑定状态表格 -->
|
||||
<el-table :data="permissionList" style="width: 100%" border stripe>
|
||||
<el-table-column width="80" label="绑定状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="isPermissionSelected(row.permissionID) ? 'success' : 'info'"
|
||||
size="small"
|
||||
>
|
||||
{{ isPermissionSelected(row.permissionID) ? '已绑定' : '未绑定' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="权限名称" min-width="150" />
|
||||
<el-table-column prop="permissionID" label="权限ID" min-width="120" />
|
||||
<el-table-column prop="code" label="权限编码" min-width="150" />
|
||||
<el-table-column prop="description" label="权限描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
:type="isPermissionSelected(row.permissionID) ? 'danger' : 'primary'"
|
||||
size="small"
|
||||
@click="togglePermissionSelection(row)"
|
||||
>
|
||||
{{ isPermissionSelected(row.permissionID) ? '解绑' : '绑定' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="binding-stats">
|
||||
<el-alert
|
||||
:title="`已绑定 ${selectedPermissions.length} 个权限，未绑定 ${permissionList.length - selectedPermissions.length} 个权限`"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="bindPermissionDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="savePermissionBinding" :loading="submitting">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { roleApi } from '@/apis/system/role';
|
||||
import { permissionApi } from '@/apis/system/permission';
|
||||
import { SysRole, SysPermission } from '@/types';
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
// 数据状态
|
||||
const roleList = ref<SysRole[]>([]);
|
||||
const loading = ref(false);
|
||||
const submitting = ref(false);
|
||||
|
||||
// 权限绑定相关数据
|
||||
const permissionList = ref<SysPermission[]>([]);
|
||||
const selectedPermissions = ref<string[]>([]);
|
||||
const currentRole = ref<SysRole | null>(null);
|
||||
const bindList = ref<{ permissions: SysPermission[] }>({
|
||||
permissions: []
|
||||
});
|
||||
|
||||
// 对话框状态
|
||||
const dialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
const bindPermissionDialogVisible = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive<SysRole>({
|
||||
name: '',
|
||||
description: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const formRules: FormRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入角色名称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '角色名称长度在 2 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
description: [
|
||||
{ max: 200, message: '角色描述不能超过 200 个字符', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 加载角色列表
|
||||
async function loadRoleList() {
|
||||
try {
|
||||
loading.value = true;
|
||||
const result = await roleApi.getAllRoles();
|
||||
roleList.value = result.dataList || [];
|
||||
} catch (error) {
|
||||
console.error('加载角色列表失败:', error);
|
||||
ElMessage.error('加载角色列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 新增角色
|
||||
function handleAdd() {
|
||||
isEdit.value = false;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 编辑角色
|
||||
function handleEdit(row: SysRole) {
|
||||
isEdit.value = true;
|
||||
Object.assign(formData, row);
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 删除角色
|
||||
async function handleDelete(row: SysRole) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除角色 "${row.name}" 吗？`,
|
||||
'删除确认',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
);
|
||||
|
||||
await roleApi.deleteRole(row);
|
||||
ElMessage.success('删除成功');
|
||||
await loadRoleList();
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除角色失败:', error);
|
||||
ElMessage.error('删除角色失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return;
|
||||
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
submitting.value = true;
|
||||
|
||||
if (isEdit.value) {
|
||||
await roleApi.updateRole(formData);
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
await roleApi.createRole(formData);
|
||||
ElMessage.success('新增成功');
|
||||
}
|
||||
|
||||
dialogVisible.value = false;
|
||||
await loadRoleList();
|
||||
} catch (error) {
|
||||
if (error !== false) { // 表单验证失败时error为false
|
||||
console.error('提交失败:', error);
|
||||
ElMessage.error(isEdit.value ? '更新失败' : '新增失败');
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
function resetForm() {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
Object.assign(formData, {
|
||||
name: '',
|
||||
description: ''
|
||||
});
|
||||
}
|
||||
|
||||
// 查看绑定权限
|
||||
async function handleBindPermission(row: SysRole) {
|
||||
currentRole.value = row;
|
||||
|
||||
try {
|
||||
// 获取所有权限
|
||||
let permission: SysPermission = {
|
||||
permissionID: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
description: undefined,
|
||||
};
|
||||
const permissionResult = await permissionApi.getPermissionList(permission);
|
||||
permissionList.value = permissionResult.dataList || [];
|
||||
|
||||
// 获取已绑定的权限
|
||||
const bindingResult = await roleApi.getRolePermission({
|
||||
roleID: row.roleID
|
||||
});
|
||||
console.log('已绑定的权限:', bindingResult);
|
||||
bindList.value.permissions = bindingResult.dataList || [];
|
||||
|
||||
// 设置已选中的权限
|
||||
selectedPermissions.value = bindList.value.permissions.map(permission => permission.permissionID).filter((id): id is string => !!id);
|
||||
|
||||
console.log('已绑定的权限:', bindList.value.permissions);
|
||||
console.log('所有权限:', permissionList.value);
|
||||
bindPermissionDialogVisible.value = true;
|
||||
} catch (error) {
|
||||
console.error('获取权限绑定信息失败:', error);
|
||||
ElMessage.error('获取权限绑定信息失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 重置绑定列表
|
||||
function resetBindList() {
|
||||
bindList.value = {
|
||||
permissions: []
|
||||
};
|
||||
selectedPermissions.value = [];
|
||||
currentRole.value = null;
|
||||
}
|
||||
|
||||
// 检查权限是否已选中
|
||||
function isPermissionSelected(permissionID: string | undefined): boolean {
|
||||
return permissionID ? selectedPermissions.value.includes(permissionID) : false;
|
||||
}
|
||||
|
||||
// 切换权限选择状态
|
||||
function togglePermissionSelection(permission: SysPermission) {
|
||||
if (!permission.permissionID) return;
|
||||
|
||||
const index = selectedPermissions.value.indexOf(permission.permissionID);
|
||||
if (index > -1) {
|
||||
selectedPermissions.value.splice(index, 1);
|
||||
} else {
|
||||
selectedPermissions.value.push(permission.permissionID);
|
||||
}
|
||||
}
|
||||
|
||||
// 保存权限绑定
|
||||
async function savePermissionBinding() {
|
||||
if (!currentRole.value || !currentRole.value.roleID) {
|
||||
ElMessage.error('角色信息不完整');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
submitting.value = true;
|
||||
|
||||
// 获取当前已绑定的权限ID
|
||||
const currentBoundPermissions = (bindList.value.permissions || []).map(permission => permission.permissionID).filter((id): id is string => !!id);
|
||||
|
||||
// 找出需要绑定的权限（新增的）
|
||||
const permissionsToBind = selectedPermissions.value.filter(permissionID => !currentBoundPermissions.includes(permissionID));
|
||||
|
||||
// 找出需要解绑的权限（移除的）
|
||||
const permissionsToUnbind = currentBoundPermissions.filter(permissionID => !selectedPermissions.value.includes(permissionID));
|
||||
|
||||
// 构建需要绑定的权限对象数组
|
||||
if (permissionsToBind.length > 0) {
|
||||
const permissionsToBindObjects = permissionsToBind.map(permissionID => {
|
||||
const permission = permissionList.value.find(p => p.permissionID === permissionID);
|
||||
return permission || { permissionID: permissionID };
|
||||
});
|
||||
|
||||
const bindRole = {
|
||||
...currentRole.value,
|
||||
permissions: permissionsToBindObjects,
|
||||
roles: [{ roleID: currentRole.value.roleID }]
|
||||
};
|
||||
await permissionApi.bindRole(bindRole);
|
||||
}
|
||||
|
||||
// 构建需要解绑的权限对象数组
|
||||
if (permissionsToUnbind.length > 0) {
|
||||
const permissionsToUnbindObjects = permissionsToUnbind.map(permissionID => {
|
||||
const permission = permissionList.value.find(p => p.permissionID === permissionID);
|
||||
return permission || { permissionID: permissionID };
|
||||
});
|
||||
|
||||
const unbindRole = {
|
||||
...currentRole.value,
|
||||
permissions: permissionsToUnbindObjects,
|
||||
roles: [{ roleID: currentRole.value.roleID }]
|
||||
};
|
||||
await permissionApi.unbindRole(unbindRole);
|
||||
}
|
||||
|
||||
ElMessage.success('权限绑定保存成功');
|
||||
bindPermissionDialogVisible.value = false;
|
||||
|
||||
// 刷新角色列表
|
||||
await loadRoleList();
|
||||
} catch (error) {
|
||||
console.error('保存权限绑定失败:', error);
|
||||
ElMessage.error('保存权限绑定失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时获取角色列表
|
||||
onMounted(() => {
|
||||
loadRoleList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.role-manage {
|
||||
padding: 20px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框样式优化
|
||||
:deep(.el-dialog) {
|
||||
.el-dialog__header {
|
||||
padding: 20px 20px 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 10px 20px 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式优化
|
||||
:deep(.el-form) {
|
||||
.el-form-item__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮样式优化
|
||||
:deep(.el-button) {
|
||||
&.is-link {
|
||||
padding: 0;
|
||||
margin-right: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 权限绑定容器样式
|
||||
.permission-binding-container {
|
||||
.role-info {
|
||||
background: #f5f7fa;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #303133;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.binding-stats {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
521
schoolNewsWeb/src/views/admin/manage/system/UserManageView.vue
Normal file
521
schoolNewsWeb/src/views/admin/manage/system/UserManageView.vue
Normal file
@@ -0,0 +1,521 @@
|
||||
<template>
|
||||
<div class="user-manage">
|
||||
<div class="header">
|
||||
<h2>用户管理</h2>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增用户
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="userList"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
border
|
||||
stripe
|
||||
row-key="userID"
|
||||
>
|
||||
<el-table-column prop="username" label="用户名" min-width="120" />
|
||||
<el-table-column prop="email" label="邮箱" min-width="180" />
|
||||
<el-table-column prop="phone" label="手机号" min-width="120" />
|
||||
<el-table-column prop="realName" label="真实姓名" min-width="100" />
|
||||
<el-table-column prop="nickname" label="昵称" min-width="100" />
|
||||
<el-table-column prop="status" label="状态" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 0 ? 'success' : 'danger'">
|
||||
{{ row.status === 0 ? '正常' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="creatorName" label="创建人" width="120" />
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleEdit(row)"
|
||||
link
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleBindDeptRole(row)"
|
||||
link
|
||||
>
|
||||
绑定部门角色
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleDelete(row)"
|
||||
link
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 新增/编辑用户对话框 -->
|
||||
<el-dialog
|
||||
v-model="userDialogVisible"
|
||||
:title="isEdit ? '编辑用户' : '新增用户'"
|
||||
width="600px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form
|
||||
ref="userFormRef"
|
||||
:model="currentUser"
|
||||
:rules="userFormRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="currentUser.username" placeholder="请输入用户名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password" v-if="!isEdit">
|
||||
<el-input
|
||||
v-model="currentUser.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="currentUser.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="currentUser.phone" placeholder="请输入手机号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="真实姓名" prop="realName">
|
||||
<el-input v-model="currentUser.realName" placeholder="请输入真实姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称" prop="nickname">
|
||||
<el-input v-model="currentUser.nickname" placeholder="请输入昵称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="currentUser.status" placeholder="请选择状态">
|
||||
<el-option label="正常" :value="0" />
|
||||
<el-option label="禁用" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="userDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveUser" :loading="submitting">
|
||||
{{ isEdit ? '更新' : '创建' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 绑定部门角色对话框 -->
|
||||
<el-dialog
|
||||
v-model="bindDeptRoleDialogVisible"
|
||||
title="绑定部门角色"
|
||||
width="800px"
|
||||
@close="resetBindForm"
|
||||
>
|
||||
<div class="bind-info">
|
||||
<el-alert
|
||||
:title="`用户：${currentUser.username} (${currentUser.realName})`"
|
||||
type="info"
|
||||
:closable="false"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-table :data="bindList" style="width: 100%" border stripe>
|
||||
<el-table-column width="80" label="绑定状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="isSelected(row) ? 'success' : 'info'"
|
||||
size="small"
|
||||
>
|
||||
{{ isSelected(row) ? '已绑定' : '未绑定' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deptName" label="部门" min-width="150" />
|
||||
<el-table-column prop="roleName" label="角色" min-width="150" />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
:type="isSelected(row) ? 'danger' : 'primary'"
|
||||
size="small"
|
||||
@click="toggleSelection(row)"
|
||||
>
|
||||
{{ isSelected(row) ? '解绑' : '绑定' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="bind-stats" style="margin-top: 20px">
|
||||
<el-alert
|
||||
:title="`已绑定 ${selectedBindings.length} 个部门角色，未绑定 ${bindList.length - selectedBindings.length} 个部门角色`"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="bindDeptRoleDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveBindings" :loading="submitting">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import { userApi } from '@/apis/system/user';
|
||||
import { deptApi } from '@/apis/system/dept';
|
||||
import { roleApi } from '@/apis/system/role';
|
||||
import type { SysUser, UserDeptRoleVO, UserVO, SysDeptRole} from '@/types';
|
||||
|
||||
// 扩展部门角色类型，包含绑定状态和显示信息
|
||||
interface DeptRoleBindItem extends SysDeptRole {
|
||||
deptName?: string;
|
||||
roleName?: string;
|
||||
isBound?: boolean;
|
||||
}
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false);
|
||||
const submitting = ref(false);
|
||||
const userList = ref<UserVO[]>([]);
|
||||
|
||||
// 对话框控制
|
||||
const userDialogVisible = ref(false);
|
||||
const bindDeptRoleDialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
|
||||
// 当前操作的用户
|
||||
const currentUser = ref<SysUser & { realName?: string; nickname?: string }>({});
|
||||
|
||||
// 绑定相关数据
|
||||
const bindList = ref<DeptRoleBindItem[]>([]);
|
||||
const selectedBindings = ref<string[]>([]); // 存储选中的绑定项的唯一标识
|
||||
|
||||
// 表单验证规则
|
||||
const userFormRules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 生成唯一标识
|
||||
function getBindingKey(item: DeptRoleBindItem): string {
|
||||
return `${item.deptID}_${item.roleID}`;
|
||||
}
|
||||
|
||||
// 检查是否已选中
|
||||
function isSelected(item: DeptRoleBindItem): boolean {
|
||||
return selectedBindings.value.includes(getBindingKey(item));
|
||||
}
|
||||
|
||||
// 切换选择状态
|
||||
function toggleSelection(item: DeptRoleBindItem) {
|
||||
const key = getBindingKey(item);
|
||||
const index = selectedBindings.value.indexOf(key);
|
||||
|
||||
if (index > -1) {
|
||||
selectedBindings.value.splice(index, 1);
|
||||
} else {
|
||||
selectedBindings.value.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载用户列表
|
||||
async function loadUserList() {
|
||||
try {
|
||||
loading.value = true;
|
||||
const result = await userApi.getUserList({id: ""});
|
||||
userList.value = result.dataList || [];
|
||||
} catch (error) {
|
||||
console.error('加载用户列表失败:', error);
|
||||
ElMessage.error('加载用户列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载部门和角色数据用于名称映射
|
||||
async function loadDeptAndRoleData() {
|
||||
try {
|
||||
const [deptResult, roleResult] = await Promise.all([
|
||||
deptApi.getAllDepts(),
|
||||
roleApi.getAllRoles()
|
||||
]);
|
||||
|
||||
const depts = deptResult.dataList || [];
|
||||
const roles = roleResult.dataList || [];
|
||||
|
||||
const deptMap = new Map(depts.map(d => [d.deptID, d.name || '未知部门']));
|
||||
const roleMap = new Map(roles.map(r => [r.roleID, r.name || '未知角色']));
|
||||
|
||||
return { deptMap, roleMap };
|
||||
} catch (error) {
|
||||
console.error('加载部门角色数据失败:', error);
|
||||
return { deptMap: new Map(), roleMap: new Map() };
|
||||
}
|
||||
}
|
||||
|
||||
// 加载部门角色绑定列表
|
||||
async function loadDeptRoleList(): Promise<DeptRoleBindItem[]> {
|
||||
try {
|
||||
const [deptRoleResult, { deptMap, roleMap }] = await Promise.all([
|
||||
deptApi.getDeptRoleList({id: ""}),
|
||||
loadDeptAndRoleData()
|
||||
]);
|
||||
|
||||
const deptRoles = deptRoleResult.dataList || [];
|
||||
|
||||
return deptRoles.map(item => ({
|
||||
...item,
|
||||
deptName: deptMap.get(item.deptID || '') || `部门${item.deptID}`,
|
||||
roleName: roleMap.get(item.roleID || '') || `角色${item.roleID}`,
|
||||
isBound: false // 初始状态为未绑定，需要根据实际绑定情况设置
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('加载部门角色列表失败:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 新增用户
|
||||
function handleAdd() {
|
||||
isEdit.value = false;
|
||||
currentUser.value = {};
|
||||
userDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 编辑用户
|
||||
function handleEdit(row: UserVO) {
|
||||
isEdit.value = true;
|
||||
// 将UserVO转换为SysUser
|
||||
currentUser.value = {
|
||||
id: row.id,
|
||||
username: row.username,
|
||||
email: row.email,
|
||||
phone: row.phone,
|
||||
wechatID: row.wechatID,
|
||||
status: row.status,
|
||||
createTime: row.createTime,
|
||||
updateTime: row.updateTime,
|
||||
deleteTime: row.deleteTime,
|
||||
deleted: row.deleted,
|
||||
realName: row.realName,
|
||||
nickname: row.nickname
|
||||
};
|
||||
userDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 删除用户
|
||||
async function handleDelete(row: UserVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除用户 "${row.username}" 吗？`,
|
||||
'确认删除',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
);
|
||||
|
||||
await userApi.deleteUser(row);
|
||||
ElMessage.success('删除成功');
|
||||
await loadUserList();
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除用户失败:', error);
|
||||
ElMessage.error('删除用户失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 保存用户
|
||||
async function saveUser() {
|
||||
try {
|
||||
submitting.value = true;
|
||||
|
||||
if (isEdit.value) {
|
||||
await userApi.updateUser(currentUser.value);
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
await userApi.createUser(currentUser.value);
|
||||
ElMessage.success('创建成功');
|
||||
}
|
||||
|
||||
userDialogVisible.value = false;
|
||||
await loadUserList();
|
||||
} catch (error) {
|
||||
console.error('保存用户失败:', error);
|
||||
ElMessage.error('保存用户失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定部门角色
|
||||
async function handleBindDeptRole(row: UserVO) {
|
||||
// 将UserVO转换为SysUser
|
||||
currentUser.value = {
|
||||
id: row.id,
|
||||
username: row.username,
|
||||
email: row.email,
|
||||
phone: row.phone,
|
||||
wechatID: row.wechatID,
|
||||
status: row.status,
|
||||
createTime: row.createTime,
|
||||
updateTime: row.updateTime,
|
||||
deleteTime: row.deleteTime,
|
||||
deleted: row.deleted
|
||||
};
|
||||
|
||||
try {
|
||||
// 加载全部部门和角色数据
|
||||
bindList.value = await loadDeptRoleList();
|
||||
|
||||
// 加载已绑定部门角色
|
||||
const deptRoleResult = await userApi.getUserDeptRole({userID: currentUser.value.id});
|
||||
const deptRoles = deptRoleResult.dataList || [];
|
||||
|
||||
// 初始化选中状态为已绑定的项
|
||||
selectedBindings.value = bindList.value
|
||||
.filter(item => deptRoles.some(deptRole =>
|
||||
deptRole.deptID === item.deptID && deptRole.roleID === item.roleID
|
||||
))
|
||||
.map(item => getBindingKey(item));
|
||||
|
||||
bindDeptRoleDialogVisible.value = true;
|
||||
} catch (error) {
|
||||
console.error('加载绑定数据失败:', error);
|
||||
ElMessage.error('加载绑定数据失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 保存绑定设置
|
||||
async function saveBindings() {
|
||||
if (!currentUser.value || !currentUser.value.id) {
|
||||
ElMessage.error('用户信息不完整');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
submitting.value = true;
|
||||
|
||||
// 获取当前已绑定的部门角色
|
||||
const currentBoundResult = await userApi.getUserDeptRole({userID: currentUser.value.id});
|
||||
const currentBoundItems = currentBoundResult.dataList || [];
|
||||
const currentBoundKeys = currentBoundItems.map(item => `${item.deptID}_${item.roleID}`);
|
||||
|
||||
// 找出需要绑定的项（新增的）
|
||||
const itemsToBind = bindList.value.filter(item => {
|
||||
const key = getBindingKey(item);
|
||||
return selectedBindings.value.includes(key) && !currentBoundKeys.includes(key);
|
||||
});
|
||||
|
||||
// 找出需要解绑的项（移除的）
|
||||
const itemsToUnbind = bindList.value.filter(item => {
|
||||
const key = getBindingKey(item);
|
||||
return !selectedBindings.value.includes(key) && currentBoundKeys.includes(key);
|
||||
});
|
||||
|
||||
// 执行绑定操作 - 一次性发送所有绑定项
|
||||
if (itemsToBind.length > 0) {
|
||||
const userDeptRoleVO: UserDeptRoleVO = {
|
||||
user: currentUser.value,
|
||||
users: [currentUser.value],
|
||||
userDeptRoles: itemsToBind.map(item => ({
|
||||
deptID: item.deptID,
|
||||
roleID: item.roleID
|
||||
}))
|
||||
};
|
||||
await userApi.bindUserDeptRole(userDeptRoleVO);
|
||||
}
|
||||
|
||||
// 执行解绑操作 - 一次性发送所有解绑项
|
||||
if (itemsToUnbind.length > 0) {
|
||||
const userDeptRoleVO: UserDeptRoleVO = {
|
||||
user: currentUser.value,
|
||||
users: [currentUser.value],
|
||||
userDeptRoles: itemsToUnbind.map(item => ({
|
||||
deptID: item.deptID,
|
||||
roleID: item.roleID
|
||||
}))
|
||||
};
|
||||
await userApi.unbindUserDeptRole(userDeptRoleVO);
|
||||
}
|
||||
|
||||
ElMessage.success('部门角色绑定保存成功');
|
||||
bindDeptRoleDialogVisible.value = false;
|
||||
|
||||
// 刷新用户列表
|
||||
await loadUserList();
|
||||
} catch (error) {
|
||||
console.error('保存部门角色绑定失败:', error);
|
||||
ElMessage.error('保存部门角色绑定失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
function resetForm() {
|
||||
currentUser.value = {};
|
||||
}
|
||||
|
||||
// 重置绑定表单
|
||||
function resetBindForm() {
|
||||
bindList.value = [];
|
||||
selectedBindings.value = [];
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
loadUserList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-manage {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bind-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bind-stats {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
105
schoolNewsWeb/src/views/admin/manage/system/index.ts
Normal file
105
schoolNewsWeb/src/views/admin/manage/system/index.ts
Normal file
@@ -0,0 +1,105 @@
|
||||
/**
|
||||
* @description 系统管理模块统一导出入口
|
||||
* @author yslg
|
||||
* @since 2025-10-07
|
||||
*/
|
||||
|
||||
// 部门管理
|
||||
export { default as DeptManageView } from './DeptManageView.vue';
|
||||
|
||||
// 菜单管理
|
||||
export { default as MenuManageView } from './MenuManageView.vue';
|
||||
|
||||
// 权限管理
|
||||
export { default as PermissionManageView } from './PermissionManageView.vue';
|
||||
|
||||
// 角色管理
|
||||
export { default as RoleManageView } from './RoleManageView.vue';
|
||||
|
||||
// 系统管理模块类型定义
|
||||
export interface SystemManageModule {
|
||||
/** 部门管理组件 */
|
||||
DeptManageView: any;
|
||||
/** 菜单管理组件 */
|
||||
MenuManageView: any;
|
||||
/** 权限管理组件 */
|
||||
PermissionManageView: any;
|
||||
/** 角色管理组件 */
|
||||
RoleManageView: any;
|
||||
}
|
||||
|
||||
// 系统管理路由配置
|
||||
export const systemManageRoutes = [
|
||||
{
|
||||
path: '/manage/system/dept',
|
||||
name: 'DeptManage',
|
||||
component: () => import('./DeptManageView.vue'),
|
||||
meta: {
|
||||
title: '部门管理',
|
||||
requiresAuth: true,
|
||||
permissions: ['system:dept:manage']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/manage/system/menu',
|
||||
name: 'MenuManage',
|
||||
component: () => import('./MenuManageView.vue'),
|
||||
meta: {
|
||||
title: '菜单管理',
|
||||
requiresAuth: true,
|
||||
permissions: ['system:menu:manage']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/manage/system/permission',
|
||||
name: 'PermissionManage',
|
||||
component: () => import('./PermissionManageView.vue'),
|
||||
meta: {
|
||||
title: '权限管理',
|
||||
requiresAuth: true,
|
||||
permissions: ['system:permission:manage']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/manage/system/role',
|
||||
name: 'RoleManage',
|
||||
component: () => import('./RoleManageView.vue'),
|
||||
meta: {
|
||||
title: '角色管理',
|
||||
requiresAuth: true,
|
||||
permissions: ['system:role:manage']
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// 系统管理菜单配置
|
||||
export const systemManageMenus = [
|
||||
{
|
||||
id: 'system-dept',
|
||||
title: '部门管理',
|
||||
icon: 'el-icon-office-building',
|
||||
path: '/manage/system/dept',
|
||||
permissions: ['system:dept:manage']
|
||||
},
|
||||
{
|
||||
id: 'system-menu',
|
||||
title: '菜单管理',
|
||||
icon: 'el-icon-menu',
|
||||
path: '/manage/system/menu',
|
||||
permissions: ['system:menu:manage']
|
||||
},
|
||||
{
|
||||
id: 'system-permission',
|
||||
title: '权限管理',
|
||||
icon: 'el-icon-key',
|
||||
path: '/manage/system/permission',
|
||||
permissions: ['system:permission:manage']
|
||||
},
|
||||
{
|
||||
id: 'system-role',
|
||||
title: '角色管理',
|
||||
icon: 'el-icon-user',
|
||||
path: '/manage/system/role',
|
||||
permissions: ['system:role:manage']
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user