新增王冰堰模块
min
parent
7780c55342
commit
9e00dab589
|
|
@ -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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -124,6 +124,12 @@ export const constantRoutes = [
|
||||||
component: () => import('@/views/database/zhangjialin/index'),
|
component: () => import('@/views/database/zhangjialin/index'),
|
||||||
name: 'Zhangjialin',
|
name: 'Zhangjialin',
|
||||||
meta: { title: '张佳琳', icon: 'user' }
|
meta: { title: '张佳琳', icon: 'user' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'wangbingyan',
|
||||||
|
component: () => import('@/views/database/wangbingyan/index'),
|
||||||
|
name: 'Wangbingyan',
|
||||||
|
meta: { title: '王冰堰', icon: 'user' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue