提交数据库产品管理功能
15892072232
parent
8cf08c6fa0
commit
959a078972
|
|
@ -0,0 +1,5 @@
|
|||
@echo off
|
||||
echo 正在执行数据库表结构更新脚本...
|
||||
mysql -u root -p < sql/update_database_product_table.sql
|
||||
echo 脚本执行完成！
|
||||
pause
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
# 数据库表结构更新说明
|
||||
|
||||
## 手动执行步骤
|
||||
|
||||
1. 打开MySQL命令行或MySQL客户端工具
|
||||
2. 使用root用户登录MySQL（需要输入密码）
|
||||
```
|
||||
mysql -u root -p
|
||||
```
|
||||
3. 执行以下SQL脚本更新数据库表结构：
|
||||
```
|
||||
source c:/Users/Administrator/RuoYi-Vue/sql/update_database_product_table.sql
|
||||
```
|
||||
|
||||
## 或者直接执行SQL命令
|
||||
|
||||
登录MySQL后，依次执行以下SQL命令：
|
||||
|
||||
```sql
|
||||
-- 添加类型字段
|
||||
ALTER TABLE database_product ADD COLUMN type VARCHAR(255) DEFAULT NULL COMMENT '数据库类型（关系型,非关系型,单机,分布式）';
|
||||
|
||||
-- 添加描述字段
|
||||
ALTER TABLE database_product ADD COLUMN description TEXT DEFAULT NULL COMMENT '数据库描述';
|
||||
|
||||
-- 删除不需要的关系类型字段
|
||||
ALTER TABLE database_product DROP COLUMN relation_type;
|
||||
|
||||
-- 更新表注释
|
||||
ALTER TABLE database_product COMMENT = '数据库产品表';
|
||||
|
||||
-- 确保表存在
|
||||
CREATE TABLE IF NOT EXISTS database_product (
|
||||
product_id INT(11) NOT NULL AUTO_INCREMENT COMMENT '产品ID',
|
||||
database_name VARCHAR(100) DEFAULT NULL COMMENT '数据库名称',
|
||||
icon VARCHAR(255) DEFAULT NULL COMMENT '图标',
|
||||
type VARCHAR(255) DEFAULT NULL COMMENT '数据库类型（关系型,非关系型,单机,分布式）',
|
||||
description TEXT DEFAULT NULL COMMENT '数据库描述',
|
||||
create_by VARCHAR(64) DEFAULT '' COMMENT '创建者',
|
||||
create_time DATETIME DEFAULT NULL COMMENT '创建时间',
|
||||
update_by VARCHAR(64) DEFAULT '' COMMENT '更新者',
|
||||
update_time DATETIME DEFAULT NULL COMMENT '更新时间',
|
||||
PRIMARY KEY (product_id)
|
||||
) ENGINE=INNODB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='数据库产品表';
|
||||
```
|
||||
|
||||
## 完成后
|
||||
|
||||
执行完SQL脚本后，请重启后端服务，然后刷新前端页面，即可看到更新后的数据库产品管理页面。
|
||||
|
|
@ -35,7 +35,16 @@
|
|||
<img :src="scope.row.icon" alt="图标" style="width: 24px; height: 24px;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关系类型" prop="relationType" align="center" />
|
||||
<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>
|
||||
|
|
@ -59,10 +68,28 @@
|
|||
<el-input v-model="form.databaseName" placeholder="请输入数据库名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<el-input v-model="form.icon" placeholder="请输入图标URL" />
|
||||
<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="relationType">
|
||||
<el-input v-model="form.relationType" placeholder="请输入关系类型" />
|
||||
<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">
|
||||
|
|
@ -75,9 +102,13 @@
|
|||
|
||||
<script>
|
||||
import { listZhengyutian, getZhengyutian, addZhengyutian, updateZhengyutian, delZhengyutian, exportZhengyutian } from '@/api/database/zhengyutian'
|
||||
import Editor from '@/components/Editor'
|
||||
|
||||
export default {
|
||||
name: 'Zhengyutian',
|
||||
components: {
|
||||
Editor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
|
|
@ -96,6 +127,8 @@ export default {
|
|||
title: '',
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 上传地址
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + '/common/upload',
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
|
|
@ -107,7 +140,9 @@ export default {
|
|||
productId: undefined,
|
||||
databaseName: undefined,
|
||||
icon: undefined,
|
||||
relationType: undefined
|
||||
type: '',
|
||||
typeList: [],
|
||||
description: ''
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
|
|
@ -117,8 +152,8 @@ export default {
|
|||
icon: [
|
||||
{ required: true, message: '图标不能为空', trigger: 'blur' }
|
||||
],
|
||||
relationType: [
|
||||
{ required: true, message: '关系类型不能为空', trigger: 'blur' }
|
||||
typeList: [
|
||||
{ required: true, message: '请至少选择一个类型', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -168,14 +203,40 @@ export default {
|
|||
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 = '修改郑瑜甜'
|
||||
})
|
||||
},
|
||||
/** 图标上传成功处理 */
|
||||
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('修改成功')
|
||||
|
|
@ -203,7 +264,9 @@ export default {
|
|||
productId: undefined,
|
||||
databaseName: undefined,
|
||||
icon: undefined,
|
||||
relationType: undefined
|
||||
type: '',
|
||||
typeList: [],
|
||||
description: ''
|
||||
}
|
||||
this.resetForm('form')
|
||||
},
|
||||
|
|
@ -227,4 +290,35 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-uploader {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.avatar-uploader:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
-- 更新数据库产品表结构，添加新字段
|
||||
ALTER TABLE database_product
|
||||
ADD COLUMN `type` VARCHAR(100) NULL COMMENT '数据库类型' AFTER `icon`,
|
||||
ADD COLUMN `description` TEXT NULL COMMENT '数据库描述' AFTER `type`,
|
||||
-- 删除不需要的字段
|
||||
DROP COLUMN `relation_type`;
|
||||
|
||||
-- 更新表注释
|
||||
ALTER TABLE database_product COMMENT='数据库产品管理表';
|
||||
|
||||
-- 如果表不存在，创建表的SQL
|
||||
CREATE TABLE IF NOT EXISTS `database_product` (
|
||||
`product_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '产品ID',
|
||||
`database_name` varchar(100) NOT NULL COMMENT '数据库名称',
|
||||
`icon` varchar(200) DEFAULT NULL COMMENT '图标',
|
||||
`type` varchar(100) DEFAULT NULL COMMENT '数据库类型',
|
||||
`description` text DEFAULT NULL COMMENT '数据库描述',
|
||||
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
|
||||
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
|
||||
PRIMARY KEY (`product_id`)
|
||||
) ENGINE=InnoDB AUTO_INCREMENT=100 COMMENT='数据库产品管理表';
|
||||
Loading…
Reference in New Issue