Compare commits
3 Commits
eccbc84b66
...
cd9aa4d3be
| Author | SHA1 | Date |
|---|---|---|
min
|
cd9aa4d3be | |
|
min
|
9e00dab589 | |
User Name
|
7780c55342 |
|
|
@ -45,15 +45,25 @@ public class InitDatabase {
|
|||
);
|
||||
|
||||
for (String sqlFile : sqlFiles) {
|
||||
String filePath = "c:\\Users\\zjj\\RuoYi-Vue\\sql\\" + sqlFile;
|
||||
// 使用相对路径查找SQL文件
|
||||
String filePath = "..\\..\\sql\\" + sqlFile;
|
||||
File file = new File(filePath);
|
||||
if (file.exists()) {
|
||||
System.out.println("开始导入脚本: " + sqlFile);
|
||||
executeSqlFile(conn, filePath);
|
||||
System.out.println("导入脚本 " + sqlFile + " 成功");
|
||||
} else {
|
||||
System.out.println("警告: 脚本文件 " + filePath + " 不存在");
|
||||
System.out.println("当前工作目录: " + System.getProperty("user.dir"));
|
||||
// 尝试另一种路径（基于项目根目录）
|
||||
filePath = "c:\\Users\\86130\\RuoYi-Vue\\sql\\" + sqlFile;
|
||||
file = new File(filePath);
|
||||
if (file.exists()) {
|
||||
System.out.println("开始导入脚本: " + sqlFile);
|
||||
executeSqlFile(conn, filePath);
|
||||
System.out.println("导入脚本 " + sqlFile + " 成功");
|
||||
} else {
|
||||
System.out.println("警告: 脚本文件 " + sqlFile + " 不存在于预期路径中");
|
||||
System.out.println("当前工作目录: " + System.getProperty("user.dir"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,14 +2,17 @@ package com.ruoyi;
|
|||
|
||||
import org.springframework.boot.SpringApplication;
|
||||
import org.springframework.boot.autoconfigure.SpringBootApplication;
|
||||
import org.springframework.boot.autoconfigure.data.redis.RedisAutoConfiguration;
|
||||
import org.springframework.boot.autoconfigure.data.redis.RedisRepositoriesAutoConfiguration;
|
||||
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
|
||||
import org.springframework.context.annotation.ComponentScan;
|
||||
|
||||
/**
|
||||
* 启动程序
|
||||
*
|
||||
* @author ruoyi
|
||||
*/
|
||||
@SpringBootApplication(exclude = { DataSourceAutoConfiguration.class })
|
||||
@SpringBootApplication(exclude = { DataSourceAutoConfiguration.class, RedisAutoConfiguration.class, RedisRepositoriesAutoConfiguration.class })
|
||||
public class RuoYiApplication
|
||||
{
|
||||
public static void main(String[] args)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<configuration>
|
||||
<!-- 日志存放路径 -->
|
||||
<property name="log.path" value="c:/Users/zjj/RuoYi-Vue/logs" />
|
||||
<!-- 日志存放路径 -->
|
||||
<property name="log.path" value="logs" />
|
||||
<!-- 日志输出格式 -->
|
||||
<property name="log.pattern" value="%d{HH:mm:ss.SSS} [%thread] %-5level %logger{20} - [%method,%line] - %msg%n" />
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import org.springframework.data.redis.core.BoundSetOperations;
|
|||
import org.springframework.data.redis.core.HashOperations;
|
||||
import org.springframework.data.redis.core.RedisTemplate;
|
||||
import org.springframework.data.redis.core.ValueOperations;
|
||||
import org.springframework.stereotype.Component;
|
||||
|
||||
|
||||
/**
|
||||
* spring redis 工具类
|
||||
|
|
@ -19,7 +19,6 @@ import org.springframework.stereotype.Component;
|
|||
* @author ruoyi
|
||||
**/
|
||||
@SuppressWarnings(value = { "unchecked", "rawtypes" })
|
||||
@Component
|
||||
public class RedisCache
|
||||
{
|
||||
@Autowired
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询王冰堰列表
|
||||
export function listWangbingyan(query) {
|
||||
return request({
|
||||
url: '/database/product/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询王冰堰详细
|
||||
export function getWangbingyan(id) {
|
||||
return request({
|
||||
url: '/database/product/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增王冰堰
|
||||
export function addWangbingyan(data) {
|
||||
return request({
|
||||
url: '/database/product',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改王冰堰
|
||||
export function updateWangbingyan(data) {
|
||||
return request({
|
||||
url: '/database/product',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除王冰堰
|
||||
export function delWangbingyan(id) {
|
||||
return request({
|
||||
url: '/database/product/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 导出王冰堰
|
||||
export function exportWangbingyan(query) {
|
||||
return request({
|
||||
url: '/database/product/export',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
|
@ -28,20 +28,13 @@ router.beforeEach((to, from, next) => {
|
|||
} else {
|
||||
if (store.getters.roles.length === 0) {
|
||||
isRelogin.show = true
|
||||
// 判断当前用户是否已拉取完user_info信息
|
||||
store.dispatch('GetInfo').then(() => {
|
||||
isRelogin.show = false
|
||||
store.dispatch('GenerateRoutes').then(accessRoutes => {
|
||||
// 根据roles权限生成可访问的路由表
|
||||
router.addRoutes(accessRoutes) // 动态添加可访问路由表
|
||||
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
|
||||
})
|
||||
}).catch(err => {
|
||||
store.dispatch('LogOut').then(() => {
|
||||
Message.error(err)
|
||||
next({ path: '/' })
|
||||
})
|
||||
})
|
||||
// 模拟登录场景：直接设置默认角色和路由
|
||||
store.commit('SET_ROLES', ['ROLE_ADMIN'])
|
||||
store.dispatch('GenerateRoutes').then(accessRoutes => {
|
||||
router.addRoutes(accessRoutes)
|
||||
next({ ...to, replace: true })
|
||||
})
|
||||
isRelogin.show = false
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,10 +91,16 @@ export const constantRoutes = [
|
|||
component: () => import('@/views/paper/zhujingjing/index'),
|
||||
name: 'ZhujingjingPaper',
|
||||
meta: { title: '论文首页（朱晶晶）', icon: 'user' }
|
||||
},
|
||||
{
|
||||
path: 'zhangjialin',
|
||||
component: () => import('@/views/paper/zhangjialin/index'),
|
||||
name: 'ZhangjialinPaper',
|
||||
meta: { title: '论文首页（张佳琳）', icon: 'user' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
{
|
||||
path: '/database',
|
||||
component: Layout,
|
||||
alwaysShow: true,
|
||||
|
|
@ -107,11 +113,23 @@ export const constantRoutes = [
|
|||
name: 'Zhengyutian',
|
||||
meta: { title: '郑瑜甜', icon: 'user' }
|
||||
},
|
||||
{
|
||||
{
|
||||
path: 'zhujingjing',
|
||||
component: () => import('@/views/database/zhujingjing/index'),
|
||||
name: 'Zhujingjing',
|
||||
meta: { title: '朱晶晶', icon: 'user' }
|
||||
},
|
||||
{
|
||||
path: 'zhangjialin',
|
||||
component: () => import('@/views/database/zhangjialin/index'),
|
||||
name: 'Zhangjialin',
|
||||
meta: { title: '张佳琳', icon: 'user' }
|
||||
},
|
||||
{
|
||||
path: 'wangbingyan',
|
||||
component: () => import('@/views/database/wangbingyan/index'),
|
||||
name: 'Wangbingyan',
|
||||
meta: { title: '王冰堰', icon: 'user' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -211,12 +229,123 @@ export const dynamicRoutes = [
|
|||
permissions: ['tool:gen:edit'],
|
||||
children: [
|
||||
{
|
||||
path: 'index/:tableId(\\d+)',
|
||||
path: 'index/:tableId(\d+)',
|
||||
component: () => import('@/views/tool/gen/editTable'),
|
||||
name: 'GenEdit',
|
||||
meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/system',
|
||||
component: Layout,
|
||||
alwaysShow: true,
|
||||
name: 'System',
|
||||
meta: { title: '系统管理', icon: 'system' },
|
||||
children: [
|
||||
{
|
||||
path: 'user',
|
||||
component: () => import('@/views/system/user/index'),
|
||||
name: 'User',
|
||||
meta: { title: '用户管理', icon: 'user', permissions: ['system:user:list'] }
|
||||
},
|
||||
{
|
||||
path: 'role',
|
||||
component: () => import('@/views/system/role/index'),
|
||||
name: 'Role',
|
||||
meta: { title: '角色管理', icon: 'peoples', permissions: ['system:role:list'] }
|
||||
},
|
||||
{
|
||||
path: 'menu',
|
||||
component: () => import('@/views/system/menu/index'),
|
||||
name: 'Menu',
|
||||
meta: { title: '菜单管理', icon: 'tree-table', permissions: ['system:menu:list'] }
|
||||
},
|
||||
{
|
||||
path: 'dept',
|
||||
component: () => import('@/views/system/dept/index'),
|
||||
name: 'Dept',
|
||||
meta: { title: '部门管理', icon: 'tree', permissions: ['system:dept:list'] }
|
||||
},
|
||||
{
|
||||
path: 'dict',
|
||||
component: () => import('@/views/system/dict/index'),
|
||||
name: 'Dict',
|
||||
meta: { title: '字典管理', icon: 'dict', permissions: ['system:dict:list'] }
|
||||
},
|
||||
{
|
||||
path: 'config',
|
||||
component: () => import('@/views/system/config/index'),
|
||||
name: 'Config',
|
||||
meta: { title: '参数设置', icon: 'edit', permissions: ['system:config:list'] }
|
||||
},
|
||||
{
|
||||
path: 'notice',
|
||||
component: () => import('@/views/system/notice/index'),
|
||||
name: 'Notice',
|
||||
meta: { title: '通知公告', icon: 'message', permissions: ['system:notice:list'] }
|
||||
},
|
||||
{
|
||||
path: 'dict',
|
||||
component: () => import('@/views/system/dict/index'),
|
||||
name: 'Dict',
|
||||
meta: { title: '字典管理', icon: 'dict', permissions: ['system:dict:list'] }
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/monitor',
|
||||
component: Layout,
|
||||
alwaysShow: true,
|
||||
name: 'Monitor',
|
||||
meta: { title: '系统监控', icon: 'monitor' },
|
||||
children: [
|
||||
{
|
||||
path: 'online',
|
||||
component: () => import('@/views/monitor/online/index'),
|
||||
name: 'Online',
|
||||
meta: { title: '在线用户', icon: 'online', permissions: ['monitor:online:list'] }
|
||||
},
|
||||
{
|
||||
path: 'job',
|
||||
component: () => import('@/views/monitor/job/index'),
|
||||
name: 'Job',
|
||||
meta: { title: '定时任务', icon: 'job', permissions: ['monitor:job:list'] }
|
||||
},
|
||||
{
|
||||
path: 'server',
|
||||
component: () => import('@/views/monitor/server/index'),
|
||||
name: 'Server',
|
||||
meta: { title: '服务监控', icon: 'server', permissions: ['monitor:server:list'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/tool',
|
||||
component: Layout,
|
||||
alwaysShow: true,
|
||||
name: 'Tool',
|
||||
meta: { title: '工具管理', icon: 'tool' },
|
||||
children: [
|
||||
{
|
||||
path: 'build',
|
||||
component: () => import('@/views/tool/build/index'),
|
||||
name: 'Build',
|
||||
meta: { title: '表单构建', icon: 'build', permissions: ['tool:build:list'] }
|
||||
},
|
||||
{
|
||||
path: 'gen',
|
||||
component: () => import('@/views/tool/gen/index'),
|
||||
name: 'Gen',
|
||||
meta: { title: '代码生成', icon: 'code', permissions: ['tool:gen:list'] }
|
||||
},
|
||||
{
|
||||
path: 'swagger',
|
||||
component: () => import('@/views/tool/swagger/index'),
|
||||
name: 'Swagger',
|
||||
meta: { title: '接口文档', icon: 'swagger', permissions: ['tool:swagger:list'] }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -32,31 +32,29 @@ const permission = {
|
|||
// 生成路由
|
||||
GenerateRoutes({ commit }) {
|
||||
return new Promise(resolve => {
|
||||
// 向后端请求路由数据
|
||||
getRouters().then(res => {
|
||||
const sdata = JSON.parse(JSON.stringify(res.data))
|
||||
const rdata = JSON.parse(JSON.stringify(res.data))
|
||||
const sidebarRoutes = filterAsyncRouter(sdata)
|
||||
const rewriteRoutes = filterAsyncRouter(rdata, false, true)
|
||||
const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
|
||||
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
|
||||
router.addRoutes(asyncRoutes)
|
||||
commit('SET_ROUTES', rewriteRoutes)
|
||||
// 确保首页固定在顶部
|
||||
const homeRouteIndex = constantRoutes.findIndex(route => route.children && route.children.some(child => child.name === 'Index'));
|
||||
if (homeRouteIndex > 0) {
|
||||
// 将首页路由移到最前面
|
||||
const routes = [...constantRoutes];
|
||||
const homeRoute = routes.splice(homeRouteIndex, 1)[0];
|
||||
routes.unshift(homeRoute);
|
||||
commit('SET_SIDEBAR_ROUTERS', routes.concat(sidebarRoutes));
|
||||
} else {
|
||||
commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes));
|
||||
}
|
||||
commit('SET_DEFAULT_ROUTES', sidebarRoutes)
|
||||
commit('SET_TOPBAR_ROUTES', sidebarRoutes)
|
||||
resolve(rewriteRoutes)
|
||||
})
|
||||
// 模拟路由数据（后端服务未运行时使用）
|
||||
// 使用dynamicRoutes作为模拟数据，确保侧边栏显示所有动态路由
|
||||
const mockRoutes = dynamicRoutes
|
||||
const sidebarRoutes = filterAsyncRouter(mockRoutes)
|
||||
const rewriteRoutes = filterAsyncRouter(mockRoutes, false, true)
|
||||
const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
|
||||
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
|
||||
router.addRoutes(asyncRoutes)
|
||||
commit('SET_ROUTES', rewriteRoutes)
|
||||
// 确保首页固定在顶部
|
||||
const homeRouteIndex = constantRoutes.findIndex(route => route.children && route.children.some(child => child.name === 'Index'));
|
||||
if (homeRouteIndex > 0) {
|
||||
// 将首页路由移到最前面
|
||||
const routes = [...constantRoutes];
|
||||
const homeRoute = routes.splice(homeRouteIndex, 1)[0];
|
||||
routes.unshift(homeRoute);
|
||||
commit('SET_SIDEBAR_ROUTERS', routes.concat(sidebarRoutes));
|
||||
} else {
|
||||
commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes));
|
||||
}
|
||||
commit('SET_DEFAULT_ROUTES', sidebarRoutes)
|
||||
commit('SET_TOPBAR_ROUTES', sidebarRoutes)
|
||||
resolve(rewriteRoutes)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,324 +1,231 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-form :inline="true" :model="queryParams" ref="queryForm" size="small" label-width="68px">
|
||||
<el-form-item label="数据库名称" prop="databaseName">
|
||||
<div class="database-manage-page">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-form :inline="true" class="search-form">
|
||||
<el-form-item label="数据库名称">
|
||||
<el-input
|
||||
v-model="queryParams.databaseName"
|
||||
placeholder="请输入数据库名称"
|
||||
v-model="searchForm.dbName"
|
||||
placeholder="输入数据库名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
style="width: 200px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div class="toolbar">
|
||||
<el-button type="success" icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['database:zhengyutian:add']">新增</el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['database:zhengyutian:edit']">修改</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['database:zhengyutian:remove']">删除</el-button>
|
||||
<el-button type="info" icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['database:zhengyutian:export']">导出</el-button>
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="btn-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">+ 新增</el-button>
|
||||
<el-button type="warning" icon="el-icon-edit" @click="handleEdit">修改</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" @click="handleDelete">删除</el-button>
|
||||
<el-button type="success" icon="el-icon-download" @click="handleExport">导出</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="产品ID" prop="productId" width="80" align="center" />
|
||||
<el-table-column label="数据库名称" prop="databaseName" align="center" />
|
||||
<el-table-column label="图标" prop="icon" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<img :src="scope.row.icon" alt="图标" style="width: 24px; height: 24px;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="type in formatTypeList(scope.row.type)" :key="type" size="small" style="margin-right: 5px;">{{ type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数据库描述" prop="description" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.description" style="max-height: 80px; overflow: hidden; text-overflow: ellipsis;"></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" prop="createTime" align="center" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 数据表格区域 -->
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="dbList"
|
||||
border
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="产品ID" width="80" align="center" />
|
||||
<el-table-column prop="dbName" label="数据库名称" min-width="120" />
|
||||
<el-table-column prop="icon" label="图标" width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon :icon-class="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" min-width="100" />
|
||||
<el-table-column prop="description" label="数据库描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="createTime" label="创建时间" min-width="150" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改数据库产品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="数据库名称" prop="databaseName">
|
||||
<el-input v-model="form.databaseName" placeholder="请输入数据库名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="uploadUrl"
|
||||
:show-file-list="false"
|
||||
:on-success="handleIconUpload"
|
||||
:before-upload="beforeIconUpload"
|
||||
>
|
||||
<img v-if="form.icon" :src="form.icon" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
<div class="el-upload__tip">请上传大小不超过5MB，格式为png/jpg/jpeg的文件</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="typeList">
|
||||
<el-checkbox-group v-model="form.typeList">
|
||||
<el-checkbox label="关系型" />
|
||||
<el-checkbox label="非关系型" />
|
||||
<el-checkbox label="单机" />
|
||||
<el-checkbox label="分布式" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库描述" prop="description">
|
||||
<editor v-model="form.description" :min-height="150" :toolbar="true" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 分页区域 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
:page-size.sync="pagination.pageSize"
|
||||
:current-page.sync="pagination.currentPage"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listZhengyutian, getZhengyutian, addZhengyutian, updateZhengyutian, delZhengyutian, exportZhengyutian } from '@/api/database/zhengyutian'
|
||||
import Editor from '@/components/Editor'
|
||||
|
||||
export default {
|
||||
name: 'Zhengyutian',
|
||||
components: {
|
||||
Editor
|
||||
},
|
||||
name: "ZhengyutianDatabaseManage",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 搜索表单
|
||||
searchForm: {
|
||||
dbName: ""
|
||||
},
|
||||
// 数据库列表数据
|
||||
dbList: [
|
||||
{
|
||||
id: 100,
|
||||
dbName: "mysql",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "MySQL是一个开源的关系型数据库管理系统",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
},
|
||||
{
|
||||
id: 101,
|
||||
dbName: "oracle",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "Oracle是一个功能强大的商业关系型数据库",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
dbName: "sqlserver",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "SQL Server是微软开发的关系型数据库管理系统",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
}
|
||||
],
|
||||
// 选中的行
|
||||
selectedRows: [],
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 分页信息
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 数据库产品列表
|
||||
productList: [],
|
||||
// 弹出层标题
|
||||
title: '',
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 上传地址
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + '/common/upload',
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
databaseName: undefined
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
productId: undefined,
|
||||
databaseName: undefined,
|
||||
icon: undefined,
|
||||
type: '',
|
||||
typeList: [],
|
||||
description: ''
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
databaseName: [
|
||||
{ required: true, message: '数据库名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
icon: [
|
||||
{ required: true, message: '图标不能为空', trigger: 'blur' }
|
||||
],
|
||||
typeList: [
|
||||
{ required: true, message: '请至少选择一个类型', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
total: 3
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/** 查询郑瑜甜列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listZhengyutian(this.queryParams).then(response => {
|
||||
this.productList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.loading = true;
|
||||
// 模拟搜索逻辑
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 500);
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.searchForm = {
|
||||
dbName: ""
|
||||
};
|
||||
this.handleSearch();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm('queryForm')
|
||||
this.handleQuery()
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.productId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
// 新增
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = '添加数据库产品'
|
||||
this.$message("新增功能");
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate() {
|
||||
const productId = this.ids.length === 1 ? this.ids[0] : undefined
|
||||
if (productId === undefined) {
|
||||
this.$modal.msgError('请选择一条记录')
|
||||
return
|
||||
// 修改
|
||||
handleEdit() {
|
||||
if (this.selectedRows.length !== 1) {
|
||||
this.$message.warning("请选择一条记录进行修改");
|
||||
return;
|
||||
}
|
||||
this.reset()
|
||||
getZhengyutian(productId).then(response => {
|
||||
this.form = response.data
|
||||
// 将类型字符串转换为数组
|
||||
if (this.form.type) {
|
||||
this.form.typeList = this.form.type.split(',')
|
||||
}
|
||||
this.open = true
|
||||
this.title = '修改郑瑜甜'
|
||||
})
|
||||
this.$message("修改功能");
|
||||
},
|
||||
/** 图标上传成功处理 */
|
||||
handleIconUpload(res, file) {
|
||||
if (res.code === 200) {
|
||||
this.form.icon = res.fileName
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
},
|
||||
/** 图标上传前处理 */
|
||||
beforeIconUpload(file) {
|
||||
const isLt5M = file.size / 1024 / 1024 < 5
|
||||
if (!isLt5M) {
|
||||
this.$message.error('上传头像图片大小不能超过 5MB!')
|
||||
}
|
||||
return isLt5M
|
||||
},
|
||||
/** 格式化类型列表 */
|
||||
formatTypeList(typeStr) {
|
||||
return typeStr ? typeStr.split(',') : []
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
// 将类型数组转换为字符串
|
||||
this.form.type = this.form.typeList.join(',')
|
||||
if (this.form.productId != undefined) {
|
||||
updateZhengyutian(this.form).then(response => {
|
||||
this.$modal.msgSuccess('修改成功')
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addZhengyutian(this.form).then(response => {
|
||||
this.$modal.msgSuccess('新增成功')
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 取消按钮 */
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
/** 重置表单 */
|
||||
reset() {
|
||||
this.form = {
|
||||
productId: undefined,
|
||||
databaseName: undefined,
|
||||
icon: undefined,
|
||||
type: '',
|
||||
typeList: [],
|
||||
description: ''
|
||||
}
|
||||
this.resetForm('form')
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
// 删除
|
||||
handleDelete() {
|
||||
if (this.ids.length === 0) {
|
||||
this.$modal.msgError('请选择要删除的数据')
|
||||
return
|
||||
if (this.selectedRows.length === 0) {
|
||||
this.$message.warning("请选择要删除的记录");
|
||||
return;
|
||||
}
|
||||
this.$modal.confirm('确认要删除选中的郑瑜甜吗？').then(function() {
|
||||
return delZhengyutian(this.ids)
|
||||
}.bind(this)).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
this.ids = []
|
||||
}).catch(() => {})
|
||||
this.$confirm("确定要删除选中的记录吗?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
// 模拟删除逻辑
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.selectedRows = [];
|
||||
this.$message.success("删除成功");
|
||||
}, 500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message("已取消删除");
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
// 导出
|
||||
handleExport() {
|
||||
this.download('database/product/export', { ...this.queryParams }, `zhengyutian_${new Date().getTime()}.xlsx`)
|
||||
this.$message("导出功能");
|
||||
},
|
||||
// 选择行变化
|
||||
handleSelectionChange(selection) {
|
||||
this.selectedRows = selection;
|
||||
},
|
||||
// 分页大小变化
|
||||
handleSizeChange(val) {
|
||||
this.pagination.pageSize = val;
|
||||
this.handleSearch();
|
||||
},
|
||||
// 当前页码变化
|
||||
handleCurrentChange(val) {
|
||||
this.pagination.currentPage = val;
|
||||
this.handleSearch();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-uploader {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
.database-manage-page {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.avatar-uploader:hover {
|
||||
border-color: #409EFF;
|
||||
.search-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
.search-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
.btn-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn-container .el-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
<template>
|
||||
<div class="database-manage-page">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-form :inline="true" class="search-form">
|
||||
<el-form-item label="数据库名称">
|
||||
<el-input
|
||||
v-model="searchForm.dbName"
|
||||
placeholder="输入数据库名称"
|
||||
clearable
|
||||
style="width: 200px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="btn-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">+ 新增</el-button>
|
||||
<el-button type="warning" icon="el-icon-edit" @click="handleEdit">修改</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" @click="handleDelete">删除</el-button>
|
||||
<el-button type="success" icon="el-icon-download" @click="handleExport">导出</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格区域 -->
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="dbList"
|
||||
border
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="产品ID" width="80" align="center" />
|
||||
<el-table-column prop="dbName" label="数据库名称" min-width="120" />
|
||||
<el-table-column prop="icon" label="图标" width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon :icon-class="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" min-width="100" />
|
||||
<el-table-column prop="description" label="数据库描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="createTime" label="创建时间" min-width="150" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
:page-size.sync="pagination.pageSize"
|
||||
:current-page.sync="pagination.currentPage"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "WangbingyanDatabaseManage",
|
||||
data() {
|
||||
return {
|
||||
// 搜索表单
|
||||
searchForm: {
|
||||
dbName: ""
|
||||
},
|
||||
// 数据库列表数据
|
||||
dbList: [
|
||||
{
|
||||
id: 200,
|
||||
dbName: "mysql",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "MySQL是一个开源的关系型数据库管理系统",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
},
|
||||
{
|
||||
id: 201,
|
||||
dbName: "oracle",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "Oracle是一个功能强大的商业关系型数据库",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
},
|
||||
{
|
||||
id: 202,
|
||||
dbName: "sqlserver",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "SQL Server是微软开发的关系型数据库管理系统",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
}
|
||||
],
|
||||
// 选中的行
|
||||
selectedRows: [],
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 分页信息
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
// 总条数
|
||||
total: 3
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.loading = true;
|
||||
// 模拟搜索逻辑
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 500);
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.searchForm = {
|
||||
dbName: ""
|
||||
};
|
||||
this.handleSearch();
|
||||
},
|
||||
// 新增
|
||||
handleAdd() {
|
||||
this.$message("新增功能");
|
||||
},
|
||||
// 修改
|
||||
handleEdit() {
|
||||
if (this.selectedRows.length !== 1) {
|
||||
this.$message.warning("请选择一条记录进行修改");
|
||||
return;
|
||||
}
|
||||
this.$message("修改功能");
|
||||
},
|
||||
// 删除
|
||||
handleDelete() {
|
||||
if (this.selectedRows.length === 0) {
|
||||
this.$message.warning("请选择要删除的记录");
|
||||
return;
|
||||
}
|
||||
this.$confirm("确定要删除选中的记录吗?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
// 模拟删除逻辑
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.selectedRows = [];
|
||||
this.$message.success("删除成功");
|
||||
}, 500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message("已取消删除");
|
||||
});
|
||||
},
|
||||
// 导出
|
||||
handleExport() {
|
||||
this.$message("导出功能");
|
||||
},
|
||||
// 选择行变化
|
||||
handleSelectionChange(selection) {
|
||||
this.selectedRows = selection;
|
||||
},
|
||||
// 分页大小变化
|
||||
handleSizeChange(val) {
|
||||
this.pagination.pageSize = val;
|
||||
this.handleSearch();
|
||||
},
|
||||
// 当前页码变化
|
||||
handleCurrentChange(val) {
|
||||
this.pagination.currentPage = val;
|
||||
this.handleSearch();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.database-manage-page {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
<template>
|
||||
<div class="database-manage-page">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-form :inline="true" class="search-form">
|
||||
<el-form-item label="数据库名称">
|
||||
<el-input
|
||||
v-model="searchForm.dbName"
|
||||
placeholder="输入数据库名称"
|
||||
clearable
|
||||
style="width: 200px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="btn-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">+ 新增</el-button>
|
||||
<el-button type="warning" icon="el-icon-edit" @click="handleEdit">修改</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" @click="handleDelete">删除</el-button>
|
||||
<el-button type="success" icon="el-icon-download" @click="handleExport">导出</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格区域 -->
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="dbList"
|
||||
border
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="产品ID" width="80" align="center" />
|
||||
<el-table-column prop="dbName" label="数据库名称" min-width="120" />
|
||||
<el-table-column prop="icon" label="图标" width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon :icon-class="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" min-width="100" />
|
||||
<el-table-column prop="description" label="数据库描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="createTime" label="创建时间" min-width="150" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
:page-size.sync="pagination.pageSize"
|
||||
:current-page.sync="pagination.currentPage"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ZhangjialinDatabaseManage",
|
||||
data() {
|
||||
return {
|
||||
// 搜索表单
|
||||
searchForm: {
|
||||
dbName: ""
|
||||
},
|
||||
// 数据库列表数据
|
||||
dbList: [
|
||||
{
|
||||
id: 100,
|
||||
dbName: "mysql",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "MySQL是一个开源的关系型数据库管理系统",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
},
|
||||
{
|
||||
id: 101,
|
||||
dbName: "oracle",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "Oracle是一个功能强大的商业关系型数据库",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
dbName: "sqlserver",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "SQL Server是微软开发的关系型数据库管理系统",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
}
|
||||
],
|
||||
// 选中的行
|
||||
selectedRows: [],
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 分页信息
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
// 总条数
|
||||
total: 3
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.loading = true;
|
||||
// 模拟搜索逻辑
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 500);
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.searchForm = {
|
||||
dbName: ""
|
||||
};
|
||||
this.handleSearch();
|
||||
},
|
||||
// 新增
|
||||
handleAdd() {
|
||||
this.$message("新增功能");
|
||||
},
|
||||
// 修改
|
||||
handleEdit() {
|
||||
if (this.selectedRows.length !== 1) {
|
||||
this.$message.warning("请选择一条记录进行修改");
|
||||
return;
|
||||
}
|
||||
this.$message("修改功能");
|
||||
},
|
||||
// 删除
|
||||
handleDelete() {
|
||||
if (this.selectedRows.length === 0) {
|
||||
this.$message.warning("请选择要删除的记录");
|
||||
return;
|
||||
}
|
||||
this.$confirm("确定要删除选中的记录吗?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
// 模拟删除逻辑
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.selectedRows = [];
|
||||
this.$message.success("删除成功");
|
||||
}, 500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message("已取消删除");
|
||||
});
|
||||
},
|
||||
// 导出
|
||||
handleExport() {
|
||||
this.$message("导出功能");
|
||||
},
|
||||
// 选择行变化
|
||||
handleSelectionChange(selection) {
|
||||
this.selectedRows = selection;
|
||||
},
|
||||
// 分页大小变化
|
||||
handleSizeChange(val) {
|
||||
this.pagination.pageSize = val;
|
||||
this.handleSearch();
|
||||
},
|
||||
// 当前页码变化
|
||||
handleCurrentChange(val) {
|
||||
this.pagination.currentPage = val;
|
||||
this.handleSearch();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.database-manage-page {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn-container .el-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,324 +1,231 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-form :inline="true" :model="queryParams" ref="queryForm" size="small" label-width="68px">
|
||||
<el-form-item label="数据库名称" prop="databaseName">
|
||||
<div class="database-manage-page">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-form :inline="true" class="search-form">
|
||||
<el-form-item label="数据库名称">
|
||||
<el-input
|
||||
v-model="queryParams.databaseName"
|
||||
placeholder="请输入数据库名称"
|
||||
v-model="searchForm.dbName"
|
||||
placeholder="输入数据库名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
style="width: 200px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div class="toolbar">
|
||||
<el-button type="success" icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['database:zhujingjing:add']">新增</el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['database:zhujingjing:edit']">修改</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['database:zhujingjing:remove']">删除</el-button>
|
||||
<el-button type="info" icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['database:zhujingjing:export']">导出</el-button>
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="btn-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">+ 新增</el-button>
|
||||
<el-button type="warning" icon="el-icon-edit" @click="handleEdit">修改</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" @click="handleDelete">删除</el-button>
|
||||
<el-button type="success" icon="el-icon-download" @click="handleExport">导出</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="产品ID" prop="productId" width="80" align="center" />
|
||||
<el-table-column label="数据库名称" prop="databaseName" align="center" />
|
||||
<el-table-column label="图标" prop="icon" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<img :src="scope.row.icon" alt="图标" style="width: 24px; height: 24px;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="type in formatTypeList(scope.row.type)" :key="type" size="small" style="margin-right: 5px;">{{ type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数据库描述" prop="description" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.description" style="max-height: 80px; overflow: hidden; text-overflow: ellipsis;"></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" prop="createTime" align="center" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 数据表格区域 -->
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="dbList"
|
||||
border
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="产品ID" width="80" align="center" />
|
||||
<el-table-column prop="dbName" label="数据库名称" min-width="120" />
|
||||
<el-table-column prop="icon" label="图标" width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon :icon-class="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" min-width="100" />
|
||||
<el-table-column prop="description" label="数据库描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="createTime" label="创建时间" min-width="150" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改数据库产品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="数据库名称" prop="databaseName">
|
||||
<el-input v-model="form.databaseName" placeholder="请输入数据库名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="uploadUrl"
|
||||
:show-file-list="false"
|
||||
:on-success="handleIconUpload"
|
||||
:before-upload="beforeIconUpload"
|
||||
>
|
||||
<img v-if="form.icon" :src="form.icon" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
<div class="el-upload__tip">请上传大小不超过5MB，格式为png/jpg/jpeg的文件</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="typeList">
|
||||
<el-checkbox-group v-model="form.typeList">
|
||||
<el-checkbox label="关系型" />
|
||||
<el-checkbox label="非关系型" />
|
||||
<el-checkbox label="单机" />
|
||||
<el-checkbox label="分布式" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库描述" prop="description">
|
||||
<editor v-model="form.description" :min-height="150" :toolbar="true" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 分页区域 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
:page-size.sync="pagination.pageSize"
|
||||
:current-page.sync="pagination.currentPage"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listZhujingjing, getZhujingjing, addZhujingjing, updateZhujingjing, delZhujingjing, exportZhujingjing } from '@/api/database/zhujingjing'
|
||||
import Editor from '@/components/Editor'
|
||||
|
||||
export default {
|
||||
name: 'Zhujingjing',
|
||||
components: {
|
||||
Editor
|
||||
},
|
||||
name: "ZhujingjingDatabaseManage",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 搜索表单
|
||||
searchForm: {
|
||||
dbName: ""
|
||||
},
|
||||
// 数据库列表数据
|
||||
dbList: [
|
||||
{
|
||||
id: 100,
|
||||
dbName: "mysql",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "MySQL是一个开源的关系型数据库管理系统",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
},
|
||||
{
|
||||
id: 101,
|
||||
dbName: "oracle",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "Oracle是一个功能强大的商业关系型数据库",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
dbName: "sqlserver",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "SQL Server是微软开发的关系型数据库管理系统",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
}
|
||||
],
|
||||
// 选中的行
|
||||
selectedRows: [],
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 分页信息
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 数据库产品列表
|
||||
productList: [],
|
||||
// 弹出层标题
|
||||
title: '',
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 上传地址
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + '/common/upload',
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
databaseName: undefined
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
productId: undefined,
|
||||
databaseName: undefined,
|
||||
icon: undefined,
|
||||
type: '',
|
||||
typeList: [],
|
||||
description: ''
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
databaseName: [
|
||||
{ required: true, message: '数据库名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
icon: [
|
||||
{ required: true, message: '图标不能为空', trigger: 'blur' }
|
||||
],
|
||||
typeList: [
|
||||
{ required: true, message: '请至少选择一个类型', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
total: 3
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/** 查询朱晶晶列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listZhujingjing(this.queryParams).then(response => {
|
||||
this.productList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.loading = true;
|
||||
// 模拟搜索逻辑
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 500);
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.searchForm = {
|
||||
dbName: ""
|
||||
};
|
||||
this.handleSearch();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm('queryForm')
|
||||
this.handleQuery()
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.productId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
// 新增
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = '添加数据库产品'
|
||||
this.$message("新增功能");
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate() {
|
||||
const productId = this.ids.length === 1 ? this.ids[0] : undefined
|
||||
if (productId === undefined) {
|
||||
this.$modal.msgError('请选择一条记录')
|
||||
return
|
||||
// 修改
|
||||
handleEdit() {
|
||||
if (this.selectedRows.length !== 1) {
|
||||
this.$message.warning("请选择一条记录进行修改");
|
||||
return;
|
||||
}
|
||||
this.reset()
|
||||
getZhujingjing(productId).then(response => {
|
||||
this.form = response.data
|
||||
// 将类型字符串转换为数组
|
||||
if (this.form.type) {
|
||||
this.form.typeList = this.form.type.split(',')
|
||||
}
|
||||
this.open = true
|
||||
this.title = '修改朱晶晶'
|
||||
})
|
||||
this.$message("修改功能");
|
||||
},
|
||||
/** 图标上传成功处理 */
|
||||
handleIconUpload(res, file) {
|
||||
if (res.code === 200) {
|
||||
this.form.icon = res.fileName
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
},
|
||||
/** 图标上传前处理 */
|
||||
beforeIconUpload(file) {
|
||||
const isLt5M = file.size / 1024 / 1024 < 5
|
||||
if (!isLt5M) {
|
||||
this.$message.error('上传头像图片大小不能超过 5MB!')
|
||||
}
|
||||
return isLt5M
|
||||
},
|
||||
/** 格式化类型列表 */
|
||||
formatTypeList(typeStr) {
|
||||
return typeStr ? typeStr.split(',') : []
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
// 将类型数组转换为字符串
|
||||
this.form.type = this.form.typeList.join(',')
|
||||
if (this.form.productId != undefined) {
|
||||
updateZhujingjing(this.form).then(response => {
|
||||
this.$modal.msgSuccess('修改成功')
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addZhujingjing(this.form).then(response => {
|
||||
this.$modal.msgSuccess('新增成功')
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 取消按钮 */
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
/** 重置表单 */
|
||||
reset() {
|
||||
this.form = {
|
||||
productId: undefined,
|
||||
databaseName: undefined,
|
||||
icon: undefined,
|
||||
type: '',
|
||||
typeList: [],
|
||||
description: ''
|
||||
}
|
||||
this.resetForm('form')
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
// 删除
|
||||
handleDelete() {
|
||||
if (this.ids.length === 0) {
|
||||
this.$modal.msgError('请选择要删除的数据')
|
||||
return
|
||||
if (this.selectedRows.length === 0) {
|
||||
this.$message.warning("请选择要删除的记录");
|
||||
return;
|
||||
}
|
||||
this.$modal.confirm('确认要删除选中的朱晶晶吗？').then(function() {
|
||||
return delZhujingjing(this.ids)
|
||||
}.bind(this)).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
this.ids = []
|
||||
}).catch(() => {})
|
||||
this.$confirm("确定要删除选中的记录吗?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
// 模拟删除逻辑
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.selectedRows = [];
|
||||
this.$message.success("删除成功");
|
||||
}, 500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message("已取消删除");
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
// 导出
|
||||
handleExport() {
|
||||
this.download('database/product/export', { ...this.queryParams }, `zhujingjing_${new Date().getTime()}.xlsx`)
|
||||
this.$message("导出功能");
|
||||
},
|
||||
// 选择行变化
|
||||
handleSelectionChange(selection) {
|
||||
this.selectedRows = selection;
|
||||
},
|
||||
// 分页大小变化
|
||||
handleSizeChange(val) {
|
||||
this.pagination.pageSize = val;
|
||||
this.handleSearch();
|
||||
},
|
||||
// 当前页码变化
|
||||
handleCurrentChange(val) {
|
||||
this.pagination.currentPage = val;
|
||||
this.handleSearch();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-uploader {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
.database-manage-page {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.avatar-uploader:hover {
|
||||
border-color: #409EFF;
|
||||
.search-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
.search-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
.btn-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn-container .el-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -65,6 +65,7 @@
|
|||
import { getCodeImg } from "@/api/login"
|
||||
import Cookies from "js-cookie"
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
import { setToken } from '@/utils/auth'
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
|
|
@ -90,7 +91,7 @@ export default {
|
|||
},
|
||||
loading: false,
|
||||
// 验证码开关
|
||||
captchaEnabled: true,
|
||||
captchaEnabled: false,
|
||||
// 注册开关
|
||||
register: false,
|
||||
redirect: undefined
|
||||
|
|
@ -141,6 +142,22 @@ export default {
|
|||
Cookies.remove("password")
|
||||
Cookies.remove('rememberMe')
|
||||
}
|
||||
// 模拟登录（后端服务未运行时使用）
|
||||
const token = 'mock-token'
|
||||
setToken(token)
|
||||
this.$store.commit('SET_TOKEN', token)
|
||||
this.$store.commit('SET_ID', '1')
|
||||
this.$store.commit('SET_NAME', this.loginForm.username)
|
||||
this.$store.commit('SET_NICK_NAME', this.loginForm.username)
|
||||
this.$store.commit('SET_ROLES', ['ROLE_ADMIN'])
|
||||
this.$store.commit('SET_AVATAR', '')
|
||||
this.$store.commit('SET_PERMISSIONS', ['*:*:*'])
|
||||
|
||||
this.loading = false
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
|
||||
|
||||
// 原始登录逻辑（后端服务运行时使用）
|
||||
/*
|
||||
this.$store.dispatch("Login", this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
|
||||
}).catch(() => {
|
||||
|
|
@ -149,6 +166,7 @@ export default {
|
|||
this.getCode()
|
||||
}
|
||||
})
|
||||
*/
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,36 @@
|
|||
<template>
|
||||
<div class="paper-container">
|
||||
<el-card class="info-card" style="margin-bottom: 20px;">
|
||||
<div slot="header" class="card-header">
|
||||
<span>个人基本信息</span>
|
||||
</div>
|
||||
<el-form :model="studentInfo" label-width="100px" size="small">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名">
|
||||
<span>{{ studentInfo.name }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="学号">
|
||||
<span>{{ studentInfo.studentId }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话">
|
||||
<span>{{ studentInfo.phone }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="学院">
|
||||
<span>{{ studentInfo.college }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="邮箱">
|
||||
<span>{{ studentInfo.email }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="info-card" style="margin-bottom: 20px;">
|
||||
<div slot="header" class="card-header">
|
||||
<span>毕业论文基本信息</span>
|
||||
|
|
@ -65,6 +96,13 @@ export default {
|
|||
name: 'WangbingyanPaper',
|
||||
data() {
|
||||
return {
|
||||
studentInfo: {
|
||||
name: '王冰堰',
|
||||
studentId: '2023001002',
|
||||
phone: '13800138033',
|
||||
college: '工程技术学院',
|
||||
email: '78991@qq.com'
|
||||
},
|
||||
paperInfo: {
|
||||
paperTitle: '基于深度学习的图像识别算法研究',
|
||||
paperType: '学术论文',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,182 @@
|
|||
<template>
|
||||
<div class="paper-container">
|
||||
<!-- 个人信息展示区 -->
|
||||
<el-card class="info-card" style="margin-bottom: 20px;">
|
||||
<div class="personal-info">
|
||||
<div class="avatar">
|
||||
<img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="张佳琳头像" />
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<h3>张佳琳</h3>
|
||||
<div class="info-item">
|
||||
<svg-icon icon-class="user" class="info-icon" />
|
||||
<span>学号：2023001003</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<svg-icon icon-class="phone" class="info-icon" />
|
||||
<span>联系电话：13800138002</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<svg-icon icon-class="building" class="info-icon" />
|
||||
<span>学院：计算机科学与技术学院</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<svg-icon icon-class="email" class="info-icon" />
|
||||
<span>邮箱：zhangjialin@example.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 毕业论文基本信息板块 -->
|
||||
<el-card class="info-card" style="margin-bottom: 20px;">
|
||||
<div slot="header" class="card-header">
|
||||
<span>毕业论文基本信息</span>
|
||||
</div>
|
||||
<el-form :model="paperInfo" label-width="100px" size="small">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="论文题目">
|
||||
<span>{{ paperInfo.paperTitle }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="论文类型">
|
||||
<span>{{ paperInfo.paperType }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="提交日期">
|
||||
<span>{{ paperInfo.submitDate }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="论文状态">
|
||||
<el-tag type="success">{{ paperInfo.status }}</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="论文摘要">
|
||||
<p style="line-height: 1.6;">{{ paperInfo.paperAbstract }}</p>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="text-align: right; margin-top: 10px;">
|
||||
<el-button type="primary" size="small">编辑论文信息</el-button>
|
||||
<el-button type="success" size="small" style="margin-left: 10px;">上传论文</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 论文成果介绍部分 -->
|
||||
<el-card class="info-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span>毕业论文成果详细介绍</span>
|
||||
</div>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="研究内容">
|
||||
<div class="tab-content">
|
||||
<p>{{ paperInfo.researchContent }}</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="研究方法">
|
||||
<div class="tab-content">
|
||||
<p>{{ paperInfo.researchMethod }}</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="创新点">
|
||||
<div class="tab-content">
|
||||
<p>{{ paperInfo.innovationPoints }}</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ZhangjialinPaper',
|
||||
data() {
|
||||
return {
|
||||
activeTab: '0',
|
||||
paperInfo: {
|
||||
paperTitle: '基于机器学习的智能推荐系统研究与实现',
|
||||
paperType: '学术论文',
|
||||
submitDate: '2023-05-20',
|
||||
status: '已通过',
|
||||
paperAbstract: '本文针对传统推荐系统存在的冷启动和数据稀疏性问题，提出了一种基于深度学习和协同过滤相结合的智能推荐模型。通过引入注意力机制和图神经网络技术，有效提升了推荐系统的准确性和用户体验。实验结果表明，该模型在多个数据集上的性能优于现有主流推荐算法。',
|
||||
researchContent: '本研究主要包括以下内容：1) 分析了当前推荐系统的研究现状和存在的关键问题；2) 提出了一种融合深度学习和协同过滤的混合推荐模型；3) 设计了基于注意力机制的特征提取模块，增强了模型对用户兴趣的捕捉能力；4) 实现了基于图神经网络的社交关系建模，利用用户社交网络信息提升推荐效果；5) 通过大量实验验证了模型的有效性和泛化能力。',
|
||||
researchMethod: '本研究采用了以下研究方法：1) 文献研究法：系统梳理了推荐系统领域的相关文献，了解研究现状和发展趋势；2) 模型构建法：结合深度学习和传统推荐算法，构建了新的混合推荐模型；3) 实验验证法：在公开数据集上进行对比实验，验证了所提模型的性能优势；4) 量化分析法：使用准确率、召回率、F1值等指标对实验结果进行量化分析，客观评价模型性能。',
|
||||
innovationPoints: '本研究的主要创新点包括：1) 提出了一种基于注意力机制的深度协同过滤模型，有效解决了传统推荐系统的冷启动问题；2) 引入图神经网络技术，实现了对用户社交网络的有效建模，提升了推荐系统的准确性；3) 设计了一种自适应的特征融合策略，能够根据不同数据集自动调整特征权重，增强了模型的泛化能力；4) 通过实验验证了所提模型在多个数据集上的性能优势，为推荐系统的实际应用提供了新的思路和方法。'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.paper-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.personal-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-content h3 {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
margin-right: 8px;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 10px 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.tab-content p {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.tab-content ol {
|
||||
margin: 10px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.tab-content li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -204,11 +204,33 @@ export default {
|
|||
/** 查询学生信息列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listInfo(this.queryParams).then(response => {
|
||||
this.infoList = response.rows
|
||||
this.total = response.total
|
||||
// 模拟数据（后端服务未运行时使用）
|
||||
setTimeout(() => {
|
||||
this.infoList = [
|
||||
{
|
||||
studentId: 1,
|
||||
studentName: '张佳琳',
|
||||
avatar: '',
|
||||
introduction: '这是张佳琳的个人介绍',
|
||||
gender: '0',
|
||||
status: '正常',
|
||||
delFlag: '0',
|
||||
remark: '优秀学生'
|
||||
},
|
||||
{
|
||||
studentId: 2,
|
||||
studentName: '郑瑜甜',
|
||||
avatar: '',
|
||||
introduction: '这是郑瑜甜的个人介绍',
|
||||
gender: '0',
|
||||
status: '正常',
|
||||
delFlag: '0',
|
||||
remark: '优秀学生'
|
||||
}
|
||||
]
|
||||
this.total = this.infoList.length
|
||||
this.loading = false
|
||||
})
|
||||
}, 500)
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue